发布VuePress静态网站

前言：VuePress是尤大大为了vue生态的文档需求而开发的一个项目，简单，易上手，能快速构建静态网站，支持Markdown......如果你有写技术文档项目或者blog系统之类的，VuePress绝对可以成为你最佳的备选项之一。

基本使用：VuePress搭建静态网站

我发布好的静态网站：

gitee：http://halo1416.gitee.io/blog

github：https://halo1416.github.io/blog/

这篇文章记录一下怎么将VuePress搭建好的静态网站发布到github或者gitee，从而实现外网访问。

一、发布到gitee（gitee国内访问更快）

1. 在gitee 上面创建一个新的仓库，名称：blog

2. 在 docs/.vuepress/config.js 配置 base 属性

module.exports = {
    base: '/blog/', // 你的仓库是blog，如果想要发布到码云，只能是小写
    ...
}

注意：base的值必须是你 gitee 上的参看名称，格式为 '/仓库名称/'

           因为码云 Gitee Pages 服务的网站地址均为小写，所以最好将仓库名称设置为小写，否则 Gitee Pages 会出现vuepress跳转404的问题

3. 在项目的根目录下，创建一个 deploy_gitee.sh 文件：（注意：正确配置发布地址）

#!/usr/bin/env sh

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

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

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

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io  填写你刚刚创建的仓库地址  ==>> 发布到码云上
git push -f https://gitee.com/halo1416/blog.git master

cd -

4. 在 package.json 里设置发布命令

{
    "scripts": {        
        "gitee": "bash deploy_gitee.sh"
    }
}

5. 部署

每次可以运行下面的命令行，来把最新更改推到gitee上：

npm run gitee

6. 配置 gitee 仓库的 Pages （可以在新建仓库后做该操作也是一样的）

6.1 选择 当前仓库下 服务 => Gitee Pages

6.2 点击 “启动” 即可（该服务需要你先绑定手机号码才可以使用）

6.3 开启成功，提示你的访问地址

 

二、发布到github

基本步骤和发布到 gitee 是一致的。说一下github的 

1. 当前仓库的 Settings

2. 找到 Settings 下面的 GitHub Pages，选课要发布的分支即可

 

三、总结

为了可以同时发布到gitee和github，我在当前项目下配置了两个发布文件，并配置不同的命令，在发布时只需要运行不同的命令即可

{
    "scripts": {
        "github": "bash deploy_github.sh",
        "gitee": "bash deploy_gitee.sh"
    }
}

此为，你还可以发布到其他网站，详情参考：https://vuepress.vuejs.org/zh/guide/deploy.html

 

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出