LoveWithFood Tech



| Comments

This post is a step-by-step explanation of how this blog was set up. Octopress documentation explains all of this. However, if you keep reading here, you’ll get a method to create this exact blog.

I am going to make the assumption that you already have: a basic octopress blog all laid out. If not, you’ll need to download ruby and git. Next you will need to type this into terminal:

  git clone git:// octopress 
  cd octopress 
  ruby --version

the first line downloads octopress
the second opens the octopress files
the third checks the version of ruby; it should be 1.9.3

  then gem install bundler
  rbenv rehash
  bundle install

to install dependencies and finally

  rake install 

to install Octopress *note: if rake doesn’t work, try bundle exec before rake commands.

So now, you probably want to see your blog, just to see what you have done so far. To do so, you’ll want to type these lines in:

  rake generate
  rake watch 
  rake preview

The first of these lines generates posts and pages into the ‘public directory.’ The second watches the ‘source’ and ‘sass’ directory for any changes being made, and the third allows you to preview your blog on the given localhost address.

Next, you will want to configure your blog. This can be done in:


This includes important things, like choosing a title, author, description, and many more options. You can also choose to add third party settings, like allowing facebook likes, tweet buttons, and disqus comments.

Now you probably want to start blogging. So let’s get to it! to create a new post, type:

  rake new_post["title"]

this will create posts within:


when you open the post, you will see layout, title, date, comments, external-url, and category options. This post will be of the format markdown, unless you specify otherwise in the Rakefile. Here is what those options look like for this post:

  layout: post
  title: "Setup"
  date: 2013-05-28 14:47
  comments: true
  - Tech 

Most of these options are self explanatory. Category, is the equivalent of hash tags on twitter or instagram, or regular tags on tumblr. It is a way to organize posts by judging the similarities between them.

Once you have established all that, you can begin writing. Some of the syntax:
– two spaces creates a new line
– four spaces creates the blue background that the code above is contained in
– to embed links:


next, it is good to be able to use different themes, as the standard octopress one is grey and unspectactular. This website and this website are both good places to look at themes. This blog is currently running villainy from the first linked website.

After you have selected your theme, you must then download it to utilize it. To do so, click on the link to ‘github repo’ or picture of a cat. There you can clone the theme and install it onto your blog by following the instructions listed on the page.

Now, with your new theme installed, generate and preview once more, and you should have a shiny new theme. One of the trickiest parts for me was customizing the theme. Before using villainy, I had Octopress flat installed. I changed the image there, but when I moved over to villainy I found that changing the header image was not in the same files, and had to search again.

So, if you are using villainy, to edit the image in the top left corner, go into


Initially the size of the image is a small square, just large enough for the red star and circle he uses. However, his image is a strange combination of background coloring, an image (the star), and a circle. So, after I had replaced the image in line 57 of the theme.scss page—

  background:url(/images/techblog_header_red.png) center center no-repeat;

—i still had a strange circle around my image. To fix this, I really just played around, and ultimately, commented out everything else contained in “aside#logo div a”

next, I wanted to solve the issue of square image. to do so I had to go into layout.scss, and edit the width and height of the logo. To do so, I used gimp to find out how many pixels my iamge was, then changed the width and height of

  aside#logo div a

to the size of my image. However, I soon found that as I increased the size of the my browser, the same problem occurs. Thus, I had to go further in the layout file to line 148, where is says

  //Large screen

and change the width and heights there as well.