Ask me k'no'w querries, I will tell you no lies

History of this Blog

April 22, 2013

It all started while i was trying to write a perfect theme for my wordpress powered blog. I was looking for best paractices to start a wordpress theme development so that it caters to all devices, i heard a lot about html5 elements and its capabilities to make websites responsive so i started looking at various articles to learn more about html5 then i noticed HTML5 Boilerplate.

HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.

HTML5 Boilerplate is currently maintained by

  1. Nicolas Gallagher
  2. Paul Irish
  3. Mathias Bynens
  4. Divya Manian
  5. Hans Christian Reinl.

I follow the works of all these awesome people who contribute to H5BP but lot of my web development ideas are influenced by Paul Irish and Divya Manian as they are the two people who caught my eye when i first visited H5BP website.

Paul Irish is a front-end developer who loves the web. He is on Google Chrome’s Developer Relations team, and was on the jQuery Team for two years. - Excerpt from his website.

Divya Manian used to work at Opera later she moved to Adobe.

I visited Divya Manian’s blog and liked it so i asked her on twitter about how her website was developed …

The tweet is not available ! tweet 192108235619180544

With this tweet conversation i was introduced to Octopress.

Octopress is a framework for Jekyll, the blog aware static site generator for Github pages, designed by Brandon mathis.

If you want to use Jekyll as your static site generator for your blog then you have to write your own html, css, javascript and set your own configuration but if you choose octopress then you would get your own blog with all these works taken care of. you just have to clone or fork octopress and install some dependencies then you are all set to start blogging.

What is great about octopress?

  • It is static and so fast
  • No need to worry about database as everything is stored in files which you can deploy wherever you want.
  • I liked the tag line i.e “A blooging framework for hackers”
  • I liked the huge learning curve which introduced me to lot of programming techniques and practices.
  • Introduced me to lot of cool developers.

Pre requisites to use Octopress

  • Comfortable running shellcommands
  • Familiar with basics of Git
  • Enthusiastic about learning

My situation

  • I love Linux especially Ubuntu so running shell commands not a daunting task for me.
  • I did here about Git before but never used it so i went and learned about its usage at git documentation.
  • I am willing to learn.

Getting started

Install Git

$ apt-get install git

Install Ruby

There two ways you can install Ruby :

1.Using rbenv

cd
git clone git://github.com/sstephenson/rbenv.git .rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
git clone git://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
source ~/.bash_profile

2.Using RVM

First install RVM curl -L https://get.rvm.io | bash -s stable --ruby
Install Ruby 1.9.3 (latest Ruby version at the time writing this article)
rvm install 1.9.3
rvm use 1.9.3
rvm rubygems latest

If ruby --version doesn’t give Ruby 1.9.3 as out put check your steps once again or seek help.

Setup octopress

$ git clone git://github.com/imathis/octopress.git octopress
$ cd octopress    # 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 dependecies

octopress$ gem install bundler
octopress$ rbenv rehash    # If you use rbenv, rehash to be able to run the bundle command
octopress$ bundle install

Now once the octopress is setupand all the dependecies are installed we need to install theme for the blog.

octopress$ rake install

… this installs default octopress theme which is beautiful and has lot of goodies to start blogging.

Deployment

Now you have octopress on your system. Next you need to deploy the generated blog in some place which is publicly accessible over the internet. octopress can be deployed with some of the following ways.

  1. Github Pages
  2. Heroku
  3. Rsync
  4. Amazon s3

I used Github pages.

Hosting your blog in Github pages is free and it allows custom domains. The blog can be multi authored by pull requests.

Signup for Github account and create a repository with username.github.com or organization.github.com.(i used username.github.com)

Github pages for users and oganizations use master branch as public directory to which we push the generated blog content and in source we have the source that generates this blog i.e Octopress related.

This commiting and pushing of generated content to master and source to source can be done by setting up Octopress using its configuration rake task.

octopress$ rake setup_github_pages

This will

  • Ask you for your Github Pages repository url.
  • Rename the remote pointing to imathis/octopress from ‘origin’ to ‘octopress’
  • Add your Github Pages repository as the default origin remote.
  • Switch the active branch from master to source.
  • Configure your blog’s url according to your repository.
  • Setup a master branch in the _deploy directory for deployment.

Now you can start blogging

octopress$ rake new_post['new_post']

Write some content and save.

Generate static content

octopress$ rake generate

Preview the website at localhost:4000 by executing following command

octopress$ rake preview

You can configure custom domains with github

echo 'your-domain.com' >> source/CNAME

Now visit your domain registrar or DNS host and add a record for your domain name. For a sub-domain like www.example.com you would simply create a CNAME record pointing at username.github.com. If you are using a top-level domain like example.com, you must use an A record pointing to 207.97.227.245.

Create README.md file echo ‘My personel blog’ >> source/README.md

Commit and push all changes to source in github

octopress$ git add .
octopress$ git commit -am 'First commit'
octopress$ git push origin source

Deploy site to Github master branch

octopress$ rake deploy

Contributing to an existing Octopress blog from another system

$ git clone git@github.com:username/username.github.com.git
$ cd username.github.com
username.github.com$ git checkout source
username.github.com$ mkdir _deploy
username.github.com$ cd _deploy
username.github.com/_deploy$ git init
username.github.com/_deploy$ git remote add origin git@github.com:username/username.github.com.git
username.github.com/_deploy$ git pull origin master
username.github.com/_deploy$ cd ..
username.github.com$

Ekancepts

Ekancepts