How to build your own serverless website

Posted on October 18, 2022 • 6 minutes • 1076 words

Trust me ! If you are a true, blue techie, it’ll be an absolute thing in your wish list to build your own website. 🌏 🌐

Now this is what I’m about to share in this blog. I’ve build this server-less website using 3 technologies basically – Hugo SSG, AWS route 53 & Google firebase web hosting.

Before i proceed, a big thanks to Varun A P for his Hugo theme -blist, on which I’ve built this website. You’re a star! 🙌 🌟

The Big question WHY for the choice of technologies

Now, i could’ve got away with WordPress, and could’ve skipped all the intricacies of the things that i had to do explicitly- buying a domain, set up dns routing, coding the site, building it and then publishing it in firebase hosting. But where is the fun in that? There is an element of joy in creating things on my own. But i do ask myself ‘WHY’ before deciding and choosing a certain path or technology. So lets dig into each of this tech and see the answer to WHY for each of them.

1. Hugo SSG

My aim was to have a personal website in a static format. With good standard components and reusability at stake in order to ensure DRY principles of coding . In the past, I’ve worked with Java based server-side templating engines, like Velocity, Freemarker, some hybrid templating engine like Mustache.js and so on. But all of these engines were pretty old and mostly were pro server-side web applications oriented. Yes! a crucial differentiating factor, i am building a website, not a web app So i knew the benefits of a templating framework, and thus my first need arise of a good & robust templating framework.

Second thing was that while im a full-stack dev, my affinity lies more in back end developmemt. Now i have high regards for the UI/UX experts who make class A websites, which gives seamless and fluid experience. But not someting that is my forte. So i needed to be sure the website im developing is up to the UI & UX standards, based on a beautiful theme, but yet, a bit customisable as per my needs. So keeping these 2 needs in mind i started looking for, and i zeroed in on Hugo, one of the reason for going with Hugo is that it is blazing fast in building pages, excellent livereloads, good support for Markdown language base templating, its own shortcodes to integrate many components like a youtube video frame, twitter tweets, and so on.

It also provided a vast bucket of awesome theme library. In fact, that was one of my goals, not to spend too much time in designing the look and feel, but to structure the website the way i want, and work on the content.

2. Firebase hosting

Now for hosting, i had clearly 2 options to choose from- AWS S3 static website hosting, and Google’s Firebase hosting.

Advantage of AWS S3 is that it provides unlimited storage, like literally. And will be mostly be covered by free-tier quota for my personal website. But it doesn’t provide SSL (HTTPS) out of the box, you’d need to create a custom SSL certificate and then configure it. Also another bit you shall do is set-up a cloudfront distribution and connect it with your S3 bucket.

So all these weren’t something that i was looking forward for as of now. Thus i started exploring Firebase hosting, and it does provide SSL (HTTPS) out-of-the-box udi baba !!! Setting up firebase hosting in my Hugo project was pretty simple. And this just fits my bill for a personal website. I’d definitely do NOT recommend this for a commercial website.

Ok, back to firebase hosting, yeh where was i? Ease of use, yes it is pretty easy to deploy my latest changes from CLI. You just need to make sure that you do your initial set up of your website, and google account properly.

1 - Install Firebase Tools
$ npm install -g firebase-tools

2 - Login to Firebase in the terminal/command prompt.
$ firebase login

4 - From the root directory of your website, Initialise your app
$ firebase init

5 - Deploy Firebase App
$ firebase deploy

Now there is a limitation that free firebase hosting plan, which they call it Spark Plan allows only 10 GB of storage across all the versions of your app, and 10 GB download per month. So every time someone access your website, they are actually downloading all the static content of your website- HTMLs, javascripts, css , images and so on. But thats fine for me. As in future i may upgrade my firebase account or migrate to AWS S3 altogether. At this point, even if you haven’t bought and set up a custom domain you can still access your website globally with url like https://your-firebase-app-name.web.app or https://your-firebase-app-name.firebaseapp.com . So the next and final thing that i needed to do was buy a custom domain and set it up in Firebase hosting.

3. AWS route 53

So final thing was to get a custom domain, aww yeah. It just feels so good to see site with the name that you want. So i went ahead and started looking for availability for abhinavganguly.com . And again i had 2 options, Google domains, and AWS route 53, i went ahead with AWS route 53 as google domains aren’t available in India at the moment for personal use, there are some limitations due to GST, coz of which only a registered company shall buy a domain from them. So AWS route 53 it is. Post buying the domain, you’d need to wait for some time for it to be available for use, for me it was around 15-20 mins. And after that, all that i needed was to link my custom domain with my google firebase hosted website. And then my website was accessible with my custom domain name.

Some Other Techs that i considered with smirky 😏 moments:

I did had some other techs in mind, especially with respect to Static Site Generator :

Now if you know the above, they are in Vue.js, i’ve been absolutely enjoying working with Vue lately. So the thought did pondered my mind, but since they are fairly new, and doesn’t have many themes available like Hugo, i left them for the future.

Hope you enjoyed reading. Happy coding !