What is GitHub Pages

GitHub Pages are static websites that host individuals, organizations, or projects from the GitHub repository. GitHub Pages is designed to host your personal, organization, or project pages from a GitHub repository.

Set up steps

1. Establish a warehouse for complete projects

The example is a single-page application, built using Webpack. The package results in the following structure file, which is the final source file published to GitHub Pages.

Dist ├ ─ ─ the static │ ├ ─ ─ CSS │ │ ├ ─ ─. Main CSS │ │ └ ─ ─ head. The CSS │ ├ ─ ─ js │ ├ ─ ─ the main, js │ └ ─ ─ head. Js └ ─ ─ index. The HTMLCopy the code

2. Create the.travis. Yml file

Use Travis CI for continuous publishing. Start by creating a new.travis. Yml file in the root of your project to tell Travis CI to run a simple script. The example code is as follows:

# .travis.yml
language: node_js
sudo: falseNode_js: -10.15.1 script: -bash scripts/deploy-to-gh-pagesCopy the code

3. Create an automatic deployment script

The script needs to upload the files from the packaged dist directory to the corresponding GH-pages branch of the repository.

# deploy-to-gh-pages.sh
#! /bin/bash

rm -rf dist
npm run build

cd dist
git init
git add .
git commit -m 'Travis build'
git push --force --quiet "https://${GITHUB_TOKEN}@github.com/[user]/[repository name].git" master:gh-pages

Copy the code

GITHUB_TOKEN needs to be set on GitHub, as shown in the figure below:

4. Create the GH-pages branch

GitHub Pages has a variety of ways to publish site source code, so choose to create a new gh-Pages branch here.

After the branch is created, go back to GitHub, click Settings under the corresponding repository, go to GitHub Pages and select GH-Pages branch from the drop down box to release the source code. As shown in figure:

When we submitted the code, Travis CI copied the repository into a new virtual environment and then performed a series of tasks to build the code, which was then deployed to the GitHub Pages service.

Problems you might encounter

1. Resource reference fails

Generally, webpack-generated resources default to absolute paths, which will cause resource references to fail when deployed to middleware with context (404).

The solution is to set the generated resource path to a relative path during the packaging process, find the output in the Webpack configuration, and add publicPath: ‘./’.