Continuous deployment using Gulp and Surge

In this article, we will explore another static website publishing platform called Surge.

Introduction

We saw how easy it was to set up continuous deployment using Gulp and Netlify previously.

It enhanced our workflow and took care of a lot of mundane tasks. (I finally finished Season Two of Black Mirror. Thank you Netlify!)

In this article, we will explore another kickass static website publishing platform.

Similar to Netlify, Surge is a static website publishing platform. It may not have all the bells-and-whistles that Netlify provides but it is still one of my favourites.

Requirements

Initial Setup

Install Node.js. Node.js comes with npm aka Node Package Manager and is required to install our Gulp packages.
Install Gulp and the Gulp CLI.

$ npm install gulp-cli -g
$ npm install gulp -D

Create a gulpfile.js and index.html in our project root folder.

$ touch gulpfile.js index.html

Copy the following starter HTML and paste it into index.html.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>A Surge Gulp Demo</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    </head>
    <body>
      <div class="container">
        <div class="row">
          <div class="col text-center p-5">
            <h1>Hello World!</h1>
            <p>A Simple Surge Demo.</p>
          </div>
        </div>
      </div>
    </body>
    </html>

Create a package.json file. This file will contain a list of our project dependencies.

$ npm init

Install the following gulp dependencies required for this project.

$ npm install gulp-connect gulp-open

Copy the following code and paste into gulpfile.js.

const { series, src, gulp } = require('gulp');
const connect = require('gulp-connect'); // Runs a local webserver
const open = require('gulp-open'); // Opens a URL in a web browser

// Launch Chrome web browser
// https://www.npmjs.com/package/gulp-open
function openBrowser(done) {
    var options = {
    uri: 'http://localhost:8080'
    };
    return src('./')
    .pipe(open(options));
    done();
}

// Gulp plugin to run a webserver (with LiveReload)
// https://www.npmjs.com/package/gulp-connect
function server(done) {
    return connect.server({
    root: './',
    port: 8080,
    debug: true,
    });
    done();
}

// Default Gulp command
exports.default = series(openBrowser, server);

This simple script starts a local development server and launches a browser to preview our website.

Let's test it by running the following command.

$ gulp

See how to automate your development workflow using Gulp.

A Surge of excitement

Install the Surge CLI.

$ npm install --global surge

To see the commands available, run $ surge --help

Deploy our simple index.html.

$ surge

You will see the following in the terminal window.

Running as my-email-address@gmail.com

            project: C:\Users\papagoat\Desktop\gulp-surge-demo\
            domain: acoustic-history.surge.sh
            upload: [] 100% eta: 0.0s (4 files, 129750 bytes)
            CDN: [====================] 100%
                IP: 127.0.0.1

Success! - Published to acoustic-history.surge.sh

On the first run, Surge will prompt you for registration details prior to deploying your codes.

If you visit the published URL (in our case, https://acoustic-history.surge.sh/), you will see the website in its entire glory.

It's that simple!

Integration with Git

Surge offers a way to integrate your project with Git using Git Hooks. Unfortunately, at the time of writing, the npm package git-scripts only works on MacOs and Linux.

What a bummer! Sorry Windows users!

Without Git Hooks, publishing our static website becomes tedious. We have to commit our codes to Git and deploy to Surge separately.

Too much work for a lazy programmer!

BUT who's to say we cannot cheat?

Install the Surge library for Gulp.

$ npm install --save-dev gulp-surge

Insert the following code into gulpfile.js. (Remember to change the project and domain values to your own.)

...
...Runs a local webserver
const exec = require('child_process').exec; // run command-line programs from gulp
const surge = require('gulp-surge'); // Surge deployment

...
// Commit and push files to Git
function git(done) {
    return exec('git add . && git commit -m "surge deploy" && git push');
    done();
}

// Deploy
function surgeDeploy(done) {
    return surge({
    project: './', // Path to your static build directory
    domain: 'your-surge-domain.surge.sh'  // Your domain or Surge subdomain
    })
    done();
}

// Deploy command
exports.deploy = series(git, surgeDeploy);

// Default Gulp com...

Run the following command.

$ gulp deploy

Celebrate.

Conclusion

Gone are the days where developers have to separately build, package and deploy their codes.

With so many tools at our disposal, there is no reason to not leverage on them.

Surge takes care of mundane tasks during deployment. One command is all you need to publish a static website.

Coupled with Gulp and you have a complete build and code packaging process for your development workflow.

Less time spent on development means more time watching Netflix.

You can grab all the files for this tutorial from the GitHub repository.

Time to catch up on Season 3 of Black Mirror.

Latest Posts

How Chat-GPT Replaced My Job

The Rise and Fall of AI Empires

GPT-3: The Latest Craze in NLP