Mac下使用Hugo+Github Pages搭建個人博客

Hugo

Hugo 是由 Go 語言實現(xiàn)的靜態(tài)網(wǎng)站生成器涮拗。簡單饶辙、易用胡本、高效、易擴展畸悬、快速部署侧甫。

建立此博客受到jdhao的啟發(fā).

安裝

brew install hugo  

# 檢查安裝成功  
hugo version  

Hugo Static Site Generator v0.58.3/extended darwin/amd64 BuildDate: unknown  

生成 site 目錄

hugo new site blog  
cd blog  
git init  

# 目錄結(jié)構(gòu)  
tree blog  

config.toml 是配置文件,在里面可以定義博客地址蹋宦、構(gòu)建配置披粟、標題、導(dǎo)航欄等等冷冗。
themes 是主題目錄守屉,可以去 themes.gohugo.io 下載喜歡的主題。
content 是博客文章的目錄蒿辙。

安裝主題

themes.gohugo.io 選擇喜歡的主題拇泛,下載到 themes 目錄中,然后在 config.toml 中配置 theme = "even" 即可思灌。

even主題介紹
hugo-theme-even: hexo-theme-even的移植版本.

下載

可以直接 clone 到 themes 目錄下俺叭,優(yōu)點是如果對主題有調(diào)整需求可以同時提交到 git 控制中。

git clone https://github.com/olOwOlo/hugo-theme-even themes/even  

也可以添加到 git 的 submodule 中泰偿,優(yōu)點是后面講到用 travis 自動部署時比較方便熄守。如果需要對主題做更改,最好 fork 主題再做改動耗跛。

git submodule add https://github.com/olOwOlo/hugo-theme-even.git themes/even  

重新 build

如果需要調(diào)整更改主題裕照,需要在 themes/even 目錄下重新 build

cd themes/even && npm i && npm start  

第一篇文章

hugo new post/my-first-post.md  

文章頂部可以設(shè)置一些 meta 信息,例如:

---  
title: "My First Post"  
date: 2017-12-14T11:18:15+08:00  
weight: 70  
markup: mmark  
draft: false  
keywords: ["hugo"]  
description: "第一篇文章"  
tags: ["hugo", "pages"]  
categories: ["pages"]  
author: ""  
---  
這里是文章內(nèi)容  

配置項目

覆蓋config.toml

拷貝themes/even/exampleSite下的config.toml覆蓋根目錄下的config.toml

config.toml一些設(shè)置項目

logoTitle = "你的首頁標題名"  

# 歸檔调塌、標簽晋南、分類每頁顯示的文章數(shù)目,建議修改為一個較大的值  
archivePaginate = 5  

# 是否在歸檔頁顯示文章的總數(shù)  
showArchiveCount = true  

# 是否使用mathjax(數(shù)學公式)  
mathjax = true           # see https://www.mathjax.org/   
mathjaxEnableSingleDollar = true   # 是否使用 $...$ 即可進行inline latex渲染  
mathjaxEnableAutoNumber = false   # 是否使用公式自動編號  

# 鏈接到markdown原始文件(僅當允許hugo生成markdown文件時有效)  
linkToMarkDown = false    # Only effective when hugo will output .md files.  

# 啟用公共CDN羔砾,需自行定義  
[params.publicCDN]        # load these files from public cdn          

# 社交鏈接                
[params.social]                                         

預(yù)覽

hugo server -D  
#...  
#Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)  

hugo 怎么插入本地 image

在site 的目錄下的 static 下就是存儲的靜態(tài)文件负间,我們創(chuàng)建 media 目錄存放圖片等媒體文件紊扬,引用的話,直接「/media/xxx.png」 唉擂。

GitHub 配置

在github上新建一個項目,項目的名稱必須是(你的用戶名.github.io)

設(shè)置Git的user name和email

git config --global user.name "imymirror"  
git config --global user.email "2633610394@qq.com"  

生成密鑰

ssh-keygen -t rsa -f ~/.ssh/id_rsa_blog  -C "2633610394@qq.com"  

將ssh公鑰內(nèi)容拷貝到Github

將ssh公鑰內(nèi)容拷貝到Github->Setting->Deploy keys

cat ~/.ssh/id_rsa_blog.pub  

Your identification has been saved in id_rsa_blog.  
Your public key has been saved in id_rsa_blog.pub.  

生成 Github Access Token

至少要有 public_repo 的權(quán)限檀葛。

配置 Travis[1]

Travis CI 注冊關(guān)聯(lián) Github 的賬號玩祟,然后同步賬戶并激活 blog repo。

接著進入 blog 的設(shè)置頁面屿聋,選擇自動部署觸發(fā)條件空扎,并把剛剛生成的 GitHub Access Token 添加到環(huán)境變量里。

在 blog repo 中添加 .travis.yml

sudo: false  
language: go  
git:  
    depth: 1  
install: go get -v github.com/gohugoio/hugo  
script:  
    ‐ hugo  
deploy:  
    provider: pages  
    skip_cleanup: true  
    github_token: $GITHUB_TOKEN  
    on:  
        branch: master  
    local_dir: public  
    repo: <username>/<username>.github.io  
    fqdn: <custom-domain-if-needed>  
    target_branch: master  
    email: <github-email>  
    name: <github-username>  

