Free blog space, beautiful VuePress

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." as the name, and the generated website address is "https: / / user name.",.
  • If you use other names, such as "gitpages" in this example, the final corresponding web address is“ ”.

Set to Public and select to add a 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
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 ,
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/

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 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/
- 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:

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
      - master

# task
    runs-on: ubuntu-latest
      - name: Checkout
        uses: actions/checkout@master
          persist-credentials: false

      # - name: Build
      #  run: npm install && npm run build

      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
          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

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',

Tags: git github Vue.js

Posted on Sun, 31 Oct 2021 19:57:57 -0400 by doc