如何通过搭建HUGO网站,并通过阿里云OSS发布,实现自有文件及域名、低成本、SEO友好的个人博客?(同时,阿里云OSS也可以作为私有Markdown图床,防止图片链接失效)本教程由笔者Prompt并修改,由ChatGPT撰写。

HUGO 教程

Part1 在 Mac 上安装和配置 HUGO

本教程将指导你如何在 Mac 上安装和配置 HUGO。HUGO 是一款优秀的静态网站生成器,支持快速生成网站、自定义主题、多语言等功能。

代码块为终端命令,# 后内容为注释。

1. 安装 Homebrew(包管理工具)

# 下载并安装 Homebrew(在终端中运行,即打开终端运行即可)
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

可访问Homebrew软件包管理器官网查看。若已经安装Homebrew,直接从第2步开始

2. 安装 HUGO(静态网站生成器)

# 使用 Homebrew 安装 HUGO(在终端中运行)
brew install hugo

3. 验证安装

# 显示 HUGO 版本信息(在终端中运行,确保已经 cd 到某个文件夹路径)
hugo version

4. 创建新的 HUGO 项目

# 创建名为 mysite 的新 HUGO 项目(在终端中运行,确保已经 cd 到某个文件夹路径)
hugo new site mysite

注意:`/path/to/mysite` 是项目文件夹的本地路径。在 Mac 上,可以在 Finder 中找到文件夹,按住 Option 键并右键单击文件夹,选择“复制…作为路径名”以获得路径。

5. 添加主题

以下以 PaperMod 主题为例:

  1. 访问 HUGO 主题库 (Hugo Themes,选择一个你喜欢的主题,例如) PaperMod 主题。
  2. 复制主题的 GitHub 仓库地址,例如 `https://github.com/adityatelange/hugo-PaperMod.git`。
  3. 在终端中,切换到刚创建的 `mysite` 文件夹:
# 切换到 mysite 文件夹(在终端中运行,确保已经 cd 到 /path/to/mysite 文件夹路径)
cd mysite

添加主题:

# 初始化 Git 仓库(在终端中运行,确保已经 cd 到 /path/to/mysite 文件夹路径)
git init
# 添加主题作为 Git 子模块(在终端中运行,确保已经 cd 到 /path/to/mysite 文件夹路径)
git submodule add [GitHub - adityatelange/hugo-PaperMod: A fast, clean, responsive Hugo theme.](https://github.com/adityatelange/hugo-PaperMod.git) themes/PaperMod

或者,直接下载主题的压缩包,解压后将文件夹复制到 themes 目录下,重命名为 PaperMod

6. 创建内容

# 创建一篇新文章(在终端中运行,确保已经 cd 到 /path/to/mysite 文件夹路径)
hugo new posts/my-first-post.md

或者,直接将写好的页面直接复制进入/mysite/cotent/pages自己的markdown文件,拖入时,注意markdown文件中,有如下的属性标记:

# title、slug必须;date必须否则默认当前日期
tags、categories数量不限;slug会在文章发布后变为网页后缀:mydomain.com/pages/BBBB-CCCC;title为文章显示标题
---
author: AAA
tags:
- tag1
- tag2
categories:
- categories1
- categories2
slug: BBB-CCCC
showtoc: false
title: XXXXX
date: 2022-10-26
lastMod: 2023-03-06
---

同时,多种笔记软件与HUGO发布打通,比如LogseqObsidian等,可以搜索教程,后续有空再写新的教程。

7. 生成网站页面

# 生成静态文件(在终端中运行,确保已经 cd 到 /path/to/mysite 文件夹路径)
hugo

8. 预览网站

# 生成预览(在终端中运行,确保已经 cd 到 /path/to/mysite 文件夹路径)
hugo server

在浏览器中访问 http://localhost:1313,查看你的 HUGO 网站。按下Ctrl+C退出预览

9. 发布网站到阿里云OSS

public 文件夹下的所有文件和文件夹上传到阿里云 OSS。具体见下方Part2。

10. 日常使用

重复以上6、7、8、9步骤即可

11.其他HUGO配置

举例其他配置项,不详细展开,附带官方教程

自定义域名

网站统计

文章留言

文章分享

Part2 通过阿里云 OSS 进行发布

本教程将指导你如何将通过 HUGO 生成的静态网站部署到阿里云 OSS,并配置域名。我们将分为以下几个部分进行讲解:

配置阿里云 OSS

1. 注册阿里云帐号

访问阿里云官网 (https://www.alibabacloud.com/),点击右上角的“免费注册”按钮,按照提示填写信息并完成手机或邮箱验证。

2. 开通阿里云 OSS

登录阿里云控制台 (https://console.aliyun.com/)。

在“产品与服务”列表中找到“对象存储 OSS”,点击进入 OSS 控制台。

如尚未开通 OSS 服务,请按照提示完成开通流程。

3. 创建并配置 OSS Bucket

在 OSS 控制台,点击“创建 Bucket”按钮。

输入 Bucket 名称(注意名称和文件夹全部小写,部分场景会区分大小写),建议选择海外节点(如中国香港,以避免域名工信部备案要求),设置存储类型为“标准存储”,设置访问权限为“公共读”。

创建成功后,点击 Bucket 名称进入 Bucket 详情页。

在左侧菜单中选择“基础设置”,找到“静态页面”设置项,将“索引文件”设置为“index.html”,保存。

4. 上传 HUGO 网站至 OSS

将本地 public 目录下的所有文件和文件夹上传至 OSS Bucket。

你可以手动上传,将 public 文件夹下的所有文件和文件夹拖拽到 ossbrowser 中对应的 Bucket。

也可以使用阿里云 OSS 客户端工具(如 ossbrowser)此处长不展开,单列教程。

5. 配置域名

从阿里云域名 (https://wanwang.aliyun.com/) 购买一个域名(建议从阿里云购买)。

在域名管理控制台中,为你的域名添加一条 CNAME 记录,将其指向你的 OSS Bucket 域名(可以在 OSS 控制台中找到)。

等待 DNS 生效,访问你的域名,确认网站是否正常工作。

6. 配置 HUGO

更新 HUGO 配置

修改 HUGO 网站的 config.toml 文件,打开config.tomlbaseURL 设置为你的自定义域名

Reference

本文通过GPT-4撰写——让其写作教程,并根据自己的操作经验,给到其修改意见,并让其以markdown格式输出。用时1h20min,因为在摸索相关的与GPT-4提示方式(Prompt),“提示工程学”探索占用了一定时间。

整体感受还是很惊艳——

  1. 之前答应朋友写HUGO相关的教程,但是感觉比较麻烦,一直没进行
  2. 通过GPT-4进行输出,并进行对GPT进行提示修改完成
  3. 因为教程类文章,基于软件有流程,也有很多教程,所以本身产出教程并不特别惊艳。真正惊艳的是,将自己作为小白的操作心得让其写进教程,这一步其理解、输出,节省了很多时间,也很惊艳。
  4. 感叹,真正需要不断反思自己地工作,有多少有创意的地方,重复性知识工作,被替代的速度,感觉很快。同时,有意识“剥削机器”,解放自己的创造力。
  5. 不足的是,目前还没有办法图文并貌的输出,但相信很快会有。