搭建自己的博客

前言:

做為一個(gè)程序員揖膜,怎么可以沒有屬于自己的一個(gè)博客呢壹粟,更何況博客是自己的加分項(xiàng)。

一直想搭建一個(gè)博客趁仙,但是始終沒開始搞雀费。近期沒事,今天必須把這個(gè)事兒搞定忿峻。

HEXO+Github 快速、簡潔且高效的博客框架
Jekyll+GitHub 將純文本轉(zhuǎn)換為靜態(tài)博客網(wǎng)站
FarBox The Best Blog Platform for Humans
Hugo Hugo是由Go語言實(shí)現(xiàn)的靜態(tài)網(wǎng)站生成器垄惧。簡單绰寞、易用、高效觉壶、易擴(kuò)展件缸、快速部署。

用過HEXO的部分人旷坦,現(xiàn)在都轉(zhuǎn)用Jekyll佑稠。
用過Jekyll的人呢旗芬,現(xiàn)在又轉(zhuǎn)用FarBox。
還有些用過Jekyll的兄弟們幔嫂,現(xiàn)在轉(zhuǎn)用Hugo
FarBox是需要自己掏點(diǎn)腰包誊薄,對(duì)于我個(gè)屌絲來說呢蔫。暫不考慮。
那對(duì)于Hugo片吊,是我最佳選擇。

如果有兄弟想將Jekyll的文章遷移到Hugo俏脊,Hugo可以一鍵遷移Jekyll爷贫。


快速開始

使用hello-friend-ng皮膚創(chuàng)建一個(gè)Hugo站點(diǎn)

在這個(gè)示例中使用macOS系統(tǒng), 其它系統(tǒng)怎么進(jìn)行快速開始补憾,看安裝

您還需要安裝Git才能運(yùn)行本教程卷员。

第一步 導(dǎo)入Hugo

Homebrew子刮,macOS的軟件包管理器,可以從brew.sh安裝挺峡。 如果您正在運(yùn)行Windows等橱赠,請(qǐng)參閱安裝

brew install hugo

驗(yàn)證您Hugo安裝成功:

hugo version

第二步 創(chuàng)建一個(gè)新站點(diǎn)

在名為quickstart的文件夾中創(chuàng)建一個(gè)新的Hugo站點(diǎn)。

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

hugo new site quickstart

第三步 添加一個(gè)皮膚

請(qǐng)參閱themes.gohugo.io以查看需要考慮的主題列表宰啦。 這個(gè)快速啟動(dòng)使用簡潔高逼格的hello-friend-ng皮膚饼拍。

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

$ la themes/hello-friend-ng #看下hello-friend-ng庫

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

注意看:

hello-friend-ng目錄下有個(gè)示例站點(diǎn)exampleSite师抄。我們用人家的庫,當(dāng)然得按人家的示例來操作辆布。

在下面茶鉴,第四步 裝飾你的站點(diǎn) 直接把示例站點(diǎn)中的staticcontent文件夾和config.toml文件惭蹂,與自己站點(diǎn)中的static围肥,content文件夾,和config.toml文件進(jìn)行替換置尔。

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

第四步 裝飾你的站點(diǎn)

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

關(guān)于cp,命令這里不多說榜轿。

你可以用命令行,將hello-friend-ng的示例站點(diǎn)exampleSite下的文件甸私,替換成自己的站點(diǎn)文件飞傀。當(dāng)然,如果你愿意弃鸦,可以手動(dòng)替換幢痘。

替換完畢后,你的站點(diǎn)下的static购岗、content文件夾終于不是空的了门粪。

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

title = "Notre-Dame de Paris"
baseURL = "https://example.com"
languageCode = "en-us"
theme = "gohugo-theme-hello-friend-ng"
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"

注意:
你需要?jiǎng)h除這行: themesDir = "../.."

你需要查看你的theme,theme = "hello-friend-ng"

然后,在你的站點(diǎn)根目錄執(zhí)行 Hugo 命令進(jìn)行調(diào)試:

hugo server -D

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

目前為止: 你的站點(diǎn)已經(jīng)創(chuàng)建完畢措近。

關(guān)于裝飾你的站點(diǎn)瞭郑,自己隨便改一改站點(diǎn)下的static鸭你、content文件,和config.toml配置文件看看發(fā)生了什么改變。

第五步 部署 Host on GitHub

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

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

