From 30e3778a19a5eb9639f1f55ba0938ddfcc56778b Mon Sep 17 00:00:00 2001
From: Alexis King <lexi.lambda@gmail.com>
Date: Sat, 18 Jul 2015 21:39:25 -0700
Subject: [PATCH] Initial commit

---
 .frogrc                                       | 110 ++++++++++++
 .gitignore                                    |   9 +
 .travis.yml                                   |  24 +++
 _src/About.md                                 |  11 ++
 _src/index-template.html                      |  14 ++
 _src/page-template.html                       |  72 ++++++++
 _src/post-template.html                       |  18 ++
 ...ing-a-frog-powered-blog-to-github-pages.md | 156 ++++++++++++++++
 bower.json                                    |   4 +
 deploy.sh                                     |  30 ++++
 gulpfile.coffee                               |  44 +++++
 gulpfile.js                                   |   2 +
 package.json                                  |  20 +++
 scss/_code.scss                               |  47 +++++
 scss/_colors.scss                             |   9 +
 scss/_fonts.scss                              |   4 +
 scss/application.scss                         | 167 ++++++++++++++++++
 scss/pygments.scss                            |  64 +++++++
 18 files changed, 805 insertions(+)
 create mode 100644 .frogrc
 create mode 100644 .gitignore
 create mode 100644 .travis.yml
 create mode 100644 _src/About.md
 create mode 100644 _src/index-template.html
 create mode 100644 _src/page-template.html
 create mode 100644 _src/post-template.html
 create mode 100644 _src/posts/2015-07-18-automatically-deploying-a-frog-powered-blog-to-github-pages.md
 create mode 100644 bower.json
 create mode 100755 deploy.sh
 create mode 100644 gulpfile.coffee
 create mode 100644 gulpfile.js
 create mode 100644 package.json
 create mode 100644 scss/_code.scss
 create mode 100644 scss/_colors.scss
 create mode 100644 scss/_fonts.scss
 create mode 100644 scss/application.scss
 create mode 100644 scss/pygments.scss

