从零开始！超详细 Hugo 博客在 GitHub 部署全攻略，新手也能轻松上手

博主： demius
发布时间：2024 年 11 月 18 日
13 次浏览
暂无评论
3108字数
分类： Hugo

## 安装 Hugo

* 首先需要在本地安装 Hugo。Hugo 的安装方式因操作系统而异，以下是常见操作系统的安装方法：
  * **Windows**：可以从 Hugo 的官方 GitHub releases 页面下载适合 Windows 的压缩包，解压后将 hugo.exe 所在的目录添加到系统的环境变量 PATH 中。
  * **macOS**：使用 Homebrew 包管理工具，在终端中输入 `brew install hugo`进行安装。
  * **Linux**：大多数 Linux 发行版可以使用包管理工具进行安装，例如在 Ubuntu 上可以使用 `sudo apt-get install hugo`命令安装。

### 创建 Hugo 站点

* 打开终端，使用 `hugo new site`命令创建一个新的 Hugo 站点。例如，要创建一个名为 `myblog`的站点，可以输入以下命令：

```bash
hugo new site myblog
```

* 这将在当前目录下创建一个名为 `myblog`的新目录，其中包含了 Hugo 站点的基本结构和配置文件。

### 选择并安装主题

* 进入新创建的站点目录 `cd myblog`，然后初始化 Git 仓库 `git init`。
* 从 Hugo 官方主题网站或者 GitHub 上选择一个你喜欢的主题。例如，如果你选择了 `ananke`主题，可以在站点目录下的终端中输入以下命令来下载并安装该主题：

```bash
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
```

* 将主题添加到站点配置文件 `config.toml`中，找到 `theme`配置项，将其设置为你所安装的主题名称，例如：

```toml
theme = "ananke"
```

### 创建博客内容

* 使用 `hugo new`命令创建新的博客文章。例如，要创建一篇名为 `my-first-post.md`的文章，可以输入以下命令：

```bash
hugo new posts/my-first-post.md
```

* 这将在 `content/posts`目录下创建一个新的 Markdown 文件，你可以使用文本编辑器打开该文件，在文件头部的元数据中设置文章的标题、日期、标签等信息，然后在文件主体中撰写文章内容。

### 本地测试

* 在本地启动 Hugo 服务器，以便在本地浏览器中预览博客。在站点目录下的终端中输入以下命令：

```bash
hugo server
```

* 其中 `-D`参数表示包括草稿文章。启动服务器后，在浏览器中访问 `http://localhost:1313`，即可查看本地的博客站点。

### 构建静态文件

* 在将博客部署到 GitHub 之前，需要先使用 Hugo 构建静态文件。在站点目录下的终端中输入以下命令：

```bash
hugo -D 或者 hugo --minify
```

* 这将根据你的文章内容和主题配置生成一个 `public`目录，其中包含了所有生成的静态 HTML、CSS、JavaScript 等文件，这些文件将被部署到 GitHub 上。

## 使用Git部署推送

* **安装 Git**：从 Git 官方网站下载并安装适合你操作系统的 Git 版本。安装完成后，在命令行中输入 `git --version` 来确认安装是否正确。
* 进入到新创建的项目目录 `cd <your_site_name>` ，然后使用 Git 进行初始化 `git init` ，这将在项目目录下创建一个隐藏的 `.git` 文件夹，用于跟踪项目的版本信息。
* **配置环境变量**：即使安装了 Hugo，若未将 Hugo 的可执行文件路径添加到系统的环境变量中，系统在执行命令时也无法找到该命令。对于不同操作系统，配置环境变量的方法有所不同：

* **Windows 系统**：右键点击 “此电脑”，选择 “属性”，在弹出的窗口中点击 “高级系统设置”，然后在 “系统属性” 窗口的 “高级” 选项卡下点击 “环境变量” 按钮。在 “系统变量” 列表中找到 “Path” 变量，点击 “编辑”，在弹出的编辑环境变量窗口中点击 “新建”，将 Hugo 可执行文件所在的文件夹路径添加进去，例如 `C:\Program Files\Hugo\bin` ，然后依次点击 “确定” 保存设置。
  * **macOS 系统**：一般情况下，通过安装包安装 Hugo 后，会自动将其路径添加到环境变量中。若未自动添加，可以打开终端，输入 `export PATH=$PATH:/usr/local/bin` ，其中 `/usr/local/bin` 是 Hugo 可执行文件所在的常见路径，若你的安装路径不同，请替换为实际路径。为了使该配置在每次打开终端时都生效，可以将此命令添加到 `~/.bash_profile` 或 `~/.zshrc` 文件中。
  * **Linux 系统**：编辑 `~/.bashrc` 文件，在文件末尾添加 `export PATH=$PATH:/usr/local/bin` ，同样，如果 Hugo 安装在其他路径，请将 `/usr/local/bin` 替换为实际路径。保存文件后，在终端执行 `source ~/.bashrc` 使配置生效。

### 创建 GitHub 仓库

* 登录到 GitHub 账号，创建一个新的公共仓库，仓库名称建议与你的用户名和博客名称相关，例如 `username.github.io`，其中 `username`是你的 GitHub 用户名。

### 部署到 GitHub

