Joseph Lisee's Blog

The work and thoughts of a robotics developer

How I Built this Site

12 January 2014 under webdev

In effort to learn a little more CSS & HTML and ditch the maintenance headache that WordPress is I redid my website using Jekyll. Some advantages of Jekyll over wordpress:

  • Variety of hosting options: Amazon S3, GitHub, a normal webserver.
  • Increased performance because it’s just static content.
  • Simple enough that I can make my own templates.
  • More programmer friendly, so hopefully I’ll actually blog.
  • No dynamic web app to keep patched.

The downside is that I have to find another way to host my comments, but Disqus should be simple enough to setup, and hopefully not too ugly.

Initial Setup

I started by loosely followed Learning Jekyll By Example by Andrew Munsell. It was a fairly decent introduction although it’s not based on the latest version of Jekyll. Luckily the Jekyll docs are very complete so I figured out the new Jekyll commands as I went along, there are really only two you need know:

# Build your content
jekyll build

# Serve from local host, regenerate content as needed
jekyll serve --watch

The book uses Bootstrap, but I used the Pure CSS framework because of it’s low foot print. I really don’t need all the features of Bootstrap for static personal website. I was also drawn to the nice Pure blog layout template because I am not a designer, and I need all the CSS help I can get.

Customizing the Style

The first part of this was picking some decent colors. Since I am fan of red (I am sure you can tell), I went with a red base for the pallet on the site. I started by finding the right background shade of red then I used Adobe’s Kuler to find some complementary shades of red. Then I repeated that process several times until my wife told me the colors didn’t suck.

The second step was finding replacements for the TypeKit based fonts that Pure’ blog layout template was using. I really don’t want to have to pay $25 to $50 a year for fonts.

I chose Google Fonts as my free typekit alternative. Knowing absolutely nothing about fonts I just searched with Google to find replacements. To replace the Omnes Pro title font I chose Maven Pro. For the body copy I replaced Proxima Nova with Ubuntu. Google Fonts also has the advantage of not needing any java scripts to embed the fonts, just a simple CSS link.

I think the non-standard font gives the site a little extra polish. I also now realize why web developers were so excited about services likes TypeKit and Google Fonts. It makes including any random font you want quite simple.

Archive and Category Pages

Instead of just stopping their I decided to keep plunging ahead and see how close to a stock WordPress install I could get. The first part of that was an archive page.

Reyhan Dhuny has a nice archive template that I started with. I removed some code duplication and fixed a where you don’t have a post for the current year it calls the previous years posts “This year’s posts”. Here is the updated template:





<h3>2015</h3>



  
    <ul class="this">
  
    <li>
      <time>21 Feb</time>
      <a href="/2015/02/21/exploring-clang-format/">Exploring clang-format</a>
    </li>

  
    
    
    
      </ul>
      <h3>2014</h3>
      <ul class="past">
    
  
    <li>
      <time>12 Jan</time>
      <a href="/2014/01/12/how-its-made/">How I Built this Site</a>
    </li>

  
    
    
    
  
    <li>
      <time>11 Jan</time>
      <a href="/2014/01/11/ipad-email-internet-file/">How to E-mail a File from the Internet on iPad</a>
    </li>

  
    
    
    
      </ul>
      <h3>2013</h3>
      <ul class="past">
    
  
    <li>
      <time>16 Sep</time>
      <a href="/2013/09/16/testing-rst-to-html/">Testing reStructredText Formatting</a>
    </li>

  
    
    
    
      </ul>
      <h3>2012</h3>
      <ul class="past">
    
  
    <li>
      <time>20 Feb</time>
      <a href="/2012/02/20/hello-world/">Website Up!</a>
    </li>

</ul>

The category pages are just a special case of archive pages that only list the pages for that category. Since I don’t want to have manually maintain the categories pages I used the example category generator plugin in the Jekyll docs.

Automation

Since I normally stick to Python for my automation tasks I decided to take this opportunity to learn Ruby’s Rake. I decided to reference the Octopress Rakefile instead of using it directly. I find that it’s easier to learn these things if you build as you go. Here are some example Rake tasks I have:

# Serve up for local usage
task :serve do
  cmd('jekyll serve --watch --baseurl=')
end


# Serve up locally with drafts
task :draft do
  cmd('jekyll serve --watch --drafts --baseurl=')
end


# Build the site (and the logo if needed)
task :build => [:logo] do
  cmd('jekyll build')
end

# Send all of our files to our remote host
task :deploy do
  cmd("rsync -avze 'ssh -p #{ssh_port}' " \
      "#{exclude} #{rsync_args} " \
      "#{"--delete" unless rsync_delete == false} #{public_dir}/ " \
      "#{ssh_user}@#{host}:#{document_root}/")
end

See the complete Rakefile in my repository, for the information on this.

Favicon

This was one of the more difficult parts to do because although there is a lot of information about this on the net there is very a little that documents all the steps you have to go through.

My plan was to create a basic, but unoriginal, initials in a box type logo for my favicon. I started by downloading the Maven Pro from Google Fonts in my ~/.fonts directory, so that Inkscape would be pick it up. From there it was pretty easy to whip up my an initials based icon. For the corner radius I follow the Apple App icon convention of making it 10/57 ths of the width of my image.

My result:

Favicon

I then wanted to automate the creation of the various bitmap versions I need for publishing. To convert from SVG I used inkscape directly, ImageMagick’s convert wasn’t handling sizing properly for me. The convert command did handled creation of ICO file needed for IE. For reference here are the raw shell commands:

# Create the bitmaps for the ICO
inkscape -z -e favicon16.png -w 16 -h 16 favicon.svg
inkscape -z -e favicon24.png -w 24 -h 24 favicon.svg
inkscape -z -e favicon32.png -w 32 -h 32 favicon.svg
inkscape -z -e favicon64.png -w 64 -h 64 favicon.svg

# Create the PNG version to serve to modern browsers
inkscape -z -e favicon128.png -w 128 -h 128 favicon.svg

# Optimize the size of our PNG (~40% size reduction for me)
optipng favicon*.png

# Create our ICO (4-bit color to save bandwidth)
convert favicon16.png favicon24.png favicon32.png favicon64.png \
  -background transparent -colors 16 -depth 4 favicon.ico

Since all versions of IE will load /favicon.ico directly we only need the HTML which tells other browsers which ICON to load. Now you can put several sizes, but I just stuck with 128x128, at 1124 bytes it’s not very large.

<link rel="icon" href="https://master--reverent-noether-e69fb3.netlify.app/images/favicon128.png"
      sizes="128x128" type="image/png">

Why the optimization steps? For my favicons optipng reduced the size by 40%. Switching from a 8-bit to 4-bit ICO image reduced it’s size by 61%.

What’s Next

After I clean things up with my drafts the code for the site will be going up on GitHub. My current features wishlist is:

  • Disqus based comments
  • RSS feed
  • Personal project page