一、vuepress搭建项目
1.创建项目文件夹
mkdir blog && cd blog
2.项目初始化和安装vuepress及其默认主题
yarn init -y
yarn add vuepress @vuepress/theme-blog -D
3.创建目录结构
├── blog //package.json同级再建立一个blog文件夹
│ ├── _posts //post文件夹存储你的文章信息
│ │ ├── 2018-11-7-test.md #example //文章一
│ │ ├── 2019-2-26-demo.md #example //文章二
│ │ └── 2019-5-6-theme.md #example //文章三
│ └── .vuepress
│ ├── components //存放vue组件 在这里存放的将自动注册到全局
│ ├── public //静态资源文件
│ ├── styles //样式文件目录
│ │ ├── index.styl //默认基础样式文件
│ │ └── palette.styl //调色板用于替代默认颜色常数，并设置手写笔的颜色常数
│ ├── config.js //配置的入口文件，也可以是yml或toml
│ └── enhanceApp.js //应用级增强文件 这里不做暂不做具体深究
└── package.json
tips: 在posts文件夹中，你可以一任意方式对你的文章命名，不过官方建议最好在最前面写上日期。它可以帮助您组织，并在默认情况下用作永久链接。例如：
2018-11-7-frontmatter-in-vuepress.md
2019-2-26-markdown-slot.md
2019-5-6-writing-a-vuepress-theme.md
4.在 config.js 文件中配置基础信息信息
module.exports = {
base:"/", // 默认值是'/',部署站点的基础路径，如果你想让你的网站部署到一个子路径下，你将需要设置它。如 GitHub pages，如果你想将你的网站部署到 https://foo.github.io/bar/，那么 base 应该被设置成 "/bar/"，它的值应当总是以斜杠开始，并以斜杠结束
title: '摩羯 Blog', // 博客标题
theme: '@vuepress/theme-blog', // 博客主题 这里采取安装的默认主题
themeConfig: {
//主题配置
}
}
themeConfig有哪些配置，可以点击右侧链接：themeConfig配置
5.在 package.json 文件里添加两个命令脚本
// package.json
{
...
"scripts": {
"dev": "vuepress dev blog", // 启动
"build": "vuepress build blog" // 打包
}
...
}
6.现在可以执行命令在本地运行查看
yarn dev
二、github部署：GitHub Pages and Github Actions
1.注册登录github账号。
这个应该没必要做啥讲解
2.新建两个仓库
2.1 仓库一：新建一个名为username.github.io的仓库
注意：仓库名字必须是：username.github.io，其中username是你的用户名。比如说，如果你的github用户名是zs，那么你就新建zs.github.io的仓库（必须是你的用户名，其它名称无效），将来你的网站访问地址就是zs.github.io 了。如下图：左边是我的用户名，右边为新建仓库
2.1 仓库二：新建一个新的仓库，用来作为开发博客的源码仓库
tips:这个命名随意可以以你自己的想法命名。例如：my-blog
接下来：
-
-
- 克隆你的仓库my-blog到本地
- 把你上面用vuepress搭建的代码blog文件里的内容拷贝到你的my-blog仓库里。
-
-
-
- 在my-blog添加.gitignore （git 提交忽略文件 把你项目的node_modules写入）
- 暂不提交代码
-
3.创建 GitHub 密钥
3.1 验证您的电子邮件地址（如果尚未验证）
3.2 单击您的个人资料照片，然后单击 Settings（设置）
3.3单击左侧的 Developer settings
3.4在左侧边栏中，单击 Personal access tokens（个人访问令牌）
3.5单击 Generate new token（生成新令牌）。
3.6给令牌一个描述性名称。(这一步之前会有个密码验证)
3.7要使令牌过期，请选择 Expiration（到期）下拉菜单，然后单击默认值或使用日历选择器。
3.8选择要授予此令牌的作用域或权限。 要使用令牌从命令行访问仓库，请选择 repo（仓库）
tips:选择这一个基本就可以了
3.9单击 Generate token（生成令牌）完成创建。
3.10得到秘钥，点击复制。（此秘钥关闭后将再也无法找回，一定要提前复制）
4.在你仓库二项目下，创建一个 secrets
4.1找到开发项目仓库（上述仓库二）点击Setting
4.2点击左侧Secrets下的Actions
4.3点击右侧New repository secret
4.4 添加秘钥
-
-
-
- 命名这里建议用ACCESS_TOKEN,方便后面对应
- 填入刚复制的秘钥名
-
-
-
-
-
- 点击Add secret(确认)
-
-
5.配置Github Actions
在开发项目（上述仓库二）根目录下的 .github/workflows 目录（没有的话，请手动创建一个）下创建一个 .yml 或者 .yaml 文件，如:vuepress-deploy.yml;
在.yml或者.yaml 文件下添加以下配置内容：
name: 打包应用的actions
on:
push: # 监听代码时间
branches:
- master # master分支代码推送的时候激活当前action
jobs:
build:
# runs-on 操作系统
runs-on: ubuntu-latest
steps:
# Job Start
- name: Job Start
run: echo Hello, GitHub workflows !
# 检出你在当前github工作空间的项目
- name: 迁出代码
uses: actions/checkout@v2
# 安装Node
- name: 安装Node
uses: actions/setup-node@v2.1.2
with:
node-version: '14.x'
registry-url: 'https://registry.npmjs.org'
# 执行JamesIves/github-pages-deploy-action将项目发布到Github Pages
- name: Deploy
uses: jenkey2011/vuepress-deploy@master
env:
# 该workflow需要操作repo，因此需要一个密钥
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
# 目标repo
TARGET_REPO: xYouRan/capricorn-blog
# 发布到的分支
TARGET_BRANCH: gh-pages
# 构建脚本
BUILD_SCRIPT: yarn && yarn build
# 要发布的文件夹
BUILD_DIR: blog/.vuepress/dist
6.完成最终部署
6.1上述全部准备完毕，提交推送代码到github
tips: 此时点击gibhub的actions即可看到构建记录
6.2构建完成后，点击开发项目的Setting,然后点击左侧Pages
6.2选择要展示的分支
tips:（我们在.yml里配置了构建的目标分支）
6.3可以选择一个主题
6.4当一切配置完毕，你就可以点击对应链接查看自己的页面了
tips:你的Github Pages里会展示这个链接
6.5这样一个基础的博客就搭建完毕。
我的简易博客最终展示效果：
