在我的博客实现「小课」系统

程序员这个行业，是一个终身学习的行业，常常会有新技术出现。我是一个很爱学习的人，喜欢尝鲜。每次想去学习一项新技术的时候，老是苦于找不到合适的入门教程。因而有了想本身写个小课系统的想法：但愿能经过写一系列的文章，组织成一门小课，帮助想学习某项技术的同窗快速入门。

有了这个想法以后，我开始准备搭建小课平台，一开始想的是作一个先后端分离的网站，后端用 Go 写 API，前端用 vue 写页面。

使用 vue + ElementUI 搭建出来的第一个版本长这样：

写完第一个版本以后，仔细想了一下，若是要写好这个小课系统的话，我还得作好几件事：

1. 写 API ，先后端进行数据交互
2. 写 Markdown 编辑器，在线录入课程
3. 作服务端渲染，作 SEO 优化

一想到这里，头开始有点大，第一个对外发布的小课系统，我但愿能尽量简洁，无论是写做，仍是展现，都不要太复杂。并且最重要的一点，我但愿能有更多人看到个人小课系统，也就是说 SEO 必定要好。

考虑到这些因素，我决定用静态博客生成系统 Hugo ，基于个人我的博客来完成小课系统的开发。

使用 Hugo 来开发，有这么几个好处：

1. 不须要写 Markdown 编辑器，基于本地的 md 文件便可生成文章
2. 不须要使用数据库，课程数据都是 md 文件，维护成本低
3. 不须要作 SSR 也能有很好的 SEO

可是也有几个很差的地方：

1. 纯静态网站，没有数据交互，要作付费订阅等功能不太好实现
2. 每次写完文章，须要编译生成静态页面，再提交发布，比较麻烦

管他三七二十一，先撸一个版本出来再说。因而我就这么干了：

使用 Hugo 搭建了我的博客，采用了 notepadium 这个开源主题。在 Hugo 的 content 里面建立了一个 courses 的 section，并为这一类型的 section 新增了一个首页模板和阅读模板。

最终写成的效果：

写完发布上线，我把我以前写的两门小课都放上来了

• 「VS Code」快速上手指南
• 分分钟上手「WeiPHP」插件开发

总结一下，我以为 Hugo 是一个很是优秀的静态网站生成工具，功能很是强大，并且编译速度很是快，甩同类型的 Hexo 几条街。

后面有时间，我打算写一个讲如何用 Hugo 搭建静态网站以及开发自定义主题的小课，但愿能有更多的人用上这个用 Go 写的，性能卓越的静态网站生成工具。

Hugo 快速入门官方文档

Last But Not Least

小课系统初版写完了，我之后要坚持写小课了。但愿能把我已经会的，即将要学的知识都分享出来，让更多的人享受学习的乐趣。

欢迎关注个人公众号，或在评论区给我留言。

原文阅读地址：idoubi.cc/posts/cours…