GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub. It is a very simple way to publish a website using a GitHub repository.
To deploy your capstone project on GitHub Pages, first you need to have a GitHub account and repository setup for your project. If you don’t already have one, you can create a new repository on GitHub to hold the source code and files for your project. Make sure it is a public repository.
Once you have the repository created, you need to configure it for GitHub Pages deployment. By default, GitHub Pages will publish the ‘master’ branch of your repository, but you can also configure it to publish the ‘gh-pages’ branch instead. Having a separate branch for publication is generally recommended.
To set this up, push all your project code to the ‘master’ branch in your repository as usual. Then from your local repository, checkout a new branch called ‘gh-pages’ and push this branch to GitHub as well:
Copy
git checkout -b gh-pages
git push origin gh-pages
This creates a new ‘gh-pages’ branch to hold the published version of your site.
Next, you need to configure your repository settings in GitHub to publish from the ‘gh-pages’ branch. Go to your repository settings page on GitHub and select ‘Options’ from the left sidebar. Scroll down to the ‘GitHub Pages’ section and select the ‘gh-pages’ branch as source. This tells GitHub Pages to build and publish your site from that branch.
After configuring the GitHub Pages settings, your site should be available immediately at https://
To deploy your project code to the ‘gh-pages’ branch, you need to build your project first locally into a dist or build folder that contains only static HTML, CSS and JavaScript files. Then push the contents of that output folder to the ‘gh-pages’ branch on GitHub:
Copy
git checkout gh-pages
git rm -r *
cp -r path/to/build/folder/* .
git add -A
git commit -m “Deploying to GitHub pages”
git push origin gh-pages
This removes any existing files, copies over the built/static project files, stages and commits the changes, then pushes to update the ‘gh-pages’ branch on GitHub. Now your live site will be updated with the latest build.
Each time you make changes to your project code that need publishing, repeat the build and deploy steps above to update GitHub Pages. You can also automate this publish workflow using continuous integration tools like Travis CI to automatically deploy on new commits.
Some key points when deploying with GitHub Pages:
Use a separate ‘gh-pages’ branch for production builds
Configure GitHub repo settings to publish from ‘gh-pages’
Build project into static files before deploying
Remove old files and copy over new build on each deploy
Pushing to ‘gh-pages’ triggers GitHub Pages rebuild
Site will be available at
Automate deploy workflow for easier publishing changes
By following these steps, you can easily deploy your completed capstone project as a static website hosted for free on GitHub Pages. This provides a public URL to share and demonstrate your project work to others.
Andrew Stroud