I have had several iterations of my own website over the years, but although I have owned ericbirdsall.com since I was fourteen my website has largely been dormant, showing either a blank white page or not resolving at all. Now that I do web development for a living at Qualia it seems fitting that I should have a polished personal website to complement the work I do, but I’ve always a Writer’s Block deciding which technology to use and how to theme the website. This seems common amongst software professionals; only 15% of my peers maintain personal websites. From design to deployment, I’ll detail here how I decided to take the plunge and develop a personal site.
I started out with three requirements for my website:
- It should be a static site, for fast load times and so that server maintenance isn’t necessary.
- It should be easy to maintain and to create new content.
- It should use technology that I am interested in learning more about.
I began exploring static site generators that would meet my criteria. Qualia uses DocPad so I started there, and included the following options in my search.
Although I was initially drawn into static site generators by DocPad, it doesn’t have great theming support and I would still ultimately need to write a lot of HTML and CSS by hand. Additionally, although DocPad supports a version of templates, called partials, it wasn’t clear how I could set them up in a way that was extensible and easy to theme. Hugo and Jekyll are similar in this regard where you have to write a lot of the HTML and CSS yourself so I decided to move on to the final options in our list.
Gatsby.js is built on Node.js, which I’m very familiar with and enjoy using at work. Gatsby uses React.js for the frontend and includes a build system, themes, and a large plugin ecosystem for extensibility. I was particularly interested in working with GraphQL, which Gatsby.js supports out-of-the-box to run StaticQuerys on data included in your project, including Markdown pages. I had only considered GraphQL as being used for Remote Procedure Calls on websites, and this demonstrated to me that GraphQL can really be used as a query language for anything, even if it’s querying over static data at build-time.
Nuxt.js is a static site generator for Vue.js, which is generally regarded as the hottest front-end templating framework since React so I was interested in using it for a personal project to learn more about it. However, the plugin ecosystem isn’t as advanced as Gatsby.js and it didn’t seem to have all the bells and whistles that Gatsby.js has. Additionally, when just starting out with a framework the Documentation makes a huge difference for how productive I can be and I didn’t see a way to get started with Nuxt.js as fast as I could with Gatsby.js
Moving Forward with Gatsby.js
Getting started with Gatsby.js is pretty easy: just run the following to download Gatsby.js and create a new project from a template hosted on Github:
npm install -g gatsby-cli gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog
Of course, things are always easier said than done and two Node.js version upgrades, one npm version upgrade, a MacOS Mojave upgrade (because maybe that would work?!) later, I was finally up and running with a new Gatsby site. I created a new static build of the starter template and set up the site on AWS.
Hosting and Deployment
I created a new S3 bucket and used
gatsby-plugin-s3 to sync the Gatsby.js build folder to the bucket. I then enabled website hosting for the bucket and moved on to setting up the Content Delivery Network. AWS Cloudfront is a Content Delivery Network that allows you to place a cache in front of S3 buckets so that objects in them are globally available at a much lower latency than if they were to be retrieved from the bucket’s region directly. I setup the Cloudfront distribution to point to the S3 bucket, and used AWS Certificate Manager to prove that I owned ericbirdsall.com and had the authority to control requests for this domain. Then I created a new Hosted Zone on Route53 and created a new A Record to point requests for this domain to the Cloudfront distribution. My total hosting costs are as follows:
- Route53: $0.50 per month
- Cloudfront: AWS free tier
- S3: AWS free tier
A globally available, low-latency static site with no server upkeep for $6 a year! Not bad at all.
Over time I’ll continue to tweak the look of the site away from the Gatsby.js starter template and add more content about my personal interests. I’m excited to experiment with React and GraphQL and see how my choice of Gatsby.js bears out over time.