部署

在部署之前，请先看一下vuepress官方介绍，请先看一下vuepress官方介绍，请先看一下vuepress官方介绍，请先看一下vuepress官方介绍，请先看一下vuepress官方介绍，请先看一下vuepress官方介绍...

在你部署到任意平台之前，请确保你已经运行npm run build命令了，此命令会自动将你博客编译成静态文件(html,css,js,静态图片等)，然后这些静态文件，会自动存放在docs/.vuepress/dist目录下，此目录是运行npm run build命令自动生成的，不需要你自己创建

部署到自己的服务器

如果你需要部署到自己的服务器，我已经安装了宝塔，如果你没安装宝塔，那么请先安装好宝塔面板,链接宝塔linux面板，一键安装LAMP/LNMP/SSL/Tomcat (bt.cn)

问题

我使用域名或者ip建立站点之后，那个文件夹名并不是aurora.xcye.xyz
这个文件夹名是根据你ip或者域名命名的

不推荐使用这种方式进行部署，麻烦

GitHub Pages

TIP

Github pages就是会自动将你的静态文件托管在github，然后可以直接使用github提供的一个域名<your github username>.github.io或者使用你的自定义域名就行访问

在使用之前，请先看一下vuepress官方介绍，请先看一下vuepress官方介绍，请先看一下vuepress官方介绍，请先看一下vuepress官方介绍...

在 docs/.vuepress/config.js 中设置正确的 base。

如果你打算发布到 https://<USERNAME>.github.io/，则可以省略这一步，因为 base 默认即是 "/"。

如果你打算发布到 https://<USERNAME>.github.io/<REPO>/（也就是说你的仓库在 https://github.com/<USERNAME>/<REPO>），则将 base 设置为 "/<REPO>/"。

进入github，新建一个仓库，用于托管npm run build打包之后的HTML文件
将docs/.vuepress/dist下的所有文件使用git命令push到该仓库中
如何push？？
请点击这里
进入settings-->pages
进行第二步之前，表示你已经将dist目录中的文件，已push到此仓库中
然后你就可以点击上面的那个连接，进行访问了，现在就已经将打包后的静态文件部署到github page
哪个链接??

TIP

第一次使用github pages，不推荐直接使用自定义域名，不推荐直接使用自定义域名，不推荐直接使用自定义域名，请先使用github提供的域名，能正确的访问到博客页面之后，再改成自定义域名

deploy.sh

下面的内容，请确保你已经能使用github提供的地址或者自定义域名访问到博客页面之后，在使用下面这种比较快速的方式

在你的项目中，创建一个如下的 deploy.sh 文件（请自行判断去掉高亮行的注释）

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

下面这个是使用自定义域名进行部署的deploy.sh文件

set -e

cd docs/.vuepress/dist
echo 'blog.cco.vin' > CNAME

git init
git add -A
git commit -m 'deploy'

git push -f https://github.com/qsyyke/blog.git master:gh-pages

cd -

1
2
3
4
5
6
7
8
9
10
11
12

TIP

请自己看一下自己的github仓库地址，更改上面对应的值，比如git push -f https://github.com/qsyyke/blog.git master:gh-pages的地址，还有分支等

然后进入到package.json文件中，输入以下内容到scripts

"deploy": "bash deploy.sh"

请注意看一下这个.sh文件名是不是deploy.sh，如果不是，请改一下"deploy": "bash deploy.sh"，将后面的deploy.sh改成自己的.sh文件名就可以

改变package.json文件之前?

改变package.json文件之后

为何你的package.json和我的不一样，package内容不需要和我的一模一样...

然后你现在就可以运行npm run deploy命令，然后就会依次执行npm run build,进入dist内git add . && git commit -m "..." && git push ... ，之后如果一切正常的话，你就可以在你github对应分支处看到dist目录下的所有内容

不能直接在比如vscode的终端处运行npm run deploy，否则会出现下面错误，执行此命令，你需要在cmd或者git的Git Bash Here

错误信息

部署到自定义域名

部署到自定义域名也是一样的方法，只是需要在github的settings-->pages中，添加自定义域名就可以

步骤

到阿里云，腾讯云，或其他服务商处，申请一个域名，如果使用国内服务器，域名需备案
如何申请?点这里
进入到仓库中的Setting ---> Pages
如果出现下面这个，那就证明你没有为这个自定义域名，添加一个CNAME解析
就表示，该newblog.cco.vin域名并没有添加一个CNAME解析，进入到域名解析处
对newblog添加CNAME记录，指向<user>.github.io.就可以了
我上面的这个域名解析面板在哪?
我使用的是腾讯云，所以你进入腾讯云，点击对应域名后面解析，就会出现这个，如果你使用的是其他域名服务商，请点击下面链接，改一下服务商
点击这里，记得在搜索框中改一下内容

Github Actions完成自动部署

