# 博客的起步
date: 2022-05-10
author: 西风镭
location: 深圳，华为软件中心
本博客基于VuePress搭建。
安装node.js
不低于8.6即可，一般10以上
创建你搭建博客的目录并初始化
新建文件夹my-vuepress-blog
进入文件夹my-vuepress-blog
1
2
2
- 创建docs文件夹，并建立首页
新建文件夹docs
进入文件夹docs
新建README.md
输入内容 # Hello VuePress
1
2
3
4
2
3
4
- 配置工程脚本和VuePress依赖
打开根目录下的package.json，写入脚本：
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
},
"devDependencies": {
"vuepress": "^1.9.7"
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- npm安装并启动
npm init
npm install -D vuepress
npm run docs:dev
1
2
3
2
3
- VuePress 会在 http://localhost:8080 启动本地热重载的开发服务器。
- 博客内容以markdown文件存储在docs及子目录下，仅支持一层子目录。
- 在doc文件夹下新建.vuepress文件夹，在该文件夹下新建config.js文件
module.exports = {
title: '***',
description: '***',
...
}
1
2
3
4
5
2
3
4
5
- 配置自定义设置项themeConfig
module.exports = {
...
themeConfig: {
//配置顶部导航栏
nav: [
{ text: '首页', link: '/' },
{ text: '***', link: '***'}
],
//配置侧边栏，支持不超过三层目录嵌套
sidebar: [
{
title: '欢迎光临',
path: '/',
collapsable: false,
children: [
{ title: "主页", path: '/' }
]
},
]
//其他配置可参考文档配置
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
- 提交代码到github代码仓（推荐设置私仓）
- 申请Github Access Token并配置secrets 参考 (opens new window)
- 在项目根目录下创建.github文件夹
- 在.github文件夹下创建workflows目录
- 在该目录下创建vuepress-deploy.yml文件
name: Build and Deploy
on: [push] //在每次推送时部署，可自定义修改成更合适的方式
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3 //调用三方支持
with:
token: ${{ secrets.ACCESS_TOKEN }}
- name: vuepress-deploy
uses: jenkey2011/vuepress-deploy@master //调用三方支持
env:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} //调用你配置的secrets
TARGET_REPO: username/repo //部署目标仓
TARGET_BRANCH: master //部署目标分支
BUILD_SCRIPT: npm install && npm run docs:build
BUILD_DIR: docs/.vuepress/dist
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
每次运行时自动构建并发布到你指定的代码仓（需要是公共仓）
在公仓的Settings-Pages启用Github Pages功能
恭喜您完成了博客的部署和发布
更新于2023.01： 因git更新到2.39.0之后启用了一些强制安全措施，导致jenkey2011/vuepress-deploy@master的流水线自动部署出现问题。 对于其流水线的entrypoint.sh的Prepare to deploy部分做出如下修改：
git config --global user.name "${GITHUB_ACTOR}"
git config --global user.email "${GITHUB_ACTOR}@users.noreply.github.com"
git config --global --add safe.directory /github/workspace/$BUILD_DIR
git init
1
2
3
4
2
3
4
参考链接：