手把手教你通過Hugo搭建個人博客

前言:

做為一枚立志成為武林高手的程序員,怎么可以沒有屬于自己的一片園子呢。

一直想搭建一個博客,但是始終沒開始搞。近期沒事,今天必須把這個事兒搞定。

HEXO+Github 快速、簡潔且高效的博客框架
Jekyll+GitHub 將純文本轉換為靜態博客網站
FarBox The Best Blog Platform for Humans
Hugo Hugo是由Go語言實現的靜態網站生成器。簡單、易用、高效、易擴展、快速部署。

用過HEXO的部分人,現在都轉用Jekyll。
用過Jekyll的人呢,現在又轉用FarBox。
還有些用過Jekyll的兄弟們,現在轉用Hugo
FarBox是需要自己掏點腰包,對于我個屌絲來說。暫不考慮。
那對于Hugo,是我最佳選擇。

如果有兄弟想將Jekyll的文章遷移到HugoHugo可以一鍵遷移Jekyll


快速開始

使用默認的Ananke皮膚創建一個Hugo站點

在這個示例中使用macOS系統, 其它系統怎么進行快速開始,看安裝

您還需要安裝Git才能運行本教程。

第一步 導入Hugo

HomebrewmacOS的軟件包管理器,可以從brew.sh安裝。 如果您正在運行Windows等,請參閱安裝

brew install hugo

驗證您Hugo安裝成功:

hugo version

第二步 創建一個新站點

在名為quickstart的文件夾中創建一個新的Hugo站點。

quickstart站點名字(建議起名字為yourName.com)

hugo new site quickstart

第三步 添加一個皮膚

請參閱themes.gohugo.io以查看需要考慮的主題列表。 這個快速啟動使用美麗的Ananke皮膚。

cd quickstart;\
git init;\
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke;\

$ la themes/ananke #看下ananke庫

total 48
-rw-r--r--   1 hunter  staff    41B Jul 31 23:40 .git
-rw-r--r--   1 hunter  staff   331B Jul 31 23:40 .gitignore
-rwxr-xr-x   1 hunter  staff   1.0K Jul 31 23:40 LICENSE.md
-rw-r--r--   1 hunter  staff   4.0K Jul 31 23:40 README.md
drwxr-xr-x   3 hunter  staff   102B Jul 31 23:40 archetypes
drwxr-xr-x   5 hunter  staff   170B Jul 31 23:40 exampleSite
drwxr-xr-x   4 hunter  staff   136B Jul 31 23:40 images
drwxr-xr-x  10 hunter  staff   340B Jul 31 23:40 layouts
-rwxr-xr-x   1 hunter  staff   500B Jul 31 23:40 package.json
drwxr-xr-x   8 hunter  staff   272B Jul 31 23:40 src
drwxr-xr-x   4 hunter  staff   136B Jul 31 23:40 static
-rwxr-xr-x   1 hunter  staff   521B Jul 31 23:40 theme.toml
注意看:

ananke目錄下有個示例站點exampleSite。我們用人家的庫,當然得按人家的示例來操作。

在下面,第四步 裝飾你的站點 直接把示例站點中的staticcontent文件夾和config.toml文件,與自己站點中的staticcontent文件夾,和config.toml文件進行替換。

static文件夾:存放圖片
content文件夾:存文章(xxxx.md)

第四步 裝飾你的站點

cp -R /Users/hunter/HaiTeng-Wang.com/themes/ananke/exampleSite/static ./ 
cp -R /Users/hunter/HaiTeng-Wang.com/themes/ananke/exampleSite/content ./
cp /Users/hunter/HaiTeng-Wang.com/themes/ananke/exampleSite/config.toml ./

關于cp,命令這里不多說。

你可以用命令行,將ananke的示例站點exampleSite下的文件,替換成自己的站點文件。當然,如果你愿意,可以手動替換。

替換完畢后,你的站點下的staticcontent文件夾終于不是空的了。

你的配置文件config.toml可不再只有幾行命令,而是這樣

title = "Notre-Dame de Paris"
baseURL = "https://example.com"
languageCode = "en-us"
theme = "gohugo-theme-ananke"
themesDir = "../.."

MetaDataFormat = "yaml"
DefaultContentLanguage = "en"
SectionPagesMenu = "main"
Paginate = 3 # this is set low for demonstrating with dummy content. Set to a higher number
googleAnalytics = ""
enableRobotsTXT = true

