The Cheap and Easy Way to Setup a Developer Blog

One of the most important things you can do as a developer is build your own presence on the web. You should have a blog or portfolio site. Having a home on the web gives potential employers a place to find you and allows you to clarify your own thoughts. It’s also a handy way to document the things you’ve learned. I know developers that have searched the web for a solution to a problem only to find their way to a post they made years ago.

If you’re interested in building out your web presence, there’s a ton of ways to get started. The easiest way to get a blog up is to use an existing platform like Ghost, WordPress, or Medium. If your goal is to get words up on the web, these options will do.

I find these options lacking.

Ghost and WordPress are difficult to customize and cost a monthly fee. Managed hosting is 20+ dollars a month. This isn’t a huge amount of money, but who needs another bill?

I’ve used both Ghost and WordPress, but I haven’t been able to get either one customized the way I like them. You can download a theme, but making your own theme can be a pain. WordPress themes are written in PHP, which is not my favorite language. Ghost‘s theme engine is easier, but you still need to work within the confines of each platform’s available data. You can do amazing things with Ghost and WordPress, but the further you get away from “standard blog”, the harder it gets to make things just how you like.

Medium and similar services come with more limitations. Medium is a great platform for long form writing, but you’re renting space in someone else’s walled garden. If Medium decides to change its rules or alter its algorithms, you’re out of luck. Your content should be on your own platform. Own your content.

For my latest side project, I’ve been exploring a new option: static hosting. With static hosting, you use a generator to build your site as a pile of static assets (html, css, js, etc.). You can host these assets for free or pennies. Because there’s no server side code, static sites are secure and very fast. They also scale well. Most hosted blog services ramp up the costs as your traffic increases. Static sites can serve thousands of users without breaking a sweat. Static sites should be your first choice for any content-heavy web site.

Another advantage of static hosting is that you can build a workflow that’s like your developer workflow. Most static sites use a collection of Markdown files. Instead of using some clunky online editor, you build your content using your favorite text editor. Once you’re done, you push your files to a Git repo just like any other code base.

The biggest advantage of a static site for me is the customizability. I use Gatsby, which is a React-based static site generator. Because I’m familiar with React, I can build my website like any other web application. I don’t have to mess with PHP or learn some clunky layout to skin. I build my content site the way I’d build any other site.

Let’s Build a Static Site

In the rest of this post, you’ll learn how to build your own blog or portfolio site. By the end, you’ll have a site that can handle as many users as the Internet can throw at it for less than 15 bucks a year.

We’re going to use:

Netlify, for hosting. 
Netlify is a hosting platform that specializes in static websites. Their static hosting is free. They charge for dynamic features like functions and forms, but you won’t need that if you only want a blog.

There are other options for static hosting, but Netlify makes it easy to take a static site and deploy it. You can point to a Git repo and deploy automatically from it or you can drop a folder of static files and Netlify will deploy it for you. I tried out several different app workflows before landing on Netlify.

Gitlab, for a private repo.
You could point your site to a Github repo, but Gitlab has free private repos. If you don’t care about keeping your website code private, feel free to use Github.

Gatsby, a static site framework. 
I use Gatsby because it’s React-based. Component based web frameworks like React work the same way my brain works, so I find Gatsby intuitive. Gatsby is also really fast. Your site loads are nearly instant. It’s a beautiful thing.

If React and JavaScript are not your cup of tea, there are plenty of other static site generators to choose from. I’ve heard good things about Jekyll and Hugo, but Gatsby is my personal jam. StaticGen.com has a great listing of different static site generators if you want to explore.

Steps to Building Your Own Site

  1. Buy a domain. I use Hover.com, but you can use whatever domain service you want. You can also buy domains directly from Netlify.
  2. Sign up for a Gitlab account and make a new repo.
  3. Sign up for Netlify.
  4. Build your site using Gatsby (or whatever static generator you picked).

If you haven’t used Gatsby before, check out the Gatsby Tutorial. It’ll guide you through the basics. It assumes you don’t know very much code, so don’t feel intimidated if you’re not comfortable with React or modern JavaScript. I started with the basic Gatsby tutorial and did the first few lessons to get a feel for the library.

Gatsby has several starter templates to get you going. I recommend using the advanced starter or the material starter. Both of these contain all of the things you need for a blog including SEO, comments, social sharing, and RSS. It’ll save you a ton of time. I used the material starter and then customized the heck out of it.

5. Check your static site code into your repo.

6. Go to Netlify and start a new project. Hook your Netlify project up to your Gitlab repo. Netlify will then deploy and build your site.

7. Hook up your domain.

Go to the settings panel in your project and click on domains. There’s a button to Add Custom Domain. The easiest way to hook up your domain is to let Netlify manage it. You do this by going into your domain management service and pointing the DNS name servers at Netlify. If you aren’t comfortable managing your own DNS records, you can buy a domain through Netlify.

Here’s where you need to go to add a domain

8. Setup HTTPS. Some people think that you don’t need to serve static sites over HTTPS. These people are wrong. Once you have your custom domain hooked up, pop over to the HTTPS tab and setup a free Let’s Encrypt certificate. It’s easy and prevents bad actors from injecting nastiness onto your nice new site.

After completing these steps, you’ll have a website that deploys automatically whenever you update your Git repo. One additional feature that I used was branch deploys. With branch deploys, you can automatically deploy a branch in your Git repo to a subdomain. I used this feature to make a QA branch for my site. This is a handy way to test changes without tanking your site.

Get Out There and Build Something

In this article, you learned about why static sites are a good option for developers and how to build a static site using Gatsby, Netlify, and Gitlab. This stack is great for developers who want a hands-on experience that’s cheap, familiar, and fast. If you’re not a web developer, there are other options you can pursue, but this stack works for me. Go setup a Netlify account and build your own platform.