likes
comments
collection
share

如何使用hugo构建自己的博客

作者站长头像
站长
· 阅读数 6

最近写了一些文章,发表在了不同的平台上。但是某些平台对于文章的修改有着比较严格的限制,因此有了自建博客的想法,便自己尝试了下,简单记录如下。

关于博客框架

目前2023年了,有很多成熟的博客框架即插即用。这篇问答中,总结了常见框架的特点,摘录如下:

有前端基础,会Markdown、会HTML和CSS,选择 Hexo
有Vue基础可以选择 vuePress 或者 vitePress
会Go可以选择 Hugo
会Rust可以选择 Zola
会Ruby可以选择 Jekyll
会PHP可以考虑使用 WordPress

同样的 Java 也有类似的内容,看你自己的需求了
成本最低的当然是 hexo 和 hugo,还有 Jekyll 了,配置一下环境就可以了
hexo主题多,hugo 编译快

PHP和Java之类的需要自建服务器
其他的生成静态页的项目只需要找到一个可以托管文件的服务既可以搭建,一般都有Web托管
也有比如说Github Pages这种免费的服务

这篇文章,就主要介绍如何使用Hugo构建自己的博客。

HUGO的安装与使用

Hugo是一款流行的静态网站生成器,它能够以极快的速度将Markdown、HTML和其他文件转换成一个完全可定制且高度优化的静态网站。Hugo基于Go语言开发,具有易于使用、高效、可扩展等特点,被广泛用于个人博客、文档网站、企业网站等各种类型的网站建设。

具体的安装方式,可以参考Installation页面,这里提供了各种操作系统(Windows、MACOS、Linux等)下的安装方式。

安装好Hugo之后,通过quick start页面可以快速方便的建立起一个博客主页。

创建页面的时候除了需要安装Hugo,还需要安装git,git的主要作用是下载想要的主题

主题的选取

主题相当于网站的风格,可以在Theme页面中预览。

在Hugo中,主题用于定义网站的外观和布局

主题通常包括HTML、CSS、JavaScript和其他必需的文件,使得用户可以轻松地自定义网站的样式和结构,而无需在每篇文章或页面中手动编辑HTML和CSS。

用户可以通过在config.toml文件中指定主题来轻松地更改网站的外观,或者可以创建自己的主题以满足自己的需求。

这里选择PaperMod这个主题的config.toml文件做介绍。

PaperMode官方样例给出了这样一个主题,直接本地运行后的效果如下:

如何使用hugo构建自己的博客

关于主题中的各个配置项,详见PaperMod主题配置Hugo PaperMod Feature页面

这里我主要设置了search、tags、archives等页面。具体效果如下:

具体博客中,插入图片的具体方式参考Hugo 博客插入图片的方法

具体的方式就是

hugo new posts/new-post/index.md

将新的博文创建成一个文件夹,将 markdown 源文件命名为 index.md,再在文件夹内创建 pics 文件夹,将图片放入该文件夹,在编写博文插入图片时使用相对路径,即 pics/1.png,这样在编辑器中就可以看到图片了。

本地部署

上述命令均完成后,直接执行

hugo server

同时在浏览器中输入http://127.0.0.1:1313即可查看博客网页的效果。

一个样例如下:

如何使用hugo构建自己的博客

互联网上的部署方式

部署到互联网,比较方便的方式有两种:

  • github提供的pages功能
  • cloudflare提供的pages功能

使用这两个功能,都需要将上述代码推送到github上。

关于github提供的pages功能,Host on GitHub有比较详细的步骤,只不过少了一个创建username.github.io项目,以及将整个Hugo项目推送至新创建的项目。

关于cloudflare提供的pages功能,可以参考这篇文章——Deploy with Cloudflare Pages。同时,cloudflare还可以将托管的项目绑定自己的域名。

这里特别需要注意,hugo框架生成的目录结构,具体可以参考这篇文章——学习HUGO ,详解目录结构