Static Site Generator with Gulpjs | Part 1: Setting up Browser-sync
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.