Appearance
如何快速搭建可以自动化部署的博客
1. 创建一个 github 账号，假如用户名为 xiaoming
2. 创建一个仓库，名字必须为 xiaoming.github.io，前面的名字必须和你的用户名一致
3. 根据vuepress文档，初始化项目并上传到之前创建的项目
注意：要用 master 分支而不是 main
4. 修改 vuepress 项目配置
修改 package.json, 注意指定的构建目录，可以不叫 src，也可以其他名字，但一定不要是docs
json
"scripts": {
"dev": "vuepress dev src",
"build": "vuepress build src"
}"scripts": {
"dev": "vuepress dev src",
"build": "vuepress build src"
}5. 修改.vuepress里的config.js,
js
const path = require("path");
module.exports = {
title: "xxx",
dest: path.resolve(__dirname, "../../docs"), // 关键是这一行 意思是打包到docs文件夹
};const path = require("path");
module.exports = {
title: "xxx",
dest: path.resolve(__dirname, "../../docs"), // 关键是这一行 意思是打包到docs文件夹
};如何配置请参考官方文档 基础配置
6. 项目根目录创建 .github/workflows/ci.yml, 并拷贝如下文件内容
yml
name: Publish page
on:
push:
branches:
- master
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/checkout@v2 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
with:
persist-credentials: false
- name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
run: |
npm i
npm run build
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@releases/v3
with:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
BRANCH: gh-pages #
FOLDER: docs # The folder the action should deploy.name: Publish page
on:
push:
branches:
- master
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/checkout@v2 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
with:
persist-credentials: false
- name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
run: |
npm i
npm run build
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@releases/v3
with:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
BRANCH: gh-pages #
FOLDER: docs # The folder the action should deploy.7. push 提交代码
8. 打开 action 等待构建完成，生成打包后的分支 gh-pages
9. 打开仓库设置
10. 打开 pages
11. 如下配置
