爱收集资源网

使用Hugo+ElementUI搭建了个人博客生成系统Hugo的开发

网络整理 2022-04-09 01:06

程序员行业是一个终身学习的行业,新技术经常出现。我是一个喜欢学习和喜欢尝试新事物的人。每次我想学习一项新技术时,我总是很难找到合适的入门教程。于是我萌生了自己写一个小班系统的想法:希望可以通过写系列文章来组织一个小班,帮助想学习某项技术的同学快速上手。

有了这个想法后,我开始准备搭建一个小班平台。起初个人博客系统有哪些,我想做一个前端和后端分开的网站。后端使用 Go 编写 API,前端使用 Vue 编写页面。

使用 vue + ElementUI 构建的第一个版本如下所示:

写完第一个版本后,我仔细考虑了一下。如果我想写这个小课系统,我必须做几件事:

编写API,进行前后端数据交互,编写Markdown编辑器,在线录课,做服务端渲染,做SEO优化

想到这里,开头就有点大了。第一个对外发布的小课系统,希望尽量简洁,无论是写作还是演讲,都不要太复杂。而且最重要的是希望更多的人能看到我的小班制度,也就是说SEO一定要好。

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

使用 Hugo 开发,有几个优点:

无需编写Markdown编辑器,无需使用数据库即可根据本地md文件生成文章,课程数据均为md文件,维护成本低个人博客系统有哪些,无需SSR即可获得良好的SEO

但也有一些不好的地方:

纯静态网站,无数据交互,付费订阅等功能不易做

先不管他的3721,先说一个版本。所以我这样做了:

使用 Hugo 搭建个人博客,使用记事本开源主题。在 Hugo 的内容中创建了课程版块,并为此类版块添加了主页模板和阅读模板。

最后写出来的效果:

写完发到网上后,就把之前写的两个小教程放上来了。

综上所述,我觉得 Hugo 是一个非常不错的静态网站生成工具,功能非常强大,编译速度非常快,与同类型的 Hexo 相差几条街。

以后有时间,打算写一个小教程,讲讲如何用 Hugo 搭建静态网站,开发自定义主题。我希望更多的人可以使用这个用 Go 编写的性能卓越的静态网站生成工具。

Hugo 快速入门官方文档

最后但并非最不重要的

小课系统第一版已经写好了,以后会坚持写小课。我希望我能把我学到的东西和我将要学习的东西分享出来,让更多的人享受到学习的乐趣。

hugo