# 文章目录
在阅读这篇文章之前,我默认你已经安装了 Git,Node,并注册了 GitHub
# 一、首先准备 ssh
如果您的电脑已经配置好 GitHub 的 ssh 的话,可以跳过这一步。
# 1.1 生成 ssh
右击,选择 Git Bash Here
输入:
ssh - keygen;
然后一路回车即可!
注意:命令没有空格,请直接复制
之后会在:C:\Users\用户名\.ssh\
目录下生成两个文件:
私钥:id_rsa
必须要放在自己的电脑上
公钥:id_rsa.pub
放到 GitHub 上。
# 1.2 把公钥配置到 GitHub
登陆 GitHub => Settings => SSH and GPG keys => New SSH key
然后直接把我们刚刚生成的 id_rsa.pub 文件打开,复制里边的全部内容,放到 Key 文本框内,标题随便起一个就是。
# 二、配置 VuePress
在 VuePress
项目的目录下,新建一个文件 deploy.sh
并在该文件中添加如下内容:
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run 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>
# 请把 penggang-home/blog-two.git 换成你的项目地址
git push -f git@github.com:penggang-home/blog-two.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
26
注意 这里我是发布到 GitHhub,所以我是直接 push 到我的 GitHub 地址的,请把penggang-home/blog-two.git
换成你的项目地址,不然你会部署失败!
关于该文件的其他详细配置,请移步官网 (opens new window)。
接下来在我们的 package.json
文件的插件部分,新增如下内容:
"scripts": { "dev":"vuepress dev docs", "build":"vuepress build docs",
"deploy":"bash deploy.sh" },
2
接下来,npm run deploy
即可推送到 GitHub。
注意: 请使用 Git Bash Here 工具,windows 自带的 cmd 不认识 Shell 命令。
接下来去 GitHub 查看分支,如果有 gh-pages
分支,则说明推送成功。
# 三、如何从 GitHub 服务器访问项目
第一步:
往下拉找到 GitHub Pages :
蓝色链接就是你的访问地址!
你也可以自定义域名,就是下边的 Custom domain。
# 四、发布到自定义记录值的域名
比如说我有一个项目是在 penggang-home/blog-two下:
通过 GitHub Pages 服务,我们拿到了一个链接 http://pengsir.top/blog-two/
,通过这个在线链接,我们能正常访问我们的项目,
但是我们不太喜欢这个链接怎么办呢? 答案是:自定义域名
通过自定义记录值的域名,我们能实现通过 http://blog.pengsir.top/
访问我们博客,是不是很棒,那还等什么,赶快开始吧!
# 4.1 新增域名解析
我们需要在域名供应商处新增一个,CNAME 类型的域名域名解析。
这里以 腾讯云 为例:
主机记录就是域名前缀,假设你的记录值是 blog
,我的域名是 pengsir.top
,那么等下你就只能通过 blog.pengsir.top
来访问,
记录类型固定的是 :CNAME
记录值就是你的GitHub地址
# 4.2 修改我们的配置文件
把 config.js
的 base 属性给去掉(注释掉)
# 4.3 修改 deploy.sh
注意这里你的域名前缀 blog要和 刚才新增的记录值一致!
接下来就是见证奇迹的时刻,打开 GitHub!
点此访问:彭先生的主页 (opens new window)
# 五、自动化部署 暂未实现
# 5.1 新建 .travis.yml
- 在项目的根目录创建一个名为 .travis.yml 的文件;
并添加如下内容:
language: node_js node_js: - lts/* install: - npm ci # yarn install script: -
npm run docs:build # yarn docs:build - npm run cname deploy: provider: pages
skip_cleanup: true local_dir: docs/.vuepress/dist # 在 GitHub 中生成,用于允许
Travis 向你的仓库推送代码。在 Travis 的项目设置页面 github_token:
$GITHUB_TOKEN进行配置,设置为 secure variable keep_history: true on: branch:
master
2
3
4
5
6
# 5.2 更改默认推送位置
默认的话会推送到 GitHub Pages 上,我们需要把他修改为推送到自定义域名
因此,在项目根目录下,创建 cname.sh
,并添加如下内容
# cname.sh #!/user/bin/env sh set -e echo 'blog.pengsir.top' >
docs/.vuepress/dist/CNAME
2
注意: blog.pengsir.top
是自定义域名,根据自己的域名来改。
# 5.3 修改 package.json
新增一个:
"scripts": {
"cname":"bash cname.sh"
},
2
3
# 5.4 登录 https://travis-ci.com/
Dashboard => 找到你需要部署的项目,点击 Trigger a build