Andrija's Blog

Functional design

Octopress publishing environment in the cloud

I was looking for a blog platform:

  • Good support for developers (sharing code snippets and github gists).
  • Highly customizable layout – I don’t have to depend on decision of some third party whether they will add a feature that I need
  • Ability to back up blog content.
  • Independency of hosting platform.
  • Ability to recreate a blog anywhere anytime.
  • Keeping a track of changes.

Octopress#

It sounds too good to be true, but the thing is you can find all these features in Octopress.

octopress.org :

Octopress is a framework designed by Brandon Mathis for Jekyll, the blog aware static site generator powering Github Pages

Some features of Octopress mentioned here also apply to Jekyll.

Good support for developers

In Octopress, there is great support for embedding code in your blog.

Highly customizable layout

You can customize anything on the blog. Big advantage is that there is no admin user interface that will interfere of changing anything on blog. Some people would consider this as a disadvantage, but I think that to have highly generic interface with ability to change anything in website is very hard to make and to maintain. If you want to add a feature, it would require you to have user interface to support it, which also mean additional user interface to maintain along with this feature. By not having any user interface and counting on user to change the blog manually, the possibilities are endless.
Of course this assumes that you know what you are doing which means that Octopress is not for anyone.
Read more on this topic in The best interface is no interface.

Ability to back up blog content

You are writing Octopress articles in plain text Markdown so there is no database to be backed up, there is no special data store to extract data from, and you just back up the files. Ever since Markdown became popular through Stackoverflow.com and Github, it is becoming more and more accepted in developer community as a common formatting syntax for documentation.

Independency of hosting platform

Final output of Octopress is static html-css-javascript, which means it can be hosted anywhere.

Ability to recreate a blog anywhere anytime

You are not depended on proprietary software or some closed platform to recreate the output of your blog, you can do that anytime you want.

Keeping a track of changes

To start using Octopress, you need to fork it on Github, which means you will immediately have Git repository for Octopress. Anything you change or publish can be committed in Git. Is there any better way to track changes in blog? I do not think so.

Nitrous.IO#

I found about Nitrous.IO on Joe Marini’s post Tools for Developing on ChromeOS. It seemed very interesting because it was a remote view on VM in browser, rendered in HTML. And as we know once rendered in HTML it can be displayed and worked with anywhere, no plugins or third-party software required. I gave it a try and created Ruby box. What I got is Linux VM running:

1
2
lsb_release -a
# Ubuntu 12.04.3 LTS.

Once I have setup the box, I went on to bonus page and connected all of my online identities to Nitrous.IO to get additional N2O (N2O is like are Nitrous.IO currency for upgrading your box).

Octopress + Nitrous.IO#

I am switching workstations and environments a lot. On the other hand, Octopress requires some stuff to be preinstalled in your local environment. I also switch OSs so having to setup environment on Windows all the time can be time consuming. I figured I could have an always Octopress ready environment on Nitrous.IO. This is only way to have Octopress always available. The trend how cloud computing is progressing, I think that personal workstation on remote VM will be more and more practice.

Setting up#

In summary

These are the steps that we will need to go through to setup a blog:

  • Register on Github
  • Register on Nitrous.IO
  • Change a Ruby version
  • Clone and setup Octopress

I have chosen to host the blog on Github, which means that address will be [username].github.io.

I am hosting this blog on Github and I will describe here how to host it there. You do have other options available, and since blog is generated in plain html-css-javascript, it can be hosted anywhere.

Register on Nitrous.IO and create a Ruby box. I am still not sure what are the differences between other boxes, for example I have node.js installed on Ruby box so I’m not sure what is special about node.js box.

Box will be created in a few seconds and ready to roll. You will see workspace folder in folder tree on a side.

Further, I have used Octopress setup.

Git should be already installed, but you can check:

1
2
git --version
# git version 1.8.4.3

Check Ruby version:

1
2
ruby --version
# ruby 2.0.0p247 (2013-06-27 revision 41674) [x86_64-linux]

Ruby version required for Octopress is 1.9.3. So, we need to change a Ruby version. I used rbenv:

1
2
3
4
5
git clone https://github.com/sstephenson/rbenv.git ~/.rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(rbenv init -)"' >> ~/.bashrc
git clone git://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
source ~/.bashrc

At this point, you might need to restart a console. Opening new console should do it. Install Ruby 1.9.3:

1
rbenv install 1.9.3-p0

Clone Octopress from Github. I created a folder inside workspace folder:

1
2
git clone git://github.com/imathis/octopress.git ~/workspace/octopress
cd ~/workspace/octopress

Setup use of Ruby 1.9.3 in local folder (your path should be now ~/workspace/octopress):

1
2
rbenv local 1.9.3-p0
rbenv rehash

Install dependencies:

1
2
3
gem install bundler
rbenv rehash
bundle install

Install default Octopress theme:

1
rake install

Deploying to Github Pages #

As I said before, if you are planning to deploy to Github pages, your address will be http://username.github.io. You need to create a repository which will be called username.github.io. Here are detail instructions, but here I will give summary of all the steps you need to do.

Run:

1
rake setup_github_pages

It will ask you for repository url, which it supposed to be https://github.com/username/username.github.io.git. Github recommends HTTPS over SSH, why?

Make sure are have Github email and username configured:

1
2
git config --global user.email "your email"
git config --global user.name "username"

Next, push the current source to source branch:

1
2
3
git add .
git commit -m "commit message"
git push origin source

Next, generate and deploy.

1
2
rake generate
rake deploy

To clarify, you will have 2 branches in repository:

  • source branch holding the source of the blog, which you are using for generation.
  • master branch which will be static generated content. Github pages are configured so anything that appears in repository called username.github.io in master branch will appear on your Github page.

rake generate will generate static content locally in _deploy/ folder. rake deploy will push the changes to master branch.

At this point, you are done. It will take few minutes for Github to publish the page for the first time, later on it will be pushed much quicker.

Blogging#

Helpful links:

Some quick notes:

  • Configuration file is _config.yml. You can configure all global settings there like title, description, add Github account, Disqus account etc.
  • Create a new post: rake new_post["post title"] this will create a new markdown document in source/_posts.
  • Preview the blog:
1
2
3
rake generate   # Generates posts and pages into the public directory
rake watch      # Watches source/ and sass/ for changes and regenerates
rake preview    # Watches, and mounts a webserver at http://localhost:4000

You will be able to see your blog on port 4000. In Nitrous.IO, go to menu Preview > Port 4000 and it will open a blog preview in new tab

  • To commit changes to Git, use the same git commands like in initial commit.
  • Once you are ready to publish, use the same rake commands for publish like you did initially.

HTH

Edit 2013-01-03:

It has come to my attention that rvm is already installed on VM, which is also used to change ruby version in environment. By using rvm, you can preserve disk space on VM. Documentation for using rvm.