Prerequisites: folder with content you want to host (HTML files, images etc.) e.g. d:\mysite

Host your site on Firebase server

1. prepare the content for hosting by moving all files to subfolder public
   1. create subfolder public
   2. move all files to the subfolder
2. if you don’t have a Google account (does not have to be tied to Gmail address - click on ‘Use my current email address instead’) sign up for one
3. sign up for Firebase here
4. install npm
5. open command prompt
   1. e.g. press windows key
   2. type ‘command’
   3. press Enter
6. install Firebase tools
   1. in command prompt execute npm install -g firebase-tools
7. connect your machine to Firebase
   1. execute firebase login
8. open command prompt in the folder with your website e.g. d:\mysite
   1. one way of accomplishing this would be to navigate to folder in Windows Explorer and type cmd in the address bar
9. run firebase init command
   1. answer Yes by pressing Enter
   2. select Hosting
      1. moving down with arrow keys
      2. press space
      3. press Enter
   3. select [create a new project]
      1. press Enter
      2. when asked about public directory, just press Enter
      3. when asked about single-page app, just press Enter as you probably have an ordinary site
      4. when (if) asked to overwrite index.html, just press Enter as you do not want to overwrite your content
10. now go to Firebase console to create a ‘project’ for your site
    1. click on Add project
    2. enter a name for your project
       1. take note of project id
    3. check both checkboxes, or uncheck both to enable Create project button
    4. click the Create project button
11. now go back to console window
    1. type firebase use --add
    2. your newly created project should be the only item in the list
    3. press Enter
    4. when asked about alias, type in production
    5. press Enter
12. enter firebase deploy and wait a few seconds
    1. you are notified that you site is available at https://mysite-project-id.firebaseapp.com

Now, whenever you make modifications to your web site

1. open command prompt in d:\mysite
2. execute firebase deploy

Connect your domain name to the web site

If you have a domain name, there are a few additional steps that need to be done.

1. go to Firebase
2. click on your project
3. click on hosting on left-hand side
4. click on ‘Connect domain’ button
5. enter domain name in the appropriate edit box
6. click on ‘Continue’

Here it gets a bit tricky. Firebase will provide a string of text that needs to be set in a new TXT DNS record for your domain.

1. go to DNS control panel for your domain, or otherwise set the TXT record
2. click on ‘Verify’ in Firebase console
3. if not successful, appropriate message will be displayed
   1. try waiting a couple of minutes as these settings need time to propagate
4. when you succeed in verifying domain ownership you’ll need to add two more DNS records for your domain
5. again, this might take some time to start working

Error messages in Firebase console regarding this part of procedure are a bit vague and sometimes plainly misleading. So don’t give up if you don’t succeed the first time. Verify that records in the DNS control panel are same as Firebase needs them to be. Verify that you do not have any extra CNAME or A records left over from before that might interfere with new config. Try everything once more. Try to delete connection to domain and then try again. Try to use Advanced setup for connecting the domain instead of Basic setup.

Conclusion

With this, you get your own web site with your own domain with support for HTTPS which is more important every day since browsers tend to mark plain HTTP sites as ‘insecure’.

Recently, an online article mentioned that starting in a few weeks, non HTTPS web pages will be marked as insecure by Chrome.

So I looked at this site over HTTPS and got a warning about unsafe content ahead.

This page had been hosted on Rackspace Cloud files service. I was very pleased with them so far as static website, along with custom domain, was rather straightforward to set up and was working without issues. When used for static hosting, Cloud files are fronted by Akamai CDN. Apparently, this causes issues with SSL certificates so when looking at the secure version of the page, the warning would appear in browsers.

I was unable to find out if Rackspace will in near future support this scenario - HTTPS for static hosting via Cloud files.

So, after some looking around, it turned out that Firebase has a Hosting service which allows hosting of static website with custom domain. Pricewise, the two are almost the same as Firebase is free for hobbyists and Rackspace is essentially free for traffic this blog was getting.

Firebase also has a very modern, developer oriented offering, so I might end up using some other services as well.

Between writing this post and publishing it, Azure has also introduced static website hosting. It still looks a bit complicated to set up, especially the HTTPS story.