如何使用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子文件夾。在那兒,您可以看到pagepostproject子文件夾。

複製pagepost在裡面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教程


更多實驗教程: