前言:
做為一個(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)中的static
、content
文件夾和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
點(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傍妒,但是生成后是這樣的
那我們就直這樣嘍
$ 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)系我拼缝。