Getting started: Octopress powered and Github hosted blog

Blog Logo
on



read

There are various blogging sites like blogspot, wordpress, posterous, and many more.
Each has their own pros and cons and none of the engine gives us full power of ehhance our blogging experience.
Anyone who has atleast some technical knowledge can start with octopress powered blog. This gives us the power of freedom of doing anything.
So, Lets first understand about octopress framework and its features.

Octopress

Octopress is a framework designed by Brandon Mathis for Jekyll, the blog aware static site generator. If you wanted to know more then it can be found here

Octopress Setup

1. Before starting make sure you have git installed.
If not then do install using,

<div class='code-highlight'><pre class='code-highlight-pre'><div data-line='1' class='code-highlight-row numbered'><div class='code-highlight-line'>sudo apt-get install git</div></div></pre></div>

2. Install ruby 1.9.3 or higher
Make git clone of octopress source code

<div class='code-highlight'><pre class='code-highlight-pre'><div data-line='1' class='code-highlight-row numbered'><div class='code-highlight-line'>git clone git://github.com/imathis/octopress.git octopress </div></div><div data-line='2' class='code-highlight-row numbered'><div class='code-highlight-line'>cd octopress </div></div><div data-line='3' class='code-highlight-row numbered'><div class='code-highlight-line'>bundle install</div></div></pre></div>

Installing Octopress theme

Install the default Octopress theme using

<div class='code-highlight'><pre class='code-highlight-pre'><div data-line='1' class='code-highlight-row numbered'><div class='code-highlight-line'>rake install</div></div></pre></div>

In order to install custom themes,
Please browse through themes and make a selection for your blog.
Once choice is made, you need to do git clone of theme source and install it.

cd octopress

git clone https://github.com/kAworu/octostrap3 .themes/octostrap3

rake 'install[octostrap3]'

To genrate infrastrcture for your blog i.e. layouts, js and css

<div class='code-highlight'><pre class='code-highlight-pre'><div data-line='1' class='code-highlight-row numbered'><div class='code-highlight-line'>rake generate</div></div></pre></div>

Edit _config.yml to configure blog title, header, metadata, plugins and 3rd Party Settings.
more on configurations can be found here.

We are almost done, and now ready to create our first blog post -

<div class='code-highlight'><pre class='code-highlight-pre'><div data-line='1' class='code-highlight-row numbered'><div class='code-highlight-line'>rake new_post[“My first octopress post”] </div></div><div data-line='2' class='code-highlight-row numbered'><div class='code-highlight-line'>mkdir -p source/_posts </div></div><div data-line='3' class='code-highlight-row numbered'><div class='code-highlight-line'>Creating new post: source/_posts/2014-02-09-my-first-octopress-post.markdown</div></div></pre></div>

Now you can open a post inside editor and change as you wanted. More on writing markdown can be found here and here too

Well ! Now its time to see, how our blog looks like -

<div class='code-highlight'><pre class='code-highlight-pre'><div data-line='1' class='code-highlight-row numbered'><div class='code-highlight-line'>cd octopress </div></div><div data-line='2' class='code-highlight-row numbered'><div class='code-highlight-line'>rake watch </div></div><div data-line='3' class='code-highlight-row numbered'><div class='code-highlight-line'>rake preview</div></div></pre></div>

Visit browser http://localhost:4000 and you should be seeing blog running there :-)

Deployment

There are ways to deploy octopress blog. You can either deploy this blog on heroku or on github using github pages.

1. Heroku:
As heroku provides free hosting (1 node) you may want to deploy at heroku.
More on this deployment can be found here

2. With Github Project Pages:
Github provides free static website hosting using github pages and deployment is also very simple.

Note: You should have a github repository called username.github.io

cd octopress

rake setup_github_pages

git remote add origin git@github.com:username/username.github.io.git

rake generate

rake deploy

Visit http://username.github.io to see your blog hosted on github.
Also, do not forget to commit and push your source code on github.

<div class='code-highlight'><pre class='code-highlight-pre'><div data-line='1' class='code-highlight-row numbered'><div class='code-highlight-line'>git add . </div></div><div data-line='2' class='code-highlight-row numbered'><div class='code-highlight-line'>git commit -m ‘octopress first blog’ </div></div><div data-line='3' class='code-highlight-row numbered'><div class='code-highlight-line'>git push origin source</div></div></pre></div>

Adding custom domain

First create a CNAME file and add naked domain name to it.

<div class='code-highlight'><pre class='code-highlight-pre'><div data-line='1' class='code-highlight-row numbered'><div class='code-highlight-line'>echo ‘funonrails.com’ » source/CNAME</div></div></pre></div>

Then goto your domain provider website and point your domain i.e A record to github ip address 204.232.175.78.
## Adding subdomain
If you want to point subdomain to github blog then -

<div class='code-highlight'><pre class='code-highlight-pre'><div data-line='1' class='code-highlight-row numbered'><div class='code-highlight-line'>echo ‘blog.sandipransing.in’ » source/CNAME</div></div></pre></div>

then go to your domain provider website and create a CNAME record for your subdomain i.e. blog pointing to yourname.github.io.
If you want more help on this then please see here and also here

Written by
Blog Logo

Sandip Ransing

Published

Supported by
Image

Fun On Rails

Journal of a Web Developer #ruby #rails #JS

Back to Overview