Using Yeoman and Github Pages together to put out a static website

Set up Yeoman

Yeoman is a tool that helps you to kickstart new projects, prescribing best practices and tools to help you stay productive. It consists of a collection of scaffolds for building web apps using different technologies.

We’ll be using the plain webapp generator — yeoman/generator-webapp. This is a scaffold for webapp with SCSS (it’s backward compatible with CSS so you don’t need to know SCSS but it’s useful), automatic live-reloading and other features. Go through the readme for more information. And follow the Getting Started section to get it setup and running.

Once you’re previewing your website with gulp serve. You can start editing the webapp in the app/ folder and it’ll live-reload as you do. The structure of the webapp is self explanatory.

Push to Github

Now you’ll want to set up the version control. So use git init and push to a new repository, private or public. Before we go further, we need to edit our .gitignore file in the repo. Remove the line that has dist. And add it to the repo.

git add dist && git commit -m "Initial dist subtree commit"

The dist folder is the compiled version of your webapp. To compile the latest version of your webapp you need to run gulp. Then to get this up on Github Pages you need to run:

git subtree push --prefix dist origin gh-pages
# This pushes just the dist folder to the gh-pages branch of Github

# The site should show up at:  
# http(s)://<your-username>.github.io/<repository-name>

You can visit your site at the above URL. As you make changes compile your webapp, commit it, push to Github and you can push the dist folder whenever you want to update the site at Github Pages.

[Optional] Setting up Custom Domain

To use a custom domain you need to make some changes to the Gulpfile.js and make a new file called just `CNAME` in the app folder containing just the domain name. After you do this build the webapp and push the dist folder.

## gulpfile.js

gulp.task('extras', () => {
  return gulp.src([
    'app/*.*',
    '!app/*.html',
    'app/CNAME' // We tell gulp to copy this over when building
  ], {
    dot: true
  }).pipe(gulp.dest('dist'));
});

## CNAME

customdomain.com

Then follow the instructions to point your domain at Github Pages.