Welcome to 2017. Each year over the holidays I try to do something new to my neglected website. This year I decided to update the layout and use the static site generator Jigsaw to make it easier to maintain.

Jigsaw is a framework for rapidly building static sites and bakes in support for Laravel Elixir so you can compile your CSS and Javascript assets the same way you're used to in Laravel. Since I love Laravel and PHP it seems like a perfect fit for my website.

How I got started

To begin I simply created a new directory on my local computer and ran a composer command to bring in the dependencies:

composer global require tightenco/jigsaw

Let composer do it's work then you will have a basic structure setup. Next to take advantage of browsify and gulp you will need to:

npm install
npm install -g browserify
npm install -g gulp

I wanted to use SASS and also use the wonderful bootstrap framework to help build the site quickly. To use Bootstrap SASS with Jigsaw you need to make a quick edit to your "package.json" file. Here is what mine looks like:

{
  "private": true,
  "devDependencies": {
    "gulp": "^3.8.8",
    "laravel-elixir": "^4.2.0",
    "yargs": "^4.6.0",
    "bootstrap-sass": "^3.0.0"
  },
  "dependencies": {
    "jquery": "^3.1.1"
  }
}

Afterwards you need to run "npm install" to bring in the new dependencies:

npm install
npm install -g browserify

To bring in the fonts associated with bootsrap I made another change to my "gulffile.js". Here is what it looks like:

var gulp = require('gulp');
var elixir = require('laravel-elixir');
var argv = require('yargs').argv;

elixir.config.assetsPath = 'source/_assets';
elixir.config.publicPath = 'source';

elixir(function(mix) {
    var env = argv.e || argv.env || 'local';
    var port = argv.p || argv.port || 3000;

    mix.copy(
        'node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot',
        'source/fonts'
    ).copy(
        'node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf',
        'source/fonts'
    ).copy(
        'node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff',
        'source/fonts'
    ).copy(
       'node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2',
       'source/fonts'
    );

    mix.sass('main.scss')
        .exec('jigsaw build ' + env, ['./source/*', './source/**/*', '!./source/_assets/**/*'])
        .browserify('app.js')
        .browserSync({
            port: port,
            server: { baseDir: 'build_' + env },
            proxy: null,
            files: [ 'build_' + env + '/**/*' ]
        });
});

I created a few files to segment the layout of my site, In my "_source/layouts/master.blade.php" I have the following:

<!DOCTYPE html>
<html lang="en">
    <head>
        @include('_partials.head', ['title' => $page_title])
    </head>
    <body class="{{ $page_body_class }}">

    	@include('_partials.header')

    	<div class="page-wrapper">
        	@yield('body')
        </div>

        @include('_partials.footer')
        
    </body>
</html>

To segment out my sites head tag HTML I created a new partial in "_partials/head.blade.php" with the following content:

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="/css/main.css">

@if ($page_body_class == 'page-blog-post')
<link rel="stylesheet" href="/css/syntax-highlighter/dracula.css">
<script src="/js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
@endif

<title>{{ $title }}</title>

To segment out the header of my site I created a new partial in "_partials/header.blade.php" with the following content:

<header>

	<div class="container">

		<div class="row">

			<div class="col-xs-5 col-sm-4 col-md-4 col-lg-4 no-pad-lr logo-wrapper">
				<div class="logo-container">
					<span class="logo" onclick="window.location='/'">
						<strong>teg</strong>
						<span>design</span>
					</span>
					<span class="motto">
						web work by tegan snyder
					</span>
				</div>
			</div>

			<div class="col-xs-7 col-sm-8 col-md-8 col-lg-8 nav-wrapper">
				<nav class="pull-right">
					<a href="/" class="home-link">Home</a>
					<a href="/about">About</a>
					<a href="/blog">Blog</a>
					<a href="/contact">Contact</a>
				</nav>
			</div>

		</div>

	</div>

</header>

Finally to segment out the footer HTML of my site I created a new partial in "_partials/footer.blade.php" with the following content:

<footer class="container-fluid">
	<div class="container">
		<div class="row footer-row">
			<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
				<p>&copy; 2017 Tegan Snyder, All Rights Reserved.</p>
			</div>
			<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
				<div class="footer-question">
					Have a question? <a href="/contact" class="contact-btn">Contact Me</a>
				</div>
			</div>
		</div>
	</div>
</footer>

<script src="/js/app.js"></script>

When I structure new pages on my site I simply create a new page in called "page-name-here.blade.php" and place it in the "source" folder:

touch source/page-name-here.blade.php

The contents of this file look something like this:



@extends('_layouts.master')

@section('body')

<p>Page content goes here</p>

@endsection

Notice the variables on this first two lines. That is a hacky way to control the page title in the "_partials/head.blade.php" and also append a body class, so we can apply individual styles to pages using the SASS file in "_assets/sass/main.scss".

In my SASS file ("_assets/sass/main.scss") I changed the first few lines to bring in the bootstrap fonts and also include the bootstrap SASS styles.

$icon-font-path: '../fonts/';

@function font-path($path) {
  @return $path;
}

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

/* Page: Example of styling specific to a page */
.page-blog-post {
	.whatever {
		color: #000;
	}
}

Finally in the javascript file you need to bring in the bootstrap JS and JQuery. To do this edit "_assets/js/app.js" and make the first few lines look like this:

window.$ = window.jQuery = require('jquery')
require('bootstrap-sass');

To build the website and preview it locally you just need to run:

gulp watch

You will get a preview page up for your website that will automatically update as you make changes, thanks to browsify.

Sometimes you make run into an issue where a new page doesn't get picked up. You can always run jigsaw to build it manually: 

jigsaw build

Jigsaw places your locally compiled website in the "build_local" folder. You can also issue a command to build a production version:

jigsaw build production

When it comes time to deploying you can setup a Github webhook on your repository, or follow one of the many methods in the Jigsaw documnentation.

Overall I'm liking this setup so far. It allows me complete flexibility over the control of the website and produces fast loading static site I can easily host on a Digital Ocean $5 droplet.