I have been thinking to revamp the site for quite sometime and finally got around it. The old version was hosted on github, courtesy github pages which was a fairly simple one page setup, with links to my blog, github repository etc. For the new site, I needed to have one place to maintain the blogposts and webpages, so I started looking for jekyll style static page generators so that I can keep using github for hosting (for free! :D ) and really liked what Octopress had to offer.

I have the website hosted on mohitranka.github.com (see here on how to do it and mohitranka.com is merely a CNAME for it).

Hello Octopress!

Octopress is a blogging framework written on top of Jekyll. It has nifty little commands to create new pages and posts using markdown, growing number of themes and plugins, which are everything you need for your static content based website.

On your Ubuntu 13.04 machine, the following commands will let you publish your first page and blog post from octopress to github!

Install Git

1

sudo apt-get install git

Install RVM to use ruby 1.9.3

1
2
3
4

curl -L https://get.rvm.io | bash -s stable --ruby
sudo rvm install 1.9.3
sudo rvm use 1.9.3
sudo rvm rubygems latest

Add the rvm to ~/.bashrc

1

source ~/.rvm/scripts/rvm

Setup Octopress

1
2
3

git clone git://github.com/imathis/octopress.git my-website
cd my-website    # If you use RVM, You'll be asked if you trust the .rvmrc file (say yes).
ruby --version  # Should report Ruby 1.9.3

Install Octopress dependencies

1
2

sudo gem install bundler
sudo bundle install

Install the default Octopress theme

1

rake install

Point Octopress to talk to username.github.io

You need to have machine’s SSH public key added to your github account for this. See this on how to do it.

Once your SSH public key is added and machine’s access to your github account has been validated, run the following commands.

1
2

cd /path/to/my-website
rake setup_github_pages

This asks for your github repository. Type (quotes for clarity only) “git@github.com:username/username.github.io.git” and hit return key. Now, you are ready to make deploy your site to github. well… almost!

One-click (well.. command) settings.

Put the following aliases in your ~/.bashrc file.

1
2

alias deploy_site='rake clean && rake generate && rake deploy'
alias preview_site='rake clean && rake generate && rake preview'

Install a new theme

I am not a big fan of the default theme, so I looked around. I really liked mattgemmell.com, so I “inspired” myself to use the same theme he used!

1
2
3
4

cd /path/to/my-website
git submodule add https://github.com/rastersize/BlogTheme.git .themes/BlogTheme
git submodule update --init
rake install\[BlogTheme\]

And voila! Our website uses a new theme now

Create a new post

Run the following commands to create a new blog post. You can use new_page command to create a new page instead, as well.

1
2

cd /path/to/my-website
rake new_post["My first post using Octopress"]

This is create a file named ‘/path/to/my-website/source/_posts/yyyy-mm-dd-my-first-post-using-octopress.markdown’. You can refer markdown documentation on how to format it or use a WYSIWYG to Markdown editor. I suggest using http://personal-editor.com/ if you are not comfortable with markdown.

1

echo "My first post content" >> /path/to/my-website/source/_posts/yyyy-mm-dd-my-first-post-using-octopress.markdown

This will write a line of content in the newly created blog post.

Preview the website

Remember we put few aliases in ~/.bashrc? We can now use them to preview and publish the content using those commands

1
2

cd /path/to/my-website
preview_site

You can point your browser to http://localhost:4000 to see the website homepage. You can see the blog post we just wrote at http://localhost:4000/blog/yyyy/mm/dd/my-first-post-using-octopress/. Modify the markdown file, save, reload browser to see the update in the preview, repeat till you are happy with the finished article.

Deploying the website

Whenever you have made any change in the website (added a new blog post, deleted an existing page, modified content or stylesheet etc.), you can run the the following command to deploy the changes live to your github hosting!

1
2

cd /path/to/my-website
deploy_site

And thats it! In few minutes after deployment, github will start showing the updated content on your live site!