vuepress 部署为静态网站

本文讲述 vuepress 站点如何部署到 github 或自己的私有服务器上。

部署到 github

见https://vuepress.vuejs.org/zh/guide/deploy.html#github-pages

自定义域名

• 创建 cname 域名

到域名管理后台, 创建 cname 域名(如 www.sofineday.com), 绑定到 github 域名(如 wangshibiaoflytiger.github.io)

• 修改配置文件 config.js

base: "/"

部署到自己的服务器

• 配置 nginx 服务
  web 发布目录配置为/data/static-file/blog/

• 编译
  yarn docs:build

• 部署

1. 创建 Makefile 发布脚本

   提示

   此处为了使用到 github 的免费 cdn(cdn.jsdelivr.net)服务， 则同时发布到 github, 并修改 html 文件，修改相关地址为 cdn 地址，以加快页面访问。

# 发布到github
publish_to_github:
	./deploy.sh

# 发布: 先发布到github, 再发布到自己的服务器
publish: publish_to_github
	# 将静态文件引用地址改为github的cdn加速地址
	find ./docs/.vuepress/dist -type f | xargs -I '{}' sed -i 's/\/assets/https:\/\/cdn.jsdelivr.net\/gh\/wangshibiaoFlytiger\/blog@gh-pages\/assets/g' {}
	# 上传程序到服务器
	scp -r ./docs/.vuepress/dist/* aliyun_server:/data/static-file/blog/

2. 执行发布任务 make publish