部分參數(shù)解釋:

  • 默認情況下润讥,travis 會自動下載 git submodules
  • github_token: $GITHUB_TOKEN 要和 travis 設(shè)置的環(huán)境變量名一致
  • fqdn: 如果需要設(shè)置自定義域名转锈,可以在這里設(shè)置,travis 會自動生成 CNAME 文件提交楚殿,同時要設(shè)置 config.toml 中的相應(yīng)的 baseURL

最后撮慨,可以手動去 travis 觸發(fā)一次 build 檢查效果。如果設(shè)置了提交觸發(fā) build脆粥,之后每次 blog repo 有提交都會自動 build砌溺,不再需要關(guān)心 travis 狀態(tài)。

怎么找到自己的Github ID

Where can I find the GitHub ID in my account?

https://api.github.com/users/your_github_user_name  

部署到Github個人頁面[2]

在Github創(chuàng)建一個倉庫变隔,例如名字叫blog规伐,可以是私有的,這個倉庫用來存放網(wǎng)站內(nèi)容和源文件.

再創(chuàng)建一個名稱為<username>.github.io的倉庫匣缘,username為GitHub用戶名猖闪,這個倉庫用于存放最終發(fā)布的網(wǎng)站內(nèi)容

進入本地網(wǎng)站目錄

cd <YOUR PROJECT>  

關(guān)聯(lián)遠程blog倉庫

git remote add origin git@github.com:zhigang26/blog.git  

確保本地網(wǎng)站正常,hugo server運行后在本地打開localhost:1313檢查網(wǎng)站效果和內(nèi)容肌厨,注意hugo server這個命令不會構(gòu)建草稿培慌,所以如果有草稿需要發(fā)布,將文章中的draft設(shè)置為false

關(guān)閉本地Hugo服務(wù)器Ctrl+C柑爸,然后刪除本地網(wǎng)站目錄下的public文件夾

rm -rf ./public  

創(chuàng)建public子模塊检柬,注意下面是一行命令,不是兩行

git submodule add -b master git@github.com:<USERNAME>/<USERNAME>.github.io.git public  

git submodule add -b master git@github.com:zhigang26/zhigang26.github.io.git public  

然后就可以執(zhí)行hugo命令竖配,此命令會自動將網(wǎng)站靜態(tài)內(nèi)容生成到public文件夾何址,然后提交到遠程blog倉庫

hugo -t even  

cd public  
git status  
git add .  
git commit -m "first commit"  
git push -u origin master  

自動部署腳本

將以上步驟添加到自動執(zhí)行腳本中deploy.sh,腳本commit提交信息會使用執(zhí)行時的時間进胯,將腳本放到網(wǎng)站項目路徑下用爪,寫完博客后,雙擊運行即可自動部署發(fā)布

#!/bin/bash  

echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"  

# Build the project.  
hugo -t even # if using a theme, replace with `hugo -t <YOURTHEME>`  

# Go To Public folder  
cd public  
# Add changes to git.  
git add .  

# Commit changes.  
msg="rebuilding site `date`"  
if [ $# -eq 1 ]  
  then msg="$1"  
fi  
git commit -m "$msg"  

# Push source and build repos.  
git push origin master  

# Come Back up to the Project Root  
cd ..  

Markdown文件之間如何檢查引用

比如在my-first-post.md引用使用Hugo搭建個人博客.md,引用方式可以嘗試:

image.png

Nodes


  1. 使用 Hugo 搭建博客 ?

  2. Hugo部署到Github ?

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末胁镐,一起剝皮案震驚了整個濱河市偎血,隨后出現(xiàn)的幾起案子诸衔,更是在濱河造成了極大的恐慌,老刑警劉巖颇玷,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件笨农,死亡現(xiàn)場離奇詭異,居然都是意外死亡帖渠,警方通過查閱死者的電腦和手機谒亦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來空郊,“玉大人份招,你說我怎么就攤上這事∧酰” “怎么了锁摔?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長哼审。 經(jīng)常有香客問我谐腰,道長,這世上最難降的妖魔是什么涩盾? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任怔蚌,我火速辦了婚禮,結(jié)果婚禮上旁赊,老公的妹妹穿的比我還像新娘桦踊。我一直安慰自己,他們只是感情好终畅,可當我...
    茶點故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布籍胯。 她就那樣靜靜地躺著,像睡著了一般离福。 火紅的嫁衣襯著肌膚如雪杖狼。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天妖爷,我揣著相機與錄音蝶涩,去河邊找鬼。 笑死絮识,一個胖子當著我的面吹牛绿聘,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播次舌,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼熄攘,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了彼念?” 一聲冷哼從身側(cè)響起挪圾,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤浅萧,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后哲思,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體洼畅,經(jīng)...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年棚赔,在試婚紗的時候發(fā)現(xiàn)自己被綠了帝簇。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,646評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡忆嗜,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出崎岂,到底是詐尸還是另有隱情捆毫,我是刑警寧澤,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布冲甘,位于F島的核電站绩卤,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏江醇。R本人自食惡果不足惜濒憋,卻給世界環(huán)境...
    茶點故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望陶夜。 院中可真熱鬧凛驮,春花似錦、人聲如沸条辟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽羽嫡。三九已至本姥,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間杭棵,已是汗流浹背婚惫。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留魂爪,地道東北人先舷。 一個月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像滓侍,于是被迫代替她去往敵國和親密浑。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,514評論 2 348

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