如何使用Hugo建立博客

使用Hugo從零開始部署新博客的詳細教程

雨果（Hugo）是創建博客的絕佳工具。

兩年多來，我一直在此博客中使用Hugo。我有幾個喜歡使用Hugo的理由。

它是簡單的，無聊的，靈活的，快速地。

主要原因是簡單的。入門不需要太多的學習。

您以Markdown編寫內容，該格式使我可以使用自己喜歡的編輯器（Bear）編寫帖子。

雨果是無聊的。不要誤會我的意思，這是非常積極的事情。作為開發人員，我很想一直在這里和那裡進行調整。雨果沒有花哨的技術。它是使用Go（我最喜歡的一種語言）構建的，但這並不意味著我想深入Hugo的內部並改變其工作方式。

而且它不會像許多JavaScript框架那樣出現任何酷的或下一代的東西。

因此，這很無聊，這給了我很多時間去做博客上真正有用的事情：寫作內容。我專注於內容，而不是內容容器。

就是說，雨果真是太髒了靈活的。我以開放源代碼主題開始了自己的博客，然後隨著時間的推移完全對其進行了更改。有時我想在網站上做超出簡單博客範圍之內的事情，而Hugo允許我創建這些事情。

最後，我愛雨果的另一個原因是快速地。為什麼？首先，它以Go為核心，這是一種非常快速的語言。在Go生態系統中，沒有100 MB依賴性的概念。事情要盡可能快。另外，Hugo不需要執行使用高級技術時所需的一些高級工作。這是無聊的副產品。

無論如何，用文字就足夠了。

Hugo很棒，特別是如果您是開發人員並且願意用Markdown編寫。非技術人員可能只是拒絕使用Markdown，這是完全可以理解的。

另外，您還必須為以Git為中心的工作流程做好準備，以使事情真正發生點擊。

您要做的是使用Markdown編寫帖子，然後將更改提交到Git存儲庫（通常在GitHub上），並且某些粘合技術將所做的更改部署在託管站點的服務器上。

託管雨果網站

一個雨果博客是完全靜態的。這意味著您不需要託管自己的服務器，也無需為其使用特殊服務。

Netlify，Now和GitHub Pages是3個免費託管Hugo博客的好地方。

唯一的成本就是您必須維持的域名成本。我不能再強調擁有自己的域名的重要性。不.github.io或者.netlify.com或者.now.sh網站，請。

我自己的Hugo網站託管在Netlify上。

選擇一個域

將您的博客放在您自己的域下。選一個。使用您自己的名字。並使用.com或者.blog。不要嘗試通過使用本地化域來變得聰明，不要使用.io。.com只會給人留下更好的印象，並且可用於您將來的所有項目，而不僅僅是託管您的博客。我選了

哦，如果您周圍有舊域名，請使用該域名。為什麼？您的域越舊越好。

關於子域的注意事項：對於Google而言，每個子域都是一個不同的網站。因此，如果您的域名是flaviocopes.com，然後您在中創建博客blog.flaviocopes.com，那麼對於Google來說，這是一個全新的網站，它將擁有與主要領域不同的排名。

我的建議是完全避免子域。

安裝雨果

要在macOS上安裝Hugo，請從終端運行

brew install hugo

這brew您的Mac上不存在該命令？檢查自製指南

對於Windows和Linux，請檢查官方安裝指南。

創建一個雨果網站

一旦安裝了Hugo，您可以通過運行以下命令創建一個Hugo網站

hugo new site myblog

我建議將其運行到www文件夾放在您的主目錄中，因為該命令將創建一個新文件夾myblog運行它的文件夾。

選擇一個主題

現在，在您可以開始之前，您需要選擇一個主題。我希望Hugo包含一個默認主題，以使事情變得簡單明了，但事實並非如此。

有很多選擇https://themes.gohugo.io。我個人的建議是從https://themes.gohugo.io/ghostwriter/稍後再進行調整。

我還建議避免git clone他們在該頁面上建議的工作流程，因為將來您肯定會調整主題，而我發現最好為內容和主題創建一個單一的存儲庫。它簡化了部署。

所以，去https://github.com/jbub/ghostwriter/archive/master.zip下載主題的當前版本。

然後將其解壓縮到themes/ghostwriter新建的Hugo網站中的文件夾：

注意有一個exampleSite文件夾中themes/ghostwriter。打開它，然後打開它content子文件夾。在那兒，您可以看到page，post和project子文件夾。

複製page和post在裡面content該站點的文件夾：

配置

樣本數據還提供了一個樣本config.toml歸檔在themes/ghostwriter/exampleSite/config.toml。這是Hugo的配置文件，它告訴Hugo某些配置細節，而無需在主題中對信息進行硬編碼。

我建議您不要復制它，因為它有太多東西，而應使用以下命令：

baseurl = "/"
title = "My blog"
theme = "ghostwriter"
[Params]
mainSections = [“post”]
intro = true
headline = “My headline”
description = “My description”
github = “https://github.com/XXX”
twitter = “https://twitter.com/XXX”
email = “[email protected]”
opengraph = true
shareTwitter = true
dateFormat = “Mon, Jan 2, 2006”
[Permalinks]
post = “/:filename/”

