Jeremy Abroad

How I Made This Website

October 02, 2018

I made this website with Gatsby.js, a static website generator framework based on React.js. The website is hosted for free via GitHub Pages. I use NameCheap for the domain name.

Before I even get into this - for the 99% of you out there who just want to make a standard website, just use Wordpress, Squarespace, Wix, or one of the countless other website generator tools or CMS frameworks that don’t require you to be a software engineer to build and maintain.

Why I went with a static website vs. running a server

1. Easier to build and maintain

My older personal websites used to have dynamic servers running Node.js on AWS with Nginx, Redix, React, Redux, etc. It’s great for learning, but (1) it takes a ton of time to build (2) frameworks get outdated quickly, meaning there’s a good chance your code will be obsolete in 6 months (3) maintenance takes too much time. Ultimately every hour you have to devote to maintaining your codebase and servers is time you’re unable to devote to creating content for your website.

Most websites don’t need dynamic servers, and static websites are way easier to maintain.

2. Free

Hosting on GitHub Pages means I don’t pay a cent to host my website. It’s 100% free. I no longer have to pay a monthly AWS bill for an EC2 instance.

3. Faster

Static websites are more performant and scale easier than websites with dynamic servers.

4. Blog posts in Markdown format

Ok I could’ve done this with a dynamic server as well, but having a static website forced me to create a markdown file for each post. There’s significant value in having each post in the same format because then I can easily migrate my site to another framework down the line if I need to with little hassle.

Gatsby vs. Jekyll vs. Hugo vs. Hexo vs. Next.js

I decided to go with Gatsby or Next.js mostly because (1) it’s blazingly fast since it’s a single-page app (2) I’m already very familiar with the React.js ecosystem having worked professionally with React for 3 years.

Gatsby is a static site generator whereas Next.js is a full-stack Node/React-based framework that happens to generate static files.

I went with Gatsby because it already does what I need out of the box, whereas Next.js would’ve required a lot more work to get everything setup.

How has it worked out?

It’s definitely been a lot of work because there are very few themes, and they’re all super basic. If you’re content with one of the basic themes, then great - you don’t have to do any coding. But if you want something more custom, then you’ll have to know how to code with React.

That being said, I’ve overall been very impressed. The setup is super straightforward and easy to hit the ground running. Implementing Google Analytics was as easy as adding my tracking code to the constructor of a plugin called “gatsby-plugin-google-analytics” that’s already included with the template. I’ve wanted to see what GraphQL was all about and this has been a good excuse to do so.

My only complaint other than the lack of templates requiring me to be a developer again is that the build time is a bit slow. Also when I’m in dev mode and add in a new post, I see the post on the homepage but can’t load the post without restarting.

Overall there’s still a lot of work to do. I want a sidebar, related articles at the end of each article, Disqus integration, search, tagging (started this but not complete yet), etc.

All of this requires being a developer or hiring one. Thus if you’re not a developer, you should just use one of the solutions I recommended in the intro that doesn’t require you to touch any code.

At the end of the day, all that matters is your content and that you have a functional website that can easily be maintained. Nobody cares about your tech stack except for engineers.

Jeremy Bernier

Written by Jeremy Bernier who left the NYC rat race to travel the world, work remotely, and find the meaning of life.