A Simple Site Starter for GitHub Pages
Tags: github, beginners, html, showdev
Published: 2020-05-29 17:51:44

Over the years I've found myself drawn more and more to using GitHub Pages to publish static content to the web.  It's fast, it's reliable and it's one less server I have to manage.  While you most certainly can just create a repository with all of your content in place, I've found that too be difficult to maintain in the long term.

# Templates and Gulp, Oh My!
To solve the maintenance problem I started using templates and have all of my content reference the same base template.  This allows for whole site rework without having to edit every single page.  I've settled on using [Nunjucks](https://mozilla.github.io/nunjucks/) for templating because it has a fairly large user base and good documentation.  But templating alone doesn't actually build the site for you.  You have to compile the content down into HTML and that's where Gulp comes in.

If you're not familiar with [Gulp](https://gulpjs.com/) it's a toolkit for automating workflows written in Javascript.  So using one of [Gulp's many plugins](https://gulpjs.com/plugins/) we can render out our templates into static HTML.

# Keeping Dependencies Updated
We could just stop here and use Gulp to output our templatized HTML and copy over our static images, CSS and Javascript and we'd have a perfectly working site.  However, we'd have to manually download any updates to our Javascript libraries and any CSS that frameworks we're using have.  And since laziness is one of the [virtues of a programmer](https://dev.to/napolux/the-three-virtues-of-a-great-programmer-3gbm) we should try to automate our dependencies as much as possible.

So by using [NPM](https://www.npmjs.com/) (or [Yarn](https://yarnpkg.com/)) and [Browserify](http://browserify.org/) we can simplify our dependency management and let the tools handle updates.  All we have to do is use our package manager to update the dependencies Gulp to move / transcode our content.

# Enter the Site Starter
After creating several site all that were just a bit different from each other I finally decided that I was done trying to rebuild everything from scratch every time.  I was tired of copying folders and files over again just to end up with something that resembled a previous iteration but was just _slightly_ different.

To combat this, I started up a new generic repository call the Site Starter.

{% github link_to_your_repo https://github.com/pcon/site-starter %}

This repository is a [template](https://github.blog/2019-06-06-generate-new-repositories-with-repository-templates/) which means that anyone can spin up a new repository using this code as a template *without* having all of the commit history behind the original repository.  That means you're site won't have my grubby fingerprints all over it.

Once you've spun up a new instance of the repository you can simply add content in the various ways covered in the [README](https://github.com/pcon/site-starter/blob/master/README.md) and build your own static site on GitHub.  Right now the starter supports using Browserify with NPM for Javascript, SASS and static CSS.

In future iterations I'll probably add minifying everything as well as adding "native" support for Yarn so people can use that if they want.  And as always, I'd love to hear feedback and "patches welcome."