Skip to content

Commit

Permalink
Blog v2
Browse files Browse the repository at this point in the history
* Migrate to Hugo
* Update Vercel config
* Finialise blog v2 post
  • Loading branch information
GeekMasher authored May 16, 2022
1 parent 0189ed5 commit 6720195
Show file tree
Hide file tree
Showing 193 changed files with 747 additions and 48,354 deletions.
71 changes: 0 additions & 71 deletions .github/workflows/codeql-analysis.yml

This file was deleted.

5 changes: 4 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -85,4 +85,7 @@ typings/

public/

.vercel
.vercel
.hugo_build.lock
**/.DS_Store

3 changes: 3 additions & 0 deletions .gitmodules
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
[submodule "themes/mini"]
path = themes/mini
url = https://github.com/nodejh/hugo-theme-mini.git
3 changes: 3 additions & 0 deletions .vimignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
themes/mini
static/media
public
12 changes: 12 additions & 0 deletions archetypes/default.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
summary: {{ .Summary }}
banner:
path: {{ .Banner.path }}
caption: {{ .Banner.caption }}
link: {{ .Banner.link }}
draft: true

---

44 changes: 0 additions & 44 deletions config.js

This file was deleted.

55 changes: 55 additions & 0 deletions config.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@

baseURL: https://geekmasher.dev
languageCode: en-us
title: GeekMasher's Blog
theme:
- github.com/nodejh/hugo-theme-mini

defaultContentLanguage: en

hasCJKLanguage: true
permalinks:
posts: /posts/:title/

paginate: 5

# https://gohugo.io/getting-started/configuration-markup#
markup:
highlight:
guessSyntax: true
style: emacs
tableOfContents:
endLevel: 3
ordered: false
startLevel: 2
goldmark:
renderer:
unsafe: true

social:
github: https://github.com/geekmasher
twitter: https://twitter.com/geekmasher

enableEmoji: true
enableGitInfo: true

params:
author: GeekMasher
bio: Securing Code, Developing Software, and All Things Technical
enableRSS: true
# enableComments: true
showToc: false
showPowerBy: false
math: false
hiddenPostSummaryInHomePage: false

links:
- name: Presentations
path: https://presentations.geekmasher.dev/

customCSS:
- /css/custom.css

customJS:
- /js/particles_app.js

151 changes: 151 additions & 0 deletions content/22-05-16--blog-v2.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
---
title: "GeekMasher.dev - Blog V2"
summary: "After 3 years running a GatsbyJS React Blog, I have moved to using Hugo and Go. Here is why"
date: "2022-05-16"
slug: "/posts/geekmasher.dev-v2/"
banner:
path: /media/blog-v2/geekmasher-blog-banner-v2.jpg
caption: "Envato Elements"
link: https://elements.envato.com/blog-word-and-newspapers-PC6AD5P
tags:
- Development
- Go
- GoLang
- Hugo
- Now.sh
- GeekMasher

---

> Gatsby believed in the green light, the orgastic future that year by year recedes before us.
> It eluded us then, but that’s no matter—tomorrow we will run faster, stretch out our arms farther...
> And then one fine morning—So we beat on, boats against the current, borne back ceaselessly into the past. - F. Scott Fitzgerald, *The Great Gatsby*
## The Catalyst

After around 3 years running [a GatsbyJS based blog written in JavaScript / TypeScript](/posts/geekmasher.dev-my-first-post/), I have moved away from this tech-stack for a number of reasons.

Some good. Some bad.

For the 1st year (the honeymoon period), GatsbyJS was great.
I could customise to my heart's content and use tons of awesome JavaScript frameworks, etc.

But I started having second thoughts.

Every time I `cd`-ed into my blog's directory or went on the GitHub repository page to start up a new post, I had a couple of thoughts.

