Blogging is great for developers at any stage in their coding career. Today I'll be going over how set up an Octopress blog. Octopress is a static blogging framework that utilizes Jekyll. Wait a minute. Let's break that down.
A static web page is a page that does not change user to user. The content that is displayed will be the same, no matter who views it.
A blogging framework allows a user to make changes to their blog with minimal coding. The framework takes care of the major code, so that the user can create the content easily.
Jekyll is the underlying framework. Jekyll creates templates that are stored on your computer and used to build the web pages of your blog so that the server does not have to. This allows the website to be loaded quickly.
Now that we've covered that, let's get started!
Step 0 - Initial Setup
If you haven't already, create a GitHub account! Don't worry about making a GitHub repository quite yet. Next, create a local directory on your computer for your blog. This should be someplace that you will remember easily, so that you can find it when you want to make a post. Once you have that created, use the command line to get into that directory. If you do not have experience with the command line, try out this tutorial. Primarily focus on how to navigate directories. You're also going to need a text editor. I suggest Sublime Text, but you can use any editor designed to edit plain text.
Step 1 - Getting Octopress
Once you are in the directory that you want your blog in, run the following commands using your command line:
1 2 3
In the above code snippit we are first cloning, or making a copy, of imathis's repository, which is called octopress, from GitHub. Then, we are moving into the octopress folder. Next we are installing the ruby gems specified in the Gemfile.
Step 2 - Getting Rake
Rake allows us to automate tasks. This makes many tasks related to our blog a lot easier. In the command line, type the following command:
Oh no! Did that throw an error? Don't worry! If that didn't work for you, enter the following commands:
We've done a decent amount, so let's commit what we've done to git.
The first command tells git to track all the new additions or deletions in the directory that we are currently in. The next command commits these changes to git with a message. The message can be anything, but it's best to describe what changes you are committing.
Step 3 - Setting Up _config.yml
It's time to view your files in your text editor. If you are using Sublime Text, you can do this by typing
sublime .. Once you have the directory open in a text editor, navigate to the
_config.yml file. You should see a block of code similar to the code below:
1 2 3 4
Fill out each of these fields with information about your blog. When you're done, it should look something like this, but with your information:
1 2 3 4
This was a big step, so let's commit to git again.
This time we used
git add ., which will add all additions to git, but leave out any deletions. We did not make any deletions, so this will not cause any problems at this point. You could also use
git add -A, which in this case would complete the same action.
Step 4 - Hosting Octopress on GitHub
We are going to be using GitHub Pages to host our blog. First, create a new repository on GitHub called username.github.io. Username should be replaced with your GitHub username. Make sure the check box that initializes the repository with a README is UNCHECKED. Next, we are going to put our blog into the repository that we just created. From the command line, enter the following command:
Next, you'll see:
1 2 3 4
Go back to your repository on GitHub. Find Quick Setup and set it to SSH. Copy the URL provided and paste it into the your terminal. The result should look something like this, with your information as the url.
1 2 3 4
So what did we just do?
_config.ymlwas changed to contain the url of your blog
- You were moved to a new
sourcebranch, where all editting of your blog will occur
- You were given access to push your blog to GitHub
Since we can now push our blog to GitHub, let's do that using
git push origin source.
Step 5 - Writing A Post
You officially have a blog! That means it's time to make our first post. Go back to the command line and enter:
The string in quotes within the brackets is the title of the post. You can make the title anything, but it should probably have something to do with the content of the post. Now, go back to your text editor. Navigate to the
source/_posts/ folder. This is where all of your posts will be stored. Right now, there should only be one file, with the date and title of your post as the file name. Open that file and find something along the lines of:
1 2 3 4 5 6 7
You can add categories into the categories section that relate to your post. To enter multiple categories, you can use the syntax
["cats", "octopress", "babies"] The content of your post will go under the second
---. You can write anything here! This is a Markdown file, so it has some pretty nifty features that you can find here. Since it's the first post, you may want to keep up tradition with "Hello world!"
1 2 3 4 5 6 7 8
If you want to see what your post is going to look like, before you deploy it, simply enter:
This will start Octopress locally. To see our blog, open a web browser and go to
localhost:4000. You can now see what your blog is going to look like! If you don't like the look, don't fret. We will be going over how to customize your blog in another post. When you are done previewing your blog, you can stop by hitting
ctrl + c on your keyboard.
Step 6 - Deploying
Now that we have a post, we need to know how to get our blog online. Go back to the command line and enter:
Now, we should send all of our changes up to GitHub. Do you remember the commands from earlier?
1 2 3
Congratulations, you now have an Octopress blog! Now test it out! Go to
username.github.io in a web browser to see your newly deployed blog. If you love your blog, but hate how it looks, checkout Customizing Your Octopress Blog.