然后修改config.toml

publishDir = "docs"

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

然后焰盗,在你的站點(diǎn)根目錄執(zhí)行 Hugo 命令進(jìn)行調(diào)試:

hugo

$ la
你會(huì)發(fā)現(xiàn)你的站點(diǎn)下多了個(gè)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

然后繼續(xù)在你的站點(diǎn)根目錄執(zhí)行g(shù)it 命令熬拒,添加遠(yuǎn)程倉庫。

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

然后設(shè)置你的github-pages

image
image
image

點(diǎn)擊生成的url看看博客是不是已經(jīng)生成好了,注意如果沒生成好,你可以查看站點(diǎn)下的URL是否對(duì)應(yīng)

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

若沒有對(duì)應(yīng)徐裸,你需要修改你站點(diǎn)下的baseURL瓣颅。

以下步驟以后修改站點(diǎn)內(nèi)容,同樣的操作檬姥。

修改config.toml文件

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

然后在站點(diǎn)根目錄執(zhí)行Hugo命令

Hugo

接下來執(zhí)行g(shù)it命令

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

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


(文章語言秉犹,沒有采用中性詞語稚晚,且很多大白話。半夜兩點(diǎn)了實(shí)在困傻了鸳劳。原諒我沒有好好整理也搓。)

后續(xù):

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

image

那我們就直這樣嘍

$ 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


如果,您發(fā)現(xiàn)文章中既忆,有待梳理,寫的不清除的地方电媳,或有更好的補(bǔ)充建議庆亡。歡迎評(píng)論我,或聯(lián)系我拼缝。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末彰亥,一起剝皮案震驚了整個(gè)濱河市任斋,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌废酷,老刑警劉巖澈蟆,帶你破解...
    沈念sama閱讀 212,454評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異睹簇,居然都是意外死亡寥闪,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來柜某,“玉大人敛纲,你說我怎么就攤上這事『舶恚” “怎么了?”我有些...
    開封第一講書人閱讀 157,921評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵谐檀,是天一觀的道長桐猬。 經(jīng)常有香客問我刽肠,道長,這世上最難降的妖魔是什么惫撰? 我笑而不...
    開封第一講書人閱讀 56,648評(píng)論 1 284
  • 正文 為了忘掉前任躺涝,我火速辦了婚禮,結(jié)果婚禮上夯膀,老公的妹妹穿的比我還像新娘惶傻。我一直安慰自己,他們只是感情好涂佃,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,770評(píng)論 6 386
  • 文/花漫 我一把揭開白布辜荠。 她就那樣靜靜地躺著抓狭,像睡著了一般。 火紅的嫁衣襯著肌膚如雪午笛。 梳的紋絲不亂的頭發(fā)上苗桂,一...
    開封第一講書人閱讀 49,950評(píng)論 1 291
  • 那天煤伟,我揣著相機(jī)與錄音木缝,去河邊找鬼围辙。 笑死,一個(gè)胖子當(dāng)著我的面吹牛矫俺,可吹牛的內(nèi)容都是我干的桥胞。 我是一名探鬼主播,決...
    沈念sama閱讀 39,090評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼催烘,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼伊群!你這毒婦竟也來了策精?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,817評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤丸卷,失蹤者是張志新(化名)和其女友劉穎询刹,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體沐兰,經(jīng)...
    沈念sama閱讀 44,275評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蔽挠,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,592評(píng)論 2 327
  • 正文 我和宋清朗相戀三年澳淑,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片春寿。...
    茶點(diǎn)故事閱讀 38,724評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡忽孽,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情兄一,我是刑警寧澤厘线,帶...
    沈念sama閱讀 34,409評(píng)論 4 333
  • 正文 年R本政府宣布,位于F島的核電站出革,受9級(jí)特大地震影響造壮,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜骂束,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,052評(píng)論 3 316
  • 文/蒙蒙 一耳璧、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧展箱,春花似錦旨枯、人聲如沸混驰。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽栖榨。三九已至昆汹,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間婴栽,已是汗流浹背满粗。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評(píng)論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留愚争,地道東北人映皆。 一個(gè)月前我還...
    沈念sama閱讀 46,503評(píng)論 2 361
  • 正文 我出身青樓血公,卻偏偏與公主長得像赎懦,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子荡陷,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,627評(píng)論 2 350

推薦閱讀更多精彩內(nèi)容