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 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 it's a toolkit for automating workflows written in Javascript. So using one of Gulp's many 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 we should try to automate our dependencies as much as possible.
So by using NPM (or Yarn) and Browserify 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.
pcon
/
site-starter
A repository set up to create static pages using gulp for github pages
Site Starter
I've found myself leaning on github pages more and more for static sites. Because I've this I've built this template repo as a staring point for static sites using Gulp and Github Pages. In theory you shouldn't need to mess with any of the Gulp setting but instead just add files to their correct directories and modify the config file and the build the site.
Usage
Use This Template
Start by clicking "Use this template" and create this repo into your own account. This will then give you a place to customize your site.
Create gh-pages branch
Create gh-pages branch and push manually one time. I recommend that you create an empty branch for gh-pages and then push that with a simple "hello world" HTML page. By doing this you will signify to the backend processes at GitHub that you plan on using gh-pages and that they…
This repository is a template 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 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."
Top comments (0)