为什么我推荐用Hugo的Hugoplate搭建个人网站

由于种种原因，准备启用新的个人网站，在选择搭建的时候这次使用了hugo，通过AI的协助，在很快的时间内完成了搭建和上线。

WordPress是比较老牌，但是PHP始终不太感冒，Hexo之前一直用过，搭建也都还比较简单，每一种方案都有它的亮点。

技术发展到现在，AI已经在很多领域逐渐的落地背景下，再搭建个人网站我准备通过AI协助，看下能否快速完成，并且是之前没用过的搭建类型。

AI时代推荐hugo搭建网站：

1.先从技术层面看

Hugo 是一个 2013 年诞生的静态博客框架，由 Go 语言编写的，在它的github介绍看也是很霸气的，直接写的是“世界上最快的网站构建框架”，的确如果从构建速度上来看，go的构建速度也是不容置疑的。

像 Hexo、Jekyll 这些，文章一多以后，构建速度就互记恨慢，而Hugo据说是很快的，之前没有使用过不知道，这次在搭建过程中发现如果文章写了就会瞬间自动刷新页面，预览还是比较快的。这个体验也很好。

内置模板方面也比较丰富，Shortcodes也比较强大可以把md文档很好的转换，内置资源处理完善，目录结构也比较清楚。已经集成好 SEO、评论、广告、这些都是可以直接配置自己的key，就可以用。接触下来才知道这些都是内置好了，不用像之前hexo那样自己还要接很多。

说到模板，这次从模板库里看，准备用Hugoplate，是一个入门的模板，但是界面看已经包含了很多脚手架，很多就是直接添加参数直接用，关闭也是一个参数控制。

Hugoplate 的另一个加分项，就是它用了 TailwindCSS。如果你写过 CSS，大概知道调样式有多痛苦：改个颜色要翻 CSS 文件， 命名永远卡住，这个按钮到底叫 btn？button？primary-btn？

TailwindCSS 的逻辑很简单，用类名直接写样式，不用写传统 CSS 文件。 这点很像Android里的布局样式。 这些在更改的过程中还是有体会的，比如调整个间距，加个阴影都还比较方便的。

当然这些技术层面对普通人来说都不重要，技术要好，产品更要好用才是真道理。 既然是用模板搭建，那就应该关注的是网站内容的维护和管理，让小白也能开箱就用才是好的模板，

2.从用途层面来看

如果像低成本的快速构建博客网站，一般会包括自己的介绍、或者技能介绍、产品和项目介绍、还有就是重要的博客文章。

自媒体时代下，个人的介绍可能会更重要一些，也包括自己的产品和项目，比如你想做产品介绍页、做工具集、做 Landing Page、做作品展示页？Hugo都可以，如果要选择一个模板的话，那就推荐hugoplate。

如果对go比较熟悉，不想用node那一套，那就直接用hugo就行了，尽管现在的博客系统的搭建会都屏蔽语言，你只关心写作就行，但或多或少你会进行一些改造让网站更像自己的使用。

对于想长期把博客当内容资产来经营的人来说，博客兼顾有网站的宣传和介绍作用，在自媒体时代显得也更为重要。

AI辅助搭建：

为什么要用AI辅助搭建，因为凡是涉及到重复和不清楚步骤的，往往AI在这些标准化和重复操作上有着比人更快、更好的完成工作。

通过Gemini CLI来进行本地安装和运行，如果不想快速安装，那手动安装也很快。

1.手动安装过程

这个是我在安装后从Hugoplate的安装过程里看到了，其实了解的话也比较简单。Hugoplate里已经构建了自定义的脚步可以让项目设置非常简单，跟其他博客一样可以把模板放入themes目录，也可以直接运行脚本，会自动将exampleSite移动到根目录里（推荐用该方法）

1.下载工程 https://github.com/zeon-studio/hugoplate ，直接运行

npm run project-setup

2.安装依赖

npm install

3.运行

npm run dev

2.通过AI方式来安装(适合小白)

使用gemini cli 提示词比较简单，启动gemini后输入下边提示词:

在我的这个目录下，帮我搭建个人博客网站，使用hugoplate模板来创建
你可以参考这个文档说明https://github.com/zeon-studio/hugoplate，帮我安装并本地运行起来。

然后看到gemini做好了规划直接下一步就行:

hugoplate配置修改:

无论使用那一种安装方式在运行起来后，我们就开始着手调整模板，改为适合自己等风格博客网站。 开始之前，可以先看下工程的DEVELOPER_DOCS.md文档，里面介绍了各种配置修改。

我们构建一个新的博客网站，比较关注的都会在这个文档里，常用的修改站点配置（hugo.toml 及 params.toml）我看可以快速查看和配置。 这些一般是最常用的修改，可以直接改为自己的。

1.全局配置修改

2.导航菜单修改

我们可以根据语言类型来修改导航菜单，我这里使用了中文语言，模板里默认的是一个english的目录，相同的可以直接去用chinese来进行配置，修改menus.zh-cn.toml 来调整菜单，这个根据自己的需要。 （模板里默认的是英语，我们可以在content下建自己的中文，同样配置自己的导航菜单）

这个配置很方便，可以配置父节点也可以支持平铺，这种配置的方便还是不错的。

# 主菜单
[[main]]
name = "首页"
url = "/"
weight = 1

[[main]]
name = "博客"
url = "/blog"
weight = 2

[[main]]
name = "产品"
url = "/product"
weight = 3


[[main]]
weight = 4
name = "关于"
url = "/about"

[[main]]
weight = 5
name = "捐赠支持"
url = "/donate"


# 底部菜单
[[footer]]
name = "首页"
url = "/"
weight = 1

[[footer]]
name = "产品"
url = "/product"
weight = 2

[[footer]]
name = "博客"
url = "/blog"
weight = 3

[[footer]]
name = "关于"
url = "/about"
weight = 4

[[footer]]
name = "捐赠支持"
url = "/donate"
weight = 5

3.首页配图修改

首页的配图可以根据自己的行业来介绍并制作成此行业内的风格插图，这里也推荐几个时候做配套的网站，如果用直接产品的照片或宣传图也是可以的。

常用的插图网站drawkit.com 以及undraw.co 这些都可以快速的下载免费的配图，而且风格一致。

这一步也可以通过AI方式快速协助替换，让其根据你的描述生成配图，或者根据这些网站提供的图来为自己配图使用。

4. 快速部署上线

到这一步，可以在本地运行完后，根据预览后没问题，就可以准部署了。选取一种自己要部署托管的服务，进行配置就行。支持部署的平台，这些都已经把配置做好了，直接用。

Netlify
Vercel
Github Actions
Gitlab Ci
AWS Amplify

比如用Vercel，在后台通过设置Framework Preset 为hugo , build Command 配置为npm run build, 同样，output Directory为 public即可，如果环境设置最好跟本地项目里的HUGO_VERSION 的版本配置一致。

总结：

整个配置过程很简单，反而总结这个文档比较慢，hugo的搭建个人网站还是不错的选择，如果你需要构建可以参考我这过程，也可以看现在这个博客网站。

任何有不清楚的可以联系我，也可以通过公众号“良技漫谈”关注私信我，或者邮件我。