Recently I’ve decided to migrate my blogging framework from Hexo to Jekyll. Here are some notes that I took for recording the migration process.
Install Jekyll
Here I created a Dockerfile for my blogging environment.
From Hexo to Jekyll
Since I’m migrating to Jekyll, I had to clean my bruce30262.github.io repository and use Jekyll to build a new one. Here’s what I did:
- Remove all the contents inside the repo ( except the
.gitdirectory ). jekyll new myblogto create a new blog.- Move all the files from
myblogto the root directory, then removemyblog. - Add a new Gemfile.
bundle installto install the gems.
One of the problem I’ve encountered is that jekyll-admin was not installed even if I put it in my Gemfile. I had to use gem install jekyll-admin to fix the issue.
After that we can launch the blog with bundle exec jekyll serve --host=0.0.0.0, then go to 0.0.0.0:4000 to see if it work. To manage the blog just go to 0.0.0.0:4000/admin.
Working inside the Docker
We can mount our working directory to the container and start working inside the docker with the following command:
1
2
3
4
IMG="some image name"
CTN="some container name"
docker run -e TERM --privileged --security-opt seccomp:unconfined -p 4000:4000 -v ~/bruce30262.github.io:/app --name=$(CTN) -it bruce30262/$(IMG) /bin/bash -c 'cd /app && bundle exec jekyll serve --host 0.0.0.0'
The Jekyll docker container uses user jekyll ( uid = 1000 ) to configure the blog, so it’ll be the best if your own uid on the linux host is also 1000, making you able to work both outside/inside the docker ( since you have the same uid, working as jekyll inside the docker = working as yourself on the linux host ) without having the permission problem.
Install the theme
I’m using Minimal Mistakes as my theme. I like its skins, and it’s well documented :).
To use the theme on github page you’ll have to set the remote-theme in _config.yml:
1
remote_theme: bruce30262/minimal-mistakes
After that you can just follow the steps in the documentation to configure all the thing. The offcial config setting is also worth reading.
Customizing the theme
I’ve forked the theme repo so I can apply my own customized theme to the blog.
For example I preferred the default syntax highlighting and want to use it to display code no matter which skin I choose. So I follow the steps mentioned in this issue and modified the content of assets/css/main.scss:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@import "minimal-mistakes/skins/default"; // skin
/* default syntax highlighting (base16) */
$base00: #263238 !important;
$base01: #2e3c43 !important;
$base02: #314549 !important;
$base03: #546e7a !important;
$base04: #b2ccd6 !important;
$base05: #eeffff !important;
$base06: #eeffff !important;
$base07: #ffffff !important;
$base08: #f07178 !important;
$base09: #f78c6c !important;
$base0a: #ffcb6b !important;
$base0b: #c3e88d !important;
$base0c: #89ddff !important;
$base0d: #82aaff !important;
$base0e: #c792ea !important;
$base0f: #ff5370 !important;
@import "minimal-mistakes"; // main partials
For the color code you can just check the documentation.
Migrating Disqus comment
Migrating Disqus comment to a new blog is always a troublesome :/
To enable the disqus feature use the comments setting in _config.yml
1
2
3
4
comments:
provider: "disqus"
disqus:
shortname: (disqus_shortname)
Also make sure to set the url key in _config.yml if you’re using the github page, or else the disqus_config function will not work.
After that, follow the steps from the disqus website, use the URL Mapper to migrate the threads.
Migrate the blog posts
Simply copy the markdown files to the _posts folder. Remember to rename those files that don’t fit the Jekyll naming convention ( yyyy-mm-dd-title.md). Also in order to show the autho_profile ( left side of the page ), you’ll have to remove the author metadata field in each post.
After that just fix some format ( especially the code hightlighting ) and we’re all good.
Comments powered by Disqus.