diff --git a/.frogrc b/.frogrc
new file mode 100644
index 0000000..5876930
--- /dev/null
+++ b/.frogrc
@@ -0,0 +1,110 @@
+# Required: Should NOT end in trailing slash.
+scheme/host = http://lexi-lambda.github.io
+
+# The title of the blog. Used when generating feeds.
+title = Alexis King's Blog
+
+# The author. Used when generating feeds, and provided to
+# `page-template.html` as the template variable `@author`.
+author = Alexis King
+
+# What editor to launch with --edit. $EDITOR means to use $EDITOR from
+# the environment
+editor = $EDITOR
+
+# The command to run, in case you need to customize how the editor is
+# called. For example, {editor} {filename} will call:
+# (system "$EDITOR 2012-01-01-a-blog-post.md")
+# See the test submodule in paths.rkt for more examples
+editor-command = {editor} {filename}
+
+# Whether to show the count of posts next to each tag in the
+# `page-template` variable `tags/feeds`.
+show-tag-counts? = true
+
+# Pattern for blog post permalinks
+# Optional: Default is "/{year}/{month}/{title}.html".
+# Here's an example of the Jekyll "pretty" style:
+permalink = /blog/{year}/{month}/{day}/{title}/index.html
+# There is also {filename}, which is the `this-part` portion of
+# your post's YYYY-MM-DD-this-part.md file name. This is in case
+# you don't like Frog's encoding of your post title and want to
+# specify it exactly yourself, e.g. to match a previous blog URI.
+
+# Should index page items contain full posts -- more than just the
+# portion above "the jump" <!-- more --> marker (if any)?
+index-full? = false
+
+# Should feed items contain full posts -- more than just the portion
+# above "the jump" <!-- more --> marker (if any)?
+feed-full? = true
+
+# How many posts per page for index pages?
+posts-per-page = 10
+
+# How many items to include in feeds?
+# Older items in excess of this will not appear in the feed at all.
+max-feed-items = 20
+
+# Decorate feed URIs with Google Analytics query parameters like
+# utm_source ?
+decorate-feed-uris? = true
+
+# Insert in each feed item an image bug whose URI is decorated with
+# Google Analytics query parameters like utm_source ?
+feed-image-bugs? = true
+
+# Replace links to tweets with embedded tweets?
+# In Markdown, must be auto-links alone in a pargraph (blank lines
+# above and below), for example:
+#
+# <https://twitter.com/racketlang/status/332176422003163138>
+#
+auto-embed-tweets? = true
+
+# Try to automatically link symbols in Markdown ```racket fenced code
+# blocks, to Racket documentation?
+racket-doc-link-code? = true
+
+# Try to automatically link Markdown of the form `symbol`[racket] to
+# Racket documentation? i.e. This is similar to the @racket[] form in
+# Scribble.
+racket-doc-link-prose? = true
+
+# The URI for the index of blog posts. Defaults to /index.html but you
+# could change to e.g. /blog/index.html or /posts-index.html, and use
+# some other /index.html for your site. This also effects the URI used
+# in the Atom and RSS feed files for posts.
+posts-index-uri = /index.html
+
+# The source directory. Defaults to "_src".
+#
+# If you deploy to GitHub pages then it is simplest to keep this under
+# the repo/project top directory.
+#
+# This may be an absolute or relative path. If relative, it's relative
+# to the project top directory, i.e. to where this .frogrc file is
+# located.
+source-dir = _src
+
+# The output directory where generated HTML and other files should go.
+#
+# If you deploy to e.g. GitHub pages then it is simplest to put the
+# output in the repo/project top directory, which is why this defaults
+# to ".".  But you may change it if you prefer to copy the output
+# files to their final destination.
+#
+# This may be an absolute or relative path. If relative, it's relative
+# to the project top directory, i.e. to where this .frogrc file is
+# located.
+output-dir = out
+
+# Options controlling Pygments' HTML format.
+## Python executable to be passed to the shell. If only a filename or
+## relative path is given, Racket's find-executable-path will be used
+## to locate the executable.
+python-executable = python
+## Whether to use line numbers.
+pygments-linenos? = true
+## CSS class for the wrapping <div> tag (default: 'highlight').
+pygments-cssclass = source
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..4cfcd86
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,9 @@
+# configuration
+/.frog
+
+# managed by package managers
+/node_modules
+/bower_components
+
+# generated files
+/out
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000..a8b509e
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,24 @@
+language: python
+python:
+- '3.4'
+
+branches:
+  only:
+  - source
+
+env:
+  global:
+  - GH_REF: 'github.com/lexi-lambda/lexi-lambda.github.io.git'
+  - secure: "cWYfJKfWfn3qSlTX26NpIAC7+HWJc9tsJ2PUNnYNc60CFWBbVf2Srjrtt8CCYOMheA7K/jFNlT/px1+JKzruHMEVuUHFwIV7K8MGzSI5H6Y4gzOEfRMX8QZ/dNBEOJmkaXn70jBjYiefmg9Y20Tc41jppm6/nCb2KAfdUPcj6Hr1yit23BPRbbdf0lKWPFJFdYKk/7433LJbSZryDDBMHNioudn8fpE40ww34lbIb92qdbMEHV/O6N0KyAQMabfcgqGpsLt8VNECJNxnwZi8MBbf6EfyaG8e9XX8fBpdmCJ9K8ShjrpDbBqEmwFH7SowzdfTDu5OMcfc4TdES68G+CwbHG0htdNM9HCgf3XeFDO5gUopepeuCmnoBaZDmsXybTxXB7wt51bk+zz6GOrTfYHn93U82LNRvjFMiiwSOZz9xUC43LRF/dWBDBkpsK9EVA8l1mtoRs+4haZsCtxLs9BYuoGKDmSPU/4doCtDFh1+Lqgca3SNtOa4UwnZrhkSqiUszlqNvJcaEw0fBFsapxEIwFWbQz9A8k+yDgSv1rBmxK9IKnBLxM2LQxEIAZ1tIKfZtAWVu8IDiMF4acticQSwCaRXAE0XSBJ5zbmIshtgJQTVcxb1sefV5IRBbp6NDNIBnVGm+pSTXdMPqbGt8hha/C0xF0Wr9vc9xoti/Ig="
+  - RACKET_DIR: '~/racket'
+  - RACKET_VERSION: '6.2'
+
+before_install:
+- git clone https://github.com/greghendershott/travis-racket.git
+- cat travis-racket/install-racket.sh | bash
+- export PATH="${RACKET_DIR}/bin:${PATH}"
+
+install:
+- raco pkg install --deps search-auto frog
+
+script: bash ./deploy.sh
diff --git a/_src/About.md b/_src/About.md
new file mode 100644
index 0000000..c5a4d85
--- /dev/null
+++ b/_src/About.md
@@ -0,0 +1,11 @@
+# About me
+
+I'm Alexis King, and I'm a software developer.
+
+I currently work at [Philosophie][philosophie] building modern web applications using primarily Ruby on Rails, CoffeeScript, and Angular JS. In my free time, I try to build cool things with [Racket][racket].
+
+Check out the things I'm working on on [GitHub][my-github].
+
+[philosophie]: http://www.gophilosophie.com
+[racket]: http://racket-lang.org
+[my-github]: https://github.com/lexi-lambda/
diff --git a/_src/index-template.html b/_src/index-template.html
new file mode 100644
index 0000000..83db149
--- /dev/null
+++ b/_src/index-template.html
@@ -0,0 +1,14 @@
+@(local-require srfi/19)
+<article class="inline">
+  <header>
+    <h2 class="title"><a href='@|uri-path|'>@|title|</a></h2>
+    <div class='date-and-tags'>
+      <time datetime="@|date-8601|">
+        @(date->string date-struct "~1")
+      </time>
+      <span style="margin: 0 3px">⦿</span>
+      @|tags|
+    </div>
+  </header>
+  @|content|
+</article>
diff --git a/_src/page-template.html b/_src/page-template.html
new file mode 100644
index 0000000..e785123
--- /dev/null
+++ b/_src/page-template.html
@@ -0,0 +1,72 @@
+@(local-require racket/date)
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>@|title|</title>
+    <meta name="description" content="@|description|">
+    <meta name="author"      content="@|author|">
+    <meta name="keywords"    content="@|keywords|">
+    <meta name="viewport"    content="width=device-width, initial-scale=1.0">
+    <link rel="icon"      href="/favicon.ico">
+    <link rel="canonical" href="@|full-uri|">
+    @(when rel-next @list{<link rel="next" href="@|rel-next|">})
+    @(when rel-prev @list{<link rel="prev" href="@|rel-prev|">})
+    <!-- CSS -->
+    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Merriweather+Sans:400,300,300italic,400italic,700,700italic,800,800italic|Merriweather:400,300,300italic,400italic,700,700italic,900,900italic|Source+Code+Pro:200,300,400,500,600,700,900">
+    <link rel="stylesheet" type="text/css" href="/css/application.min.css">
+    <link rel="stylesheet" type="text/css" href="/css/pygments.min.css">
+    <!-- Feeds -->
+    <link rel="alternate" type="application/atom+xml"
+          href="@|atom-feed-uri|" title="Atom Feed">
+    <link rel="alternate" type="application/rss+xml"
+          href="@|rss-feed-uri|" title="RSS Feed">
+    <!-- JS -->
+    <!-- <script src="/js/application.min.js"></script> -->
+    @google-universal-analytics["UA-65250372-1"]
+  </head>
+  <body>
+    <div id="page-content">
+      <!-- Navigation Bar -->
+      <header>
+        <nav role="navigation" class="navigation-bar">
+          <ul class="navigation-items left">
+            <li><a href="/"><h1>Alexis King</h1></a></li>
+          </ul>
+          <ul class="navigation-items center"></ul>
+          <ul class="navigation-items right">
+            <li><a href="/">Home</a></li>
+            <li><a href="/about.html">About</a></li>
+          </ul>
+        </nav>
+      </header>
+      <section role="main">
+        <!-- Main column -->
+        <div class="content" class="col-md-12">
+          @;{
+          @(when (string=? uri-path "/index.html")
+            @list{
+              <h1>Welcome</h1>
+              <p>Here is some text that only goes on the home page,
+                because <code>@"@"uri-path</code> is
+                <code>/index.html</code>.</p> }) }
+          @;{ Index pages for posts have @tag that's not #f }
+          @(when tag
+            @list{<h1>Posts tagged <em>@|tag|</em></h1>})
+          @;{ The main page contents are in @contents }
+          @|contents|
+        </div>
+      </section>
+      <footer>
+        <div class="content">
+          <h2 id="copyright-notice">© @date-year[(current-date)], Alexis King</h2>
+          <h3>
+            Built with <a href="https://github.com/greghendershott/frog">Frog</a>, the
+            <strong>fr</strong>ozen bl<strong>og</strong> tool.
+          </h3>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/_src/post-template.html b/_src/post-template.html
new file mode 100644
index 0000000..5b97a79
--- /dev/null
+++ b/_src/post-template.html
@@ -0,0 +1,18 @@
+@(local-require srfi/19)
+<article class="main">
+  <header>
+    <h1 class="title">@|title|</h1>
+    <div class='date-and-tags'>
+      <time datetime="@|date-8601|">
+        @(date->string date-struct "~1")
+      </time>
+      <span style="margin: 0 3px">⦿</span>
+      @|tags|
+    </div>
+  </header>
+  @|content|
+  <footer>
+    @disqus-comments["lexi-lambda"]
+    @older/newer-links[older-uri older-title newer-uri newer-title]
+  </footer>
+</article>
diff --git a/_src/posts/2015-07-18-automatically-deploying-a-frog-powered-blog-to-github-pages.md b/_src/posts/2015-07-18-automatically-deploying-a-frog-powered-blog-to-github-pages.md
new file mode 100644
index 0000000..1f33996
--- /dev/null
+++ b/_src/posts/2015-07-18-automatically-deploying-a-frog-powered-blog-to-github-pages.md
@@ -0,0 +1,156 @@
+    Title: Automatically deploying a Frog-powered blog to GitHub pages
+    Date: 2015-07-18T19:09:01
+    Tags: racket, frog, meta
+
+So, I have a blog now. It's a simple static blog, but what's unique about it is that it's powered by Racket; specifically, it uses [Greg Hendershott][greghendershott]'s fantastic [Frog][frog] tool. I've taken this and moulded it to my tastes to build my blog, including configuring automatic deployment via [Travis CI][travis], so my blog is always up-to-date.
+
+<!-- more -->
+
+# Setting up Frog
+
+I should note that Frog itself was wonderfully easy to drop in and get running. Just following the readme, a simple `raco pkg install frog` followed by `raco frog --init` and `raco frog -bp` created a running blog and opened it in my web browser. There was nothing more to it. Once that's done, all it takes to write a blog post is `raco frog -n "Post Title"`, and you're good to go.
+
+By default, Frog uses Bootstrap, which provides a lot of the necessary scaffolding for you, but I opted to roll my own layout using flexbox. I also decided to use [Sass][sass] for my stylesheets, potentially with support for [CoffeeScript][coffeescript] later, so I wanted to have a good flow for compiling all the resources for deployment. To do that, I used [Gulp][gulp] in conjunction with [NPM][npm] for build and dependency management.
+
+Going this route has a few advantages, primarily the fact that updating dependencies becomes much easier, and I can build and deploy my blog with just a couple of commands without needing to commit compiled or minified versions of my sources to version control.
+
+# Configuring automatic deployment with Travis
+
+Once Frog itself was configured and my styling was finished, I started looking into how to deploy my blog to a GitHub page without needing to check in any of the generated files to source control. I found a couple of resources, the most useful one being [this Gist](https://gist.github.com/domenic/ec8b0fc8ab45f39403dd), which describes how to set up deployment for any project. The basic idea is to create a deployment script which will automatically generate your project, initialize a git repository with the generated files, and push to GitHub's special `gh-pages` branch.
+
+To make this easy, Frog can be configured to output to a separate directory via the `.frogrc` configuration file. I chose to output to the `out` directory:
+
+```
+output-dir = out
+```
+
+I also configured my Gulp build to output my CSS into the same output directory. Now, all that's necessary in order to deploy the blog to GitHub is to initialize a Git repository in the output directory, and push the files to the remote branch.
+
+```
+$ cd out
+$ git init
+$ git add .
+$ git commit -m "Deploy to GitHub Pages"
+$ git push --force "$REMOTE_URL" master:gh-pages
+```
+
+The next step is to configure Travis so that it can securely push to the GitHub repository with the required credentials. This can be done with Travis's [encryption keys][travis-encryption] along with a GitHub [personal access token][github-access-token]. Just install the Travis CLI client, copy the access token, and run a command:
+
+```
+$ gem install travis
+$ travis encrypt GH_TOKEN=<access token...>
+```
+
+The output of that command is an encrypted value to be placed in an environment variable in the project's `.travis.yml` configuration file. The URL for the repository on GitHub will also need to be specified as well:
+
+```yaml
+env:
+  global:
+  - GH_REF: 'github.com/<gh-username>/<gh-repo>.git'
+  - secure: <encrypted data...>
+```
+
+Now all that's left is configuring the `.travis.yml` to run Frog. Since Travis doesn't natively support Racket at the time of this writing, the choice of "language" is somewhat arbitrary, but since I want Pygments installed for syntax highlighting, I set my project type to `python`, then installed Racket and Frog as pre-installation steps.
+
+```yaml
+env:
+  global:
+  - GH_REF: 'github.com/<gh-username>/<gh-repo>.git'
+  - secure: <encrypted data...>
+  - RACKET_DIR: '~/racket'
+  - RACKET_VERSION: '6.2'
+
+before_install:
+- git clone https://github.com/greghendershott/travis-racket.git
+- cat travis-racket/install-racket.sh | bash
+- export PATH="${RACKET_DIR}/bin:${PATH}"
+
+install:
+- raco pkg install --deps search-auto frog
+```
+
+(It might be worth noting that Greg Hendershott *also* maintains the repository that contains the above Travis build script!)
+
+Finally, in my case, I wasn't deploying to a project-specific GitHub page. Instead, I wanted to deploy to my user page, which uses `master`, not `gh-pages`. Obviously, I didn't want Travis running on my `master` branch, since it would be deploying to that, so I added a branch whitelist:
+
+```yaml
+branches:
+  only:
+  - source
+```
+
+All that was left to do was to write up the actual deployment script to be used by Travis. Based on the one provided in the above Gist, mine looked like this:
+
+```bash
+#!/bin/bash
+set -ev # exit with nonzero exit code if anything fails
+
+# clear the output directory
+rm -rf out || exit 0;
+
+# build the blog files + install pygments for highlighting support
+npm install
+npm run build
+pip install pygments
+raco frog --build
+
+# go to the out directory and create a *new* Git repo
+cd out
+git init
+
+# inside this git repo we'll pretend to be a new user
+git config user.name "Travis CI"
+git config user.email "<your@email.here>"
+
+# The first and only commit to this new Git repo contains all the
+# files present with the commit message "Deploy to GitHub Pages".
+git add .
+git commit -m "Deploy to GitHub Pages"
+
+# Force push from the current repo's master branch to the remote
+# repo. (All previous history on the branch will be lost, since we are
+# overwriting it.) We redirect any output to /dev/null to hide any sensitive
+# credential data that might otherwise be exposed.
+git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master > /dev/null 2>&1
+```
+
+For reference, my final `.travis.yml` looked like this:
+
+```yaml
+language: python
+python:
+- '3.4'
+
+branches:
+  only:
+  - source
+
+env:
+  global:
+  - GH_REF: 'github.com/lexi-lambda/lexi-lambda.github.io.git'
+  - secure: <long secure token...>
+  - RACKET_DIR: '~/racket'
+  - RACKET_VERSION: '6.2'
+
+before_install:
+- git clone https://github.com/greghendershott/travis-racket.git
+- cat travis-racket/install-racket.sh | bash
+- export PATH="${RACKET_DIR}/bin:${PATH}"
+
+install:
+- raco pkg install --deps search-auto frog
+
+script: bash ./deploy.sh
+```
+
+That's it! Now I have a working blog that I can publish just by pushing to the `source` branch on GitHub.
+
+[coffeescript]: http://coffeescript.org
+[frog]: https://github.com/greghendershott/frog
+[github-access-token]: https://github.com/settings/tokens
+[greghendershott]: http://www.greghendershott.com
+[gulp]: http://gulpjs.com
+[npm]: https://www.npmjs.com
+[sass]: http://sass-lang.com
+[travis]: https://travis-ci.org
+[travis-encryption]: http://docs.travis-ci.com/user/encryption-keys/
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..f9bfab7
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,4 @@
+{
+  "name": "blog",
+  "dependencies": {}
+}
diff --git a/deploy.sh b/deploy.sh
new file mode 100755
index 0000000..313d5c9
--- /dev/null
+++ b/deploy.sh
@@ -0,0 +1,30 @@
+#!/bin/bash
+set -ev # exit with nonzero exit code if anything fails
+
+# clear the output directory
+rm -rf out || exit 0;
+
+# build the blog files + install pygments for highlighting support
+npm install
+npm run build
+pip install pygments
+raco frog --build
+
+# go to the out directory and create a *new* Git repo
+cd out
+git init
+
+# inside this git repo we'll pretend to be a new user
+git config user.name "Travis CI"
+git config user.email "lexi.lambda@gmail.com"
+
+# The first and only commit to this new Git repo contains all the
+# files present with the commit message "Deploy to GitHub Pages".
+git add .
+git commit -m "Deploy to GitHub Pages"
+
+# Force push from the current repo's master branch to the remote
+# repo. (All previous history on the branch will be lost, since we are
+# overwriting it.) We redirect any output to /dev/null to hide any sensitive
+# credential data that might otherwise be exposed.
+git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master > /dev/null 2>&1
diff --git a/gulpfile.coffee b/gulpfile.coffee
new file mode 100644
index 0000000..a398309
--- /dev/null
+++ b/gulpfile.coffee
@@ -0,0 +1,44 @@
+gulp         = require 'gulp'
+
+autoprefixer = require 'gulp-autoprefixer'
+bower        = require 'gulp-bower'
+coffee       = require 'gulp-coffee'
+concat       = require 'gulp-concat'
+rename       = require 'gulp-rename'
+sass         = require 'gulp-sass'
+sourcemaps   = require 'gulp-sourcemaps'
+uglify       = require 'gulp-uglify'
+gutil        = require 'gulp-util'
+
+bowerFiles   = require 'main-bower-files'
+
+gulp.task 'default', ['build']
+gulp.task 'build', ['bower', 'coffee', 'sass']
+gulp.task 'bower', ['bower-install', 'bower-files']
+
+gulp.task 'bower-install', -> bower()
+gulp.task 'bower-files', ->
+  gulp.src [], base: 'bower_components/'
+
+gulp.task 'coffee', ->
+  gulp.src './coffee/**/*.coffee'
+    .pipe sourcemaps.init()
+    .pipe(coffee()).on 'error', gutil.log
+    .pipe concat 'application.js'
+    .pipe uglify()
+    .pipe rename extname: '.min.js'
+    .pipe sourcemaps.write()
+    .pipe gulp.dest './out/js/'
+
+gulp.task 'sass', ->
+  gulp.src './scss/**/*.scss'
+    .pipe sourcemaps.init()
+    .pipe sass().on 'error', sass.logError
+    .pipe autoprefixer()
+    .pipe rename extname: '.min.css'
+    .pipe sourcemaps.write()
+    .pipe gulp.dest './out/css/'
+
+gulp.task 'watch', ->
+  gulp.watch './coffee/**/*.coffee', ['coffee']
+  gulp.watch './scss/**/*.scss', ['sass']
diff --git a/gulpfile.js b/gulpfile.js
new file mode 100644
index 0000000..c7f2b8b
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,2 @@
+require('coffee-script/register');
+require('./gulpfile.coffee');
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..b5e3df8
--- /dev/null
+++ b/package.json
@@ -0,0 +1,20 @@
+{
+  "scripts": {
+    "build": "gulp",
+    "watch": "gulp watch"
+  },
+  "devDependencies": {
+    "coffee-script": "~1.9.3",
+    "gulp": "~3.9.0",
+    "gulp-autoprefixer": "^2.3.1",
+    "gulp-bower": "0.0.10",
+    "gulp-coffee": "~2.3.1",
+    "gulp-concat": "^2.6.0",
+    "gulp-rename": "~1.2.2",
+    "gulp-sass": "^2.0.4",
+    "gulp-sourcemaps": "~1.5.2",
+    "gulp-uglify": "~1.2.0",
+    "gulp-util": "~3.0.6",
+    "main-bower-files": "^2.9.0"
+  }
+}
diff --git a/scss/_code.scss b/scss/_code.scss
new file mode 100644
index 0000000..3af78d7
--- /dev/null
+++ b/scss/_code.scss
@@ -0,0 +1,47 @@
+
+@import 'colors';
+@import 'fonts';
+
+pre, code {
+  font-family: $font-monospace;
+}
+
+p code {
+  background-color: $color-section-background;
+  border-radius: 3px;
+  padding: 2px 5px;
+}
+
+pre code, table.sourcetable pre {
+  font-size: 0.9em;
+  line-height: 1.4em;
+}
+
+pre code {
+  display: block;
+  width: 100%;
+}
+
+table.sourcetable {
+  width: 100%;
+
+  td.linenos {
+    color: desaturate(darken($color-section-background, 20%), 40%);
+    white-space: nowrap;
+    width: 1%;
+    font-weight: 300;
+  }
+
+  pre {
+    margin: 0;
+  }
+}
+
+pre code, table.sourcetable {
+  padding: 20px;
+  background-color: $color-section-background;
+}
+
+td.linenos {
+  padding-right: 15px;
+}
diff --git a/scss/_colors.scss b/scss/_colors.scss
new file mode 100644
index 0000000..c1ae803
--- /dev/null
+++ b/scss/_colors.scss
@@ -0,0 +1,9 @@
+
+$color-background: #fffcfc;
+$color-primary: #e45b5b;
+$color-section-background: lighten($color-primary, 35%);
+
+$text-color-light: lighten($color-primary, 30%);
+$text-color-link: desaturate(darken($color-primary, 10%), 20%);
+$text-color-link-light: lighten($text-color-link, 10%);
+$text-color-primary: #473737;
diff --git a/scss/_fonts.scss b/scss/_fonts.scss
new file mode 100644
index 0000000..10e3fae
--- /dev/null
+++ b/scss/_fonts.scss
@@ -0,0 +1,4 @@
+
+$font-serif: 'Merriweather', serif;
+$font-sans-serif: 'Merriweather Sans', sans-serif;
+$font-monospace: 'Source Code Pro', monospace;
diff --git a/scss/application.scss b/scss/application.scss
new file mode 100644
index 0000000..fd4c062
--- /dev/null
+++ b/scss/application.scss
@@ -0,0 +1,167 @@
+
+@import 'colors';
+@import 'code';
+@import 'fonts';
+
+html {
+  background-color: $color-background;
+  font-family: $font-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+
+#page-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 100%;
+}
+
+#page-content > section[role=main] {
+  flex: 1;
+
+  & > .content {
+    margin: 0 auto;
+    padding: 40px 0;
+    max-width: 780px;
+  }
+
+  p {
+    line-height: 1.9em;
+  }
+
+  a {
+    color: $text-color-link;
+
+    &:hover {
+      color: $text-color-link-light;
+      text-decoration: none;
+    }
+  }
+}
+
+#page-content > footer {
+  background-color: $color-primary;
+  color: $text-color-light;
+  font-family: $font-sans-serif;
+  text-align: center;
+
+  & > .content {
+    margin: 0 auto;
+    padding: 10px 0;
+    max-width: 940px;
+  }
+
+  a {
+    color: inherit;
+    font-weight: bold;
+    text-decoration: underline;
+  }
+
+  h2, h3 {
+    font-weight: 300;
+    margin: 0.8em;
+  }
+
+  h2 {
+    font-size: 1.1em;
+  }
+
+  h3 {
+    font-size: 0.8em;
+  }
+}
+
+article > header {
+  .date-and-tags {
+    margin-bottom: 20px;
+    time {
+      color: $text-color-primary;
+      font-size: 1.5em;
+      font-weight: 300;
+    }
+  }
+
+  .tags a {
+    color: $text-color-link;
+  }
+}
+
+article.inline > header .title {
+  font-size: 2.3em;
+  margin-bottom: 10px;
+}
+
+article.main > header .title {
+  font-size: 2.7em;
+  margin-bottom: 10px;
+}
+
+article h1 {
+  font-size: 2em;
+}
+
+article.main > footer {
+  margin-top: 40px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $font-sans-serif;
+}
+
+a {
+  text-decoration: none;
+  transition: color 0.15s ease-in-out;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.navigation-bar {
+  align-items: center;
+  background-color: $color-primary;
+  display: flex;
+  font-size: 1.2em;
+  font-family: $font-sans-serif;
+  font-weight: 300;
+  width: 100%;
+
+  a {
+    color: $text-color-light;
+    display: block;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    text-decoration: none;
+
+    &:hover { color: white; }
+  }
+
+  h1 {
+    margin: 5px 0;
+    text-decoration: none;
+    font-size: 1.5em;
+    font-weight: inherit;
+  }
+
+  .navigation-items {
+    padding: 0;
+
+    &.left, &.right { margin: 15px; }
+    &.center        { flex: 1;      }
+
+    li {
+      display: inline-block;
+      margin: 0 20px;
+    }
+  }
+}
diff --git a/scss/pygments.scss b/scss/pygments.scss
new file mode 100644
index 0000000..d3cb5bd
--- /dev/null
+++ b/scss/pygments.scss
@@ -0,0 +1,64 @@
+$semibold: 600;
+
+$string: #BA2121;
+
+td.code .source {
+  .c, .cm, .c1 { color: #9e5555; font-weight: 300; } /* Comment */
+  .err { border: 1px solid #FF0000 }                 /* Error */
+  .k { color: #008000; font-weight: bold }           /* Keyword */
+  .o { color: #666666 }                              /* Operator */
+  .cp { color: #BC7A00 }                             /* Comment.Preproc */
+  .cs { color: #408080; font-style: italic }         /* Comment.Special */
+  .gd { color: #A00000 }                             /* Generic.Deleted */
+  .ge { font-style: italic }                         /* Generic.Emph */
+  .gr { color: #FF0000 }                             /* Generic.Error */
+  .gh { color: #000080; font-weight: bold }          /* Generic.Heading */
+  .gi { color: #00A000 }                             /* Generic.Inserted */
+  .go { color: #808080 }                             /* Generic.Output */
+  .gp { color: #000080; font-weight: bold }          /* Generic.Prompt */
+  .gs { font-weight: bold }                          /* Generic.Strong */
+  .gu { color: #800080; font-weight: bold }          /* Generic.Subheading */
+  .gt { color: #0040D0 }                             /* Generic.Traceback */
+  .kc { color: #008000; font-weight: bold }          /* Keyword.Constant */
+  .kd { color: #008000; font-weight: bold }          /* Keyword.Declaration */
+  .kn { color: #008000; font-weight: bold }          /* Keyword.Namespace */
+  .kp { color: #008000 }                             /* Keyword.Pseudo */
+  .kr { color: #008000; font-weight: bold }          /* Keyword.Reserved */
+  .kt { color: #B00040 }                             /* Keyword.Type */
+  .m { color: #666666 }                              /* Literal.Number */
+  .s { color: $string }                              /* Literal.String */
+  .na { color: #7D9029 }                             /* Name.Attribute */
+  .nb { color: #03877c; font-weight: $semibold; }    /* Name.Builtin */
+  .nc { color: #0000FF; font-weight: bold }          /* Name.Class */
+  .no { color: #880000 }                             /* Name.Constant */
+  .nd { color: #AA22FF }                             /* Name.Decorator */
+  .ni { color: #999999; font-weight: bold }          /* Name.Entity */
+  .ne { color: #D2413A; font-weight: bold }          /* Name.Exception */
+  .nf { color: #0000FF }                             /* Name.Function */
+  .nl { color: #A0A000 }                             /* Name.Label */
+  .nn { color: #0000FF; font-weight: bold }          /* Name.Namespace */
+  .nt { color: #008000; font-weight: bold }          /* Name.Tag */
+  .nv { color: #1c7805 }                             /* Name.Variable */
+  .ow { color: #AA22FF; font-weight: bold }          /* Operator.Word */
+  .w { color: #bbbbbb }                              /* Text.Whitespace */
+  .mf { color: #666666 }                             /* Literal.Number.Float */
+  .mh { color: #666666 }                             /* Literal.Number.Hex */
+  .mi { color: #666666 }                             /* Literal.Number.Integer */
+  .mo { color: #666666 }                             /* Literal.Number.Oct */
+  .sb { color: $string }                             /* Literal.String.Backtick */
+  .sc { color: $string }                             /* Literal.String.Char */
+  .sd { color: $string; font-style: italic }         /* Literal.String.Doc */
+  .s2 { color: $string }                             /* Literal.String.Double */
+  .se { color: #BB6622; font-weight: bold }          /* Literal.String.Escape */
+  .sh { color: $string }                             /* Literal.String.Heredoc */
+  .si { color: $string; font-weight: $semibold }     /* Literal.String.Interpol */
+  .sx { color: #008000 }                             /* Literal.String.Other */
+  .sr { color: #BB6688 }                             /* Literal.String.Regex */
+  .s1 { color: $string }                             /* Literal.String.Single */
+  .ss { color: #19177C }                             /* Literal.String.Symbol */
+  .bp { color: #008000 }                             /* Name.Builtin.Pseudo */
+  .vc { color: #19177C }                             /* Name.Variable.Class */
+  .vg { color: #19177C }                             /* Name.Variable.Global */
+  .vi { color: #19177C }                             /* Name.Variable.Instance */
+  .il { color: #666666 }                             /* Literal.Number.Integer.Long */
+}