Go to the Source

Linking each webpage to its code 02 Dec 2016, Taipei

I recently wrote about why I use static site generators. Approaching blogging as a coder inspired another feature that makes this site easier to use and share.

You may have noticed I include a [ source ] link at the bottom of every page. Since this is a static site hosted on a web-accessible Git repository, it is simple to link each page to its counterpart source file.

I’ll explain how I do this using Jekyll, but the same technique should work with any static site generator that can output the path of the current file relative to the root directory, and with any Git web host that preserves this path for viewing.

For example, the page.path for the current file is _posts/2016-12-02-go-to-the-source.md, and its corresponding page on GitHub is here.

First, I add the repo URL to the config file. For GitHub, this takes the form:

# _config.yml
source_url: "https://github.com/USERNAME/REPO_NAME/blob/BRANCH/"

Then, in the layout, I build and render the source link:

<!-- _layouts/page.html -->
<a href="{{ page.path | prepend: site.source_url}}">

These source links are the very definition of free software, to let you use, study, change, and share this work. They also serve as shortcuts for the lazy or forgetful!

articles programming

self source license