使用VuePress+Gitee搭建静态网站

前言

关于使用VuePress搭建静态网站的博客，百度有成千上万，五花八门的方式，我自己本人根据N多次的尝试之后，决定托管在码云上，原因有二，
一：GitHub站点在国外，很多时候访问都比较慢，这也是托管在GitHub上之后首当其冲要解决的问题！
二：简单，几乎是一键化部署，无有GitHub那样的要求，比如要上传到gh-pages分支上，都没有！

准备环境

yarn或者npm
webstorm或者vscode
准备一个码云账号

克隆工程

网上有很多教程，都是从0开始的，但是根据我与很多大哥交流或者是blog的建议来看，这dark不必，你只需要在前人的基础上小小修改就行。
https://blog.csdn.net/moguzhale/article/details/105900573，链接奉上，小伙伴拿到他的链接只要克隆他的工程到本地就行，对了这个人的环境是基于yarn的，如果没有的小伙伴可以选择安装yarn，或者是重新找npm环境搭建的，这都不是问题，当然不论你看谁的blog，抄谁的，都要看完，起码知道人家的脚本和一些基本的配置。
部署到本地之后，执行dev脚本，查看本地是否有问题！

OK没问题，好，那么关于一些配置啊或者是什么的我下面只粗略的说下，你在网上百度都有，自己也能发现规律，重点并不在这里！

VuePress使用

工程结构如下图：

.vuepress包下面的是build生成的文件，当然有些要我们手动去创建，这是关键！
下面从2020到vue_docs这样的目录，里面放的全是md！
README.md相当于你的首页，你可以在前人的基础上任意调整或拓展！
package.json我就不用多说了！
下面详细说.vuepress里的东西：

dist编译产生的目录
public是自己放图片啊或者是其他的静态资源的地方，此文件夹自建！
favicon.ico是你网页图标！
config.js（重中之重）就是你配置网页的地方，这里面我注重一个多级目录的配置：

{
  text: '2020',
  // ariLabel: '2020',
  items: [
     		{ text: 'May', link: '/2020/5/' },
     		{ text: 'June', link: '/2020/6/' }
          ]
 },

左边菜单：

			'/2020/': [
                ['/2020/5/', '5月份'],
                ['/2020/6/', '6月份']
            ],

其余自研！

编译上传

执行这个build

vuepress build docs

然后我们在码云上创建个仓库，我这里叫blog，你们随意！
之后把编译产生的文件上传到码云仓库里！

请注意看，并不是把整个项目传上去，而是只传dist下的所有文件，这是vuepress编译好的，下面是一群html！传递完成如下图：

紧接着，点击服务，找gitee pages，如下图：

点击启动，会自动部署，然后生成一段网址，你点击访问，就是你的静态网页！

自动化编译上传

因为每次build工程的时候，会把本地的git文件给清了，所以需要写一个自动化脚本帮助我们完成部署！而我在网上看到的全是写的shell脚本，wtf？难道让我在Windows环境下执行shell脚本？大概都是文章一大抄，你抄我我抄你的，所以看到这里我现场百度，学着写bat脚本，还真实现了！文件位置很有讲究的，要放在工程的根目录下面，下面贴图，请自行对比！

@ECHO OFF

@Rem 打包项目 &&符号，必须等前面命令执行成功才会执行后面的命令！
@Rem最后git仓库地址，换成你自己的就可以了！我这里都是强推的！
npm run build&&cd docs/.vuepress/dist&&git init&&git add -A&&git commit -m "deploy"&&git push -f https://gitee.com/***/blog.git master

pause

弊端

第一个弊端是图片问题，如果你用Typora的话会知道，Typora是读取绝对或者相对位置的图片或者网络图片，而VuePress不可以，本人后来换成了Gitee的网络图片
自动化更新问题，Gitee的Page似乎不能自动更新，网上也有很多骚操作说是可以自动更新的，不过我不想整，因为我本人并没有看中这种方式
建议：写博客可以写在csdn上或者博客园，再不行像我这样每次代码上传的时候，在工程里都会写个readme.md

保障工作

如有问题，请发QQ：707409741，全天在线！
码云：https://gitee.com/thirtyleo/blog
体验地址：http://thirtyleo.gitee.io/blog/
后续会考虑补充更换自己域名的问题，本人只是搭建体验，并不打算仔细运维这个站点！如有需要，可关注此csdn账号，公众号：朝花不迟暮