Automatically deploy GitHub Pages using Travis CI

Assuming you already know about GitHub’s GitHub Pages feature, you can turn it on in Settings by putting the front-end file in the GitHub repository. ::: tip A project named ${username}.github. IO is enabled by default and can be accessed at https://${username}.github.io (home page), but can only be built from the massets branch. : : :

If you’re developing HTML files, there’s nothing wrong with doing this; you just need to submit the code after each change. However, most front-end development needs to compile this operation, which means that the source code is not directly run in the browser. In this case, we also have two ways: 1. After each modification, we manually package locally, and then submit the packaged file. 2. Use automatic deployment, automatically capture and package the code after each code submission, and then automatically push the packaged file to the Github repository.

It’s pretty obvious which one is better, but today I’ll describe the process of automatic deployment using Travis CI and some of the issues I encountered. Mainly through the Vuepress project and the VUE project, in addition, you may be interested in this

  • VuePress deployment
  • Nuxt deployment

Vuepress project deployment

First you need to have a Vuepress project and a Github account. I’m assuming you have both. Now upload the Vuepress project to the Github repository.

Then you need to have a Travis CI account: Click on Travis CI and sign up using your Github account.

Click on your avatar>Click on theSettingsFind your Vuepress project and select it, like this

Then go back to github and click on your avatar> settings > Developer settings > Personal access tokens >Click generate token

All you need to do is select the permissions in the screenshot and go to the bottom and click Generate

At this point you need to copy it and save it in a safe place, because when the page is refreshed you can’t see it and you have to regenerate it.

Now back toTravis CIPage, find yoursvuepressProject, click Settings

Find this place and add what you just got hereGITHUB_TOKEN

Now go to your vuePress project code and create a.travis. Yml file under the root project. This configuration file belongs to Travis CI, and when Travis CI pulls your code, it will execute the build using the rules inside, like this

    language: node_js
node_js:
  - lts/*
install:
  - npm install
script:
  - npm run docs:build # npm run docs:build
deploy:
  provider: pages
  skip_cleanup: true
  local_dir: docs/.vuepress/dist 
  github_token: $GITHUB_TOKEN # generated on GitHub to allow Travis to push code to your repository. Set it to Secure Variable on Travis' project Settings page
  keep_history: true
  on:
    branch: master # pull code from master branch
Copy the code

The above code can be interpreted as: Give us a Node environment, pull code from the master branch, execute the NPM install command on the pulled project, then execute the NPM run docs:build command, Then push the files in docs/.vuepress/dist to the gh-Pages (default) branch of your Github repository.

Finally, submit your code to the repository. See if Travis CI helps you build automatically.

Vue project deployment

Now let’s look at how to deploy a Vue project. In fact, every project is configured in the same way, but.travis. Yml is different.

    language: node_js
node_js:
  - lts/*
install:
  - npm install
script:
  - npm run build 
deploy:
  provider: pages
  skip_cleanup: true
  local_dir: dist 
  github_token: $GITHUB_TOKEN # generated on GitHub to allow Travis to push code to your repository. Set it to Secure Variable on Travis' project Settings page
  keep_history: true
  on:
    branch: master # pull code from master branch
Copy the code

I have a vue project that I want to deploy to caihai123.github. IO, which is my home page, but as mentioned earlier, the home page must be built from the Master branch, so I am happy to change the configuration file to this

    language: node_js
node_js:
  - lts/*
install:
  - npm install
script:
  - npm run build 
deploy:
  provider: pages
  skip_cleanup: true
  local_dir: dist
  github_token: $GITHUB_TOKEN # generated on GitHub to allow Travis to push code to your repository. Set it to Secure Variable on Travis' project Settings page
  keep_history: true
  target-branch: master
  on:
    branch: gh-page
Copy the code

That is, put the source code ingh-pageBranch, pull when code changesgh-pageThe branch code executes packaged, and then the packageddistPushed to themasterBranch. But when I submit the code,

It means it’s not allowed to push to this branch, so if you think about it, this branch is a little special. Just when I want to give up and found another way, can not help but sigh at the wisdom of others, really cattle force

language: node_js
node_js:
  - lts/*
install:
  - npm install
script:
  - npm run build 
after_script:
  - cd ./dist
  - git init
  - git config user.name "${GIT_NAME}"
  - git config user.email "${GIT_EMAIL}"
  - git add .
  - git commit -m "Update docs"
  - git push --force --quiet "https://${GITHUB_TOKEN}@${GH_REF}" master:master
branches:
  only:
  - gh-page
env:
 global:
   - GH_REF: github.com/caihai123/caihai123.github.io.git
Copy the code

Git can be used locally to submit code to master, so why not?

::: warning

If you’re a bit more handsome, you might have noticed that my domain name is caihai123, not caihai123.github. ${username}.github. IO {master}.github. IO {master}.github. Now every time you submit the code, all the master code will be replaced, so I directly put the CNAME in public in my VUE project, so that the file will be in the DIST after each package, isn’t it great?

: : :

conclusion

To summarize, Travis CI automation consists of these steps:

  1. registeredTravis CIAccount.
  2. willgithubGenerated on thePersonal access tokens(token) configured toTravis CIIn the.
  3. add.travis.ymlThe configuration file