Deploying a static website involves more number of steps and will always take time. Because we have to create an account with a hosting provider, register your domain, install a FTP client and then upload your HTML files to the server. Phew! How many steps!!!
This is what I thought before trying surge.sh. Now hosting a static website couldn't be more easier than this. Here are the steps to do that.
Surge.sh
Surge.sh lets you deploy a static website from command line in a minute. You can deploy your site for free and they are offering a subdomain in surge.sh. You can also use your own domain with your website.
Step 1 - Install surge
Install surge using the following command
sudo npm install surge
Step 2 - Deploy your static site
You can deploy your site either to a subdomain or to your own domain.
Step 2.1 - Deploy to surge.sh subdomain
Open terminal and change directory to your site's root folder. Then you can deploy your site using the command surge
. If this is your first time you will be asked to enter your email and choose a password.
Your site will be uploaded to server depending on your internet speed and you will be given the site URL at the end of the upload. You can edit the URL if you want before the final step. You will be given a *.surge.sh
subdomain.
Step 2.2 - Deploy to your domain
You can use your already existing domain or you can create a domain for free at Freenom. Open terminal and change directory to your site's root folder. Then you can deploy your site to your domain using the command
surge ./ yourdomain.com
Then go to your domain's DNS editor and create the following DNS records:
@ - TXT - 45.55.110.124
www - CNAME - na-west1.surge.sh
Step 3 - Setup CNAME file
Specify your domain in a CNAME file with the following command for future deployments
echo subdomain.surge.sh > CNAME
or
echo yourdomain.com > CNAME
You can deploy this change or any other changes in the future with the command surge
. Your site is now deployed for free at subdomain.surge.sh
or yourdomain.com
depending on the method you chose.
Run surge -h
or surge --help
to get the information given below:
Surge – Single-command web publishing. (v0.12.0)
Usage:
surge [options]
Options:
-p, --project path to projects asset directory (./)
-d, --domain domain of your project (<random>.surge.sh)
-e, --endpoint domain of API server (surge.sh)
-a, --add adds user to list of collaborators (email address)
-r, --remove removes user from list of collaborators (email address)
-V, --version show the version number
-h, --help show this help message
Shorthand usage:
surge [project path] [domain]
Additional commands:
surge whoami show who you are logged in as
surge logout expire local token
surge login only performs authentication step
surge list list all domains you have access to
surge teardown tear down a published project
Guides:
Getting started surge.sh/help/getting-started-with-surge
Custom domains surge.sh/help/adding-a-custom-domain
Additional help surge.sh/help
When in doubt, run surge from within you project directory.
You can see a detailed demo of Surge.sh in the YouTube video given above. Feel free to post your comments.