-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Migrate to Hugo * Update Vercel config * Finialise blog v2 post
- Loading branch information
1 parent
0189ed5
commit 6720195
Showing
193 changed files
with
747 additions
and
48,354 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -85,4 +85,7 @@ typings/ | |
|
||
public/ | ||
|
||
.vercel | ||
.vercel | ||
.hugo_build.lock | ||
**/.DS_Store | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
themes/mini | ||
static/media | ||
public |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
|
||
--- | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. | ||
|
||
 | ||
|
||
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. | ||
|
||
 | ||
|
||
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> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
6720195
There was a problem hiding this comment.
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