手把手教你用vuepress搭建自己的网站(4)

 

部署到github平台

前提条件

• 文档放置在项目的 docs目录中

• 使用的是默认的构建输出位置

• VuePress 以本地依赖的形式被安装到你的项目中，并且配置了如下的npm scripts:,然后在itclan/package.json文件中 添加如下命令

• 本地若没有安装vuepress非全局安装,pwa以及其他一些插件不会生效

{
  "scripts": {
    "docs:build": "vuepress build docs"
  },
  "devDependencies": {
    "vuepress": "^1.5.0"
  }
}

创建两个仓库

• 在github上创建两个仓库,一个仓库的名称:https://<USERNAME>.github.io/<REPO>/ 即https://github.com/<USERNAME>/<REPO>,或者直接仓库的名称就是username.github.io(这个 username 是你 github 的登录账号的名称,是固定的),这个仓库的作用是用来部署线上版本用的

• 在创建一个仓库,这个仓库的名称任意,这个仓库是用来平时日常开发代码的,比如我的:blogcode

为什么要创建两个代码仓库呢,一个仓库不是很好么?

• 一个仓库用于日常的开发,新增文章或者二次开发,不断迭代,注意不要往这个仓库里push构建出来dist文件

• 另一个仓库只用于线上预览,项目中最终构建 build 生成的dist目录文件推送到这个远程仓库当中

• 保持两个仓库的相互独立,互不干扰,如果全部放在一个仓库里,不易于后续维护和代码的管理

• 如果你想把代码静态资源部署到其他服务器上,你只需把build构建出来的dist文件放到你服务器根目录下就可以了的

提醒

如果您的仓库不是放置在根目录下(就是https://itclancode.github.io/blogcode/这种形式,而非https://itclancode.github.io/),则在config.js的基础配置中需要更改base的路径,它默认是指向根路径的,可以省略

module.exports = {
  base: "/blogcode/"
}

在本地启动时,就会区分出来的,默认端口是8080,如果设置了base后,后面会跟上路径 也可参考官方文档:部署到 github:https://vuepress.vuejs.org/zh/guide/deploy.html#github-pages

配置自动化部署脚本

在itclan(以你自己的为准)根目录下,创建一个如下的脚本文件deploy.sh

#!/usr/bin/env sh

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

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

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

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

git init
git a