使用 Git 构建和托管网站

如果你让 Git 助你一臂之力，发布你自己的网站很容易。在本系列关于 Git 鲜为人知的用法的首篇文章中学习如何操作。

web development and design, desktop and browser

图片来源

Git 是一款罕见的应用程序，它成功地将现代计算的许多方面封装到一个程序中，最终成为许多其他应用程序的计算引擎。虽然它最出名的是在软件开发中跟踪源代码更改，但它还有许多其他用途，可以使你的生活更轻松、更有条理。在本系列文章中，我们将分享七种鲜为人知的 Git 用法，以迎接 4 月 7 日 Git 的 14 周年纪念日。

创建网站曾经既极其简单，又像一种黑魔法。在 Web 1.0 的旧时代（实际上没有人这么称呼它），你可以打开任何网站，查看其源代码，并对 HTML 进行逆向工程——包括其所有内联样式和基于表格的布局——经过一个下午或两天，你感觉自己像个程序员。但是，仍然存在将你创建的页面放到互联网上的问题，这意味着要处理服务器、FTP、webroot 目录和文件权限。虽然现代网络自那时以来变得更加复杂，但如果你让 Git 助你一臂之力，自助发布可以同样容易（甚至更容易！）。

使用 Hugo 创建网站

Hugo 是一个开源的静态站点生成器。静态站点是早期构建 Web 的基础（如果你追溯到足够久远的时候，它就是全部的 Web）。静态站点有几个优点：它们相对容易编写，因为你不需要编写代码；它们相对安全，因为页面上没有执行代码；而且它们可以非常快速，因为除了传输页面上的内容外，没有其他处理。

Hugo 不是唯一的静态站点生成器。Grav、Pico、Jekyll、Podwrite 和许多其他工具都提供了一种简单的方法来创建功能齐全且维护最少的网站。Hugo 恰好是内置 GitLab 集成的工具之一，这意味着你可以使用免费的 GitLab 帐户生成和托管你的网站。

Hugo 也有一些非常忠实的粉丝。例如，如果你曾经访问过 Let's Encrypt 网站，那么你使用过一个用 Hugo 构建的网站。

安装 Hugo

Hugo 是跨平台的，你可以在 Hugo 的入门资源中找到 MacOS、Windows、Linux、OpenBSD 和 FreeBSD 的安装说明。

如果你使用的是 Linux 或 BSD，最简单的方法是从软件仓库或端口树安装 Hugo。确切的命令因你的发行版而异，但在 Fedora 上，你将输入

$ sudo dnf install hugo

打开终端并输入以下内容，确认你已正确安装它

$ hugo help

这将打印 hugo 命令的所有可用选项。如果你没有看到，你可能安装 Hugo 不正确，或者需要将命令添加到你的路径。

创建你的站点

要构建 Hugo 站点，你必须具有特定的目录结构，Hugo 将通过输入以下内容为你生成该结构

$ hugo new site mysite

你现在有一个名为 mysite 的目录，它包含构建 Hugo 网站所需的默认目录。

Git 是你将站点放到互联网上的接口，因此请将目录更改为新的 mysite 文件夹，并将其初始化为 Git 仓库

$ cd mysite
$ git init .

Hugo 非常 Git 友好，因此你甚至可以使用 Git 为你的站点安装主题。除非你计划开发你正在安装的主题，否则你可以使用 --depth 选项来克隆主题源的最新状态

$ git clone --depth 1 \
https://github.com/darshanbaral/mero.git\
themes/mero

现在为你的站点创建一些内容

$ hugo new posts/hello.md

使用你最喜欢的文本编辑器编辑 content/posts 目录中的 hello.md 文件。Hugo 接受 Markdown 文件，并在发布时将其转换为主题化的 HTML 文件，因此你的内容必须是 Markdown 格式。

如果你想在你的文章中包含图像，请在 static 目录中创建一个名为 images 的文件夹。将你的图像放入此文件夹，并在你的标记中使用以 /images 开头的绝对路径引用它们。例如

![A picture of a thing](/images/thing.jpeg)

选择主题

你可以在 themes.gohugo.io 找到更多主题，但最好在测试时坚持使用基本主题。规范的 Hugo 测试主题是 Ananke。有些主题具有复杂的依赖关系，有些主题在没有复杂配置的情况下不会以你期望的方式渲染页面。本例中使用的 Mero 主题捆绑了一个详细的 config.toml 配置文件，但（为了简单起见）我将在此处提供基本知识。在文本编辑器中打开名为 config.toml 的文件并添加三个配置参数

