title: Moving from Blogger to GitHub Pages using Hugo
date: 2020-10-20 21:24:00 +0200 CEST
draft: false
author: John Roos
----
For a while now I have felt that it takes too long time for me to write blog posts. I spend a long time figuring out how to make the post look right, when I should be spending time on the content. In the end this puts me off writing, because I know it will require a lot of effort. Because of that I have now moved the blog from Blogger to GitHub Pages using Hugo as static site generator to make it easier and quicker to write content. This is a brief summary of my experience so far.
Why Blogger in the first place?
Back in 2011 I was looking at different alternatives for blogging platforms. I found quite a few that was ok, but in the end I wanted to have full control over layout and I wanted to be able to write my own HTML, CSS and JavaScript. I ended up choosing Blogger for the simple reason that I got full control over all code, both front end and back end.
I then tried out dozens of Blogger themes only to find that none had what I wanted. There was always something missing. So I ended up doing my own theme.
Creating a theme took a while, but in the end it was a fun little project that basically never ended. I fetched JavaScript libraries and CSS from google drive and was able to generate entire pages from my own JavaScript fetching data from some of my repos on GitHub. Perhaps not that useful, but fun to do. And something that most blogging platforms back then did not allow.
Initial requirements
Lets switch back to 2020 again. I was looking at new blogging platforms and decided that I need to figure out what I actually want. I came to the conclusion that I had three initial requirements.
- Easier and faster to write posts
- Write posts in markdown
- Full control over layout
Writing a blog post should be all about content and not layout. I don’t want to be forced to do HTML when I write posts. It must be fast and easy. I am used to write technical documentation in markdown, and I really like the simplicity of it. If I can write blog posts in markdown that would be perfect.
Full requirements
After reviewing a few blogging platforms I came to the conclusion that I probably want to use a static site generator. I found a few which was interesting, like Jekyll and Hugo for example. Now it was time to figure out and write down the full list of requirements.
- Easier and faster to write posts
- Write posts in markdown
- Full control over layout
- Ability to have pages generated by JavaScript
- Ability to have inline HTML, CSS and JavaScript in individual posts
- Preserve old URLs so no links are broken
- Good syntax highlighting, preferably customizable
- Built in support for version control
- Ability to migrate existing comments so no comments are lost
This basically means that I should be able to do what I did in 2011 on Blogger.
Nice to have requirements
Then there were a few things that I would like to have, but can live without.
- Twitter integration
- Custom error pages
- Use third party commenting system to preserve comments for future migrations
- Open source
- Good tools for monitoring traffic
Ease of use and simplicity made the decision
Today there are a lot of static site generators out there, and a lot of them are very good. What I initially liked with Hugo was that it only required one file to be downloaded to get started (on Windows). That’s it. To have something to compare with, Jekyll required over 30 000 files to be downloaded from a myriad of dependencies. I like it clean and simple, and Hugo provided that.
Building a theme
As I expected, I couldn’t find a theme for Hugo which I really liked, so I ended up doing my own theme. That does require some time, and while the official documentation is good, I find it a bit hard to understand at times. It feels like the documentation assumes that you already know what you are reading about. Perhaps its just me getting old. Fortunately there are a lot of other sources out there where I could find explanations about how things work.
The site you are looking at is built completely from scratch using some of my previous design elements, but with a lot less code running in the browser. The entire site is divided into three repositories. Content, theme and static HTML. This makes it easy to either move to a new platform, or use a different theme.
Result
This blog looks almost the same as before, but structured completely different. My theme on Blogger was about 1200 lines of code, in one file. The Hugo version is around 150 lines, divided on 10 files. That means its simple to understand, easy to modify and fast to load. All posts are migrated from HTML to markdown. Old URLs are redirected properly and comments are migrated to Disqus. Writing a blog post is a lot more fun.
We had a great time Blogger. I still like you a lot. Its not you, its me.
Note: The theme has been updated since this post was published. Comparisons were made at the time of writing.
Moving from Blogger to GitHub Pages using Hugo
For a while now I have felt that it takes too long time for me to write blog posts. I spend a long time figuring out how to make the post look right, when I should be spending time on the content. In the end this puts me off writing, because I know it will require a lot of effort. Because of that I have now moved the blog from Blogger to GitHub Pages using Hugo as static site generator to make it easier and quicker to write content. This is a brief summary of my experience so far.
Why Blogger in the first place?
Back in 2011 I was looking at different alternatives for blogging platforms. I found quite a few that was ok, but in the end I wanted to have full control over layout and I wanted to be able to write my own HTML, CSS and JavaScript. I ended up choosing Blogger for the simple reason that I got full control over all code, both front end and back end.
I then tried out dozens of Blogger themes only to find that none had what I wanted. There was always something missing. So I ended up doing my own theme.
Creating a theme took a while, but in the end it was a fun little project that basically never ended. I fetched JavaScript libraries and CSS from google drive and was able to generate entire pages from my own JavaScript fetching data from some of my repos on GitHub. Perhaps not that useful, but fun to do. And something that most blogging platforms back then did not allow.
Initial requirements
Lets switch back to 2020 again. I was looking at new blogging platforms and decided that I need to figure out what I actually want. I came to the conclusion that I had three initial requirements.
- Easier and faster to write posts
- Write posts in markdown
- Full control over layout
Writing a blog post should be all about content and not layout. I don’t want to be forced to do HTML when I write posts. It must be fast and easy. I am used to write technical documentation in markdown, and I really like the simplicity of it. If I can write blog posts in markdown that would be perfect.
Full requirements
After reviewing a few blogging platforms I came to the conclusion that I probably want to use a static site generator. I found a few which was interesting, like Jekyll and Hugo for example. Now it was time to figure out and write down the full list of requirements.
- Easier and faster to write posts
- Write posts in markdown
- Full control over layout
- Ability to have pages generated by JavaScript
- Ability to have inline HTML, CSS and JavaScript in individual posts
- Preserve old URLs so no links are broken
- Good syntax highlighting, preferably customizable
- Built in support for version control
- Ability to migrate existing comments so no comments are lost
This basically means that I should be able to do what I did in 2011 on Blogger.
Nice to have requirements
Then there were a few things that I would like to have, but can live without.
- Twitter integration
- Custom error pages
- Use third party commenting system to preserve comments for future migrations
- Open source
- Good tools for monitoring traffic
Ease of use and simplicity made the decision
Today there are a lot of static site generators out there, and a lot of them are very good. What I initially liked with Hugo was that it only required one file to be downloaded to get started (on Windows). That’s it. To have something to compare with, Jekyll required over 30 000 files to be downloaded from a myriad of dependencies. I like it clean and simple, and Hugo provided that.
Building a theme
As I expected, I couldn’t find a theme for Hugo which I really liked, so I ended up doing my own theme. That does require some time, and while the official documentation is good, I find it a bit hard to understand at times. It feels like the documentation assumes that you already know what you are reading about. Perhaps its just me getting old. Fortunately there are a lot of other sources out there where I could find explanations about how things work.
The site you are looking at is built completely from scratch using some of my previous design elements, but with a lot less code running in the browser. The entire site is divided into three repositories. Content, theme and static HTML. This makes it easy to either move to a new platform, or use a different theme.
Result
This blog looks almost the same as before, but structured completely different. My theme on Blogger was about 1200 lines of code, in one file. The Hugo version is around 150 lines, divided on 10 files. That means its simple to understand, easy to modify and fast to load. All posts are migrated from HTML to markdown. Old URLs are redirected properly and comments are migrated to Disqus. Writing a blog post is a lot more fun.
We had a great time Blogger. I still like you a lot. Its not you, its me.
Note: The theme has been updated since this post was published. Comparisons were made at the time of writing.
- Written by John Roos on October 20, 2020