用 Git 建立和託管網站

Git 是一個少有的能將如此多的現代計算封裝到一個程序之中的應用程序，它可以用作許多其他應用程序的計算引擎。雖然它以跟蹤軟體開發中的源代碼更改而聞名，但它還有許多其他用途，可以讓你的生活更輕鬆、更有條理。在這個 Git 系列中，我們將分享七種鮮為人知的使用 Git 的方法。

創建一個網站曾經是極其簡單的，而同時它又是一種黑魔法。回到 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，最簡單的方法是從軟體存儲庫或 ports 樹安裝 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 的 「Projects」 頁面中的 「New Project」 按鈕。創建一個名為 yourGitLabUsername.gitlab.io 的空存儲庫，用你的 GitLab 用戶名或組名替換 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：

$ 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-to-web 工作流。使用 GitLab 的社區版，你可以自行託管你自己的 GitLab 實例；或者你可以使用 Gitolite 或 Gitea 等替代方案，並使用本文作為自定義解決方案的靈感來源。祝你玩得開心！

via: https://opensource.com/article/19/4/building-hosting-website-git

作者：Seth Kenlon 選題：lujun9972 譯者：wxy 校對：wxy

本文由 LCTT 原創編譯，Linux中國 榮譽推出

本文轉載來自 Linux 中國: https://github.com/Linux-CN/archive