Another developer blog

How I built my blog in one day

March 8, 2012 . Coding . Comments
Tags: jekyll bootstrap github disqus

Preface

How I did this blog is nothing new, as a matter of fact many have done exactly what I did and it is well documented. This post is just on how I did it and since it is all very fresh in my mind I thought I would write a post about it. For other tutorials on how to do this checkout these:

Read what others are saying on news.ycombinator.

GitHub

I choose to use GitHub to host the blog using the GitHub Pages feature by creating a repository using my GitHub username.

It may take a little while for GitHub to setup your page but eventually it will start working and you'll have your GitHub page and an empty repository.

Jekyll

Jekyll is a static site generator. It is fairly easy to work with and it will allow you to create your blogs (each as a file) and it will know how to plug in simple blog aware properties.

Get some code

To get started here I went the typical lazy route and ripped down a friends GitHub page that was using Jekyll. So feel free to rip down my GitHub page if you wish or fork my GitHub page. I'm sure the tutorials that are mentioned at the top of this blog go into great detail on how to rake everything together but I don't always roll that way so to each his own here on this step.

You reap what you sow

Next I copied the files into my repository and started looking around to see how it was put together. Since I like to dive into things without much reading I was quickly confused how to get the site to load on my local machine. Luckily for you I have figured that out ... after asking my buddy of course!

Install Ruby and Jekyll

Open a GitBash window and get the latest version of Ruby.

gem update --system

Next install Jekyll

gem install jekyll

Spin up a Jekyll Server

Open a GitBash window and navigate to the directory of your GitHub pages repository

cd c:/username.github.com

jekyll --server

This will fire up a local server that will serve up your blog while you are working locally. You should be able to navigate to something like localhost:4000. As long as you leave this GitBash window open you'll have the server running at that port to test your code locally.

...more on Jekyll a bit later

Twitter Bootstrap

Love it or hate it Twitter Bootstrap is undeniably one of the best web frameworks out on the web. I used Twitter Bootstrap to style my blog site because it is free, already packaged up and ready to go, well documented, it looks good, and it has everything that I needed.


When normal sense makes good sense, seek no other sense.

Chris Philbeck

Download Twitter Bootstrap

Cherry Pick What You Want

After you have the Twitter Bootstrap files you can pick and choose what you want. You may not want all of the images and example css files. I took most of the css files and put them in my own folder called css. I also grabbed the images and icons and put them in a new folder for images. If you reuse doc.css you'll want to open it and change the file path to the background image or comment that line of code out. Otherwise you'll get a file not found.

/*background-image: url(../img/grid-18px-masked.png);*/

* If you have pulled down my code you won't need to do this section. I have already plugged Twitter Bootstrap into my repository.

Feedback Button

I got this feedback idea from Zach Holman.

  • Create a repository in your GitHub account called Feedback.
  • Create a button that links to the new issue section of that repository.

Now followers can leave you feedback and you can manage it accordingly.

Leave me feedback

Dynamic GitHub Followers and Repository Buttons

I wanted to have a button with my number of GitHub followers and GitHub repositories that was dynamic. GitHub provides an api of each users information https://api.github.com/users/erjjones. Try it out with your GitHub username in place of mine. Open a browser and paste it in the address bar.

Cross Domain Problems

Locally I was able to get the Ajax call to the api to work just fine. However, as soon as I pushed my code to GitHub, no go. This is when I discovered that I was having a classic case of cross domain problems.

I work with some super smart guys and gals and as soon as I explained my issue they immediately knew the problem and resolution.


JSONP to the Rescue

Fortunately GitHub supports JSONP callbacks and I found a Gist by another developer that I was able to tweak to achieve my end result.

Problem solved and now I have dynamic GitHub follower and GitHub repository buttons.

 

Social Buzz Widgets

In order to track how each post is doing in the world of social media I added three social widgets: Twitter, Google+ and Reddit.

Twitter Widget

This is probably the most documented and well understood widget. Go to the Twitter Developer's page to get more information.

Just replace your Twitter username with mine and you are good to go.


Google+ Widget

For the Google Plus widget I don't have it hooked up to my Google+ account. This widget is really easy to plug and play into your page and will track just the page. Go to the Google Plus button documentation to learn more about this button.



Reddit Widget

I am not a big Reddit guy (yet) so we'll see how this goes. Never the less I added the Reddit widget fairly easily and because of Jekyll I can populate the URL to the blog dynamically. Go to the Reddit button documentation to learn more.

By placing {{ page.url }} Jekyll will put the url to the page.


Disqus

To me it made perfect sense to use Disqus as a comments provider. As far as I can tell lots of sites are using this provider so we'll see how it goes. When you setup an account Disqus will have you setup a shortname that you will use in your Disqus widget code. The Admin tools in Disqus will allow you to delete comments and set a list of blackout words.

Total Comments

To get the you can put the following code anywhere on your page or any other page as long as you use the url you would like and have the Disqus Widget code on your page, it just works.

<a href="http://erjjones.github.com{{ page.url }}#disqus_thread" data-disqus-identifier="{{ page.url }}"></a>

Disqus Widget Code

Jekyll Continued

Pages and Properties

Using Jekyll you save your blog posts as .markdown files which contain a header section like the code sample below and html, css, javascript, etc.

To create the header of every blog post I simply include a template header that has the following properties set.

<h4><strong>{{ page.date | date: "%B %e, %Y" }} <small>. {{ page.category }} .</small> {{ page.title }}</strong></h4>

March 8, 2012 . Coding . How I built my blog in one day


Listing all your posts

On the home page I list all of the blog posts. The code below will allow you to list all of your posts in the _posts folder. By naming the .markdown files with the date in the file name like 2012-03-08-How-I-built-my-blog.markdown


Paging

Ideally this blog would take on the characteristics of a blogazine like feel. One way I try to achieve that is through pagination. On the top of each of the blogs I use and « Previous Blog Post | Next Blog Post » at the bottom.

Instapaper

Adding an Instapaper link is just another piece of functionality to enhance integration with other web tools. All you need to do is build the link below and add your url and title.

http://www.instapaper.com/hello2?url=http://erjjones.github.com{{ page.url }}&title={{ page.title }}

Read later

Y Combinator Submit Icon

Y Combinator is my all time favorite news feed and adding a Y Combinator submit option just seemed right. All you need to do is build the link below and add your url and title.

http://news.ycombinator.com/submitlink?u=http://erjjones.github.com{{ page.url }}&t={{ page.title }}

In Conclusion

I hope this sparks you to try out GitHub, Jekyll, Twitter Bootstrap and other open source web resources. I have just begun to scratch the surface here and this blog doesn't attempt to cover all of details but I would like to hear what other cool integrations people are doing on their blogs.

Comments Section

Feel free to comment on the post but keep it clean and on topic.

blog comments powered by Disqus