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
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 was really easy, as I used Disqus the process was just to copy a little javascript, the universal embed code. More info here
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
</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/
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.
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
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
Comments