Elegant Development

For all your programming needs

Why You Should Keep a Technical Blog

| Comments

Generally, when someone thinks of a technical person, the only writing they associate with that person is code. However, that is far from the truth. Technical blogs are common, and for good reason. So if you're trying to figure out if a technical blog is right for you, check out why you should start blogging:

To Practice Writing

Going to an engineering school, it's pretty normal to hear someone use their technical ability as an excuse for their poor writing skills. I tend to find this ironic, since many of these people have an "I'm an engineer, I can do anything!" mentality. The problem with their writing is not a lack of ability, but instead a lack of practice. Do yourself a favor and do not become one of these people. Future employers will thank you, teammates will thank you, you will thank you, and of course, I will thank you. Keeping a technical blog, or any blog, will give you the opportunity to practice writing, which leads to the next reason to keep a blog.

To Practice Expressing Yourself

Writing gives you the opportunity to put your thoughts on paper (or text editor). Practicing this skill will make it easier to articulate your ideas and express them clearly. You will develop the ability to show someone what you're thinking, rather than stumbling over your words as you try to express your thoughts. This is extremely beneficial when working on a team, or even working on a personal project.

To Learn

Writing about a technical topic requires knowledge and understanding of that topic. I have found that there are times that I know that I can loosely explain a topic, but the knowledge that the explanation was going to be posted to the web pushes me to strengthen my understanding of the topic.

For Reference

Is there something that you're always looking up? Make a tutorial! Chances are, you'll remember it after writing about it, and even if you don't you know exactly where to find it when you need to reference it. Also, there's probably many other people that are always looking up the same thing. Not only are you helping yourself, but helping to better the internet as a whole, and who doesn't want that?

For Getting Noticed

If you keep your blog up to date, professional, and tag it well, you're going to get some traffic. This can lead to job offers, making connections, and some fame in your field. If you get enough traffic, you can even get paid by adding advertisements. While this shouldn't be your sole reason for starting a blog, it is a factor to acknowledge.

It's Free

Why should you keep a technical blog? Why not! It's free, so you can't use that excuse. Like I said earlier, you can help better the internet as a whole, and do so for free. So do it! Just do it! Cue Shia LaBeouf

Customizing Your Octopress Blog

| Comments

Installing a New Theme

When Octopress is first installed, the theme is rather bland. Luckily, it isn't difficult to change this. There are a decent amount of Octopress themes available, allowing for customization of the overall feel of your blog. To find an Octopress theme, check out imathis's compilation. Once you pick out a theme, follow the theme's documentation in order to install it. For the majority of themes, installation will follow the following template:

1
2
3
4
cd octopress
git submodule add git://github.com/CREATORS-USERNAME/THEME-NAME.git .themes/THEME-NAME
rake install['THEME-NAME']
rake generate

The GitHub url is the HTTPS clone URL, which can be found on the right hand side of GitHub.

Adding Custom CSS

One of the best ways to set your blog apart is to add custom CSS. Navigate to your octopress folder. Once there, ls should reveal a sass folder. Navigate into that folder, and then into the custom folder. Next, find _styles.css. Open this file in your text editor. This is where you can put your custom CSS. A basic CSS tutorial can be found here. If you're having trouble figuring out how to style a particular element, many browsers implement Inspect Element, which is great for determining the html used for that particular element.

Changing the Default Colors

You can take your styling further by changing the default colors used by the theme. This is done in a similar manner as adding custom CSS. In the same folder where _styles.css was found (/octopress/sass/custom/), you will find _colors.css. Open this file using your text editor. The file should be documented, explaining where to change the colors. Finding the perfect color is easy with w3schools HTML Color Picker.

Setting Up Layouts

Layouts are basically templates for your posts. This makes it easy for you to have different designs, without having to manually set them up each time. To add or modify layouts, navigate to your octopress folder. Next, find and navigate to the source folder. There you should find a _layouts folder with some predefined layouts. You can modify any of the existing, or create your own by adding the html file to the _layouts folder. Start off each layout with:

1
2
3
---
layout: LAYOUT_NAME
---

From there, add your custom code. You can use the previously made layouts as a reference.

Setting a Custom Favicon

Changing the favicon is simple. Go back to the source folder (/octopress/source/). There you will see favicon.ico or a similarly named .ico file. Replace this file with your favicon, but make sure to keep the name of the file the same. If you don't have a favicon yet, you can create one using a favicon generator, make one from an image using a converter, or find one using a favicon library.

How to Set Up a Custom Octopress Blog

| Comments

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.

Static

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.

Blogging Framework

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

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
git clone git://github.com/imathis/octopress.git octopress
cd octopress
bundle install

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:

1
rake install

Oh no! Did that throw an error? Don't worry! If that didn't work for you, enter the following commands:

1
2
bundle exec rake install
rake install

We've done a decent amount, so let's commit what we've done to git.

1
2
git add -A
git commit -m "Creates and sets up my basic octopress blog"

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
title:                                  # Used in the header and title tags
subtitle:                               # A description used in the header
author:                                 # Your name, for RSS, Copyright, Metadata
description:                            # A default meta description for your site

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
title: A Very Amazing Blog              # Used in the header and title tags
subtitle: Blogging With Octopress       # A description used in the header
author: Jane Doe                        # Your name, for RSS, Copyright, Metadata
description: A blog about Octopress     # A default meta description for your site

This was a big step, so let's commit to git again.

1
2
git add .
git commit -m "Configures _config.yml"

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:

1
rake setup_github_pages

Next, you'll see:

1
2
3
4
Enter the read/write url for your repository
(For example, 'git@github.com:your_username/your_username.github.io.git')
           or 'https://github.com/your_username/your_username.github.io')
Repository url:

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
Enter the read/write url for your repository
(For example, 'git@github.com:your_username/your_username.github.io.git')
           or 'https://github.com/your_username/your_username.github.io')
Repository url: git@github.com:tibsar/tibsar.github.io.git

So what did we just do?

  • The url: line in _config.yml was changed to contain the url of your blog
  • You were moved to a new source branch, 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:

1
rake new_post["My First Post On Octopress"]

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
---
  layout: post
  title: "My First Post On Octopress"
  date: 2014-04-28 13:03:17 -0400
  comments: true
  categories:
---

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
---
  layout: post
  title: "My First Post On Octopress"
  date: 2014-04-28 13:03:17 -0400
  comments: true
  categories: ["Octopress", "Hello World"]
---
Hello world!

If you want to see what your post is going to look like, before you deploy it, simply enter:

1
rake preview

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:

1
2
rake generate
rake deploy

Now, we should send all of our changes up to GitHub. Do you remember the commands from earlier?

1
2
3
git add -A
git commit -m "adds my first blog post and deploys my blog"
git push origin source

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.