May 27, 2016

Weblog Design With Jekyll

Weblog design on a Macintosh.

It’s been nearly a year since I’ve touched this weblog. The other day I started on a redesign — here it is so far.

For this redesign, I wanted to optimize for readability and approachability. The single-column layout is mostly unchanged from the early designs of last year. I switched to the familiar San Francisco and Gotham (via Hoefler & Co.) after trying a few other pairings.

If you’re interested, Josef Müller-Brockmann’s Grid Systems in Graphic Design, Ellen Lupton’s Thinking with Type, and Matthew Butterick’s Practical Typography are my favorite resources for grids and typography.

I like Jekyll because it really is a “simple, blog-aware static site generator.” Jekyll uses the Liquid templating engine to generate posts from markdown files. No database required!

Getting started with Jekyll is easy:

~ $ gem install jekyll
~ $ jekyll new weblog
~ $ cd weblog
~/weblog $ jekyll serve
# => Now browse to http://localhost:4000

This Jekyll project is structured as shown below. Directories with underscores are compiled by Jekyll, and .scss files in /assets are compiled by Gulp.js.

├── _config.yml
├── _drafts
├── _includes
|   ├── JB
|   └── themes
|        └── jfornear
|            ├── default.html
|            ├── pages.html
|            ├── post.html
|            └── settings.yml
├── _layouts
|   ├── default.html
|   ├── pages.html
|   └── post.html
├── _posts
|   └── 2016-05-30-hello-world.md
├── _site
├── assets
|   └── themes
|        └── jfornear
|            ├── build
|            |    ├── css
|            |    └── js
|            ├── img
|            ├── js
|            └── scss
├── CNAME
├── gulpfile.js
└── index.html

This project is still a work in progress — I’ll continue to update this post as I make improvements or add new functionality. The backlog so far includes photo galleries, social sharing, header navigation, next and previous post, email subscribe, and more.

If you have any questions or comments, feel free to email me or tweet at @jfornear on Twitter!