简介
VueBlogger是一个使用 Vue 2 编写的 Vue 博客框架。本着轻巧、高度可定制化的设计理念，搭配着独具一格的 UI 界面，VueBlogger可以轻松打造一个个人博客。
在线Demo：https://samzhangjy.github.io
GitHub仓库：https://github.com/samzhangjy/VueBlogger
欢迎大家star和fork！
UI界面
在UI上，VueBlogger采用了 Vuesax 4 Alpha 作为组件库，支持深色模式，整体风格简约、大方，但又具有科技风。
工程架构
VueBlogger采用 Vue 2 + Vue Router + Vuesax 4 作为主要依赖。
使用指北
注意：请先确认是否正确安装 Node.js 与 Vue.js 2 。
安装与运行
首先，你需要安装 VueBlogger 的依赖包：
$ npm install # 或 yarn
然后，你可以通过以下命令运行 VueBlogger：
$ npm run serve # 或 yarn serve
当然，你现在还无法正常运行，因为 VueBlogger 需要配置后才能正常使用。
配置
首先，在项目根目录下，创建一个名为 `posts 的文件夹，这将存放所有与博客相关的MD文档与配置文件。
然后，在 posts 文件夹下创建一个 data 文件夹，存放所有的配置文件。
基本配置
在 data 文件夹下，创建一个 config.json 文件，存放所有的基本配置。
// posts/data/config.json
{
"config": {
"username": "你的用户名",
"avatarPath": "你的头像图片链接",
"description": "你的博客简介",
"name": "你的名称",
"blogTitle": "你的博客标题",
"blogStartYear": 2019 // 博客开始日期，用于生成页脚的CopyRight
},
"contacts": [ // 联系方式
{
"name": "联系方式名称",
"value": "联系方式内容，例如你的电子邮箱地址",
"link": "联系方式链接，例如：mailto:xxx@example.com"
}
]
}
注意：一定要填写全部信息，否则 VueBlogger 将会报错。
项目配置
接着，创建一个 projects.json 文件（同样在 data 文件夹中），用于存储个人开源项目相关信息：
// posts/data/projects.json
{
"projects": [
{
"name": "项目名称",
"des": "项目介绍",
"img": "项目封面图片链接",
"link": "项目首页链接",
"github": "项目GitHub链接"
}
]
}
同样，请填写所有信息。
为了更好地自定义个人项目板块，请再在 data 文件夹中创建一个 project-des.md 文件，存储个人项目板块的介绍文字，例如：
Below are my personal projects made in my free time.
你当然可以使用 MarkDown 风格。
“关于我”板块配置
你需要提供一个存储着“关于我”页面的内容的 MarkDown 文档来配置该板块。就像写博客一样，你可以在这个文档中添加一些你的介绍。
哦对了，文件名是 about.md ，存储在 data 文件夹中。
友链配置
VueBlogger 支持添加友链。添加 /posts/data/links.json ，内容格式如下：
{
"links": [
{
"title": "链接目标网站名称（或标题）",
"desc": "链接目标网站介绍",
"link": "链接"
}
]
}
当然，如果你不想有友链，将 links 数组设为空（ [] ）即可。
写作
你可以使用 MarkDown 格式进行写作，并将每个博客存储在 /posts/ 中。至此，/posts/ 的目录结构如下：
posts
├─ data
│ ├─ about.md
│ ├─ config.json
│ ├─ posts.json
│ ├─ project-des.md
│ └─ projects.json
├─ post-1-title.md
├─ post-2-title.md
├─ post-3-title.md
└─ post-4-title.md
对，多了个 /posts/data/posts.json 。这个文件是所有配置文件中核心中的核心——存储着所有对外可见的博客信息。它的格式如下：
{
"posts": [
{
"title": "VueBlogger: A simple blogging site for Vue", // 博客标题
"tags": [
"Vue.js",
"project",
"frontend"
], // 博客标签
"cover": "https://dev-to-uploads.s3.amazonaws.com/i/95lvt23xz4ozer5byomi.png", // 博客封面图片链接
"des": "There isn't really a simple blogging tool for Vue. VuePress works, but it's to complicated. So for that purpose, I developed this light-weight blogging site for Vue: VueBlogger.", // 博客简介
"date": [ // 博客发布日期
2021, // 年
10, // 月
6 // 日
],
"id": "blogue" // 博客正文文件名称（不包含 `.md` 后缀）
}
]
}
对了，一定要注意博客的 id 字段是博客文件的文件名 （不包含 .md 后缀），而不是博客的标题。
错误的配置可能会导致一个 404 Not Found 错误。所以，每次你要发布新博客时，一定要记得更新 posts.json ，否则你的博客将不会显示出来！
部署
在部署到线上站点前，请先在本地运行 npm run serve （或 yarn serve ）来检测自己的配置是否正确。
目前，VueBlogger 仅支持在 GitHub Pages 上自动部署。
GitHub Pages
首先，请确保你的 GitHub 账户下有一个名为 <your-username>.github.io 的空代码仓库（<your-username> 替换为你的用户名）。若没有，请自行创建。
然后，运行下列命令：
$ source ./publish.sh
耐心等待若干分钟，你的博客将会在 <your-username>.github.io 上出现。
其他部署平台
如果你不使用 GitHub Pages ，你可以手动部署。
首先，在本地构建你的博客：
$ npm run build # 或 yarn build
然后，你可以使用 /public 文件夹下的文件进行手动部署。
结语
做这个项目的初心很简单，就是做一个好用的博客。也希望大家能够喜欢这个项目，并通过点赞、收藏、关注来支持我！
最后，奉上英文文档与 GitHub 仓库！
Demo: samzhangjy.github.io
GitHub: https://github.com/samzhangjy/VueBlogger
Please star or fork to support me!