如何使用Github Actions进行自动部署，请查看我自己写的文章，如果你觉得不够详细的话，可以再在搜索引擎中，搜索vuepress github actions关键字

推荐使用Github Actions完成自动部署，你只需要将站点中，除node_modules,docs/.vuepress/.cache,docs/.vuepress/.temp,docs/.vuepress/dist外的内容，push到你的仓库，然后简单设置下，就可以自动在github中，下载依赖，已经运行npm run build，从而完成自动部署，步骤为

获取token

上传到github

TIP

这里你只需要上传package.json和docs就可以了，你也可以排除docs/.vuepress/.cache,docs/.vuepress/.temp,docs/.vuepress/dist文件

然后将下面的内容，复制替换下图中的内容

name: Build and Deploy
on: 
  push:
      branches:
        - main #push到哪个分支时触发自动部署，推荐main
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@master

    - name: vuepress-deploy
      uses: jenkey2011/vuepress-deploy@master
      env:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        TARGET_BRANCH: gh_pages
        BUILD_SCRIPT: npm install && npm run build
        BUILD_DIR: docs/.vuepress/dist

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

设置Actions secrets

然后你在本地或者github中，随便在main分支下，修改一个文件的内容，然后git commit...，git push ...后，你便可以看到已经开始运行了

只有这个状态变成绿色之后，才便是部署成功，如果红色，你可以看一下报错信息

你可以在master分支看一下，build之后的文件

Vercle

除了使用上面方式进行托管你的博客外，我们还可以使用vercel进行部署，vercel和github actions很相似，都是通过将博客的所有必须文件（包括package.json,docs等）push到github的某个仓库仓库中，然后在vercel中创建一个项目，导入此仓库，之后的一切就交给vercel去做了

并且vercel还能够自动部署，如果你commit了新的内容，vercel监测到有新的commit之后，便会重新运行npm run build命令进行部署，你只需要将新的修改，从本地push到github便可以了（比如新增一篇文章），而不需要像github pages，服务器部署那样，每次新增文章，都需要在本地运行npm run build，然后再将docs/.vuepress/dist目录中的所有文件，上传到github或者服务器中才能完成博客新内容的改变

而且vercel还自带cdn加速，在速度上比使用通过github pages托管，通过xxx.github.io/xxx访问的速度快，除此以外，还可以自定义域名，可以使用我们自己的域名

使用

需知

在这一步默认你已经在本地搭建好博客了，并且能够正常访问，如果本地访问出错的话，在vercel部署会失败

目前主题最新最新版是v1.13.2，我记得在v1.13版本以前，依赖没有锁住的时候，在vercel中部署会失败，如果你并没有使用最新版的主题或者博客目录中，不存在npm-shrinkwrap.json文件，那么你可以按照下面步骤锁定依赖版本号

WARNING

如果你博客目录中，存在npm-shrinkwrap.json文件(在package.json文件那里)，就不需要做下面这一步了，直接跳到修改config.js位置便可以了

确保你博客在本地能够正常运行
运行npm run dev后在浏览器中打开网页，能看到正常的画面，还有就是运行npm run build命令，能够成功
如果上一步都ok的话，那么在命令行窗口中，运行npm shrinkwrap命令（就是你运行npm run dev那个位置）
然后就可以了

修改config.js

打开docs/.vuepress/config.js文件，在对应位置，添加下面内容

dest: "public",

此配置的作用就是，运行npm run build命令后，打包后的文件，将会放在public目录中，默认是docs/.vuepress/dist目录，此public目录和docs目录同级

push到github

新建一个.gitignore文件，将下面内容添加到此文件总
```
/node_modules
/.idea
**/.cache
docs/.vuepress/dist
**/.temp
/public
```
1
2
3
4
5
6
然后就将你博客（包含docs,pageage.json等文件）push到github某个仓库中，这一步自己解决

vercel

部署成功

出现这个画面，就表示你已经部署成功了，现在点击那个go to dashboard就可以进入到控制面板中

简单使用

点击这里，可以重新部署

点击这里，可以设置自定义域名

测试

我最开始也说了，vercel可以监测到github中的commit记录，如果有新的commit记录的话，vercel就会自动重新部署，重新部署这一步不需要我们操作

我们直接在github上，随便修改一下，然后点击提交

然后我们回到vercel中，便可以看到，已经有一个新的部署在执行了，等待部署成功，我们便可以在博客中刷新，看到我们刚刚修改的内容

# 部署

# 部署到自己的服务器

# GitHub Pages

# deploy.sh

# 部署到自定义域名

# 步骤

# Github Actions完成自动部署

# 获取token

# 上传到github

# 设置Actions secrets

# Vercle

# 使用

# 需知

# 修改config.js

# push到github

# vercel

# 登录

# 部署成功

# 简单使用

# 测试

推荐阅读

部署