New website, new blog! A place to share my technical tidbits with you all, and what better way to kick things off than to share the process of building this website, and hosting it for free. Everybody loves saving a buck so read on to learn more…

TL;DR

No time to read it all? In a nutshell it’s just a few simple (yet technical) steps to follow. You’ll likely need to be a software developer of some kind, or equally technical in nature, as you’ll need to work with HTML and CLI tools. Not everything is free here, unless you can build all aspects of a site on your own, and somehow have a free domain name. The basic steps are as follows:

• find and download a website template (likely a cost involved). Themeforest is a good place to start.
• convert your HTML template into Jekyll format.
• flesh out the rest of your site/blog using Jekyll.
• get a domain name (likely a cost involved).
• setup & host a static site using Firebase hosting
• link your custom domain name
• setup free email with Email forwarding

Introduction - so many options

Creating a website these days is really really easy with so many options to choose from. Squarespace, Wix and Wordpress are great examples. And most of them are very draggy-droppy, which is also great as it opens up these options to millions of non-techy people. I don’t hate it. However, most of them require a continued monthly payment to get off the limited free tier, and to keep things running. Once you’ve invested time and energy into building out your site on a particular platform (non trivial amounts of time I might add!) you’re pretty much stuck there, forced to pay the monthly fee or lose it all. I’ve never tried, but I can’t imagine there’s a simple and reliable way to convert from one platform to another without a few headaches along the way. Personally I hate being forced into a corner, so here’s a free alternative for those that are a little more tech savvy and happy to deal with a bit of HTML and a CLI tool.

Step 1 - get a template

By far the easiest place to start is by buying a nicely made HTML template. Many of them come packed with adjustable colors/themes, neat animations and other bells & whistles which make them look great right out of the box; easy to tweak and adjust to your branding/color needs. And pretty easy to rearrange the pre-built elements to create a website with the layout you’re after. The point is though, at the end of the day it’s just plain HTML with a few plugins to do some of the fancy stuff. You own the source code, which means you have the ability to pick it up and host it anywhere you desire.

There are a multitude of free and paid for website templates out there, I’ve had pretty good luck with Themeforest and so I recommend you start there. Alternatively, simply Google html templates and that should lead you down a fruitful path.

Step 2 - build your site in its basic form

I’d say now is a good time to start piecing your site together and build a small portion of it in its most basic form, or at least the outlining structure. I recommend building out the home page at minimum and start thinking about your menu system. How many pages will you have, and what will they be called? Scaffold the site with dummy content and get the overall structure working in simple HTML before moving on. This will give you an idea of what you’re working with, and help in the next steps where you’ll need to extract the common “outer” elements that will form your reusable template.

Step 3 - get a domain name

There’s no getting away from having to buy a domain name, and in my experience Google Domains is a good way to go, especially if you’re already in the Google/Gmail ecosystem. You don’t have to use Google Domains in this step, but it lends itself well to the steps that follow and is really easy to use.

Step 4 - set up a Firebase project and enable static hosting

This is where the free hosting comes in. It’s important to note that this is static hosting, meaning it’s not the same as traditional web server hosting and you won’t be able to execute server-side logic (such as the code you might find in a PHP file). I don’t see this as a major problem though, because so much of the modern web runs as SPA’s and PWA’s built using frameworks like Angular, React and Vue…and these should work if you can get them statically generated. Gatsby is a perfect example of this for the React framework.

Once you have your domain via Google Domains (recommended, because I like it), navigate into the Manage option, and there you will find a menu down the left for Website:

Follow this menu, then find the option for Static hosting (powered by Firebase):

At some point you’ll need to run npm commands, so ensure Node/NPM is installed on your machine and is up to date. If you’re working on a Mac then installing via Homebrew is probably your best bet.

Click Continue, and from here it should guide you through installing the Firebase CLI, creating or linking to your Firebase account, and setting up a Firebase project with which to associate your new website hosting. Some of this can be done manually via the Firebase Console if you prefer, so for more information on setting up Firebase hosting without going via Google Domains you can visit their documentation here:

https://firebase.google.com/docs/hosting/quickstart

Continuing down the CLI tool route, the setup steps will guide you through initializing a folder on your local machine, which looks something like this:

At the end of the init process, you should be prompted to run firebase deploy from the Command Line to push the default HTML files (index.html and 404.html) up to your account.

