It took more than a year!

Aside from my blogs in Opensource.com I tried to update this blog, but I had trouble with Jekyll:

1.) Hard to update: I've used Jekyll since 2017, but I got to delete my old post due to deprecation errors which broke the blog in the long run, updating Jekyll made more hardwork into maintaining Jekyll than making the blog work.

2.) Themes are hard to find: Many will say Jekyll themes are everywhere, but not all of them will work with the versions that we are working on, therefore there might themes that don't work even you try it, and as your theme deprecate your blog will be hard to maintain.

3.) If you messed up you will start again from scratch: this happened to me twice when I ignored deprecation warnings, first its hard to maintain and made to the point that I do a weekly build just to check deprecations for me to maintain the blog, which made it harder in the long run.

So if it doesn't work, we move forward

I manage to look for alternative to Jekyll and I found Hugo and this is the upside of this framework:

1.) You can make posts and drafts based on your parameters.

2.) Hugo is developed using Go, and it's an template apply type framework, basically like Jinja templates in Python.

3.) Hugo is seperated to the webapp, as long you keep your config and posts you can migrate easily from theme and versions than Jekyll.

How I migrated from Jekyll to Hugo

First i cloned my old repository:

[aj@AJCanlasPC ~]$ git clone https://github.com/ajohnsc/ajohnsc.com.git

After that we need to understand the file structure of Jekyll

[aj@AJCanlasPC ~]$ cd ajohnsc.com
[aj@AJCanlasPC ajohnsc.com]$ tree 
.
├── 404.html
├── about.markdown
├── assets
│   └── blogpost
│       └── blog.png
├── CNAME
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.markdown
├── new_post.sh
└── _posts
    └── 2020-01-01-blogpost.md

We need now to understand what we need for Hugo

1.) All md files for the blogposts which is located in my _post directory

2.) All images in my blogposts that is located in assets directory

3.) CNAME file for the domain

Next is to use Hugo

[aj@AJCanlasPC ajohnsc.com]$ cd ..
[aj@AJCanlasPC ~]$ hugo new site ajohnsc.com --force

We need to add --force because the directory is already existing

next is to remove all unnecessary files

[aj@AJCanlasPC ajohnsc.com]$ rm 404.html
[aj@AJCanlasPC ajohnsc.com]$ rm about.markdown
[aj@AJCanlasPC ajohnsc.com]$ rm _config.yml
[aj@AJCanlasPC ajohnsc.com]$ rm Gemfile
[aj@AJCanlasPC ajohnsc.com]$ rm Gemfile.lock
[aj@AJCanlasPC ajohnsc.com]$ rm index.markdown
[aj@AJCanlasPC ajohnsc.com]$ rm new_post.sh

Then we move all assets from assets directory to static directory

[aj@AJCanlasPC ajohnsc.com]$ mv assets/* static/
[aj@AJCanlasPC ajohnsc.com]$ rmdir assets

Next is to convert my old posts to hugo format

In Jekyll we have:

File name and path:
_posts/date-blogpost-title.md

Inside the file:
---
layout: post
title: Blog post title
categories: jekyll update
---

In Hugo we should have:

File name and path:
content/post/blogpost-title.md

Inside the file:
---
title: Blog post title
date: date
---

To convert it migrated it manualy since I have few posts but you can do a bash or python script to make your life easier.

the structure will be like this:

[aj@AJCanlasPC ajohnsc.com]$ tree
.
├── archetypes
│   └── default.md
├── CNAME
├── config.toml
├── content
│   └── post
│       └── blogpost.md
├── data
├── layouts
├── static
│   ├── blogpost
│   │   └── blog1.png
└── themes

Then let's choose a theme then apply it, to apply a specific theme example for me I chose singular theme:

[aj@AJCanlasPC ajohnsc.com]$ git submodule add https://github.com/yasuoza/hugo-theme-singular.git singular

Then you need to add it in your config.toml:

[aj@AJCanlasPC ajohnsc.com]$ echo "theme = singular" >> config.toml

then configure and build the hugo site:

[aj@AJCanlasPC ajohnsc.com]$ hugo
Start building sites … 
hugo v0.84.3-A1B0353C+extended linux/amd64 BuildDate=2021-06-29T11:40:22Z VendorInfo=gohugoio

                   | EN  
-------------------+-----
  Pages            | 16  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 20  
  Processed images |  0  
  Aliases          |  4  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 36 ms

and move the .git directory to the newly created public directory

[aj@AJCanlasPC ajohnsc.com]$ mv .git public

lastly we can now push the newly migrated site to github.

[aj@AJCanlasPC ajohnsc.com]$ cd public
[aj@AJCanlasPC public]$ git add .
[aj@AJCanlasPC public]$ git commit -m "Migrated from Jekyll to Hugo"
[aj@AJCanlasPC public]$ git push -u origin master

Wait for github to acknowlege it and it will update your blog immediately.

Adding new post

To add new post you can run hugo new post post/<blogpost>.md

[aj@AJCanlasPC ajohnsc.com]$ hugo new post post/<blogpost>.md

the you will have a new entry in content/post/ directory

[aj@AJCanlasPC ajohnsc.com]$ ls content/post/<blogpost>.md

Then inside you will have something like this:

[aj@AJCanlasPC ajohnsc.com]$ cat content/post/<blogpost>.md
---
title: "<blogpost title>"
date: 20XX-XX-XXT00:00:00+08:00
draft: true
---

for you to check your edits that are in draft

[aj@AJCanlasPC ajohnsc.com]$ hugo server -D

and check it in your browser http://localhost:1313

then remove the draft: true parameter in the post to promote it in production and build it in hugo

the push it in your repository from the public directory.