How to Setup your First Blog - the Geeky Way

Today, I am going to show you how you could setup a blog without a single cent.

Sounds good? In this tutorial, we'll be using the awesome static blog generator, Octopress. I assume you already have some basic Git knowledge. You can also learn more about Git here.

But first, you will need to have a ruby version manager installed on your machine as well as a GitHub account. For me, I am using rvm for managing my ruby versions.

Step 1

Clone the original source code from Octopress' official Repo.

➜  Desktop  git clone git@github.com:imathis/octopress.git omgmyblog
Cloning into 'omgmyblog'...
remote: Reusing existing pack: 10386, done.
remote: Counting objects: 24, done.
remote: Compressing objects: 100% (23/23), done.
remote: Total 10410 (delta 7), reused 3 (delta 1)
Receiving objects: 100% (10410/10410), 2.76 MiB | 62.00 KiB/s, done.
Resolving deltas: 100% (4982/4982), done.
Checking connectivity... done.
➜  Desktop  cd omgmyblog
➜  omgmyblog git:(master)
➜  omgmyblog git:(master) ruby -v
ruby 2.0.0p353 (2013-11-22 revision 43784) [x86_64-darwin13.0.0]

Step 2

On the above snippet, I am using ruby version 2.0.0. Let's bundle it up before starting anything.

➜  omgmyblog git:(master) bundle
Using rake (0.9.2.2)
Using RedCloth (4.2.9)
Using chunky_png (1.2.5)
Using fast-stemmer (1.0.1)
Using classifier (1.3.3)
Using fssm (0.2.9)
Using sass (3.2.9)
Using compass (0.12.2)
Using directory_watcher (1.4.1)
Using haml (3.1.7)
Using kramdown (0.13.8)
Using liquid (2.3.0)
Using syntax (1.0.0)
Using maruku (0.6.1)
Using posix-spawn (0.3.6)
Using yajl-ruby (1.1.0)
Using pygments.rb (0.3.4)
Using jekyll (0.12.0)
Using rack (1.5.2)
Using rack-protection (1.5.0)
Using rb-fsevent (0.9.1)
Using rdiscount (2.0.7.3)
Using rubypants (0.2.0)
Using sass-globbing (1.0.0)
Using tilt (1.3.7)
Using sinatra (1.4.2)
Using stringex (1.4.0)
Using bundler (1.5.1)
Your bundle is complete!
Use `bundle show [gemname]` to see where a bundled gem is installed.

Now, let's setup the blog.

Step 3

Rake install and profit!

➜  omgmyblog git:(master) rake install
## Copying classic theme into ./source and ./sass
mkdir -p source
cp -r .themes/classic/source/. source
mkdir -p sass
cp -r .themes/classic/sass/. sass
mkdir -p source/_posts
mkdir -p public
➜  omgmyblog git:(master) ✗

If you are wondering, here's what the rake task, "install", do for you behind the scenes - 

  • create a source/ folder
  • copy default theme's source into source/
  • create a sass/ folder
  • copy default theme's sass into sass/
  • create a _posts folder under source/
  • create a public/ folder

Done!

Step 4

Setup a new public github repo with your github account and name it as you wish. In my case -http://github.com/thanyawzinmin/omgmyblog.

Step 5

Configure your global variables for your blog like site name, site link, username and more. Lets take a look

➜  omgmyblog git:(master) ✗ vi _config.yml

Note: I'm using VIM to edit my source. You can use any text editor you prefer. Have a look and alter these variables as your preference.

url: http://thanyawzinmin.github.io/omgmyblog
title: My Octopress Blog
subtitle: A blogging framework for hackers.
author: Your Name
  • URL should be the url of your generated github pages. Here's how GitHub page links are being generated - http://your_username.github.io/your_repo_name
  • title: Your Blog Title.
  • subtitle: Your Blog Subtitle
  • author: Your Username

Give sometime to make those nice. They will give a character to your blog. We can take care of the remaining steps, afterwards.

Step 6

Connect your local source to your github repo.

Now, this is the key point of the whole concept. Octopress generates static blogs assets and push to gh-pages branch of your repo.

➜  omgmyblog git:(master) ✗ rake setup_github_pages
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:thanyawzinmin/omgmyblog.git
rm -rf public
mkdir -p public/omgmyblog
## Site's root directory is now '/omgmyblog' ##
rm -rf _deploy
mkdir _deploy
cd _deploy
Initialized empty Git repository in /Users/tal/Desktop/omgmyblog/_deploy/.git/
[master (root-commit) b8915be] Octopress init
 1 file changed, 1 insertion(+)
 create mode 100644 index.html
