When trying to find instructions on how to publish into Github Pages, I found that is was not very clear when trying to publish a static site. I thought it would be good to write a guide on how to publish a static site into Github Pages and hopefully eliminate any confusion in trying to do so.
Any feedback or comments would be appreciated.
- Check your project into Github > master branch
- Create a Github Token
- Click on your profile > Settings > Personal Access Tokens
- Create a .travis.yml file to build your project
- Log into Travis CI and add the GITHUB_TOKEN environment variable.
- Select the project repository > More Options > Settings
- Ensure your project repository is enabled
- Trigger a build if it does not automatically happen when you enable the project repository
Let me break it down…
In short all the hard work is done in Travis CI, meaning…
- npm install
- npm install codecov -g
- npm run test
- npm run styleguide:build
github-token: $GITHUB_TOKEN # Set in travis-ci.org dashboard, marked secure
language: Tells Travis CI that the project is a node project and will make available node and npm
install: will run a list of any install commands required before script execution, in our case installing npm dependencies
script: will run a list of commands to build our project, in this particular example I am running
npm run styleguide:build which will build a static site.
after_success: will run a list of commands after your build has succeeded
deploy: this step is what actually pushes the static site into Github Pages after every build
- specifying the provider as pages lets Travis CI know your deploying to Github Pages
- skip-cleanup ensures that after the build the folder you are trying to deploy is not deleted before you can deploy it
- github-token ensure you deployer task as enough privilege to push to Github Pages
- keep-history ensure that a force push is not performed
- local-dir is the directory you are pushing to Github Pages, in our case it is the static site that got created from our script command
npm run styleguide:buildearlier
- Easy, quick and simple to setup with none to minimal maintence
- Code and documentation in one repository
- Automated deployment of your static site every time you push your code to Github
- Free hosting of your static site
You can check out the project from the following location below:
Project URL: https://github.com/Rob-Leggett/ui-react-component-kit
Demo / Styleguide: https://rob-leggett.github.io/ui-react-component-kit/
NPM Package: https://www.npmjs.com/package/ui-react-component-kit
What you can learn:
- Travis CI
- Github Pages
- Code Coverage
- Unit Tests
- Snapshot Tests
How you can help?
Any donations received will be able to assist me provide more blog entries and examples via GitHub, any contributions provided is greatly appreciated.
Thanks for your support.