Mark Johnson

    Building this site: Part 1 - Static site

    Tuesday 19th May, 2020 - 2 min read

    When I decided to build a personal blog, I wanted something that would look good, require minimal tech skills and continue to be supported for years to come.

    GatsbyJS meets the first two, but we’ll have to give it a couple of years to see if it sticks around. I came across GatsbyJS when looking for a Javascript, React based framework that can easily build static sites. What appealed in particular was the automatic creation of pages based on markdown files - to make a new post I just create a new .md file and the site automatically creates a new page, adds it to the list of posts, updates footers, and handles a bunch of other things too. This is all powered through GraphQL that allows the site to query created posts and pass information around through the site.

    To get started I used the Gatsby Blog Starter project.

    Gatsby has an extensive plugin ecosystem. This let me easily add new features without having to write code myself. For example, predicted reading time for articles:

    Reading time

    I also added a plugin for responsive images and vscode styled code snippets among others.

    Now that over a year has past since building the site, I can see more advanced starters that have these extras which I added baked into the site. Definitely worth checking out if you’re thinking about starting from scratch.

    For the domain name, I bought it with Namecheap.

    For building, deployment and hosting I went with Netlify. Netlify listens to any commits in master, rebuilds with gatsby build and publishes to the Netlify URL which is pointed to my domain, with Namecheap pointing to Netlify’s DNS. Netlify was a dream to use, simply update master and within minutes your site is updated. It also comes with email notifications (e.g. notify when build fails), webhooks that can be hooked up with IFTT (e.g. build when new Strava activity is created), and builds for branches to a staging environment.

    So that was how I built the initial version of this site.

    Read more

    Click here to read part 2 - adding server side logic.

    Click here to see an overview of all web-dev articles related to this site.

    Enjoyed this post? ❤️

    Subscribe by email or RSS.