使用Hugo搭建个人博客
通过 Hugo 创建个人静态博客,托管到 Github 并部署到 Vercel 加速国内访问。

前言

博客的引擎选择一直是个问题。动态博客和静态博客各有优劣。动态博客 WordpressTypecho 等拥有精美的主题,后台管理也比较方便,但是需要服务器。静态博客如 HexoHugoAstro 等可以直接部署静态页面,但是相对写文章比较繁琐一点。今天再次记录一下之前折腾的 Hugo,之前使用的主题是 Loveit,后来觉得 Stack 不错,所以本次就拿这个主题记录一下。

前提

部署静态博客需要的:

  • 一个 Github 账号
  • 一个 Vercel 账号(非必须)
  • 一个域名(非必须,但是有比较好)

1. 下载 HugoGit 到本地

Hugo 下载到本地,最好下载 Extended 版本,下载地址:点此下载

下载后放到一个不会删掉的地方,然后在系统环境变量 Path 中添加 Hugo 程序 和 Git 所在目录,完成后重启电脑,之后可以在 Windows Terminal 可以检测一下是否添加成功。

hugo-version

2. 创建仓库

在本地一个目录当作 Hugo 的目录,在此打开 Windows Terminal,然后输入下面的命令:

1hugo new site blog

输入完成后会在文件夹下出现一个 blog 文件夹。

3. 下载主题

1git init
2git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
3# 更新主题
4git submodule update --remote

如果后续修改主题,最好可以 fork 主题仓库,然后将上述地址换成自己的仓库地址。

拉取完成后,打开博客文件夹内的 theme/hugo-theme-stack/exampleSite,将文件夹内的 config.yaml 复制到站点根目录下,同时删除原有的 Hugo.toml,然后修改 config.toml 内的配置。

4. 发布网站

首先将站点目录推送到 Github,创建一个新的仓库,将 blog 文件夹内的内容推送,接下来在 vercel 创建一个新的项目,导入刚刚推送的仓库即可,同时可以绑定自己的域名方便访问。

5. 发布文章

首先可以将 ~blog/themes/hugo-theme-stack/archetypes/default.md 复制到站点目录下的 archetypes目录下,然后修改其中的文件头信息:

 1---
 2title: "{{ replace .Name "-" " " | title }}"
 3author: "Tom Almighty"
 4date: {{ .Date }}
 5math: true
 6license: false
 7hidden: false
 8comments: true
 9draft: false
10image: ""
11description: 
12slug: ""
13tags: []
14categories: ["折腾记录","日常生活","学习笔记"]

之后可以在站点根目录下打开 Windows Terminal ,输入命令即可创建第一篇文章。

1hugo new post/my-first.md

参考


最后修改于 2024-03-21