Top Concerns When Choosing a Tech Stack for Your Personal Website

Frontend Stack

Until somewhat recently, I think that hosting was probably a more important concern for creating a personal site than the frontend stack. But with options like Github Pages, Netlify, and Vercel, the hosting part of the equation has become a whole lot easier. Nowadays a personal site is all about what you build it with. I think it's fair to say most people looking to build a personal site are, in equal parts, wanting to get a professional foothold on the web and also just have fun building something new. And when building something new, there is a whole lot of new out there. So much so, that many people cannot even bring themselves to begin because they're afraid of picking the wrong stack.

Picking A Framework

A good question to ask yourself when picking a framework is which of the two following focuses is most important to you.

1) Javascript

Javascript, the necessary evil turned eternal turf war, is probably at top of mind for most people looking to build a personal site in order to "play with new tech". This is also a great splitter of options if you do know what javascript framework you want to work in. If you still cannot decide on a framework, then you probably have more this vs that javascript framework articles to read.

React

If you must work with React, Gatsbyjs and Nextjs are very popular and capable options. Gatsbyjs takes a more holistic approach between the frontend and the backend whereas Nextjs is mostly concerned with creating a static and ssr environment for React apps.

VueJs

If you must work with Vuejs (my personal favorite), Nuxtjs (what formcake.com is build on), Gridsome, and VuePress are all great options. As is often the case in the world of Vue, it is often easiest to compare Vue based project's with their React equivalents. Gridsome is like Gatsbyjs and Nuxtjs is like Nextjs. VuePress is much more targeted to those who want to create a site for blogging.

Angular

I cannot really imagine someone making a personal site in Angular unless they really want to force themselves to learn Angular for a job of some kind but there is an interesting Angular static site generator project called Scully that I have been meaning to try. If anyone reading this has played with Scully, send me your thoughts to david@formcake.com.

X Cool Kid Framework

You are on your own.

2) Authoring Experience

Perhaps you are more concerned with creating a blog and how a framework's authoring experience works than what technology powers the rendering of html. X JS forward frameworks tend to require a lot more configuration than those made specifically for creating a simple site. If this is your situation, you are in luck. There are tons of options and they are all fantastic for this purpose. I will go more in depth on some of these options since they are more tailored for a small perosnal site.

Jekyll

Jekyll is the one of the oldest static site generators that made authoring a top concern with its use of Markdown. Built in 2008 by Tom Preston-Werner, Jekyll was part of the Rails era of web development where developer productivity was considered paramount to everything else. Jekyll is still very popular but is a bit of a non starter for many because it is built in Ruby. Still a great choice for a developer blog but you will have to use RubyGems instead of NPM.

Hugo

Hugo is a more modren framework than Jekyll. It tries to solve more problems out of the box than Jekyll, is more flexible, and considers the speed at which it creates pages to be a top concern. Part of Hugo's popularity comes from the fact that it is written in Go. This contributes to its speed but also contributes to some of the annoying aspects about it. Go is an interesting language but most of us don't have the opportunity to use it in our work. It is therefore best for those who love Go and don't mind using Go's templating libraries. You will also have to give up NPM if you choose Hugo.

Eleventy

One of the newest kids on the block, Eleventy is somewhere inbetween Hugo and Jekyll. It's focus is on flexibility and speed. It is super modular so it does take a little bit more time to get setup but for those looking for flexiblity, Eleventy has it in spades. It supports 11 templating language and best of all, it is a node library so you can use NPM for your entire project. This may be my personal choice if I were creating a new blog.

Other Concerns

3) Static????

Yes. In 2020 there is no reason to choose a framework that does not support static generation of pages for a small personal website. Every framework listed above supports static generation. If you need to be convinced of the power of static websites, checkout jamstack.org which does a good job of going into all the benifits.

4) Hosting

As long as we have made the decision to use static generation, hosting is quite easy. There are still a lot of options however. Here are some of the top options and some of the thinking for when to use them.

Netlify

Netlify is the hosting platform behind the JAMStack movement. Founded in 2014, Netlify has grown rather quickly and has become the defacto hosting platform for static sites. With Netlify you can host static sites, deploy lambdas, and create git based workflows with extreme ease. I would recommend Netlify above all other options for a personal site.

Vercel (Previously Zeit)

Vercel is a very similar hosting platform as Netlify. Founded in 2015, Vercel boasts a fully featured platform for hosting static sites including git workflows and lambdas. I have used Vercel for years and I can recommend it. Vercel is a solid choice but I would recommend Netlify above Vercel for a fully featured static hosting platform.

Github Pages

Github pages is quite an old option in the space of static website hosting. Launched in 2008 Github pages originally only supported Jekyll and static files but now supports other frameworks through some configuration. Github pages was once unique in that it automatically was integreted into your github account but this is now a common feature with the likes of Netlify and Vercel. Github pages is underpowered at this point but will always be free. If you want to host something simple and never think about it again, Github pages may be just the right choice.

Firebase

Firebase is a platform as a service hosting provider that has some seriously robust features and is backed by Google. Firebase is not a static website hosting provider and aims to solve much more complicated issues around creating and hosting a sophisticated web application. The only reason you would want to choose Firebase is if you wanted authentication for some reason. Firebase allows for simple authentication and storage via it's flagship features Firebase Authentication and Firebase Realtime Database. Firebase may also be a good option if you want to play with server tech but don't want to go too deep into the subject.

Heroku

Heroku lit the world of application hosting on fire in 2007 when it made hosting a Ruby on Rails application as simple as a couple of key strokes using the Heroku CLI. Like Firebase, Heroku aims to solve much more complex problems than a simple static website but is a great system for those who like to tinker with their backend. Heroku is for those who need to solve more complicated problems like storage or authentication, but want to do it with open source software instead of google invented technologies. If you are building a personal site to learn server tech, Heroku is a great option.

5) APIs

Assuming you went with one of the hosting platforms specifically designed for simple static websites, you may be wondering "But what if I need a server for X". You are in luck, there is a great resource created by Chris Coyer, of CSS Tricks and Codepen fame, that lists services that are great for static websites without a server, https://serverless.css-tricks.com/services/major. Formcake also perfectly solves the problem of how to create a contact form on a static website. Formcake is committed to always having a useful free tier for developers with small projects. Consider checking it out the next time you tackle building your personal site.