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
|
|
Install RVM to use ruby 1.9.3
1 2 3 4 |
|
Add the rvm to ~/.bashrc
1
|
|
Setup Octopress
1 2 3 |
|
Install Octopress dependencies
1 2 |
|
Install the default Octopress theme
1
|
|
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 |
|
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 |
|
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 |
|
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 |
|
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
|
|
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 |
|
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 |
|
And thats it! In few minutes after deployment, github will start showing the updated content on your live site!