Website Redesign, 2015 Edition

Static site generated using gulp, jekyll, and SCSS, hosted on github.

Every other year I go through a molting cycle where I shed my old website and build something new. With each iteration, I try to make it a little cleaner, a little easier to use. It’s an opportunity to re-examine my toolbox, and experiment with things I’ve been meaning to try. One of the best discoveries this cycle has been a really fast, powerful setup for building static marketing or blog sites.

This post is less about the design decisions I made and more about the technical tools I used to turn the design into something real. The main engine behind the entire setup is jekyll, a tool for taking a collection of markdown files and reusable template code and outputting flat, vanilla HTML.

What makes this particular setup special, however, is that jekyll is wrapped inside a tool called gulp.js, which handles all the menial tasks you would normally need, such as minifying your code, building a sitemap.xml, and performing live reloading of the browser during active development.

This provides us all the benefits of a plain HTML site (lightning fast load times, few moving parts for easier debugging), with all the convenience of modern development (templating and code partials, automatic task running, live browser reload). On top of that, github is made to host jekyll sites easily, turning the ordinaly tedious process of launching and pushing changes to a website into a simple affair. This is the perfect setup for prototyping websites and landing pages.

You can follow along if you want to duplicate this setup. It will require some command line work, but it’s relatively minimal.

Out with the old

This is v5 of my site (2013 edition), which you can check out on archive.com if you’re bored.

The design

Since personal sites have very few design or technical constraints, I wanted to experiment with some new grid systems. I used flex box grid system, which I’d highly recommend. It’s worth mentioning that Foundation for Apps was recently released, which also uses a flexbox grid system — though I personally haven’t tried it yet.

Working with flexbox was not all that different from working with a standard bootstrap or foundation grid system, except the grid blocks tend to have slightly more sensical behavior than I’m familiar with. Because I’m used to the old way, there’s a bit of a learning curve to pick it up — but it’s hardly noticeable.

Typographically speaking, I chose Abril Text for body copy and Abril Titling for headlines. Its history in editorial work and tasty italic lean complimented my odd 2/3 layout and matched the whitespacey look I was going for. I used Type Scale to build a font-size scale, and used that same scale to create strips of ‘lead’ spacers (an homage to moveable lead type). All block-level elements such as section and p tags receive either one, two, or three lead on the bottom only to create a satisfying vertical rhythm. The net result is that multiple columns of text will always be baseline-aligned since the measurements are based on the same building blocks.

 1 ////// Type Scale //////
 2 
 3 $scale: 1.618;
 4 $font-size: 17px;
 5 
 6 // All spacing is based on this variable
 7 $line-height: round($font-size * $scale);
 8 
 9 // type-scale.com
10 $font-size-05:  0.618em;
11 $font-size-1:   $font-size;
12 $font-size-2:   1.618em;
13 $font-size-3:   2.618em;
14 $font-size-4:   4.236em;
15 
16 // Strips of lead - all block level elements get margin bottom only
17 $lead-half:        $line-height / 2;
18 .lead-half       { margin-bottom: $line-height / 2; }
19 
20 $lead-single:      $line-height;
21 .lead-single     { margin-bottom: $line-height; }
22 
23 $lead-double:      $line-height * 2;
24 .lead-double     { margin-bottom: $line-height * 2; }
25 
26 $lead-triple:      $line-height * 3;
27 .lead-triple     { margin-bottom: $line-height * 3; }
28 
29 $lead-quadruple:   $line-height * 4;
30 .lead-quadruple  { margin-bottom: $line-height * 4; }
31 
32 $lead-quintuple:   $line-height * 5;
33 .lead-quintuple  { margin-bottom: $line-height * 5; }
Full code available on github.

Gulpfile.js & Automation

Begin by either forking the repo for this website or by replecating this site structure. While there is a certain amount of flexibility, jekyll dictates a certain directory structure. (Jekyll is the tool that makes running a static blog easy by turning markdown files into html files.) I’ve included links to example files you can copy and customize on your own.

|- _posts
|--- yyyy-mm-dd-post-title.md (example)
|- _layouts
|--- default.html (example)
|- _site (leave empty — your static site will be generated to this directory)
|- _config.yml (example)
|- index.html (start working here)
|- gulpfile.js (example)
|- package.json (example)
|- .gitignore (example)
Full code available on github.

Though not required, you should also run both git init and bower init from the command line in the root of your site directory. The first command will start a local git repo which you can later deploy to github pages to make your site public easily. Use the bower command if you’re interested in using bower to manage javascript dependencies.

Setup can be tough to get used to, but once it’s all working, a single command: npm start will start a chain of processes that installs and updates any missing dependencies, rebuilds and watches all of your files for changes, starts a local server with livereload and CSS inject to show your code changes realtime in the browser, rebuilds the sitemap, AND minifies and concatenates CSS and JS files for production.

Deploying to Github pages

Once you have a local site you’re happy with, deploying it to github pages is quite simple.

The first step is making sure you have created a repository on github.com and have pushed your local repository to it. Once done, you’ll be able to follow this helpful guide on github page’s own site.

Once everything is working, notice there is a block in gulpfile.js that automates the github pages deploy process.

1 // Deploy to github gulp-gh-pages
2 gulp.task('deploy', ['jekyll-build'], function() {
3   return gulp.src('./_site/**/*')
4     .pipe(deploy({
5       remoteUrl: "git@github.com:USERNAME/REPO.git",
6       branch: "master"
7     }));
8 });
Full code available on github.

Once everything is working, updating your blog is easy. You just run npm start to begin your static site generator and local server, then add a new markdown file to the _posts directory. You’ll be able to watch your site regenerate every time you make changes to the new post. When you’re satisfied, commit your changes and run gulp deploy to push everything live.

Happy building!

Hi, I'm Zac Halbert. I'm a digital product designer and lifelong learner living in San Francisco, California with my wife, son, and sheepdog. I currently run the Product Design & UX track at Tradecraft, where we train smart people to succeed in traction roles at high-growth startups.

I also own independent product design consultancy Scout Hawk Product Design Studio, where I help entrepreneurs turn hazy ideas into concrete digital products, and Foliotwist, a portfolio and marketing SaaS company for visual artists. I also advise a number of companies on the intersection of user experience design, product design and management, and rapid prototyping and idea validation that draws heavily from the Lean Startup philosophy.

My background is a mixture between formal graphic design and fine arts education, mixed with a long history of self-taught frontend programming skills. I began to learn HTML, CSS, and UI design at age 12 (I was a huge nerd), and got my first job as a web designer at age 15 — and have been doing it and loving it ever since. I eventually got my degree in graphic design, but have diverse interest in nearly every field that blends technical and creative work.

While I'm not very good at keeping my portfolio or blog up to date, I always love connecting with fellow designers, entrepreneurs, and developers. Here are just a few of the companies I've had the pleasure to work with.