以後，您可以自由自定義此文件中的信息。

現在從命令行運行：

hugo serve

打開http://localhost:1313在瀏覽器中，您應該就能看到該網站！

這是網站主頁。

這裡有一個帖子列表，摘錄自content/post您網站的文件夾：

單擊第一個，即“創建新主題”：

您可以打開文件content/post/creating-a-new-theme.md更改帖子中的任何內容。

如果保存，網站將自動更新為新內容。

太棒了吧？

您可以通過創建新帖子來創建新帖子.md文件，並在其中添加任何所需的前綴。如果願意，可以使用增量數字。或使用日期。

如果某些東西看起來不像您想要的那樣，您可以打開themes/ghostwriter/layouts文件夾並對其進行調整。

“發布”模板在以下位置定義themes/ghostwriter/layouts/post/single.html：

Hugo使用Go模板。語法可能很陌生，但是Hugo網站在此方面的解釋非常出色Go模板介紹。

但是，請不要立即考慮自定義模板。

如果要調整顏色，請添加一個<style>標籤中帶有一些CSSthemes/ghostwriter/layouts/partials/header.html。

例如，將鏈接設為黑色：

<style>
.site-title a, .button-square {
    background: black;
}
a {
    color: black;
}
</style>

專注於內容。

刪除現有文件，並開始撰寫2-3篇文章。

很難完全按照自己的意願製作東西，但是重要的是內容。

而且您的網站越乾淨，對您的讀者越好。

現在讓我寫一些有關部署的知識。

將Hugo網站部署到Netlify

我想展示如何在我最喜歡的兩項服務中部署Hugo網站：Netlify和Now。

首先，我將創建一個GitHub存儲庫來託管該站點。

我打開GitHub Desktop，這是我每天使用的應用程序，它是我工作流程的一部分。這是使用Git的最簡單方法。

在“文件”菜單中，我按下了“新建存儲庫”選項：

只需拖動myblog文件夾進入應用程序。

我給了myblog名稱到存儲庫，並為存儲庫選擇正確的路徑。

該過程將自動進行第一次提交：

現在，我們可以單擊“發布存儲庫”按鈕將存儲庫推送到GitHub：

當然，您可以將存儲庫設為私有。

一旦回購在GitHub中：

我們可以轉到Netlify。

在我的Netlify儀表板上，我按下了“來自Git的新站點”按鈕：

按下GitHub，授權Netlify訪問我的私有存儲庫，然後我選擇了剛創建的存儲庫：

Netlify自動將其標識為Hugo存儲庫，並自動輸入了build命令：

單擊“部署站點”開始部署過程：

在實際站點上，我將設置一個自定義域。 Netlify可以選擇通過它們購買域名，這是一個非常非常簡單的過程。我強烈推薦它。購買域名後，該網站僅需幾分鐘即可上線。

隨機.netlify.com在這種情況下，子域已附加到站點pedantic-engelbart-500c9a.netlify.com，並自動啟用HTTPS。

因此，我們可以立即看到該站點的實時信息：

現在，如果您嘗試編輯本地版本中的內容，則只需將更改推送到GitHub，Netlify就會自動更新站點。您可以在網站的“概述”面板中看到它正在構建網站：

要了解有關Netlify的更多信息，建議您查看我的Netlify教程。

將Hugo網站部署到Zeit Now

Zeit現在被稱為威賽爾，而本教程可能已過時

您可以在Hugo博客上使用的另一個很棒的平台是Zeit Now。

註冊後，從信息中心按新項目按鈕。

首次從GitHub部署時，必須首先單擊“立即為GitHub安裝”來安裝GitHub應用程序：

這會將您帶到該應用程序的GitHub頁面，您可以在其中為所有存儲庫或僅對某些存儲庫進行授權：

回來後，單擊“來自GitHub的新項目”按鈕：

選擇項目，然後單擊“導入”：

同時，進入主目錄mysite並添加一個package.json包含以下內容的文件：

{
  "scripts": {
    "build": "hugo"
  }
}

現在，這將告訴您如何部署站點。

當您回到儀表板時，新的部署應該很快開始，您將看到該站點正在運行：

請注意，在“現在您有3個URL”中，可以使用這些URL來訪問站點：

myblog.flaviocopes.now.sh
myblog-alpha-swart.now.sh
myblog-git-master.flaviocopes.now.sh

您可以選擇自己喜歡的一種。

另外，每個部署也都有自己的URL。在這種情況下，我有myblog-h8xks5jhn.now.sh但它隨每次部署而變化。

當然，您也可以添加您的域。 Zeit提供了一項很棒的服務，可以直接從他們那裡購買您的域名，網址為https://zeit.co/domains。

如果您更喜歡使用命令行，now命令也可以讓您從那裡購買域名。

我強烈建議您檢查我的Zeit Now教程。