Using GitHub Pages for a Personal Website.

Google’s Web Starter Kit + GitHub Pages = Fun

jeff
jeff
Jul 5, 2014 · 5 min read

GitHub Pages and Web Starter Kit

Prerequisites

Step 1: Create GitHub Repositories

Step 2: Make a Website

# Clone our GitHub Pages source repository.
git clone git@github.com:[username]/gh-pages.git
# Change directory into our repository.
cd ./gh-pages
# Install Yeoman Web Starter Kit generator.
npm install generator-web-starter-kit
# Scaffold out Web Starter Kit project with Yeoman.
yo web-starter-kit
# Save our progress by pushing back to GitHub.
git add -A
git commit -m “Scaffolding out a Web Starter Kit project.”
git push
gulp serve

Step 3: Modify Gulp Build

FILE .editorconfig
DIR .git
FILE .gitattributes
FILE .gitignore
FILE .jshintrc
FILE LICENSE
FILE README.md
DIR app
FILE bower.json
FILE gulpfile.js
FILE index.html
DIR node_modules
FILE package.json
// Clean Output Directory
gulp.task(‘clean’, function (cb) {
rimraf(‘dist’, rimraf.bind({}, ‘.tmp’, cb));
});
// Clean Output Directory
gulp.task(‘clean’, function (cb) {
return gulp.src([‘dist/*’, ‘!dist/{.git,.git/**,README.md}’])
.pipe($.clean());
});
npm install gulp-clean —save-dev

Step 4: Add Git Submodule

# Run from the gh-pages directory to remove the 'dist' folder.
rm -rf ./dist
# Run from inside the gh-pages directory.
git submodule add https://github.com/[username]/[username].github.io.git dist
git add -A
git commit -m “Add a submodule to point to Pages repository.”
git push

Step 5: Success!

# Run default task which cleans and builds site.
gulp
# Check contents of ‘dist’ directory.
ls -la ./dist
git add -A
git commit -m “Scaffolded out Web Starter Kit project.”
git push

Closing

    jeff

    Written by

    jeff

    A web enthusiast.