* 将 `public`目录中的所有文件推送到 GitHub 仓库中。首先，进入 `public`目录 `cd public`，然后初始化 Git 仓库 `git init`，并将远程仓库添加为 `origin`：

```bash
git remote add origin https://github.com/username/username.github.io.git
```

* 将所有文件添加到暂存区 `git add.`，提交更改 `git commit -m "Initial commit"`，最后将文件推送到远程仓库 `git push -u origin master`。

### 访问博客

* 推送完成后，稍等片刻，即可通过 `https://username.github.io`访问你的 Hugo 博客。

## 网址导航主题

WebStack-Hugo | 一个静态响应式导航主题

![](https://tc.demius.tech/i/2024/11/18/673a3c253c895.webp)

* [主题安装文档](https://github.com/shenweiyan/Knowledge-Garden/discussions/10)

End

文章标签：Hugo

本文标题：从零开始！超详细 Hugo 博客在 GitHub 部署全攻略，新手也能轻松上手

本文链接： https://blog.demius.tech/archives/527.html

除非注明，均默认采用 CC BY-NC-SA 4.0许可协议。

声明：转载请注明文章来源。

最后修改：2024 年 11 月 18 日

如果觉得我的文章对你有用，请随意赞赏

暂无相关推荐

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

打卡

语录

私密评论

名称 *

🎲

邮箱 *

地址

从零开始！超详细 Hugo 博客在 GitHub 部署全攻略，新手也能轻松上手

demius • 2024 年 11 月 18 日

## 安装 Hugo

### 创建 Hugo 站点

* 打开终端，使用 `hugo new site`命令创建一个新的 Hugo 站点。例如，要创建一个名为 `myblog`的站点，可以输入以下命令：

```bash
hugo new site myblog
```

* 这将在当前目录下创建一个名为 `myblog`的新目录，其中包含了 Hugo 站点的基本结构和配置文件。

### 选择并安装主题

```bash
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
```

* 将主题添加到站点配置文件 `config.toml`中，找到 `theme`配置项，将其设置为你所安装的主题名称，例如：

```toml
theme = "ananke"
```

### 创建博客内容

* 使用 `hugo new`命令创建新的博客文章。例如，要创建一篇名为 `my-first-post.md`的文章，可以输入以下命令：

```bash
hugo new posts/my-first-post.md
```

### 本地测试

* 在本地启动 Hugo 服务器，以便在本地浏览器中预览博客。在站点目录下的终端中输入以下命令：

```bash
hugo server
```

* 其中 `-D`参数表示包括草稿文章。启动服务器后，在浏览器中访问 `http://localhost:1313`，即可查看本地的博客站点。

### 构建静态文件

* 在将博客部署到 GitHub 之前，需要先使用 Hugo 构建静态文件。在站点目录下的终端中输入以下命令：

```bash
hugo -D 或者 hugo --minify
```

* 这将根据你的文章内容和主题配置生成一个 `public`目录，其中包含了所有生成的静态 HTML、CSS、JavaScript 等文件，这些文件将被部署到 GitHub 上。

## 使用Git部署推送

### 创建 GitHub 仓库

* 登录到 GitHub 账号，创建一个新的公共仓库，仓库名称建议与你的用户名和博客名称相关，例如 `username.github.io`，其中 `username`是你的 GitHub 用户名。

### 部署到 GitHub

* 将 `public`目录中的所有文件推送到 GitHub 仓库中。首先，进入 `public`目录 `cd public`，然后初始化 Git 仓库 `git init`，并将远程仓库添加为 `origin`：

```bash
git remote add origin https://github.com/username/username.github.io.git
```

* 将所有文件添加到暂存区 `git add.`，提交更改 `git commit -m "Initial commit"`，最后将文件推送到远程仓库 `git push -u origin master`。

### 访问博客

* 推送完成后，稍等片刻，即可通过 `https://username.github.io`访问你的 Hugo 博客。

## 网址导航主题

WebStack-Hugo | 一个静态响应式导航主题

![](https://tc.demius.tech/i/2024/11/18/673a3c253c895.webp)

* [主题安装文档](https://github.com/shenweiyan/Knowledge-Garden/discussions/10)

从零开始！超详细 Hugo 博客在 GitHub 部署全攻略，新手也能轻松上手

※相关文章推荐※

※热评文章推荐※

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Handsome 主题大升级：原版基础上的惊艳修改与网站风格完美适配全记录（总）

思源笔记配置PicGo实现一键同步多平台发布文章，保姆级教程

Handsome 助力：提升阅读观影体验的书单电影界面设计

《探索 Stable Diffusion：开启 AI 绘画的奇幻之旅》

Handsome 主题大升级：（快速跳转）

2024 最强服务器监控神器 ——Uptime Kuma 全解析

Handsome 主题大升级（四）BODY

实用指南：Typecho 系统的 Joe 主题美化技巧持续更新

Handsome 主题大升级（一）系统后台设置

新手怎么创建个人博客，小白教程，从零开始搭建个人博客（超详细）

从零开始！超详细 Hugo 博客在 GitHub 部署全攻略，新手也能轻松上手

※相关文章推荐※

※热评文章推荐※

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

从零开始！超详细 Hugo 博客在 GitHub 部署全攻略，新手也能轻松上手

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款