跳到正文

Development

Hugo 与 Docker 入门

了解如何使用 Docker 容器搭建 Hugo 静态网站，无需在本地安装任何东西！这份分步指南将演示如何在隔离、可复现的环境中创建、开发和构建 Hugo 网站。

阅读约需 3 分钟

Docker 容器

从 Docker Hub 拉取 Docker 容器：

docker pull registry.gitlab.com/pages/hugo/hugo_extended:latest

标签

为方便起见，我们来创建一个别名（标签），这样就不必在每条 Docker 命令中都写完整的 URL 了。

docker tag registry.gitlab.com/pages/hugo/hugo_extended:latest hugo_extended

更多信息请参阅 docker tag。

创建新网站

现在可以开始使用 Hugo 容器创建新网站了：

docker run --rm -v ${PWD}:/src hugo_extended hugo new site quickstart
  • docker run 让 Docker 运行（创建一个新容器）
  • --rm 告诉 Docker 在容器执行完毕后将其清理掉。
  • -v ${PWD}:/src 将宿主机上的当前目录挂载到 Hugo 容器内的 /site 目录。
  • hugo_extended 是我们之前拉取的 Hugo 容器。
  • hugo new site <site_name> 执行 Hugo 的 new site 子命令。Hugo 容器已将 hugo 命令定义为容器的主入口点。最后一个参数是我们要创建的网站名称。

执行上述命令后，你会看到：

Congratulations! Your new Hugo site is created in /src/quickstart.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

  1. 我们是在容器内执行 Hugo 的，宿主机上并没有安装 Hugo。

  2. 由于我们挂载了卷，运行 hugo new site 生成的文件（或产物）在容器销毁后依然保留在宿主机上，可以继续使用。

添加主题

在添加主题之前，我们先把它当作一个真正的项目来对待：

cd quickstart
git init
git add .
git commit -m "initial commit"

有了 git 仓库之后，就可以通过子模块添加主题了：

git submodule add https://github.com/calintat/minimal.git themes/minimal
git submodule init
git submodule update
echo 'theme = "minimal"' >> config.toml

如果不喜欢这个主题，可以随时浏览 https://themes.gohugo.io/ 寻找更多主题。

现在可以通过以下命令启动网站：

docker run --rm -v ${PWD}:/src -p 1313:1313 hugo_extended hugo server --bind 0.0.0.0
  • docker run 让 Docker 运行（创建一个新容器）
  • --rm 告诉 Docker 在容器执行完毕后将其清理掉。
  • -v ${PWD}:/src 将宿主机上的当前目录挂载到 Hugo 容器内的 /src 目录。
  • -p 1313:1313 将宿主机的 1313 端口转发到容器的 1313 端口
  • hugo_extended 是我们之前拉取的 Hugo 容器。
  • hugo server --bind 0.0.0.0 执行 hugo server 子命令。在容器中运行时必须加上额外的 bind 选项，否则无法在本地浏览器中打开网站。

你会看到类似以下的输出：

                   | EN
+------------------+----+
  Pages            |  7
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  3
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0

Total in 42 ms
Watching for changes in /src/{content,data,layouts,static,themes}
Watching for config changes in /src/config.toml
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 0.0.0.0)
Press Ctrl+C to stop

打开浏览器并访问 http://localhost:1313。

浏览完毕后，在终端中按 Ctrl+C 停止正在运行的 Hugo Docker 容器。

提交更改

git add .
git commit -m "add theme submodule"

使用 Docker Compose 简化流程

Docker Compose 为我们提供了一种机制，可以减少命令输入，并一次性启动所需的一切。本例中只有一个服务，但想象一下，如果还需要数据库、日志服务、键值存储服务和 API 服务呢？只需运行一条命令就能让整个系统准备就绪、直接上手，这要舒服得多。

另一个原因在于持续集成和持续部署。你经常会听到很多人说用 Docker 来保持各环境之间的一致性：开发环境中运行的内容与集成、预发布和生产环境完全相同，只是配置有所差异。这固然没错，但 Docker Compose 另一个强大之处在于它提供了一套可组合的部署命令。后文会详细介绍。

在项目根目录下创建一个 docker-compose.yml，内容如下：

version: "3"
services:
  hugo:
    image: registry.gitlab.com/pages/hugo/hugo_extended:latest
    working_dir: /src
    ports:
      - "1313:1313"
    volumes:
      - ".:/src"
    command: server --bind 0.0.0.0

启动 Hugo

docker-compose up -d hugo

打开浏览器并访问 http://localhost:1313。

提交更改

git add .
git commit -m "add docker-compose"
标签: #Hugo #Docker #Docker Compose
分享