One

主题

00:00:00
2025-10-182025-10-18专题博客搭建静态站点构建器hugohugo主题hextra
2935
15.4m
0

部署 ​

部署 ​

原文 ​

https://imfing.github.io/hextra/zh-cn/docs/getting-started/

image-20251018104835065

快速开始 ​

从模板快速启动 ​

imfing/hextra-starter-template

您可以通过使用上述模板仓库快速开始。

img

我们提供了一个GitHub Actions工作流，可以帮助自动构建并将您的站点部署到GitHub Pages，并免费托管。 更多选项，请查看部署站点。

🌐 演示 ↗

作为新项目启动 ​

有两种主要方式将Hextra主题添加到您的Hugo项目中：

  1. Hugo模块（推荐）：最简单且推荐的方法。Hugo模块允许您直接从在线源拉取主题。主题会自动下载并由Hugo管理。
  2. Git子模块：或者，将Hextra添加为Git子模块。主题由Git下载并存储在项目的themes文件夹中。

方式1：将Hextra设置为Hugo模块 ​

先决条件 ​

在开始之前，您需要安装以下软件：

步骤 ​

初始化一个新的Hugo站点 ​

shell
hugo new site my-site --format=yaml

image-20251018105410533

通过模块配置Hextra主题 ​

shell
# 初始化Hugo模块
cd my-site
#hugo mod init github.com/username/my-site
hugo mod init cnb.cool/onedayxyy/my-site

# 添加Hextra主题
hugo mod get github.com/imfing/hextra

image-20251018110423953

配置hugo.yaml以使用Hextra主题，添加以下内容：

yaml
module:
  imports:
    - path: github.com/imfing/hextra

image-20251018110449918

创建您的内容页面 ​

为主页和文档页面创建新内容：

shell
hugo new content/_index.md
hugo new content/docs/_index.md

本地预览站点 ​

shell
hugo server --buildDrafts --disableFastRender

image-20251018110618869

恭喜，您的新站点预览可在http://localhost:1313/查看。

image-20251018110703230

如何更新主题 ​

要更新项目中的所有Hugo模块到最新版本，运行以下命令：

shell
hugo mod get -u

要将Hextra更新到最新发布版本，运行以下命令：

shell
hugo mod get -u github.com/imfing/hextra

更多详情请参阅Hugo模块。

🍊 ​

方式2：将Hextra设置为Git子模块 ​

先决条件 ​

在开始之前，您需要安装以下软件：

步骤 ​

初始化一个新的Hugo站点 ​

shell
hugo new site my-site --format=yaml

将Hextra主题添加为Git子模块 ​

切换到站点目录并初始化一个新的Git仓库：

shell
cd my-site
git init

然后，将Hextra主题添加为Git子模块：

shell
git submodule add https://github.com/imfing/hextra.git themes/hextra

配置hugo.yaml以使用Hextra主题，添加以下内容：

yaml
theme: hextra

创建您的内容页面 ​

为主页和文档页面创建新内容：

shell
hugo new content/_index.md
hugo new content/docs/_index.md

本地预览站点 ​

shell
hugo server --buildDrafts --disableFastRender

您的新站点预览可在http://localhost:1313/查看。

当使用CI/CD部署Hugo网站时，确保在运行hugo命令之前执行以下命令至关重要。

shell
git submodule update --init

如果不运行此命令，主题文件夹将不会被填充Hextra主题文件，导致构建失败。

要更新仓库中的所有子模块到最新提交，运行以下命令：

git submodule update --remote

要将Hextra更新到最新提交，运行以下命令：

git submodule update --remote themes/hextra

更多详情请参阅Git子模块。

结束。

FAQ ​

这个 hugo mod init 是啥意思？ ​

提问：

bash
# 初始化Hugo模块
cd my-site
hugo mod init github.com/username/my-site 

这个是啥意思？

回答：

这个命令是用于初始化Hugo站点的模块系统，主要分为两部分理解：

  1. cd my-site

这是进入目录的命令，作用是导航到你的Hugo站点根目录（my-site是你之前通过hugo new site my-site创建的站点文件夹名称）。必须先进入站点目录，后续的Hugo命令才能正确识别站点配置。

  1. hugo mod init github.com/username/my-site

这是Hugo初始化模块的核心命令，作用是启用Hugo的模块系统（Module System），并为你的站点指定一个唯一的模块标识。

  • hugo mod init：Hugo的模块初始化命令，用于开启模块功能（Hugo模块系统用于管理站点依赖，比如主题、插件等，类似Go语言的go mod或前端的npm）。

  • github.com/username/my-site：这是你站点模块的唯一标识符（通常称为“模块路径”）。
    它通常对应你的代码仓库地址（比如GitHub仓库URL），目的是让Hugo能唯一识别你的站点模块，方便后续引入其他依赖（如主题）或被其他模块引用。
    实际使用时，建议替换为你真实的仓库地址（比如你的GitHub用户名+仓库名）。

    https://cnb.cool/onedayxyy/vitepress-theme-teek-one-public

    cnb.cool/onedayxyy/my-site

为什么需要初始化模块？

Hugo模块系统是管理依赖的现代方式，相比传统的git submodule（主题放在themes目录），它更灵活：

  • 可以直接通过模块路径安装主题（比如hugo mod get github.com/xxx/主题名）；
  • 方便更新依赖（hugo mod get -u）；
  • 支持嵌套依赖管理（自动处理主题的依赖）。

简单说，这个命令的作用是：进入你的Hugo站点目录，开启模块功能，并给站点一个唯一标识，为后续管理主题/依赖做准备。

最近更新