Remaking DeKrey.NET in GatsbyJS
2020-07-19 — 2 min read
I don’t like maintenance. I prefer to make things that can just continue to run on their own and don’t require constant fixing or upkeep. As a result, almost always my own website (probably where you’re reading this at DeKrey.NET) is behind the times. Occasionally, I rebuild it. When I do, as I did just recently, it needs to be simple with no APIs that can break down and leave my site dark until I take the time to resurrect it again. If you want a fast, low maintenance website, raw HTML can’t be beaten. As a result, it tends to be relatively boring, linking people off to other sites.
But… raw HTML isn’t great for maintenance. Writing a full blog in vanilla HTML would be an arduous task. Markdown is a great alternative, but I don’t really like it for a complete site. React works well for sites, but makes for a poor tool for writing a blog. For a long time, I felt stuck.
Then I found GatsbyJS. A static site renderer? Sounds relatively boring. But, a static site won’t break down. You can tell if it works before you upload it. There’s definitely something valuable here. So, I decided to try it out. (I’ve also been working on quite a few front-end things lately, so I wanted to try tailwindcss - which Justin Myers has been talking up to me for a while.) And so, I followed the GatsbyJS tutorial, tossing in my hosting preference, I designed the following architecture.
Wow, okay, so, when written out this way, it doesn’t look simpler. Then again, I added a blog (everything before was on Medium), and it’s pre-rendered.
Creating a Dockerfile for hosting GatsbyJS was quite straightforward:
FROM node:12 AS builder
WORKDIR /src
ADD package*.json ./
RUN npm ci
ADD . ./
RUN npm run build
FROM gatsbyjs/gatsby
COPY --from=builder /src/public /pub
The gatsbyjs/gatsby
image is a specialized nginx image designed to handle some
smart defaults for a GatsbyJS site, such as the location of the 404 page.
All-in-all, I’m happy with my new site.