cd -

---
## Now you can deploy to git@github.com:thanyawzinmin/omgmyblog.git with `rake deploy` ##
➜  omgmyblog git:(master) ✗

Done! Let's generate some static assets!

Step 7

Generate necessary assets and deploy to gh-pages branch. Your wish is granted. All these work can be automated with built-in Octopress' rake tasks. Let's do some "rake"!

➜  omgmyblog git:(master) ✗ rake generate
## Generating Site with Jekyll
directory source/stylesheets/
   create source/stylesheets/screen.css
Configuration from /Users/tal/Desktop/omgmyblog/_config.yml
Building site: source -> public/omgmyblog
Successfully generated site: source -> public/omgmyblog

And deploy!

➜  omgmyblog git:(master) ✗ rake deploy
## Deploying branch to Github Pages
## Pulling any updates from Github Pages
cd _deploy
warning: no common commits
remote: Counting objects: 14, done.
remote: Compressing objects: 100% (12/12), done.
remote: Total 14 (delta 2), reused 0 (delta 0)
Unpacking objects: 100% (14/14), done.
From github.com:thanyawzinmin/omgmyblog
 * [new branch]      gh-pages   -> origin/gh-pages
There is no tracking information for the current branch.
Please specify which branch you want to merge with.
See git-pull(1) for details

    git pull <remote> <branch>

If you wish to set tracking information for this branch you can do so with:

    git branch --set-upstream-to=origin/<branch> gh-pages

cd -
rm -rf _deploy/index.html

## Copying public/omgmyblog to _deploy
cp -r public/omgmyblog/. _deploy
cd _deploy


## Committing: Site updated at 2014-05-30 15:27:16 UTC
[gh-pages 9ddf34b] Site updated at 2014-05-30 15:27:16 UTC
 61 files changed, 1118 insertions(+), 1 deletion(-)
 create mode 100644 assets/jwplayer/glow/controlbar/background.png
 create mode 100644 assets/jwplayer/glow/controlbar/blankButton.png
 create mode 100644 assets/jwplayer/glow/controlbar/divider.png
 create mode 100644 assets/jwplayer/glow/controlbar/fullscreenButton.png
 create mode 100644 assets/jwplayer/glow/controlbar/fullscreenButtonOver.png
 create mode 100644 assets/jwplayer/glow/controlbar/muteButton.png
 create mode 100644 assets/jwplayer/glow/controlbar/muteButtonOver.png
 create mode 100644 assets/jwplayer/glow/controlbar/normalscreenButton.png
 create mode 100644 assets/jwplayer/glow/controlbar/normalscreenButtonOver.png
 create mode 100644 assets/jwplayer/glow/controlbar/pauseButton.png
...... etc and so many logs :P
## Pushing generated _deploy website
Counting objects: 79, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (72/72), done.
Writing objects: 100% (79/79), 186.57 KiB | 0 bytes/s, done.
Total 79 (delta 1), reused 0 (delta 0)
To git@github.com:thanyawzinmin/omgmyblog.git
 * [new branch]      gh-pages -> gh-pages

## Github Pages deploy complete
cd -

Boom ! Lets see your brand new blog in action.

Backing up

We are going to backup our blog source in the master branch. Generated site assets will continue to stay in gh-pages branch.

➜  omgmyblog git:(master) ✗ clear
➜  omgmyblog git:(master) ✗ git remote add origin git@github.com:thanyawzinmin/omgmyblog.git
➜  omgmyblog git:(master) ✗ git add -A
➜  omgmyblog git:(master) ✗ git commit -m "Yolo Backup"
[master 7758086] Yolo Backup
 120 files changed, 2793 insertions(+), 12 deletions(-)
➜  omgmyblog git:(master) git push origin master
Counting objects: 4793, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (2144/2144), done.
Writing objects: 100% (4793/4793), 1.32 MiB | 42.00 KiB/s, done.
Total 4793 (delta 2300), reused 4761 (delta 2272)
To git@github.com:thanyawzinmin/omgmyblog.git
 * [new branch]      master -> master

Blogging Basic

If you want to create a new blog post. Use this command.

