推荐！一个简单而又精致的博客系统

前言

写这个博客系统的初衷是为了给那些不愿自己维护一个个人博客，但又觉得市面主流博客网站广告多、不够简洁等。所以我写这个系统的时候也是尽力让它尽量的简洁，但又带一点个人风格。目前自定义主题功能还没上线，过段时间我将会加上他，让使用者可以自己DIY自己的主页。取名为Canary，中文名也就是金丝雀，目的是想把它做得很漂亮，很吸引人，让更多的人来使用它。

更新：项目更换了编辑器，采用所见即所得的markdown编辑器，使写作成为一种享受。代码语法高亮插件更换为prismjs，更轻量，更漂亮。欢迎使用。

github地址：Canary 觉得不错去的去github给个小星星呀。

下面是我项目的readme，我就直接粘贴了。如果喜欢的朋友可以给我一个star，有什么bug欢迎提issue。

简约博客网站

一个坚持简约美的在线博客网站，可以实现博客的在线编辑，预览，发布功能。
提供用户登录注册功能，登录后可以发布文章，对文章进行点赞、评论、收藏等功能。文章可以根据分类或者标签查询，更是提供了全文检索功能。采用所见即所得的Markdown编辑器，使写作成为一种享受。采用prism进行代码高亮，更接近主流编译器的高亮风格。项目是采用前后端分离设计思想，前台界面采用响应式布局，在多端浏览都会有良好的视觉体验。前后端分开部署，采用了docker+jenkins自动化部署。

技术栈

• vue2 用于构建用户界面的渐进式框架
• vue-router Vue.js 官方的路由管理器
• vuex 专为 Vue.js 应用程序开发的状态管理模式
• webpack 模块打包器
• es6/eslint 采用es6语法，并使用eslint检查语法
• axios 尤雨溪推荐使用axios来完成ajax请求
• sass 对CSS的扩展，让CSS语言更强大、优雅

项目构建运行

# clone项目到本地
git clone https://github.com/jie12366/simple-beauty.git

# 进入项目根路径
cd simple-beauty

# 安装相关依赖
npm install (或yarn)
 
# 本地运行
npm run dev

关于后端

后端用springboot+mongod构建，采用restful风格api，使用swagger生成在线api文档，JWT生成token，redis作为缓存以及内存数据库，使用websocket通信。

项目地址：simple-beauty-after

目标功能

• 登录注册 – 完成
• 修改密码 – 完成
• 第三方登录(暂时只支持QQ、github、码云) – 完成
• 个人中心 – 完成
• 消息提醒 – 完成
• 在线编辑文章 – 完成
• 文章详情展示 – 完成
• 管理博客 – 完成
• 自定义主题 – 完成
• 评论回复系统 – 完成
• 点赞、收藏 – 完成
• 分类、标签、归档展示 – 完成
• 照片墙、关于我 – 完成
• 全文检索/站内搜索 – 完成

项目演示

项目演示地址为：Canary

需要注意的问题

支持高亮的语言为java、kotlin、c、cpp、python、bash、lua、vim、yaml、docker、git、json，其他语言不支持代码高亮，请不要在代码块中注明语言。默认使用bash语言来高亮代码。

感谢开源

名称	说明	GitHub/官网
HyperMD	所见即所得的markdown编辑器组件	https://github.com/laobubu/HyperMD
CodeMirror	浏览器内代码编辑器	https://github.com/codemirror/CodeMirror
prism	轻量又好看的代码高亮库	https://github.com/PrismJS/prism
markdown-it	强大的markdown解析器	https://github.com/markdown-it/markdown-it
markdown-it-prism	使用prism高亮markdown-it中的代码块	https://github.com/jGleitz/markdown-it-prism
markdown-it-emoji	用于markdown-it中的表情解析	https://github.com/markdown-it/markdown-it-emoji
markdown-it-anchor	用于markdown中给标题增加id	https://github.com/valeriangalliat/markdown-it-anchor
moment	增强js的时间处理	https://github.com/moment/moment
v-viewer	强大的图片预览组件	https://github.com/mirari/v-viewer
vue-canvas-nest	用于画布嵌套的Vue.js背景组件	https://github.com/ZYSzys/vue-canvas-nest
vue-drag-verify	用于滑动验证的vue组件	https://github.com/AshleyLv/vue-drag-verify
vuex-persistedstate	用于vuex持久化的组件	https://github.com/robinvdvleuten/vuex-persistedstate
Element-ui	适用于Web的Vue.js 2.0 UI工具包	https://github.com/ElemeFE/element
iconfont	好看又全面的字体图标库	https://www.iconfont.cn/

开源协议

MIT LICENSE

无论是由于软件，使用或其他方式产生的，与之有关或与之有关的合同，侵权或其他形式的任何索赔，损害或其他责任，作者或版权所有者概不负责。

部分截图

2、写文章

3、文章详情

4、照片墙

5、侧边栏

6、分类