December 29, 2016 - VitoMd and the Evil Machine

Migrating this blog from Wordpress to Jekyll - Part 2

Here is the second part of my experience migrating my blog to Jekyll. You can check the first part here: Migrating this blog from Wordpress to Jekyll - Part 1

code

I will explain how to import comments, add SEO, add custom domain, add syntax highlight and write the first post in Jekyll. Let´s begin.

Importing Comments

Importing comments was really easy, as I used Disqus the process was just to copy a little javascript, the universal embed code. More info here

Adding SEO

There are basically four things to have in mind to improve the SEO (Search Engine Optimization) of your blog.

1) Improve site URLs: They have to be descriptive and friendly. I already modified how the URLs look in the previous post, so nothing to do here.

2) Custom 404 Pages: The theme that I choosed already had a 404 page so nothing to do here.

3) Sitemap: I installed the sitemap plugin. It´s just a two step process:

  • Add gem jekyll-sitemap to your site’s Gemfile and run bundle

  • Add the following to your site’s _config.yml:

gems:
  - jekyll-sitemap

Run jekyll serve and check the generated _site folder for the sitemap.xml if it’s correct.

4) SEO I installed the SEO plugin This is a 3 step process:

  • Add gem jekyll-seo-tag to your site’s Gemfile and run bundle

  • Add the following to your site’s _config.yml:

gems:
  - jekyll-seo-tag
  • Add {{seo }} right before </head> in your site’s template(s):

The SEO tag will use the variables in your site’s _config.yml like title, description, url, author, twitter user name, etc to generate meta tags that help search engines to learn about your site. There are other options, that you can read in the Usage section in the SEO plugin github.

Here is some options that I use in my _config.yml file

twitter:
  username: vitomd
description: "Helping developers improve their code and their life"
title: "VitoMd and the Evil Machine"
logo: logo.png
social:
  name: vitomd
  links:
    - https://twitter.com/vitomd
    - https://github.com/vitogit
    - http://stackoverflow.com/users/5886252/vitomd

Also you can add some options to each post, like author, title, related image, etc

title: "Migrating this blog from Wordpress to Jekyll - Part 1"
author:
  twitter: vitomd
categories:
- Blog
tags: [Blog, Jekyll, Wordpress]
image: /assets/imgs/blog1.jpeg

This is useful when your posts are shared in twitter, they will look nice and with a related image and proper title.

If you want some more details you can read this post: http://jekyll.tips/jekyll-casts/seo-in-jekyll/

Custom domain in Github pages

1) Go to your repository settings , add your custom domain , in my case vitomd.com/blog

2) I wanted to support also www.vitomd.com/blog, github do this automatically redirecting both ways.

3) I followed the instructions in https://help.github.com/articles/setting-up-an-apex-domain/ to configure my custom domain.

Syntax highlighting

I had some problems with the syntax highlighting, basically wasn not working. After some digging I found that my forked theme had an old Jekyll version that had some bugs. So I deleted the gemfile.lock and bundle install again.

In _config.yml I change highlighter: pygments to highlighter: rouge and it worked but I wasn’t pleased with the syntax coloring.

To check which themes are avaialble in rouge executing rougify help style will give you a list like:

available themes:
  base16, base16.dark, base16.monokai, base16.monokai.light, base16.solarized, base16.solarized.dark, colorful, github, gruvbox, gruvbox.light, molokai, monokai, monokai.sublime, thankful_eyes

and then to generate the syntax.css rougify style monokai.sublime > _includes/css/syntax.css

The imported blog post weren’t highlighted property because they were in HTML , so what I did was to convert some of them to markdown format and edit them a bit, using this awesome tool https://github.com/domchristie/to-markdown

Writing our first post in Jekyll

To write my posts in markdown format I use Stackedit synced with google drive so I can use it online and ATOM with markdown-writer and the Markdown preview to write locally.

To create a new post in markdown-writer just open the ATOM palette cmd+shift+p and select Markdown Writer: New post , add the title and edit the front-matter, like author, categories, tags, image, etc A new file will be added to _posts folder. Write your post and preview it. cmd+shift+p and select Markdown preview

Also run your local server to make sure everything is fine.

jekyll serve --baseurl=""

Then just add, commit and push your new post. It will be online immediately.

git add .
git commit -m "New post"
git push origin HEAD
Share this post on Twitter

Comments