vuepress+gitee搭建个人博客

前言：
最近想对学过的前端知识以及做过的项目进行整理，于是采用了vuepress+gitee搭建个人博客，本篇文章主要写搭建过程及遇到的坑。
前提条件：VuePress 需要 Node.js >= 8.6

一，快速搭建博客

mkdir vuepress-starter && cd vuepress-starter //创建一个新目录并进入该目录
yarn init   //包管理器进行初始化，或者采用  npm init
yarn add -D vuepress  //安装vuepress
mkdir docs && echo '# Hello VuePress' > docs/README.md   //创建第一篇文档

在package.json文件中添加script

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

添加了以上代码，便可以采用命令行：

yarn docs:dev   //在本地启动服务器，也可以使用 npm run docs:dev 或者 vuepress dev docs
yarn docs:build  //项目打包会在 docs\.vuepress文件夹下生成一个dist文件

启动服务器后便可预览效果

二，部署：
1，Gitee创建项目

2，在 docs\ .vuepress文件下新建一个config.js文件，设置以下内容

module.exports = {
  title: '我的博客', // 设置网站标题
  // 设置打包dist文件的目录位置，注意一定得在根目录下，因为打包出的文件使用的URL是绝对地址，而vuepress的打包文件夹dist不是这个绝对地址。
  dest: './dist',  
  base: '/vuepress-blog/',// 设置站点根路径
  repo:'http://maryu.gitee.io/vuepress-blog', // 添加 gitee 链接
}

3，需要将本地的代码(只需将dist文件)推送到刚新建的gitee仓库里，使本地代码与远程代码相关联

git init 
git add .
git commit -m"提交第一次打包dist文件"
git push -f  git@gitee.com:xxx/vuepress-blog.git  master   //你的仓库地址

4，最后设置Gitee Pages：进入Gitee的vuepress-blog仓库，选择“服务”=>“Gitee Pages”

不需要填写任何内容，点击"启动"就行。
最终在线访问：https://maryu.gitee.io/vuepress-blog/
最后我的文件目录：

注意：
每次修改文件后必须重新打包，并将dist文件重新推送到远程仓库上，再更新Gitee Pages，这样线上访问链接页面才能同步更新！(看到网上有说在cli中运行脚本已启动自动部署，我还没弄出来，只能每次手动push)

如果打包后没有样式，很有可能的原因是yarn docs:build后的dist文件位置问题，可以设置config.js中的dest。如果出现404，设置base

附上我的博客地址：http://maryu.gitee.io/hu-blog