[sitemap]
  changefreq = "monthly"
  priority = 0.5
  filename = "sitemap.xml"

[params]
  description = "The last theme you'll ever need. Maybe."
  facebook = ""
  twitter = "https://twitter.com/GoHugoIO"
  instagram = ""
  youtube = ""
  # choose a background color from any on this page: http://tachyons.io/docs/themes/skins/ and preface it with "bg-"
  background_color_class = "bg-black"
  featured_image = "/images/gohugo-default-sample-hero-image.jpg"

注意:
你需要刪除這行: themesDir = "../.."

你需要查看你的theme,theme = "ananke"

然后,在你的站點根目錄執行 Hugo 命令進行調試:

hugo server -D

瀏覽器里打開:http://localhost:1313

目前為止: 你的站點已經創建完畢。

關于裝飾你的站點,自己隨便改一改站點下的staticcontent文件,和config.toml配置文件看看發生了什么改變。

第五步 部署 Host on GitHub

如果你需要部署在 GitHub Pages 上。

首先在GitHub上創建一個Repository,命名為:coderzh.github.io (coderzh替換為你的github用戶名)。

然后修改config.toml

publishDir = "docs"

baseURL = "https://haiteng-wang.github.io/"

然后,在你的站點根目錄執行 Hugo 命令進行調試:

hugo

$ la
你會發現你的站點下多了個docs文件夾

-rw-r--r--@  1 hunter  staff   6.0K Aug  1 01:12 .DS_Store
drwxr-xr-x  12 hunter  staff   408B Aug  1 01:17 .git
-rw-r--r--   1 hunter  staff   108B Jul 31 23:40 .gitmodules
drwxr-xr-x   2 hunter  staff    68B Jul 31 23:38 archetypes
-rw-r--r--   1 hunter  staff   838B Aug  1 01:16 config.toml
drwxr-xr-x   8 hunter  staff   272B Jul 31 21:55 content
drwxr-xr-x   2 hunter  staff    68B Jul 31 23:38 data
drwxr-xr-x  15 hunter  staff   510B Aug  1 01:17 docs
drwxr-xr-x   2 hunter  staff    68B Jul 31 23:38 layouts
drwxr-xr-x   4 hunter  staff   136B Aug  1 01:12 static
drwxr-xr-x   4 hunter  staff   136B Jul 31 23:44 themes

然后繼續在你的站點根目錄執行git 命令,添加遠程倉庫。

git remote add origin https://github.com/coderzh/coderzh.github.io.git
git add -A
git commit -m "first commit"
git push -u origin master

然后設置你的github-pages


Go to Settings → GitHub Pages
From Source, select “master branch /docs folder”. If the option isn’t enabled, you likely do not have a docs/ folder in the root of your project.
部署成功

點擊生成的url看看博客是不是已經生成好了,注意如果沒生成好,你可以查看站點下的URL是否對應

baseURL = "https://haiteng-wang.github.io/HaiTeng-Wang.github.io-/"

若沒有對應,你需要修改你站點下的baseURL。

以下步驟以后修改站點內容,同樣的操作。

修改config.toml文件

baseURL = "https://haiteng-wang.github.io/HaiTeng-Wang.github.io-/"

然后在站點根目錄執行Hugo命令

Hugo

接下來執行git命令

git add .  
git commit -m "fix:BaseUrl"
git push 

好了,再來查看你的博客地址https://haiteng-wang.github.io是不是生成好了?


(文章語言,沒有采用中性詞語,且很多大白話。半夜兩點了實在困傻了。原諒我沒有好好整理。)

后續:

如果成功生成GitHub Pages,但是生成后是這樣的

woho! 我們沒得選擇,默認讓我在master分支上工作

那我們就直這樣嘍

$ cd docs
$ git init
$ git remote add origin https://github.com/coderzh/coderzh.github.io.git
$ git add -A
$ git commit -m "first commit"
$ git push -u origin master

如果,您發現文章中,有待梳理,寫的不清除的地方,或有更好的補充建議。歡迎評論我,或聯系我。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,333評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,491評論 3 416
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,263評論 0 374
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,946評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,708評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,186評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,255評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,409評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,939評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,774評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,976評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,518評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,209評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,641評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,872評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,650評論 3 391
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,958評論 2 373

推薦閱讀更多精彩內容