The first thing, was the number of security issues I kept getting due to the massive amounts of dependencies used by GatsbyJS.
These alerts came from both [Dependabot](https://docs.github.com/en/code-security/dependabot/dependabot-alerts/about-dependabot-alerts) (native in GitHub and PR creation) and [Snyk](https://snyk.io/series/open-source-security/software-composition-analysis-sca/) (weekly emails and PR creation) which are great tools but due to the nature of the blog, all of the security issues were irrelevant because of the threat model and context.

![dependabot security alerts](/media/blog-v2/dependabot-security-alerts.jpg)

In some cases, for certain dependencies at the time, there were no security patches for various packages I was using. For example, this [PR for `gatsby-remark-relative-images`](https://github.com/danielmahon/gatsby-remark-relative-images/pull/22) I created back in 2019.

The second, being [the code itself](https://github.com/GeekMasher/geekmasher.dev/tree/a9d76d75a50a1d81e13702af2ac1a272cc020876/src).
I had a lot of custom JavaScript / TypeScript code for my blog due to the heavy customisations I was doing to create the blog I wanted.
This came with the benefit of learning ReactJS and some UI development but now I want to move away from maintaining all this code.

These were some of the factors that made it hard for me to write blog posts and why it became distracting.
I need my full concentration before writing a post so I don't get distracted by my bad TypeScript code or non-existent security issues.

This means a change must happen...

I've dumped Gatsby, hello Hugo...


## What and why Hugo?

[Hugo](https://gohugo.io/) is a static site generator written in Go which generates HTML from Markdown files.
There is a massive community behind Hugo with fantastic support for many features, such as using [GoLang's templating syntax](https://pkg.go.dev/text/template) to create templates, and re-usable components.

So now that's answered what the reason was for picking Hugo.
Well, it was simple: no code, no problem.

Of course, there *is* code but I'm not the sole maintainer of that code. This is done by the awesome devs over in the [Hugo repo](https://github.com/gohugoio/hugo).
This means all of the custom code I spent hours writing, and hours figuring out how it worked, is now gone.

Dependency wise, I've dramatically reduced the dependencies I'm using from ~1,900 NPM packages to now XXX.

![dependabot dependencies](/media/blog-v2/dependencies.jpg)

There are some clear use cases where GatsbyJS shines which Hugo currently doesn't have which I wanted to point out.

**Some of the Pros:**

- Better SEO Optimisation
- Image Resizing & Optimisation
- Using community built React components
- Single paged application (the good and bad of that)

These are some good reasons for staying with GatsbyJS but not enough to keep me.

One of the smaller factors was, that non-JavaScript users can now access all the blog's content without having to download and read the JSON content files.
GatsbyJS, being a React based framework, rendered everything using JavaScript and when JavaScript was disabled the blog would just not work.
This is a pain for some users, and now has been completely eliminated since everything in Hugo is generated prior to deployment.


## Why not use Jekyll?

Well, that would be a great question if not for one fact:

> Jekyll is a blog-aware static site generator in Ruby - Jekyll GitHub Repository
I think I'll hedge my bets and [use Go over Ruby](https://insights.stackoverflow.com/survey/2021#technology).

*I joke*, all you Ruby fans, but it was a small factor in picking the framework to use.


## Theme and Customisations

I'm using a theme called [mini (or hugo-theme-mini)](https://github.com/nodejh/hugo-theme-mini) which is a simple and clean theme for a blog.

I have customised the templates a little to make it a bit more "me" but very little compared to GatsbyJS.

Extending the theme to suit my needs was very easy and straight forward.
I used vanilla CSS and JavaScript to get all the features I wanted.
This is both good and bad as you can't use nice SCSS or front-end frameworks but this makes it far easier.

The only JavaScript present on the page is the front-page profile header which doesn't even need to be run.
It's only for some flair.


## Deployment

One of the only things that is staying, is the use of Vercel / now.sh (RIP now.sh, amazing name and domain).

I can't say much more apart from [how easy it was to deploy a Hugo blog to Vercel](https://vercel.com/guides/deploying-hugo-with-vercel) with little effort.
After fighting with the deployment coming from NPM to Go, it was very strange forward.

I did have to set the following `Build Command` in Vercel configuration as Go wasn't present on the Vercel AWS build machines as I couldn't run the `hugo` command correctly.

```bash
amazon-linux-extras install golang1.11 && hugo --gc --minify --ignoreCache --verbose
```

A cloud service (built on AWS) which is easier than anything else in the market makes me very, very happy.

\*cough cough\*... AWS. \*cough cough\*... Azure.


## Conclusion

Hugo has make my life far easier since I converted my blog this month.
I wanted to focus more on writing content and not messing with the blog every time I started a new post.

I still really like GatsbyJS and it was a great learning experience for me but it is time to move on and focus on writing new posts.

So far, I highly recommend Hugo but keep in mind GatsbyJS has some features Hugo doesn't or is poor at.


## References

1. [Hugo](https://gohugo.io/)
1. [GatsbyJS](https://gatsbyjs.org/)
1. [Mini Go Theme](https://github.com/nodejh/hugo-theme-mini)
1. [Vercel](https://vercel.com/)

### Images / Banner

1. <a href="https://www.flaticon.com/free-icons/tear" title="tear icons">Tear icons created by Freepik - Flaticon</a>
1. <a href="https://www.flaticon.com/free-icons/heart" title="heart icons">Heart icons created by Freepik - Flaticon</a>

10 changes: 5 additions & 5 deletions content/pages/about.md → content/about/_index.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
---
title: "About me"
template: "page"
updated: "2020-08-24"
banner:
path: /media/hang-writing-blog-posts-at-geekmasher.jpg
caption: "About GeekMasher"
description: "About me"
date: 2022-05-06T12:53:36+01:00
ishome: false
enableComments: false

---

Greetings and salutations, my name is Mathew Payne also known online as [@GeekMasher][geekmasher-github] and I'm a lover of Technology<!--:technologist:-->, Information Security :lock:, and Developing<!-- :keyboard: --> :wrench: in a number of languages.
Expand Down
Loading

1 comment on commit 6720195

@vercel
Copy link

@vercel vercel bot commented on 6720195 May 16, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

geekmasher.dev – ./

geekmasherdev-git-master-geekmasher.vercel.app
geekmasherdev-geekmasher.vercel.app
geekmasher.dev

Please sign in to comment.