从零搭建一个免费的随时可以查看的Blog
// 摘要里面就瞎写写了 缝合怪狂喜🤭
Intro
搭建一个Vuepress默认主题的Blog并且发布到Gitee Page上，一共有这么几步
- 在本地部署Vuepress
- 修改相关配置文件
- push到Gitee并开启Page服务
具体步骤百度就有很多Exam了。个人感觉Vuepress默认主题就够了，如果不喜欢原版的，这里介绍另一种方法
vuepress-theme-reco
一款简洁而优雅的 vuepress 博客 & 文档 主题
就像 Reco主题官网 所介绍的，reco主题遵从简约的风格，具体的直接去官网感受感受（没恰饭🤭 ）
快速上手
#这里提供了三种方式供初始化
#npx
$ npx @vuepress-reco/theme-cli init
#npm
$ npm install @vuepress-reco/theme-cli -g
$ theme-cli init
#yarn
$ yarn global add @vuepress-reco/theme-cli
$ theme-cli init
复制代码- 然后出现下面的几个选项，这英语应该没问题吧。最后一个选项有三个子选项，按需选择。如果你想看看 午后南杂 大佬的
Blog可以选择最后一个。
- 初始化
directory
# 进入刚刚创建的博客文件夹
$ cd Demo
# 二选一
$ yarn install
$ npm install
复制代码- 运行并预览
install success之后就恭喜你有了一个自己的静态Blog啦！
如果不想每次都自动跳出，可以去package.json文件里修改dev配置
# 赶快运行一下看看！
$ yarn dev
$ npm run dev
复制代码简单介绍文件结构
-
Demo文件夹这里的文件夹结构与Vuepress 官网介绍的目录结构有一点点细微的不同，但是 约定优于配置 嘛，无伤大雅啦～
着重介绍
docs和blogs文件夹
$ ls -al
total 776
drwxr-xr-x 10 wuxiaoqi staff 320 1 10 13:49 .
drwxr-xr-x 3 wuxiaoqi staff 96 1 10 13:40 ..
-rw-r--r-- 1 wuxiaoqi staff 34 12 27 02:47 .gitignore
drwxr-xr-x 4 wuxiaoqi staff 128 1 10 13:40 .vuepress
-rw-r--r-- 1 wuxiaoqi staff 727 12 27 02:47 README.md
drwxr-xr-x 5 wuxiaoqi staff 160 1 10 13:40 blogs
drwxr-xr-x 3 wuxiaoqi staff 96 1 10 13:40 docs
drwxr-xr-x 877 wuxiaoqi staff 28064 1 10 13:49 node_modules
-rw-r--r-- 1 wuxiaoqi staff 309 1 10 13:40 package.json
-rw-r--r-- 1 wuxiaoqi staff 384855 1 10 13:49 yarn.lock
复制代码-
blogs文件夹刚刚初始化好的
blog文件夹内容如下
blogs
├── category1
│ ├── 2018
│ │ └── 121501.md
│ └── 2019
│ └── 092101.md
├── category2
│ ├── 2016
│ │ └── 121501.md
│ └── 2017
│ └── 092101.md
└── other
└── guide.md
复制代码对应网站右上角的Category里的内容，这里的文件夹不需要自己更改，只需要在编写md的时候通过YAML front matter进行标注就行，内置的Markdown编译器会自动转换，更多的语句可以查询 Vuepress官网 和 Vuepress-theme-reco官网，本BE就⛸️了
---
title: YAML front matter example
date: 2021-01-10
tags:
- Spring
categories:
- Spring
sidebar: auto
---
复制代码-
docs文件夹刚刚初始化好的
docs文件夹内容如下
docs
└── theme-reco
├── README.md
├── api.md
├── plugin.md
└── theme.md
复制代码对应右上角Docs里的内容，在我自己搭建的时候遇到了同样的md文件同时放在docs和blogs这两个文件夹里时会被解析两次，这里埋个坑，时间关系没法求证，最后我是都放在docs文件夹内才解决的，不过这样有个好处，在Docs内配合侧边栏浏览文章感觉会更贴近博客的阅读感觉。
另外，如果要在Docs标签内查看的话，还需要在对应的文件夹内创建一个README.md并且修改.vuepress/config.js文件内的配置
module.exports = {
"themeConfig": {
"nav": [
...
{
"text": "Docs",
"icon": "reco-message",
"items": [
{
"text": "vuepress-reco",
"link": "/docs/theme-reco/"
},
{
"text": "SpringIOC&DI&AOP",
"link": "/docs/{对应的文件夹名}/"
}
]
},
...
],
"sidebar": {
"/docs/theme-reco/": [
"",
"theme",
"plugin",
"api"
],
"/docs/{对应的文件夹名}/": [
"",
"file1",
"file2",
"file3"
]
}
...
}
}
复制代码部署到Gitee
新建仓库
建库不用多说了吧，建好之后clone到本地，然后进去检验一下git状态。
如果clone到了之前推荐新建的Blog文件夹中的话，目前Blog文件夹内应该只有初始化的博客文件夹(Demo)和刚刚git下来的{REPO}这两个文件夹
$ cd ..
$ git clone https://gitee.com/{REPO}.git
$ cd {REPO}
$ git status
复制代码Push到Gitee
这里一共分三步
- 回到博客文件夹（这里是
Demo文件夹)，然后运行构建指令yarn build或者npm run build生成一个新的public文件夹（如果按照官方的话是.vuepress/dist文件夹，可以在.vuepress/config.js的dest中修改） - 将
public文件夹内的所有内容复制到刚刚clone下来的仓库内 - 修改
.vuepress/config.js文件后git push。虽然 Vuepress部署 没写Gitee的配置，并且.vuepress文件夹与reco主题的位置不同，但其实配置还是差不多的，我直接cv下来了，详细的配置见Vuepress中文文档
在
docs/.vuepress/config.js中设置正确的base。如果你打算发布到
https://<USERNAME>.github.io/，则可以省略这一步，因为base默认即是"/"。如果你打算发布到
https://<USERNAME>.github.io/<REPO>/（也就是说你的仓库在https://github.com/<USERNAME>/<REPO>），则将base设置为"/<REPO>/"。
module.exports = {
...
"base": "/{REPO}/",
...
}
复制代码shell脚本
建议有Shell基础的童鞋们写个脚本，不然每次都要各种cd很麻烦，我把我的贴在下面（太菜，没做异常处理）
# !/usr/bin
# 这个脚本我是写在blog文件夹内的，各位按照自己的习惯修改cd的地址就行
yarn build
cd ..
##zhushiyiblog是我的blog文件夹，bibliobibuli是我的仓库名字
cp -R zhushiyiblog/public/* bibliobibuli
cd bibliobibuli
git add .
git commit -m "init blog"
git push
复制代码开启GiteePage
上面两步都成功之后，就可以去自己的仓库开启你的Blog之旅啦！
Last but not least
在部署过程中会有很多细节上的东西，有空我会把遇到的错误更新进来 还有一个坑就是last-updated插件一直失效，找个时间解决一下