Moving this blog from Firebase Hosting to AWS Amplify

I moved this website from Ghost to Jekyll in January this year and chose Firebase Hosting for hosting my static website. Firebase is a platform for developing and deploying mobile and web apps. Its SDK includes Realtime Database, Cloud Functions, and Hosting static pages, among other features.

However, last week I moved this website from Firebase Hosting to AWS Amplify. This post summarizes my experience with Firebase Hosting and why I decided to move to Amplify.

Firebase Hosting

I chose Firebase Hosting over GitHub pages because GitHub requires the repository to be public if used for GitHub pages. Since I was just getting started with the Jekyll, I preferred Firebase Hosting, which is Freemium. I kept the code on GitHub in a private repository.

Firebase SDK has a CLI, which I used to deploy my website. Some of the great features of Firebase Hosting include hosting automatic free SSL, URL redirects, and short URLs on custom domains (called “Dynamic Linking” on Firebase console). Firebase also keeps release history, which can be used to switch to an older version of the website. It can be configured to redirect URL paths to other pages and prevent some files from uploading (like .DS_Store on Mac) as well.

Workflow

My workflow on Firebase was quite simple:

1. Make changes to the website locally on my computer.
2. Build the website locally.
3. Upload the output folder to Firebase using CLI.
4. Push the code to GitHub.

In July, I moved this website from Jekyll to Hugo but kept the same workflow.

Cloud-first

However, lately, I’ve been thinking of moving to a cloud-first workflow. Currently, I’m using a 2016 MacBook Pro 15” which I chose as a student. I didn’t have enough money to buy AWS servers to run a lot of MapReduce jobs¹ and build ML models, so I needed a laptop with relatively higher power while maintaining portability. Moreover, I preferred a bigger screen since I didn’t have access to an external monitor.

But I don’t see myself moving to a bulky 16” MBP in the future. I prefer using cloud services to build code (which is much faster and more helpful than running locally since scalable services are deployed on a cloud developer’s machine). I’ve also started preferring portability even more now that I’ve to carry a work laptop as well.

And as a step in moving to the cloud-first process, I decided to use continuous integration for my projects, including this website. So, I needed to stop building this website locally to push the output folder anytime I changed anything. Also, I wanted the flexibility to add a post directly from GitHub, which is available to GitHub Pages users.

Moving to AWS Amplify

AWS Amplify is a platform for full-stack applications and provides continuous deployment with Git repository. Amplify also has build options for popular static site generators, including Jekyll and Hugo, which can be customized further. I felt that Amplify static sites are a prominent feature with such features and not an afterthought.

I created an app on Amplify and connected it with the GitHub repository for this blog. I chose Hugo as a Framework. The setup was effortless.²

Initially, the build broke a couple of times. Upon further research, I found that Amplify’s default Hugo setup does not support many Hugo functions I’m using. Hugo releases two versions, and many functions are only available in the extended Hugo version. So, I edited the Build Settings of my app on Amplify to use extended Hugo.

I added the following lines under commands: in Build settings above - hugo:

- wget https://github.com/gohugoio/hugo/releases/download/v0.74.3/hugo_extended_0.74.3_Linux-64bit.tar.gz
- tar -xf hugo_extended_0.74.3_Linux-64bit.tar.gz hugo
- mv hugo /usr/bin/hugo
- rm -rf hugo_extended_0.74.3_Linux-64bit.tar.gz

The app builds successfully now. Moreover, I can change the release version in the commands when I want to use Hugo’s newer release. Amplify keeps track of the app’s older builds, and redirects can be added through Amplify console. Similar to Firebase, Amplify allows the addition of multiple domains and automatically configures SSL as well.

Whenever I change my project locally, I can push it on GitHub and Amplify automatically rebuilds the website. Amplify also allows using a git branch for testing, so I do not need to test locally. I can also add a post or make a change directly from GitHub.

Additionally, I switched to an online IDE rather than working and pushing code locally. I’m writing this post on AWS Cloud9, and I don’t feel like I’m losing any features (except the offline access?). I find it a lot better than the VS Code, which I use locally straight off the bat.

More on Cloud-first setup

I’m just beginning with my cloud-first setup. This website’s continuous deployment is just a small step, and there’s a long way to go. What computer would I go with after the current one? Probably a MacBook Pro 13” (or 14” as recent rumors suggest). But I’ve also been thinking of a Chromebook to use as a dumb terminal mentioned by Zain Amro, though I’d prefer a better screen and build than the current line of Chromebooks have (as of 2020).

I’ll write more on my cloud-first journey and setup later.