migrate

Michal Ciechan

Migrating to Hexo Blog

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.

  1. Install node.js
  2. Install git
  3. 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:

  1. hexo init
  2. npm install
  3. hexo generate
  4. 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!