By now you should have a website (simple page) hosted on Firebase and running the default HTML page that was initialized during the setup process. You’ll have a project within Firebase Console to manage it all, at the following address:

https://console.firebase.google.com/project/{your_project_name}/hosting/sites

Under the Hosting section you’ll see a list of URLs that are autogenerated for your new site, we’ll attach a custom domain to this later on.

Note that you can host multiple websites per Firebase project!

Phase 1 complete!!

Step 5 (optional) - push a snippet of HTML

Let’s now push a new HTML page up just to ensure it’s all working as expected, and that we can see any changes we make go live.

Create a new index.html file and paste a simple snippet of HTML into it, something like below will work just fine. Copy this file to the local folder you initialized in previous steps (I’ve kept the default folder name they suggested, called public, which can be seen in the CLI screenshots above). Now run the firebase deploy command again to push the changes up. Wait a few seconds before refreshing the page in your browser; hopefully you’re seeing the changes reflected and running live.

<!DOCTYPE html>
<html>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

Step 6 - apply your custom domain

Applying your custom domain name will start to make this feel like it’s all coming together. Still within your Firebase project, under Hosting, there should be a button called Add custom domain.

Follow the steps to connect your domain and verify ownership.

As mentioned earlier, it’s not critical to use Google Domains, but this is where it makes things pretty easy. Hop across to your Google Domains account and create the A record as suggested by following the above steps and you’re almost there. It’s a good idea here to also create the www.{your_domain_name} redirect too.

The custom domain changes will be pending and could take up to 24 hours to take effect. Also watch out for caching, perhaps try an Incognito browser window or a different device if your not seeing any changes come through.

Step 7 - convert your plain HTML site into Jekyll format

At this point you should have a really simple placeholder HTML file running on Firebase hosting, and with your custom domain name applied. You should be able to visit it in a browser; note that an SSL certificate (for HTTPS) has also been automatically applied, for free!

Time to get a little bit more technical, at some point you’ll need to convert your basic HTML site into the format required by Jekyll. This is another decision point, you don’t have to use Jekyll, any other static site generator will do! You could even just keep it all in plain HTML if that is your preference.

There’s no point in me regurgitating the Jekyll docs as they’re pretty good. So head on over to their documentation and learn the in’s and out’s of what they have to offer.

The remaining effort of this process is to convert your templated placeholder site from step 2, and then start filling in the blanks by fleshing out all of your pages, links and images. When your site is built out sufficiently for public viewing you can run the Jekyll build process to generate your static output files. Copy these files and folders to your Firebase project folder (the one you hooked up earlier and initialized with the CLI tool in step 4, default name was public), then it’s time to run the firebase deploy command once more to upload your latest changes.

Congrats if you’ve made it this far! It might seem like a lot of work the first time around, but once you’ve wrapped your head around all the technologies we’ve touch on today you’ll be spinning up new websites in no time.

Step 8 - set up free email

With any new domain name you’ll probably want a matching email address that looks nice and professional, rather than a randomly named Gmail or Hotmail account. Something like info@example.com sure looks way better than example2022@gmail.com. Of course you could easily sign up for a paid G Suite business account and get all the handy tools that go with it, but if you’re on a budget and looking for an end to end freebie setup then you could simply use Email forwarding to push any incoming mail addressed to your tidy info@example.com alias into your free example2022@gmail.com account. It’s straight forward, easy to do, and it’s free.

Again, continuing with the Google Domains example this is super simple. Head over to the Email menu within the Manage domain section, and find the Email forwarding options at the bottom. Setup all the aliases you need and point them to your existing Gmail/Hotmail/whatever account. Behind the scenes this will create a handful of DNS entries (MX records) for you that handle the forwarding.

Conclusion

Wow, that was a lot! But you made it to the end, good work. Hopefully that was enough info to guide you through the process and find the documentation of each technology we required. Depending on your appetite for doing things a little more manually, this method could prove quite useful if you have a number of simple sites to build and are concerned with painting yourself into a corner by using the drag-and-drop style platforms we have available today. As a developer I like to maintain control by working directly with the source code, and therefore having the freedom to easily pick up and shift hosting options should the need arise. Maybe not for everyone, but works for me…all while saving a couple bucks at the same time!