Static Site Generator with Gulpjs | Part 1: Setting up Browser-sync

January 26, 2016 — 2 Comments

I wanted to create a static site without having to copy and paste the header/footer and other common snippets.
There’s lots of tools that would do this including Jekyll (ruby) or Pelican (python), but I wanted something fast and easy to work with.
I figured I could use gulp.js with plugins to create the same type of static site generator as the above two.
Let’s start by installing gulp and browser-sync and creating an index page to display.

Installing Plugins

Let’s start by installing the plugins in our project. In our command line, type the following.

$ npm init
$ npm install gulp browser-sync --save-dev

Folder Structure

Let’s create two folders in our project folder called app/ and a file, gulpfile.js
Our Folder Structure

├── app
├── gulpfile.js

Browser Reloading

We are installing a tool called browser-sync which watches our files and automatically reloads the server, so that we do not need to constantly refresh the page. Let’s edit our gulpfile.js to look like the file below.

// gulpfile.js
var gulp        = require('gulp');
var browserSync = require('browser-sync');

gulp.task('serve', function() {
    browserSync({
        server: {
            baseDir: 'app' // Change this to your web root dir
        }
    });
});

// Default task to be run with `gulp`
gulp.task('default', ['serve']);

The first two ‘var’ lines are importing our plugins. The ‘gulp.task’ functions are running our gulp tasks. One which includes running browser-sync, and the other will default to the first task without any additional command line parameters.

Let’s set up our index page in the app folder. I grabbed the default bootstrap demo site.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </body>
</html>
  Folder Structure
├── app
|    ├── index.html
├── gulpfile.js

Running Commands

In the terminal, run the command ‘gulp’ or ‘gulp serve’ and it should open a browser window with the index.html page shown.
If you leave gulp running and change the index.html page, it will automatically reload and show you your edits.

You can see what we currently have on Github.

Check out Part 2 on building a static site generator with gulp.

Mike

Posts Twitter Facebook

My name is Michael Le, and I am a web developer.

2 responses to Static Site Generator with Gulpjs | Part 1: Setting up Browser-sync

  1. Thanks for this tutorial, it helps put things into better perspective.

Trackbacks and Pingbacks:

  1. Static Site Generator Tutorial Part 2: Nunjucks and Templates - Michael Le - January 30, 2016

    […] Part 1, we set up gulpjs and browser-sync to build a static site generator. In this part, we will set up a […]

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.