将 vuepress 部署到 GitHub pages 并启用 ZEIT/vercel 加速 & 域名
将
vuepress
主仓库repo
和展示仓库.github.io
分离示例:
官方文档 zeit.co/docs (opens new window)
zeit 现在名字是 vercel 域名为 zeit.co/vercel.com
前置条件
- 熟悉 GitHub & git 的使用
- 熟悉任意一种 vuepress|| 各种可以使用 GitHub pages 搭建的博客框架
- 熟悉域名解析操作
# vuepress 相关本地配置
vuepress package.json
中添加脚本文件
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs",
"deploy": "bash deploy.sh"
},
将部署命令打包为脚本 deploy.sh
set -e
npm run docs:build
cd docs/.vuepress/dist
echo 'feng-w.cn' > CNAME
git init
git add -A
git commit -m 'deploy'
git push -f git@github.com:fengwei2002/fengwei2002.github.io.git master
cd -
推送到 github.io 域名空间即可,若自己已购买域名则添加 echo 那一行
bash 中执行 yarn run deploy
即可部署至 GitHub pages
bash 中执行 yarn docs:dev
即可本地预览
# 使用 NEIT/vercel 进行加速:(可选)
一个小小的博客而已,完全没必要买服务器,💴多不说了
GitHub pages 使用 zeit/vercel 提供的搭载文件服务
国内访问也可以达到正常速度(图床除外)
zeit.co 官网介绍文档 (opens new window)
ZEIT 控制台 (opens new window)
别推送太频繁(一分钟五次?),否则仓库会暂时挂掉的 socket hang up
不得不说的是这个 zeit/vercel 的官网页面是真好看
我之前使用的是 Vuepress
+ GitHubPages
+ zeit.co
+ 腾讯云域名
我现在使用的是
Vuepress
+ GitHubPages
+ zeit.co
+ vercel提供的 xxx.now.sh
域名
优化前:
优化后:
官方文档有详细介绍 (英文 hhh),就不当翻译官了,自行查阅
部署过程中重要的一些截图:(参考)
一直选默认配置,最后这一步选 other 即可
大概的加速过程就是先手动推送文件到 GitHub,然后 vercel 进行文件爬取,vercel 进行渲染,GitHub page 也进行渲染网页,同时两个站点刷新网页对应的域名内容
但是 vercel 在台湾,GitHub pages 在美国旧金山
# 腾讯云域名
阿里云买的也一样
部分重要参考截图
这是控制板的解析配置
腾讯云一分钟内解析就会生效了
注意:vercel 官网示例中的 ANAME== 域名解析中的 CNAME
这样配置的话每次提交到 GitHub 后就会自动部署到 zeit/vercel 中,
vercel 进行网页渲染
实现国内的加速目的
记得不要开启谷歌分析,否则国内就会白加速了。。
还有就是每次部署后如果使用 chrome 的话如果没刷新内容
可以使用 ctrl + F5 清除浏览器缓存强制刷新一下,秒部署是秒部署,但是本地浏览器可能不生效
# .now.sh 域名
因为目前的博客其实偏向于玩具项目
自己还没有什么资历,写的文章也会只有一丁点的访问量
基本就是用来记笔记的 hhh
然后就:一个小小的博客而已,完全没必要买域名..
并且突然觉得 feng-w.cn 这个域名突然觉得有点 xxs 了,喜兴厌旧本喜(
现在的主域名是
fengwei2002.github.io
fengwei2002.github.io
(当然距离 xxs 域名过期时间还早,依然可以访问)
第一个域名后缀也很帅的
这两种域名后缀直接添加就好
访问速度和国内域名没什么变化,减少了一次域名再解析,理应更快了
# 推荐
试过 hexo Jekyll hugo gitee 服务器 gitee
0 费用最佳方案:
vuepress + GitHub pages + picgo&github + vercel.com + xxx.now.sh
不在乎💴最佳方案:
vuepress + 阿里云OSS + 阿里云服务器 + 阿里云域名
具体每个的使用方法建议谷歌官方文档