Over the past weekend, I noticed that my blog is not available since azure has disabled hosting of my WordPress blog. It happened because I ran out of my free credits for the current month. I started looking for alternate options for hosting WordPress. That’s when I came across (Static Generator is All a Blog Needs - Moving to Octopress). I decided to give it a try.

Below are the main steps which I followed for migrating to Octopress

Documentation

  • Read documentation of Octopress here and Jekyll here

Setup

  • Install Chocolatey as mentioned in documentation here Below command can be run on cmd.exe open as administrator
cmd.exe
1
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
  • As mentioned in octopress documentation, ensure Git, ruby and devkit are installed. Cholocatey way of installation can be found in git, ruby , devkit. Below commands can be run on cmd.exe
cmd.exe
1
2
3
choco install git.install
choco install ruby
choco install ruby2.devkit
  • By default, devkit is installed in C:\tools\. Move in devkit folder and run below commands
cmd.exe
1
2
3
ruby dk.rb init
ruby dk.rb install
gem install bundler

Install Octopress

cmd.exe
1
2
3
4
git clone git://github.com/imathis/octopress.git octopress
cd octopress
bundle install
rake install // Install default Octopress theme

Install Octostrap3 theme & Customize

  • Since I didn’t like the default theme much, I installed Octostrap3 theme as mentioned here
cmd.exe
1
2
git clone https://github.com/kAworu/octostrap3.git .themes/octostrap3
rake "install[octostrap3]"
  • Fix up all issues. The date displayed as “Ordinal” can be fixed by updating _config.yml file as mentioned in their blog. Below is the config which I used
_config.yml
1
date_format: "%e %b, %Y"
  • I made few more changes for changing the navigation header color, color of code blocks and also to include a side bar with categories. The changes are as below

Changing color of code blocks is done by commenting below line in octopress\sass\custom\_colors.scss

1
\\$solarized: light;

Navigation header color is changed by adding below to octopress\sass\custom\_styles.scss

1
2
3
4
5
6
7
8
9
.navbar-default {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#263347),to(#263347));
}
.navbar-default .navbar-brand {
    color: #fff;
}
.navbar-default .navbar-nav>li>a {
    color: #fff;
}

Adding category side bar is done by following steps mentioned in Category List Aside

Google Analytics Integration

Next step was google analytics integration. Detailed steps for this is available on various blogs. Below is what I followed

  • Sign up for google analytics ID in here
  • Update _config.yml with google analytics ID
1
2
# Google Analytics
google_analytics_tracking_id: UA-XXXXXXXX-1
  • Update google_analytics.html file with below
1
2
3
4
5
6
7
8
9
10
   <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-XXXXXXXX-1', 'auto');
    ga('send', 'pageview');

  </script>
  • UA-XXXXXXXX-1 can be replaced with site.google_analytics_tracking_id enclosed in double braces/curly brackets
  • Log in to Google Analytics site and navigate to Admin >> View >> Filters
  • Add a new filter to exclude all traffice to hostname “localhost”. This will help to exclude all site visit done for development/ preview purpose.

Sample Post

  • Now create a Hello World post and check how it look
cmd.exe
1
2
3
rake new_post["Hello World"]
rake generate
rake preview

rake preview mounts a webserver at http://localhost:4000. By opening a browser window and navigating to http://localhost:4000 will preview the Hello World Post

Deploying to GitHub Pages

Detailed instructions can be found in Deploying to Github Pages. Below are high-level steps copied from there - Create a GitHub repository with name yourusername.github.io - Run below command. It will prompt for GitHub URL, which needs to be filled in

cmd.exe
1
2
3
rake setup_github_pages // This does all configurations
rake generate
rake deploy
  • Now we can commit the source
cmd.exe
1
2
3
git add .
git commit -m 'your message'
git push origin source

Custom Domain

  • Create a file named CNAME in blog source
  • Update it with custom domain name. It has to be a sub domain (www.examplesubdomain.com)
  • Update the CNAME dns setting in your domain provider to point to https://username.github.io
  • If top-level domains (exampletopdomain.com) are needed, then configure A record to point to IP address 192.30.252.153 or 192.30.252.154.

Migrating Old blog Post from word press

After completing above steps, a new octopress blog is ready to go . Below are the steps which I followed to migrate old blog posts from word press.

  • Clone Exitwp
  • Follow the steps mentioned in readme.md.

    • Export old wordpress blog using WordPress exporter in tools/export in WordPress admin
    • Copy xml file to wordpress-xml directory
    • Run python exitwp.py in the console from the same directory of unzipped archive
    • All blogs will be created as separate directory under build directory
    • Copy relevant folders to source folder of the blog
  • Find broken redirection links and fix

    • The redirection links are now changed to something like {site.root}blog/2017/04/07/mountebank-creating-a-response-based-on-a-file-template-and-modifying-it-based-on-request-part-1/
  • Find broken image links and fix
    • Inorder to make it easier for migrating to another platform later, I created a new config value in _config.yml as below . images_dir: /images
    • The image links are not pointing to {site.images_dir}/2017/04/27/Mountebank_XML_Response_Folder-Tree.jpg

SEO Optimisation in Octopress

  • In rake file, add below two lines post.puts "keywords: " and post.puts "description: "
  • Final content will look like below
cmd.exe
1
2
3
4
5
6
7
8
9
post.puts "---"
post.puts "layout: post"
post.puts "title: \"#{title.gsub(/&/,'&')}\""
post.puts "date: #{Time.now.strftime('%Y-%m-%d %H:%M:%S %z')}"
post.puts "comments: true"
post.puts "categories: "
post.puts "keywords: "
post.puts "description: "
post.puts "---"
  • Add relevant Keyword and description to all pages

Comments