languageCode = "en-us"
title = "My website on the web"
theme = "mero"

[params]
  author = "Seth Kenlon"
  description = "My hugo demo"

预览你的站点

在你准备好发布之前，你不必将任何内容放到互联网上。在你工作时，你可以通过启动 Hugo 自带的本地 Web 服务器来预览你的站点。

$ hugo server --buildDrafts --disableFastRender

打开 Web 浏览器并导航到 http://localhost:1313 以查看你的工作进度。

使用 Git 发布到 GitLab

要在 GitLab 上发布和托管你的站点，请为你的站点内容创建一个仓库。

要在 GitLab 中创建仓库，请单击 GitLab 项目页面中的 New Project 按钮。创建一个名为 yourGitLabUsername.gitlab.io 的空仓库，将 yourGitLabUsername 替换为你的 GitLab 用户名或组名。你必须使用此方案作为你的项目名称。如果你想稍后添加自定义域名，你可以这样做。

不要包含许可证或 README 文件（因为你已在本地启动了一个项目，现在添加这些文件会使将数据推送到 GitLab 变得更加复杂，并且你始终可以稍后添加它们）。

一旦你在 GitLab 上创建了空仓库，将其添加为 Hugo 站点的本地副本的远程位置，该站点已经是一个 Git 仓库

$ git remote add origin git@gitlab.com:skenlon/mysite.git

创建一个名为 .gitlab-ci.yml 的 GitLab 站点配置文件并输入这些选项

image: monachus/hugo

variables:
  GIT_SUBMODULE_STRATEGY: recursive

pages:
  script:
  - hugo
  artifacts:
    paths:
    - public
  only:
  - master

image 参数定义了一个容器化镜像，它将为你的站点提供服务。其他参数是指示 GitLab 服务器在你将新代码推送到远程仓库时要执行哪些操作的指令。有关 GitLab 的 CI/CD（持续集成和交付）选项的更多信息，请参阅 GitLab 文档的 CI/CD 部分。

设置排除项

你的 Git 仓库已配置，在 GitLab 服务器上构建站点的命令已设置，并且你的站点已准备好发布。对于你的第一次 Git 提交，你必须采取一些额外的预防措施，这样你就不会对你不打算进行版本控制的文件进行版本控制。

首先，将 Hugo 在构建你的站点时创建的 /public 目录添加到你的 .gitignore 文件中。你不需要在 Git 中管理已完成的站点；你需要跟踪的只是你的源 Hugo 文件。

$ echo "/public" >> .gitignore

你不能在 Git 仓库中维护 Git 仓库而不创建 Git 子模块。为了保持简单，请移动嵌入的 .git 目录，以便主题只是一个主题。

请注意，你必须将你的主题文件添加到你的 Git 仓库中，以便 GitLab 可以访问该主题。如果不提交你的主题文件，你的站点将无法成功构建。

$ mv themes/mero/.git ~/.local/share/Trash/files/

或者，使用 trash 命令，例如 Trashy

$ trash themes/mero/.git

现在你可以将本地项目目录的所有内容添加到 Git 并将其推送到 GitLab

$ git add .
$ git commit -m 'hugo init'
$ git push -u origin HEAD

使用 GitLab 上线

一旦你的代码被推送到 GitLab，请查看你的项目页面。一个图标表示 GitLab 正在处理你的构建。第一次推送代码时可能需要几分钟，所以请耐心等待。但是，不要太有耐心，因为该图标并非总是可靠地更新。

当你等待 GitLab 组装你的站点时，请转到你的项目设置并找到 Pages 面板。一旦你的站点准备就绪，将为你提供其 URL。该 URL 是 yourGitLabUsername.gitlab.io/yourProjectName。导航到该地址以查看你的劳动成果。

如果你的站点未能正确组装，GitLab 会提供对 CI/CD 管道日志的深入了解。查看错误消息以了解哪里出了问题。

Git 和 Web

Hugo（或 Jekyll 或类似工具）只是利用 Git 作为你的 Web 发布工具的一种方式。借助服务器端 Git 钩子，你可以使用最少的脚本设计自己的 Git 到 Web 管道。使用 GitLab 的社区版，你可以自托管你自己的 GitLab 实例，或者你可以使用 Gitolite 或 Gitea 等替代方案，并将本文作为自定义解决方案的灵感。祝你玩得开心！

标签

Git