This blog's set-up

In this short post I would like to share how I set up this blog, possibly for you to learn or get an idea about how to set up a blog yourself.

The Website

The website has been set up with Gatsby, a JS framework built on top of ReactJS to make building a blazing-fast static website easier than ever. I used the Gatsby Starter Blog to quickly get something up and running. I like it because it’s lightweight, I can write my blog posts without logging in anywhere, as I can write them using Markdown in my recently discovered sexy markdown editor. Also, it gets me to see and work with React, which is one of the bigger frontend frameworks out there nowadays.

If you also want to set up your own blog with this stack, then let’s get started! If you start entirely from scratch, you can run the following commands in your terminal to install everything that’s required:

Let’s first install HomeBrew, a lovely package manager allowing you to install everything from your terminal (on MacOS)

/usr/bin/ruby -e "$(curl -fsSL
 https://raw.githubusercontent.com/Homebrew/install/master/install)"

Run

brew -v

to see if it has been installed, correctly. It should return something like

Homebrew 2.1.13
Homebrew/homebrew-core (git revision 791eb; last commit 2019-10-13)
Homebrew/homebrew-cask (git revision 7f1286c; last commit 2019-10-13)

With Brew, we can then install NodeJS, which allows Javascript to be run on your machine, which is used to compile / build your code. This is a requirement for the Gatsby Command Line Interface (or CLI):

brew install node

and you can check if it’s indeed installed correctly by running

node -v

Gatsby requires Node 8 or higher.

Additionally, it installs the Node Package Manager (NPM), which is used to install Node Libraries.

I also recommend installing Node Version Manager (NVM), which allows you to switch between Node versions. This can be helpful if you rquire a specific version of Node for a project

brew install nvm

If for some reason you have an older version of Node running currently, you can change this using e.g.

nvm use 8

to run Node 8.

With this, we can then install the Gatsby CLI:

npm install -g gatsby-cli

with which we can create our website:

gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog	

You can then go into the directory, and see it on your local host:

cd my-blog-starter/
gatsby develop

If you now go into your browser and navigate to https://localhost:8000 you will see your blog!

If you want to better understand how to work with Gatsby, check their in-depth from-scratch tutorial.

You will probably want to put this in a Github repository, as many hosting services can pull it directly from your github repo!

Hosting

As I worked a bit with Amazon Web Service (AWS) services over the past 1.5 year, I thought it would be fun to set this up myself, too, and was extremely surprised with how easy this was. The domain it’s currently on was a birthday present from my previous employees, and I also thought it would be cool to experiment with how DNS/CNAME changes work to let this domain serve the content on some AWS service.

As I navigated to the AWS website, one of their services, called AWS Amplify seemed to do exactly what I needed: Static app deployment and hosting in ~5 minutes: great! (Apparently there was a Gatsby tutorial about this, too, although they recommend Netlify )

When you go to the amplify console everything is quite straightforward and they give you a step-by-step guide to follow. I did adjust the build script, though, to the following:

version: 0.1
frontend:
  phases:
    build:
      commands: 
        - cd my-blog-starter # Go into directory
        - npm install  # install all node modules
        - gatsby build  # build all into public dir
  artifacts:
  	# Tell AWS that I want to host the public directory
    baseDirectory: /my-blog-starter/public/	
    files:
      - '**/*' # and all files in it							
  cache:
    paths: []

Whenever it was accessible on an Amplify Domain (https://master.dq1ww2mlbpel9.amplifyapp.com) I set up the link to a custom domain by following their doc. I would personally recommend to set up a domain name in AWS Route 53, as that is perfectly compatible.

If you’ve managed to read all of it until here, awesome! Here’s a cookie 🍪

If you have any questions or need any help setting up your own blog post, let me know my sending a DM via Twitter. Also let me know if you liked this post, learned something from it, or have ideas for improving it (being my blog set-up, or this specific blog post!).