Ever wondered what how hard it is to migrate away from WordPress. For example Hexo which builds static HTML files from markdown posts and pages?
My journey of migrating from WordPress to Hexo.io
Installation
Installation was easy, and straight forward.
- Install node.js
- Install git
- Run
npm install hexo-cli -g
Then followed up with running the following in a folder where I want the blog source files to be created:
hexo init
npm install
hexo generate
hexo server
And it was accessible via http://localhost:4000
{% asset_img 1.Post-Installation.jpg Post Installation %}
Configuration
Blog Config
Setup _config.yml
. Changed the following for this blog:
`\
Site
title: codePERF [dot] NET subtitle: code is art description: .NET Blog focusing on performance and architecture by Michal Ciechan author: Michal Ciechan …
URL
If your site is put in a subdirectory, set url as ‘http://yoursite.com/child’ and root as ‘/child/’
url: http://www.codeperf.net … `\
Also changed the following
`\
Writing
… post_asset_folder: true … highlight: enable: true line_number: false … `\
Hexo will create a folder every time you make a new post with the hexo new [layout] <title>
command. This asset folder will have the same name as the markdown file associated with the post. Place all assets related to your post into the associated folder, and you will be able to reference them using a relative path, making for an easier and more convenient workflow.
The line_number: false
property removes line numbers from code blocks, so that it is easier for readers to copy code from your site. I hate sites with line numbers enabled!
Theme
Install theme by pasting the themes source into \themes\
folder (e.g. BootstrapBlog
theme) and changing _config.yml
theme property to same name as the folder (BootstrapBlog
) that you just pasted into.
`\
…
Extensions
Plugins: https://hexo.io/plugins/
Themes: https://hexo.io/themes/
theme: BootstrapBlog … `\
The site now looked like the following:
{% asset_img BootstrapBlog.Theme.jpg Post Installation %}
Writing a Blog post
Create an empty post by using the CLI:
hexo new "Migrating from WordPress to Hexo"
This generates the following MarkDown file representing the post
blog root
+---source
| +---_posts
| | Migrating-from-WordPress-to-Hexo.md
Open the file up and start writing your MarkDown. If you don’t know all of the MarkDown syntax the following couple of help pages might help:
The most common ones I use are:
Headers
# Header
## Sub Header
Links Click this Inline Link for more info
[Click this ReferencedLink](1) for more info.
... somewhere else in the document, usually at the bottom
[1]: http://someotherlink/
Lists 1. First Numbered Item 2. Second Numbered Item
- Bullet List Item 1
- Bullet List Item 2
Code
This is some `inline` piece of code
`Or just a single line of code`
Code Block or use back ticks to denote code
Image
{% asset_img image.name.jpg Some Title %}
Read More
Read more links can be achieved by adding <!-- more -->
to the article. Anything after this tag, will be truncated in post excerpts such as on my homepage.
Testing & Preview
For Previewing my Markdown posts I used Atom editor with a number of Markdown plugins including Live Preview. I found this worked best for me after trying a number of editors.
I will make a future post and possibly a video series of the editors I tried and my reviews.
Atom Editor – Markdown Live Preview
{% asset_img Atom-LivePreview.jpg Atom Editor Markdown Live preview %}
Testing
For testing I ended up going with Hexo server by executing the following in the project dir:
> hexo generate
> hexo server
{% asset_img HexoCliOutput.jpg Hexo CLI Output%}
Whenever I changed a file, it would automatically notice, regenerate latest files and all I had to do was refresh the browser.
Althought whenever I changed any of the config, I had to close the server (Ctrl
+ C
) and then run the following commands
\project> hexo clean
\project> hexo generate
\project> hexo server
But I had this as one command using the &
as a in my server window, so all I had to do in the end, was stop the server, press Up key, and hit enter.
\project> hexo clean & hexo generate & hexo server
Migrating posts
Watch out for part 2 of this series which will discuss in depth my journey of Migrating all posts into Hexo!