How to connect a github project to github-pages with automatic deployment via travis

.github-pages-with-travis.md

• Enter the project settings. Under GitHub Pages section, set Source to Master branch (we will change the branch later).
• Add the github-pages link (e.g. https://ansyn.github.io/project-name/) to the project's description line at github.
• To the project's root, add file named .travis.yml (see file contents below in this gist, copy from there).
• To the project's package.json file, scripts section, add the following two lines:

"predeploy": "npm run build -- --base-href=https://ansyn.github.io/project-name/ --deploy-url=https://ansyn.github.io/project-name/",
"deploy": "gh-pages --repo https://$GITHUB_TOKEN@github.com/AnSyn/project-name.git -d dist/project-name"

And replace project-name with the current project's name

• Add gh-pages add a dev dependency: from a terminal, enter yarn add gh-pages --dev
• In your github settings, enter Developer Settings -> Personal access tokens. Add a token. Give it repo scope permissions. Copy the token (we'll use it very soon)
• Enter Travis. Enter your settings. Click on Sync account button, to sync travis with github.
• (Cont.) Find the target project in the repositories list. Click on the toggle button for that line, to link your project with Travis.
• (Cont.) Click on the Settings button for the target project. Under the heading Environment Variables add an Environment Variable, with name GITHUB_TOKEN. For the value, paste the token that you just created in Github (see above). Click on the Add button.
• Push your project to github, to trigger Travis At Travis, click on Build History tab, to see the active build Follow the log of the active build, and verify that it deployed succussfully. If the deploy failed, check for error messages in the log, and fix. (an example for a problem: the project name in angular.json or package.json does not match the real project name) If you changed the project, push it again. If not, click on the Rebuild button in Travis.
• Go back go Github, and to the project settings. In the GitHub Pages section, change Source to gh-pages branch and click on Save.
• Click on the link to your github-pages page, to verify that it starts well now. (If you tried this link before, you may need a hard refresh)

.travis.yml

addons:
  apt:
    sources:
      - google-chrome
    packages:
      - google-chrome-stable

language: node_js

node_js:
  - 'node'

before_install:
  - "/sbin/start-stop-daemon --start --quiet --pidfile /tmp/custom_xvfb_99.pid --make-pidfile --background --exec /usr/bin/Xvfb -- :99 -ac -screen 0 1280x1024x16"

install:
  - yarn install

# Init GUI
before_script:
  - "export DISPLAY=:99.0"
  - "sh -e /etc/init.d/xvfb start"
  - sleep 3 # give xvfb some time to start
  #- apt-get install graphicsmagick # for e2e screenshots

script:
  - echo "skipping tests"

cache:
  directories:
    - ./node_modules

deploy:
  provider: script
  script: "npm run deploy"
  skip_cleanup: true
  on:
    branch: master



notifications:
  email: false