From a WordPress.com's blog to Jekyll and then to Hugo
I promise, I won’t change it again. I had (still have it) my first blog on WordPress.com but I migrated it to GitHub Pages using Jekyll, after 2 years using it I made the decission to replace Jekyll for Hugo.
The decision was made based on these points:
- I didn’t want waste my time fixing Ruby (Jekyll) dependencies every time I wanted to write a new blog post.
- I wanted to continue using Github Pages with the same workflow and reuse previous published content.
Process
1. Migrate a Blog from WordPress.com to GitHub Pages using Jekyll
To do that, just follow next 2 articles:
- Migrating WordPress.com’s blog to GitHub Pages with Jekyll - Part 1
This article explains how to export WordPress.com’s blog and serve a static website in GitHub Pages using a Jekyll. - Migrating WordPress.com’s blog to GitHub Pages with Jekyll - Part 2
This 2nd article explains how to customize the recently created static website: Themes, Layouts, Pagination and Excerpts, also, I’m sharing a Python script to convert HTML post files to Markdown.
2. From Jekyll to Hugo
Once migrated your blog to GitHub Pages and if you want to change Jekyll to Hugo, follow next steps.
2.1. Pre-requisites
This script installs git
, hub
, configures git and authentication method, tests hub
, etc.
source <(curl -s https://raw.githubusercontent.com/chilcano/how-tos/master/src/git_and_hub_setting_in_linux.sh) \
-u=Chilcano \
-e=chilcano@intix.info
This script installs latest Hugo CLI (hugo
)
curl -s https://raw.githubusercontent.com/chilcano/how-tos/master/src/hugo_setting_in_linux.sh | bash
2.2. Convert the Jekyll website to Hugo content
You have to go along below steps:
- Clone/download existing Jekyll GitHub Pages site.
- Import existing downloaded site using Hugo CLI.
- Run the site locally using Hugo CLI.
- Migrate existing Jekyll theme or download new Hugo theme.
- Re-run the site locally using Hugo CLI.
- Publish the Hugo site on a GitHub Pages new repository.
- Configure the published GitHub Pages Hugo site.
- Check everything!
But if you don’t want to go through above steps manually, no worries, I’ve created a bash script to do everything automatically, only you have to run below command:
Running the script in this way (source <(curl -s https://url-to-my-bash) --my-params
), we will run the bash in the current shell context which allow us to change directory. This script also will publish the imported site to GitHub in Hugo format.
source <(curl -s https://raw.githubusercontent.com/chilcano/how-tos/master/src/migrate_jekyll_to_hugo.sh) \
--help
source <(curl -s https://raw.githubusercontent.com/chilcano/how-tos/master/src/migrate_jekyll_to_hugo.sh) \
--ghuser=<github_usr> \
--source_url=https://github.com/<usr>/<jekyll_repo> \
--destination=<dir> \
--theme=<hugo_theme>
Where:
--ghuser
or-u
: The GitHub user.--source_url
or-s
: The website URL that we are going to migrate to Hugo.--destination
or-d
: The GitHub repository name that will contain the migrated website.--theme
or-t
: The theme name that the Hugo website will use. The theme is downloaded from Hugo Themes website.
source <(curl -s https://raw.githubusercontent.com/chilcano/how-tos/master/src/migrate_jekyll_to_hugo.sh) \
-u=chilcano \
-s=https://github.com/chilcano/ghpages-holosec.git \
-d=site01 \
-t=hugo-theme-cactus
I’m using this directory structure:
$ tree . -d -L 4 -I 'docs|resources|blog20*'
.
├── ghp-content
└── ghp-scripts
├── content
│ └── post
├── layouts
│ ├── _default
│ ├── partials
│ ├── post
│ └── shortcodes
├── static
│ ├── assets
│ │ ├── _old_
│ │ ├── img
│ │ └── pages
│ ├── blog
│ ├── css
│ └── images
└── themes
└── hugo-theme-cactus
├── exampleSite
├── images
├── layouts
└── static
23 directories
Bear in mind these considerations:
- The
config.toml
file is underghp-scripts/
. - The new
content
,layout
,static
andthemes
must be created underghp-scripts/
. - Before publishing the new content, it must be generated running
hugo
command fromghp-scripts/
. The generated content will be generated underghp-content/docs/
.
2.3. Serving Hugo content and publishing content
To server the site locally you have to run hugo serve
command from ghp-scripts/
folder. The content will be generated in memory.
hugo server -D --bind=0.0.0.0 --baseURL=http://<your_hugo_ip_address>:1313/
Changing the directory, running the above command, going back to parent directory to run another git commands is annoying, to relef this I created a bash 2 scripts, both can be executed from parent directory.
You can download below bash scripts in the root of your cloned Hugo website and execute from there.
Script to server the Hugo content locally
source <(curl -s https://raw.githubusercontent.com/chilcano/how-tos/master/src/hugo_run_locally.sh)
Script to publish Hugo content to GitHub Pages
source <(curl -s https://raw.githubusercontent.com/chilcano/how-tos/master/src/hugo_publish_site.sh) \
--commit_msg=my-message | -m=my-message
That’s all. Hope this is useful.