从零开始学习使用Hugo构建自己的博客

想要了解Hugo，最简单有效的办法还是看官方文档.

• hugo中文文档
• hugo官方文档

官方文档提供了全面的详细资料（值得保存反复阅读），你可以了解到大部分Hugo使用知识，但是…

文档中缺少了一些使用技巧和示例的说明，这通常都需要论坛贴吧中讨论并被解决，遇到问题是往往需要通过搜索引擎搜索很久才能找到类似问题的解决方法。

这时，我想到了ChatGPT来帮助解决问题，说实话，ChatGPT的建议比搜索结果更精准而且效率更高一些。所以！合理的利用好ChatGPT会帮你提高工作效率，尤其是在你还是某方面知识领域的初级选手时。

言归正传!本文的目的还是提供一些搭建个人博客的经验和学习过程分享，并不一定时最有效合理的方案，但是个人在学习过程中想到或从其他途径学习到的解决方案。

1.开始搭建Hugo站点

如果你还没有搭建Hugo博客，你应该从 这里开始创建一个自己的站点项目，你可以了解到一个Hugo静态站点的全部搭建流程，虽然过程有些简单，这是为了帮初学者简化一些内容，由浅入深，循序渐进才是合理的学习方法。

在搭建站点过程中，你了解到了添加主题的方法。那么，接下来需要从这里找一个适合自己的Theme主题（现用别人的，再自己创建)。

• Github搜索Hugo主题: 优点，Star排名可以说明主题的用户群数量。
• 官方网站Theme主题列表: 列举的主题都有介绍和Demo页面。

建议你在发布博客前，阅读完起步这一章的所有内容才能对Hugo有个基本的了解。

Hugo使用技巧总结

Hugo访问本地数据文件

一些动态数据、或者大数据量文件，我们可以独立放在 /data/xxx_123.json 文件中，然后构建静态页面时通过 partial 文件加载数据文件即可。

阅读参考链接

Hugo访问远程资源

参考文档 ,我们可以通过Hugo访问远程资源，例如API调用，远程图片/JS/CSS或字体资源等等。

Syntax

resources.GetRemote URL [OPTIONS]

Returns

resource.Resource
{{ $url := "https://example.org/images/a.jpg" }}
{{ with resources.GetRemote $url }}
  {{ with .Err }}
    {{ errorf "%s" . }}
  {{ else }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ else }}
  {{ errorf "无法获取远程资源 %q" $url }}
{{ end }}

Hugo如何使用SCSS资源

编译并导入SCSS资源文件路径"/assets/sass/main.scss"

1
2

{{ $style := resources.Get "sass/main.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}">

Hugo如何导入JS资源文件

1

{{ $mainJs := resources.Get "js/main.js" | js.Build "main.js" | minify | fingerprint }}