Static Websites
With Less, getting static websites to your global audience is easier than ever. Just add your site content to the less/statics/
directory and deploy!
─ less
└─ statics
└─ demo-website
└─ developer-documentation-website
Less will create a unique URL for each of your websites.
Create your static website directory
Less can deploy several static websites in the same project. Just add your static site contents to the /less/statics/
folder and deploy.
mkdir -p less/statics/demo-website
Create your site content
- HTML
- CSS
- Javascript
touch less/statics/demo-website/index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
<script src="script.js"></script>
</body>
</html>
touch less/statics/demo-website/styles.css
body {
font-family: Arial, sans-serif;
text-align: center;
}
touch less/statics/demo-website/script.js
// Log a message to the console when the page is loaded
window.onload = function() {
console.log("Hello World!");
};
You can easily migrate your React app or any other static site by simply adding the site content to the /less/statics directory. Here's an example of building a React app for Less:
BUILD_PATH='less/statics/demo-website' react-scripts build
Deploy your static website
In order to deploy your static content, execute less-cli deploy --static
with your application name.
- npx
- npm
- yarn
npx @chuva.io/less-cli deploy --static my-less-project
npm i -g @chuva.io/less-cli
less-cli deploy --static my-less-project
yarn global add @chuva.io/less-cli
less-cli deploy --static my-less-project
Once the deployment is complete you will be able to find your website URL under Resources in the output:
[less-cli] Deployment complete ✅
[less-cli] Resources
[less-cli] - Websites URLs
[less-cli] - http://[PROJECT_NAME]-[WEBSITE_NAME]-143286079.s3-website-eu-west-1.amazonaws.com
[less-cli] 🇨🇻
Custom Domain
Less also allows you to configure your DNS settings in order to use a custom domain with your static websites. Use the following command to get new NS records for your custom domain:
npx @chuva.io/less-cli domains --project-name PROJECT_NAME --static-name STATIC_NAME --custom-domain CUSTOM_DOMAIN
For example, if we want to use a custom domain demo-website.com
for the demo-website
website in our my-less-project
application, we can use the following command:
npx @chuva.io/less-cli domains --project-name my-less-project --static-name demo-website --custom-domain demo-website.com
Resulting in the following example output:
[less-cli] Connecting to the Less Server...
[less-cli] NS Records
┌─────────┬──────┬────────────────────────────────────┬───────────────────────────┐
│ (index) │ type │ name │ value │
├─────────┼──────┼────────────────────────────────────┼───────────────────────────┤
│ 0 │ 'NS' │ 'demo-website.com' │ 'ns-000.exampledns.org' │
│ 1 │ 'NS' │ 'demo-website.com' │ 'ns-000.exampledns.net' │
│ 2 │ 'NS' │ 'demo-website.com' │ 'ns-000.exampledns.co.uk' │
│ 3 │ 'NS' │ 'demo-website.com' │ 'ns-000.exampledns.com' │
└─────────┴──────┴────────────────────────────────────┴───────────────────────────┘
Add the NS records to your DNS provider and wait for the DNS to propagate.
Most DNS updates take effect within an hour, but could take up to 48 hours to update globally.
Read the Less static websites documentation to learn more.