在我的博客實現「小課」系統

程序員這個行業，是一個終身學習的行業，常常會有新技術出現。我是一個很愛學習的人，喜歡嚐鮮。每次想去學習一項新技術的時候，老是苦於找不到合適的入門教程。因而有了想本身寫個小課系統的想法：但願能經過寫一系列的文章，組織成一門小課，幫助想學習某項技術的同窗快速入門。

有了這個想法以後，我開始準備搭建小課平臺，一開始想的是作一個先後端分離的網站，後端用 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…