Combining HTML Partials

Published on: Monday 10/09/2017

Author: Kelly-Ann

I've encountered static sites generated from "partials" in Jekyll and Hugo. If you're not familiar with these, they are essentially set up to help you create a static blog--rather than pulling posts from a "posts" database like you would do with a Rails app (or how something like wordpress works), instead you write posts in as close to plain text as possible (usually markdown). The other parts of the website, such as the header, navigation bar, or sidebar, are each kept in their own file called a "partial." Then the static site generator combines your text, the partials, and structure information to generate each post as a page in a static website. The end result is the same as if you hand-made an html page for each post. But the beauty of it is, if you need to change your header or nav bar, rather than changing every static post page, you can just change the partial and then recompile the pages.

So, Jekyll and Hugo already help you do this, but I wanted to figure out how to make my own simple solution--just combine a nav bar, header, and formatted content.

There are lots of tutorials out there on how to do this with something called Gulp, a "task runner." I kept being put off by having to learn another new thing when I'm in the middle of learning other new things, but it seems like Gulp is a pretty popular tool worth learning, so I decided to see if I could just follow a quick tutorial to get started.

Leave a reply