SUPER SIMPLE Static Site Generation with Node, Jade, Gulp and JSON

Bushwazi
Bushwazi
Mar 4, 2016 · 8 min read

Static Site? But…why?

SETUP TO BUILD LOCALLY
// go to the _src directory
$ cd [PATH To Directory]/static-site-generation-with-jade-gulp/_src
// install node_modules
$ npm install
// or sudo npm install if permissions fail
// from there, you can run
$ gulp html
// to build html
// or
$ gulp watch
// to watch for changes on the jade files

The Goal.

The Core Tools.

The build.

/_src
↳ gulpfile.js (the directions for the tasks)
↳ package.json (default npm file with node modules,etc)
↳ markup/ (where the jade templates live)
↳ _inc/ (basic template files, or includes. a grouping of markup that is included in each page)
↳ foot.jade (usually just the scripts or GA tracking)
↳ footer.jade (the site footer menu and copyright, loops over post list and sections)
↳ head.jade (repetitive html head content)
↳ header.jade (the site header, main navigation, loops over sections)
↳ _templates/ (templates for page types)
↳ main.jade (core page template)
↳ post.jade (post page template)
↳ blog/
↳ about-content.jade (a blog post)
↳ about-gulp.jade (a blog post)
↳ category.jade (template page for category pages)
↳ index.jade (page the previews the posts, loops over posts and categories)
↳ why.jade (a blog post)
↳ data/
↳ resume.json (sample resume data)
↳ services.json (sample services data)
↳ skills.json (sample skills data)
↳ about.jade (content for about us page)
↳ contact.jade (content for about us page)
↳ index.jade (content for about us page, loops over services and skills)
↳ resume.jade (content for about us page, loops over resume data)

DATA!

MARKUP!

STYLES!

JAVASCRIPT!

TASK MANAGEMENT!

var fs = require(‘fs’),
gulp = require(‘gulp’),
gutil = require(‘gulp-util’),
jade = require(‘gulp-jade’),
rename = require(“gulp-rename”),
    titleRegExp = /var title \=(.*?)\n/g,
catRegExp = /var categories \=(.*?)\n/g,
descriptionRegExp = /var description \=(.*?)\n/g,
publishDateRegExp = /var publish_date \=(.*?)\n/g,
    fileName = null,
pageTitle = null,
pageCategories = null,
    blogPostJson = new Object(),
blogCategoryJson = new Object(),
currentFile = null,
postCounter = null,
websiteLinks = [‘HOME’,’ABOUT’,’RESUME’,’BLOG’,’CONTACT’];
gulp.task(‘html’, function() {
postCounter = 0;
  fs.readdir(“./markup/blog”, function(err,files){
if (err) throw err;
buildBlogData(files);
});
var buildBlogData = function(data){
data.map(function(url, ind, arr){
if(url.indexOf(“.jade”) > 0 && url.indexOf(“index”) < 0 && url.indexOf(“category”) < 0){
currentFile = fs.readFileSync(“./markup/blog/” + url, ‘utf8’);
fileName = url;
// url is from map’s anonymous function
pageTitle = currentFile.match(titleRegExp)[0].replace(‘var title = \’’,’’).replace(‘\’\n’,’’) || “NO VALUE”;
// use RegExp to find the line with the title in it, and then strip out everything except the value. The next three do the same thing but for categories, description and published date.
pageCategories = currentFile.match(catRegExp)[0].replace(‘var categories = \’’,’’).replace(‘\’\n’,’’).split(“,”) || “NO VALUE”;
pageDescription = currentFile.match(descriptionRegExp)[0].replace(‘var description = \’’,’’).replace(‘\’\n’,’’) || “NO VALUE”;
pagePublishedDate = currentFile.match(publishDateRegExp)[0].replace(‘var publish_date = \’’,’’).replace(‘\’\n’,’’) || “NO VALUE”;
blogPostJson[“post” + postCounter] = {
“file”:fileName,
“title”:pageTitle,
“categories”:pageCategories,
“description”:pageDescription,
“published”:pagePublishedDate
}
pageCategories.map(function(category, ind, arr){
if(blogCategoryJson.hasOwnProperty(category)){
// do nothing
} else {
blogCategoryJson[category] = {
“files”: new Array()
}
}
blogCategoryJson[category][“files”].push(fileName)
});
postCounter++;
}
});
buildHtml();
}
var buildHtml = function(){
gulp.src(‘./markup/*.jade’)
.pipe(jade({
pretty: false,
locals: {
‘posts’: blogPostJson, // built via our loop above
‘sections’: websiteLinks, // built in variables
‘categories’: blogCategoryJson, // build via our loop above
‘skills’: JSON.parse( fs.readFileSync(‘./markup/data/skills.json’, { encoding: ‘utf8’ }) ), // an external JSON file
‘services’: JSON.parse( fs.readFileSync(‘./markup/data/services.json’, { encoding: ‘utf8’ }) // an external JSON file),
‘resume’: JSON.parse( fs.readFileSync(‘./markup/data/resume.json’, { encoding: ‘utf8’ }) ) // an external JSON file
}
}).on(‘error’, gutil.log))
.pipe(gulp.dest(‘../’))
gulp.src(‘./markup/blog/*.jade’)
.pipe(jade({
pretty: false,
locals: {
‘sections’: websiteLinks,
‘posts’: blogPostJson,
‘categories’: blogCategoryJson
}
}).on(‘error’, gutil.log))
.pipe(gulp.dest(‘../blog/’))
buildCategories(blogCategoryJson);
}
var buildCategories = function(data){
// loop through the data object in order to make a page for each key aka category
for(key in data){
// console.log(“buildCategories”, key, data[key]);
gulp.src(‘./markup/blog/category.jade’)
.pipe(jade({
pretty: false,
locals: {
‘key’: key,
‘categories’: data,
‘sections’: websiteLinks,
‘posts’: blogPostJson,
}
}).on(‘error’, gutil.log))
// we use gulp-rename to pass the category in as the name of the file
.pipe(rename({
basename: key,
prefix: “category-”,
}))
.pipe(gulp.dest(‘../blog/’))
}
}
});
// example 
for item in locals[‘items’]
p #{item}
// or set it up as a variable
- items = locals['items]
for item in items
p #{item}
// and you can manipulate the resulting loop data with javascript
for item in items
p #{item.toLowerCase().replace(/ /g, '-')}
- var sections = locals[‘sections’]
- var posts = locals[‘posts’]
- var services = locals[‘services’]
- var skills = locals[‘skills’]
SETUP TO BUILD LOCALLY
// go to the _src directory
$ cd [PATH To Directory]/static-site-generation-with-jade-gulp/_src
// install node_modules
$ npm install
// or sudo npm install if permissions fail
// from there, you can run
$ gulp html
// to build html
// or
$ gulp watch
// to watch for changes on the jade files

Bushwazi

Written by

Bushwazi

Web developer Daddy who is jealous of all ski bums.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade