# 部署
在部署之前,请先看一下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 -
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 -
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
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-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
# 登录
进入Vercel官网,点击使用github登录
一定要设置上图这个,一定
然后就等待部署,差不多两分钟左右,如果部署失败的话,截图在群里问我
# 部署成功
出现这个画面,就表示你已经部署成功了,现在点击那个go to dashboard
就可以进入到控制面板中
# 简单使用
点击这里,可以重新部署
点击这里,可以设置自定义域名
# 测试
我最开始也说了,vercel可以监测到github中的commit记录,如果有新的commit记录的话,vercel就会自动重新部署,重新部署这一步不需要我们操作
我们直接在github上,随便修改一下,然后点击提交
然后我们回到vercel中,便可以看到,已经有一个新的部署在执行了,等待部署成功,我们便可以在博客中刷新,看到我们刚刚修改的内容






推荐阅读
