ParsaLabs | Blog

A publication about the web and more.

Create a Blog With Octopress + Deploy to Heroku

| Comments

As promised in a previous post on sharing, I am going to show you how to create a weblog with Octopress (which is a blogging framework/engine), publish posts and deploy to heroku. So, let’s get to it:

Note: I am assuming that you have gone through my post on setting up Ruby/Rails environment, and that you have installed ruby 1.9.3 (or greater) using rbenv tool. For the purposes of this tutorial, I am going to go with ruby 2.0.0-p353.

Start by cloning the project and installing its dependencies:

1
2
3
4
5
6
git clone git://github.com/imathis/octopress.git myblog
cd myblog
rbenv local 2.0.0-p353
gem install bundler
rbenv rehash
bundle install

We are going to to use Octopress’s default theme for now (but really, you can tweak the html/css and add your own style/templates/etc):

1
bundle exec rake install

Your blog is ready. Of course it has nothing in it yet! But for those impatient among you, run the following commands:

1
2
bundle exec rake generate
bundle exec rake preview

and point your browser to http://localhost:4000 and you should be able to see your blog served up!

Now, let’s add a new post:

1
bundle exec rake new_post

…and when prompted, enter/type your desired title for the post, and hit enter/return. You will see in the output that a new file (with .markdown extension) is created in your source/_posts directory. File name is a combination of date and title you just typed, which means your file name will differ from mine. but it should look something like this: 2013-12-17-my-first-blog-post.markdown.

Open this file in your favourite editor and append some text to the bottom of it. Finally, save the file.

Now, do:

1
2
bundle exec rake generate
bundle exec rake preview

and visit http://localhost:4000 in your browser again. You will see your new blog post there. Yaaay!

Heroku Deployment

First, add:

1
gem 'unicorn'

..to your Gemfile, and run bundle install to install it.

Next, create a Procfile at the root directory of your blog application like so:

1
touch Procfile

Open this file with an editor and add the following content to it:

1
web: bundle exec unicorn -p $PORT -c ./config/unicorn.rb

Now, we are going to create a directory named config at the root directory of your application and add the unicorn.rb file to it, like so:

1
2
mkdir config
touch config/unicorn.rb

Again, open this file with an editor and add the content below to it:

1
2
3
worker_processes 4
timeout 30
preload_app true

Lastly, open .gitignore file and delete the line that says public. This is so that we can commit the public directory to git and push it up to heroku (public is where the generated static html content lives).

Save your work in git:

1
2
git add .
git commit -m 'ready to publish to heroku'

Assuming you have an account with heroku (and the toolbelt properly installed) go ahead and push everything up to heroku, like so:

1
2
3
heroku create
git push heroku master
heroku open

Enjoy your blog, served up by Heroku! :–)

Customization

As I mentioned before, you can customise your Octopress blog to your heart’s content: by using your own html layouts, changing the existing CSS styles, adding twitter/google analytics accounts, Facebook like button, adding new pages, etc. These are outside of the scope of this blog post. Here are a few pointers to the official documentation:

A Personal Thought

When you get into the habit of writing a blog post after learning something new, not only are you giving others the chance to learn too, but also you are documenting your very own knowledge and thoughts. This way, your blog serves as a personal reference. It has happened to me so many times that I referred back to my own post for instructions on setting up a ruby/rails environment when I reinstalled OS X, and/or bought a new Macbook.

Github

For your reference, you can find the source code of the blog we created together in this post, here in my github account.

Comments