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.
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
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.
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)
Though not required, you should also run both
git init and
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.
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.