NodeJS with Github Pages and Travis CI | Its a blog's world on WordPress.com

April 06, 2018 0 Comments

NodeJS with Github Pages and Travis CI | Its a blog's world on WordPress.com

 

 


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.

Steps

  • Check your project into Github > master branch

e.g, https://github.com/Rob-Leggett/ui-react-component-kit

  • Create a Github Token
    • Click on your profile > Settings > Personal Access Tokens


github-personal-access-token

  • Create a .travis.yml file to build your project

e.g. https://github.com/Rob-Leggett/ui-react-component-kit/blob/master/.travis.yml

  • Log into Travis CI and add the GITHUB_TOKEN environment variable.
    • Select the project repository > More Options > Settings


travis-ci-environment-variables

  • Ensure your project repository is enabled

travis-ci-enable-repo

  • Trigger a build if it does not automatically happen when you enable the project repository
    • You will now have a gh-pages branch created and pushed to Github
    • You will now have the static site publish to Github Pages


github-settings-gh-pages

Let me break it down…

In short all the hard work is done in Travis CI, meaning…

language: node_js install: - npm install script: - npm install codecov -g - npm run test - npm run styleguide:build after_success: - codecov deploy: provider: pages skip-cleanup: true github-token: $GITHUB_TOKEN # Set in travis-ci.org dashboard, marked secure keep-history: true local-dir: styleguide

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:build earlier

Benefits…

  • 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

Reference materials

Travis CI to Github Pages deployment documentation
Github Pages documentation

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:

  • ReactJS
  • Typescript
  • Styleguist
  • Travis CI
  • Github Pages
  • Webpack
  • 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.

Donate


Tag cloud