➜  omgmyblog git:(master) rake "new_post[Welcome to the yolo blog]"
mkdir -p source/_posts
Creating new post: source/_posts/2014-05-30-welcome-to-the-yolo-blog.markdown

Yep , I am using zsh and I need to put these "" colons before the rake argument. If you are using Bash, try the following command -

➜  omgmyblog git:(master) rake new_post["Welcome to the yolo blog"]
mkdir -p source/_posts
Creating new post: source/_posts/2014-05-30-welcome-to-the-yolo-blog.markdown

Yes, it is in markdown. Edit the generated markdown and start writing. I bet you'll enjoy writing in markdown.

➜  omgmyblog git:(master) ✗ vi source/_posts/2014-05-30-welcome-to-the-yolo-blog.markdown

And my first hello world post would be like this.

---
layout: post
title: "Welcome to the yolo blog"
date: 2014-05-30 22:06:53 +0630
comments: true
categories: 
- hello
- yolo 
---
Welcome to the jungle of swags as you wish to wake up in the middle of your black nightmares.

If you're done, just repeat generate and deploy mechanism.

➜  omgmyblog git:(master) ✗ rake generate
## Generating Site with Jekyll
identical source/stylesheets/screen.css
Configuration from /Users/tal/Desktop/omgmyblog/_config.yml
Building site: source -> public/omgmyblog
Successfully generated site: source -> public/omgmyblog
➜  omgmyblog git:(master) ✗ rake deploy
## Deploying branch to Github Pages
## Pulling any updates from Github Pages
cd _deploy
remote: Counting objects: 4730, done.
remote: Compressing objects: 100% (2054/2054), done.
remote: Total 4728 (delta 2299), reused 4728 (delta 2299)
Receiving objects: 100% (4728/4728), 1.14 MiB | 81.00 KiB/s, done.
Resolving deltas: 100% (2299/2299), done.
From github.com:thanyawzinmin/omgmyblog
 * [new branch]      master     -> origin/master
There is no tracking information for the current branch.
Please specify which branch you want to merge with.
See git-pull(1) for details

    git pull <remote> <branch>

If you wish to set tracking information for this branch you can do so with:

    git branch --set-upstream-to=origin/<branch> gh-pages

cd -
rm -rf _deploy/assets
rm -rf _deploy/atom.xml
rm -rf _deploy/blog
rm -rf _deploy/favicon.png
rm -rf _deploy/images
rm -rf _deploy/index.html
rm -rf _deploy/javascripts
rm -rf _deploy/robots.txt
rm -rf _deploy/sitemap.xml
rm -rf _deploy/stylesheets

## Copying public/omgmyblog to _deploy
cp -r public/omgmyblog/. _deploy
cd _deploy

## Committing: Site updated at 2014-05-30 15:42:46 UTC
[gh-pages 2d298f3] Site updated at 2014-05-30 15:42:46 UTC
 9 files changed, 637 insertions(+), 5 deletions(-)
 create mode 100644 blog/2014/05/30/welcome-to-the-yolo-blog/index.html
 create mode 100644 blog/categories/hello/atom.xml
 create mode 100644 blog/categories/hello/index.html
 create mode 100644 blog/categories/yolo/atom.xml
 create mode 100644 blog/categories/yolo/index.html

## Pushing generated _deploy website
Counting objects: 28, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (16/16), done.
Writing objects: 100% (20/20), 2.72 KiB | 0 bytes/s, done.
Total 20 (delta 9), reused 0 (delta 0)
To git@github.com:thanyawzinmin/omgmyblog.git
   9ddf34b..2d298f3  gh-pages -> gh-pages

## Github Pages deploy complete
cd -

Your new post is here.

Custom Domain

If you'd like to use custom domain name with your blog, just create a CNAME file in the source/ . Then echo your domain out into CNAME.  Get your GitHub subdomain's ip and create "A" record by your domain.

➜  omgmyblog git:(master) ✗ nslookup http://thanyawzinmin.github.io
Server:     8.8.8.8
Address:    8.8.8.8#53

Non-authoritative answer:
http://thanyawzinmin.github.io  canonical name = github.map.fastly.net.
Name:   github.map.fastly.net
Address: 103.245.222.133

For example, if I want to use a custom domain with my blog , I just need to create "A" record to this ip address 103.245.222.133.

I hope you guys had fun creating a static blog using Octopress. If you have questions, tweet us @nexmm.