1. Configure GitHub Pages
GitHub creates a new repository.
Fill in the name of the repository. The naming rules are as follows:
- Take "user name. github.io" as the name, and the generated website address is "https: / / user name. github.io",.
- If you use other names, such as "gitpages" in this example, the final corresponding web address is“ https://flylolo.github.io/gitpages/ ”.
Set to Public and select to add a README.md file.
Because it is a vue project, the. gitignore file selects Node.
Click the Create button to start creating.
After the creation is successful, the page is shown in the figure below. Click Settings to set it
Click Save to see the following prompt on the page
Click this link to see that you can access it normally.
The displayed content is the content of README.md.
In this way, the configuration is successful. You can create your own static website and check it in to the repository.
2. Configure VuePress
I have always liked the style of vue's official documents, and also provided the open source VuePress at https://vuepress.vuejs.org/zh/ ，
It is also a document style with a similar style.
According to the instructions in the guide menu, create a website with VuePress as the framework template.
VuePress needs Node.js >= 8.6
2.1 create and enter a new directory
mkdir vuepress-starter && cd vuepress-starter
2.2 initialization using package manager
yarn init # npm init
2.3 installing VuePress as a local dependency
yarn add -D vuepress # npm install -D vuepress
2.4 create the first document
mkdir docs && echo '# Hello VuePress' > docs/README.md
2.5 add some in package.json scripts
{ "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } }
2.6 start the server locally
yarn docs:dev # npm run docs:dev
VuePress will http://localhost:8080 Start a hot overloaded development server.
This is definitely not the beautiful page we want. Let's set it up again.
2.7 setting theme
The default theme provides a home page layout (for The home page of this website ). To use it, you need to use README.md at your root level YAML front matter Specify home: true. Here is an example of how to use it:
--- home: true heroImage: /hero.png heroText: Hero title tagline: Hero Subtitle actionText: Get started quickly → actionLink: /zh/guide/ features: - title: Simplicity first details: with Markdown A project centered structure with minimal configuration helps you focus on writing. - title: Vue drive details: enjoy Vue + webpack Development experience in Markdown Used in Vue Components can be used at the same time Vue To develop custom themes. - title: High performance details: VuePress Generate static for each page pre render HTML，At the same time, when the page is loaded, it will be used as SPA function. footer: MIT Licensed | Copyright © 2018-present Evan You ---
After setting, you can see that the page we want appears.
For other settings, refer to other help pages: https://vuepress.vuejs.org/zh/theme/default-theme-config.html#%E9%A6%96%E9%A1%B5
3. Publish to GitHub Pages
The next step is to publish the generated web page to GitHub. The intuitive idea is to push the built file of the project to the Repository created above. In fact, the practice can be more "ingenious".
- Commit the source file to the main branch.
- Through GitHub's Actions, after the previous step is completed, automatically build and submit the results to another branch (GH pages).
- GitHub Pages points to the GH pages branch.
3.1 create GH pages branch
As shown in the following figure, enter GH pages in the drop-down menu and click the Create branch prompt below to create a GH pages branch.
3.2 point GitHub Pages to GH pages branch
Modify as shown in the following figure:
3.3 setting automatically published tokens
Because automatic publishing is required, set the Token for publishing.
First create a Token, and then create it step by step according to the following figure.
Click the avatar in the upper right corner and select Setting:
Click Developer setting on the open page
Select Personal access tokens and click the Generate token button to create a new Token
As shown in the following figure, it is only used for publishing, and only repo permission can be given
Remember to copy the token after it is generated
Set the token, select secrets in the gitpages library settings, and click the new repository secret button.
Set the created Token in the newly opened page, and the name is ACCESS_TOKEN.
4. Set Actions to deploy automatically
In gitpages, select the Action menu and click the set up a workflow yourself link.
A main.yml file is created by default, as shown in the following figure
name: Deploy GitHub Pages # Trigger condition: after push ing to the master branch on: push: branches: - master # task jobs: build-and-deploy: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@master with: persist-credentials: false # - name: Build # run: npm install && npm run build - name: Deploy uses: JamesIves/github-pages-deploy-action@releases/v3 with: ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} BRANCH: gh-pages FOLDER: public BUILD_SCRIPT: npm install && npm run build # The build script the action should run prior to deploying.
5. Release
First, the repository set by clone
git clone https://github.com/FlyLolo/gitpages.git
Copy the VuePress file created above to the gitpages folder of clone
git add . git commit -m "first" git push
push the file to the repository.
At this point, you can see the progress of publishing in the Action menu
Click the record shown by the arrow to see the specific release progress in the new page.
If you find that publishing fails, you can view the error message here.
6. A mistake
When accessing the published page, the following errors may occur, and the style is not loaded normally.
When publishing to a subdirectory, the following problems will occur. Create config.js in the gitpages\docs.vuepress directory and set it as follows.
module.exports = { title: 'Hello VuePress', description: 'Just playing around', base:'/gitpages/' }