Welcome to my first post (or is it a page). This post is an experimental platform for me to learn how to blog. In addition, I am able to share my experiences with others who may find themselves walking down similar paths. First off, my blogging platform is powered by Octopress and it is being hosted by the github repository.

This article “How to Create a Post on Your Octopress Blog” shows how to set up and edit a post. It also demonstrates how to place certain wigits such as images, video and ‘code blocks’ onto the post. The follow up article “How to Configure and Edit Your Blog Site” shows how to change your blog’s appearance and add functionality.

Create a Post

Open a bash shell and type:

1

source ~/.bash_profile

Create a new post: Blog posts are located in source/_posts. They follow a naming convention as: ‘YYYY-MM-DD-post-title.markdown’

1

rake new_post["title"]

EDIT THE POST FILE

Open the post file located in ‘source/_posts’ with your favorite editor. I am currently using gedit. The post file has header information in yaml. You may edit that information.

Categories are used to classify your post. Search Engines key off of them. You can place the categories in the side bar and you can filter your posts by category

1
2
3
4

#one category
categories: Sass
#multiple categories
categories: [CSS3, Sass, Media Queries]

Place Text

I have put some junk text that I thought was a comment at the bottom of this post. As I learn more, I will put at the top.

what is <! –more–!>

This tag tells the blog site where to stop showing your post. This way your older posts can show just the beginning paragraph which makes it easier to scroll down and see all of the older posts.

Place an Image

This is an example of how to place an image: (the image of the cat in the code block is not intended. I will find out how to prevent that later.

1
2
3
4
5

{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}

{% img left http://placekitten.com/320/250 Place Kitten #2 %}
{% img right http://placekitten.com/300/500 150 250 Place Kitten #3 %}
{% img right http://placekitten.com/300/500 150 250 'Place Kitten #4' 'An image of a very cute kitten' %}

Resulting in:

I am having trouble placing all these cats around. I will learn how to heard these things as soon as I catch my breath.

If I want to link to an image from facebook, I have to right click on the image and copy image location. Then I can paste that link into my img tag.

Place a Video

If you want to place a video, its like so;

1

{% video http://s3.imathis.com/video/zero-to-fancy-buttons.mp4 640 320 http://s3.imathis.com/video/zero-to-fancy-buttons.png %}

And here is how it looks.

Place Code Blocks (text boxes)

The text box below is essential to displaying code snippets. This box is pretty powerful due to it syntax highlighting. Thanks to Avinish Meetoo for the codesnip.

1
2
3
4
5

class Fixnum
  def prime?
    ('1' * self) !~ /^1?$|^(11+?)\1+$/
  end
end

The box is coded as such:

1
2
3
4
5
6
7

#``` [language] [title] [url] [link text]
#class Fixnum
#  def prime?
#    ('1' * self) !~ /^1?$|^(11+?)\1+$/
#  end
#end
#```

You can include your own local snippets this way: File /home/mcarey/octopress/source/downloads/code/path/to/file could not be found . Hmmm, too much trouble at the moment. I am imagining that I would have to put my source under github. For now, what could be simpler than inlining the snippet as in the bottom example.

Another slick way to embed code snippets is with Gist. In this case we get a vdif file gistfile1.diff from the host GitHub.

Launch your Blog Locally or Globally

Open a bash shell and type:

1

source ~/.bash_profile

To see your output blog, use these commands: * ‘generate’ will generate your blog from source jekyll to html.
* ‘deploy’ will copy the generated files into the _deploy/ folder, then add them to git, commit and push them to the master branch. * ‘preview’ will generate and launch a local web server at at ‘http://localhost:4000/’

1
2
3

rake generate
rake deploy
rake preview

To commit your source code into github, do the following.

1
2
3

git add .
git commit -m 'your message'
git push origin source