利用 GitHub 從零開始搭建一個博客
“
閱讀本文大概需要 10?分鐘。
趁著周末,搭建了一下 NightTeam 的官方博客和官方主頁,耗時數(shù)個小時,兩個站點(diǎn)終于完工了。這里寫一篇文章順手記錄了下來。不過這篇原創(chuàng)我發(fā)在了 NightTeam 上面了,這邊我就作為轉(zhuǎn)載了。
由于 NightTeam 的域名是 nightteam.cn,所以這里官方博客使用了二級域名 blog.nightteam.cn,官方主頁使用了根域名 nightteam.cn,現(xiàn)在兩個站點(diǎn)都已經(jīng)穩(wěn)定運(yùn)行在 GitHub Pages 上面了,大家如果感興趣可以去看一下。
?NightTeam HomePage:https://nightteam.cn/?NightTeam Blog: https://blog.nightteam.cn/
下面是兩個站點(diǎn)的預(yù)覽圖:

這里的主頁就是用一個基本的靜態(tài)頁面搭建了,沒有什么技術(shù)含量。博客相對復(fù)雜一點(diǎn),使用了 Hexo 框架,采用了 Next 主題,在搭建的過程中我就順手把搭建的流程大致記錄下來了,在這里擴(kuò)充一下形成一篇記錄,畢竟好記性不如爛筆頭。
于是,這篇《利用 GitHub 從零開始搭建一個博客》的文章就誕生了。
準(zhǔn)備條件
在這里先跟大家說一些準(zhǔn)備條件,有些同學(xué)可能一聽到搭建博客就望而卻步。弄個博客網(wǎng)站,不得有臺服務(wù)器嗎?不得搞數(shù)據(jù)庫嗎?不得注冊域名嗎?沒事,如果都沒有,那照樣是能搭建一個博客的。
GitHub 是個好東西啊,它提供了 GitHub Pages 幫助我們來架設(shè)一個靜態(tài)網(wǎng)站,這就解決了服務(wù)器的問題。
Hexo 這個博客框架沒有那么重量級,它是 MarkDown 直接寫文章的,然后 Hexo 可以直接將文章編譯成靜態(tài)網(wǎng)頁文件并發(fā)布,所以這樣文章的內(nèi)容、標(biāo)題、標(biāo)簽等信息就沒必要存數(shù)據(jù)庫里面了,是直接純靜態(tài)頁面了,這就解決了數(shù)據(jù)庫的問題。
GitHub Pages 允許每個賬戶創(chuàng)建一個名為 {username}.github.io 的倉庫,另外它還會自動為這個倉庫分配一個 github.io 的二級域名,這就解決了域名的問題,當(dāng)然如果想要自定義域名的話,也可以支持。
所以說,基本上,先注冊個 GitHub 賬號就能搞了,下面我們來正式開始吧。
新建項(xiàng)目
首先在 GitHub 新建一個倉庫(Repository),名稱為 {username}.github.io,注意這個名比較特殊,必須要是 github.io 為后綴結(jié)尾的。比如 NightTeam 的 GitHub 用戶名就叫 NightTeam,那我就新建一個 nightteam.github.io,新建完成之后就可以進(jìn)行后續(xù)操作了。
另外如果 GitHub 沒有配置 SSH 連接的建議配置一下,這樣后面在部署博客的時候會更方便。
安裝環(huán)境
安裝 Node.js
首先在自己的電腦上安裝 Node.js,下載地址:https://nodejs.org/zh-cn/download/,可以安裝 Stable 版本。
安裝完畢之后,確保環(huán)境變量配置好,能正常使用?npm?命令。
安裝 Hexo
接下來就需要安裝 Hexo 了,這是一個博客框架,Hexo 官方還提供了一個命令行工具,用于快速創(chuàng)建項(xiàng)目、頁面、編譯、部署 Hexo 博客,所以在這之前我們需要先安裝 Hexo 的命令行工具。
命令如下:
npm install -g hexo-cli安裝完畢之后,確保環(huán)境變量配置好,能正常使用?hexo?命令。
初始化項(xiàng)目
接下來我們使用 Hexo 的命令行創(chuàng)建一個項(xiàng)目,并將其在本地跑起來,整體跑通看看。
首先使用如下命令創(chuàng)建項(xiàng)目:
hexo init {name}這里的 name 就是項(xiàng)目名,我這里要創(chuàng)建 NightTeam 的博客,我就把項(xiàng)目取名為 nightteam 了,用了純小寫,命令如下:
hexo init nightteam這樣 nightteam 文件夾下就會出現(xiàn) Hexo 的初始化文件,包括 themes、scaffolds、source 等文件夾,這些內(nèi)容暫且先不用管是做什么的,我們先知道有什么,然后一步步走下去看看都發(fā)生了什么變化。
接下來我們首先進(jìn)入新生成的文件夾里面,然后調(diào)用 Hexo 的 generate 命令,將 Hexo 編譯生成 HTML 代碼,命令如下:
hexo generate可以看到輸出結(jié)果里面包含了 js、css、font 等內(nèi)容,并發(fā)現(xiàn)他們都處在了項(xiàng)目根目錄下的 public 文件夾下面了。
然后我們利用 Hexo 提供的 serve 命令把博客在本地運(yùn)行起來,命令如下:
hexo serve運(yùn)行之后命令行輸出如下:
INFO Start processingINFO Hexois running at http://localhost:4000 . Press Ctrl+C to stop.
它告訴我們在本地 4000 端口上就可以查看博客站點(diǎn)了,如圖所示:

這樣一個博客的架子就出來了,我們只用了三個命令就完成了。
部署
接下來我們來將這個初始化的博客進(jìn)行一下部署,放到 GitHub Pages 上面驗(yàn)證一下其可用性。成功之后我們可以再進(jìn)行后續(xù)的修改,比如修改主題、修改頁面配置等等。
那么怎么把這個頁面部署到 GitHub Pages 上面呢,其實(shí) Hexo 已經(jīng)給我們提供一個命令,利用它我們可以直接將博客一鍵部署,不需要手動去配置服務(wù)器或進(jìn)行其他的各項(xiàng)配置。
部署命令如下:
hexo deploy在部署之前,我們需要先知道博客的部署地址,它需要對應(yīng) GitHub 的一個 Repository 的地址,這個信息需要我們來配置一下。
打開根目錄下的 _config.yml 文件,找到 Deployment 這個地方,把剛才新建的 Repository 的地址貼過來,然后指定分支為 master 分支,最終修改為如下內(nèi)容:
# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy:type: gitrepo: {git repo ssh address}branch: master
我的就修改為如下內(nèi)容:
# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy:type: gitrepo: [email protected]:NightTeam/nightteam.github.io.gitbranch: master
另外我們還需要額外安裝一個支持 Git 的部署插件,名字叫做 hexo-deployer-git,有了它我們才可以順利將其部署到 GitHub 上面,如果不安裝的話,在執(zhí)行部署命令時會報如下錯誤:
Deployernot found: git好,那就讓我們安裝下這個插件,在項(xiàng)目目錄下執(zhí)行安裝命令如下:
npm install hexo-deployer-git --save安裝成功之后,執(zhí)行部署命令:
hexo deploy運(yùn)行結(jié)果類似如下:
INFO Deploying: gitINFO Clearing.deploy_git folder...INFO Copying files frompublic folder...INFO Copying files from extend dirs...On branch masternothing to commit, working directory cleanCounting objects:46,done.Delta compression using up to 8 threads.Compressing objects:100%(36/36),done.Writing objects:100%(46/46),507.66KiB|0 bytes/s,done.Total46(delta 3), reused 0(delta 0)remote:Resolving deltas:100%(3/3),done.To git@github.com:NightTeam/nightteam.github.io.git*[new branch] HEAD -> masterBranch master set up to track remote branch master from git@github.com:NightTeam/nightteam.github.io.git.INFO Deploydone: git
如果出現(xiàn)類似上面的內(nèi)容,就證明我們的博客已經(jīng)成功部署到 GitHub Pages 上面了,這時候我們訪問一下 GitHub Repository 同名的鏈接,比如我的 NightTeam 博客的 Repository 名稱取的是 nightteam.github.io,那我就訪問 http://nightteam.github.io,這時候我們就可以看到跟本地一模一樣的博客內(nèi)容了。

這時候我們?nèi)?GitHub 上面看看 Hexo 上傳了什么內(nèi)容,打開之后可以看到 master 分支有了這樣的內(nèi)容:

仔細(xì)看看,這實(shí)際上是博客文件夾下面的 public 文件夾下的所有內(nèi)容,Hexo 把編譯之后的靜態(tài)頁面內(nèi)容上傳到 GitHub 的 master 分支上面去了。
這時候可能就有人有疑問了,那我博客的源碼也想放到 GitHub 上面怎么辦呢?其實(shí)很簡單,新建一個其他的分支就好了,比如我這邊就新建了一個 source 分支,代表博客源碼的意思。
具體的添加過程就很簡單了,參加如下命令:
git initgit checkout -b sourcegit add -Agit commit -m "init blog"git remote add origin git@github.com:{username}/{username}.github.io.gitgit push origin source
成功之后,可以到 GitHub 上再切換下默認(rèn)分支,比如我就把默認(rèn)的分支設(shè)置為了 source,當(dāng)然不換也可以。
配置站點(diǎn)信息
完成如上內(nèi)容之后,實(shí)際上我們只完成了博客搭建的一小步,因?yàn)槲覀儍H僅是把初始化的頁面部署成功了,博客里面還沒有設(shè)置任何有效的信息。下面就讓我們來進(jìn)行一下博客的基本配置,另外換一個好看的主題,配置一些其他的內(nèi)容,讓博客真正變成屬于我們自己的博客吧。
下面我就以自己的站點(diǎn) NightTeam 為例,修改一些基本的配置,比如站點(diǎn)名、站點(diǎn)描述等等。
修改根目錄下的 _config.yml 文件,找到 Site 區(qū)域,這里面可以配置站點(diǎn)標(biāo)題 title、副標(biāo)題 subtitle 等內(nèi)容、關(guān)鍵字 keywords 等內(nèi)容,比如我的就修改為如下內(nèi)容:
# Sitetitle: NightTeamsubtitle: 一個專注技術(shù)的組織description: 涉獵的主要編程語言為 Python、Rust、C++、Go,領(lǐng)域涵蓋爬蟲、深度學(xué)習(xí)、服務(wù)研發(fā)和對象存儲等。keywords: "Python, Rust, C++, Go, 爬蟲, 深度學(xué)習(xí), 服務(wù)研發(fā), 對象存儲"author: NightTeam
這里大家可以參照格式把內(nèi)容改成自己的。
另外還可以設(shè)置一下語言,如果要設(shè)置為漢語的話可以將 language 的字段設(shè)置為 zh-CN,修改如下:
language: zh-CN這樣就完成了站點(diǎn)基本信息的配置,完成之后可以看到一些基本信息就修改過來了,頁面效果如下:

修改主題
目前來看,整個頁面的樣式個人感覺并不是那么好看,想換一個風(fēng)格,這就涉及到主題的配置了。目前 Hexo 里面應(yīng)用最多的主題基本就是 Next 主題了,個人感覺這個主題還是挺好看的,另外它支持的插件和功能也極為豐富,配置了這個主題,我們的博客可以支持更多的擴(kuò)展功能,比如閱覽進(jìn)度條、中英文空格排版、圖片懶加載等等。
那么首先就讓我們來安裝下 Next 這個主題吧,目前 Next 主題已經(jīng)更新到 7.x 版本了,我們可以直接到 Next 主題的 GitHub Repository 上把這個主題下載下來。
主題的 GitHub 地址是:https://github.com/theme-next/hexo-theme-next,我們可以直接把 master 分支 Clone 下來。
首先命令行進(jìn)入到項(xiàng)目的根目錄,執(zhí)行如下命令即可:
git clone https://github.com/theme-next/hexo-theme-next themes/next執(zhí)行完畢之后 Next 主題的源碼就會出現(xiàn)在項(xiàng)目的 themes/next 文件夾下。
然后我們需要修改下博客所用的主題名稱,修改項(xiàng)目根目錄下的 _config.yml 文件,找到 theme 字段,修改為 next 即可,修改如下:
theme:next然后本地重新開啟服務(wù),訪問刷新下頁面,就可以看到 next 主題就切換成功了,預(yù)覽效果如下:

主題配置
現(xiàn)在我們已經(jīng)成功切換到 next 主題上面了,接下來我們就對主題進(jìn)行進(jìn)一步地詳細(xì)配置吧,比如修改樣式、增加其他各項(xiàng)功能的支持,下面逐項(xiàng)道來。
Next 主題內(nèi)部也提供了一個配置文件,名字同樣叫做 _config.yml,只不過位置不一樣,它在 themes/next 文件夾下,Next 主題里面所有的功能都可以通過這個配置文件來控制,下文所述的內(nèi)容都是修改的 themes/next/_config.yml 文件。
樣式
Next 主題還提供了多種樣式,風(fēng)格都是類似黑白的搭配,但整個布局位置不太一樣,通過修改配置文件的 scheme 字段即可,我選了 Pisces 樣式,修改 _config.yml (注意是 themes/next/_config.yml 文件)如下:
scheme:Pisces刷新頁面之后就會變成這種樣式,如圖所示:

另外還有幾個可選項(xiàng),比如:
# scheme: Muse#scheme: Mistscheme: Pisces#scheme: Gemini
大家可以自行根據(jù)喜好選擇。
favicon
favicon 就是站點(diǎn)標(biāo)簽欄的小圖標(biāo),默認(rèn)是用的 Hexo 的小圖標(biāo),如果我們有站點(diǎn) Logo 的圖片的話,我們可以自己定制小圖標(biāo)。
但這并不意味著我們需要自己用 PS 自己來設(shè)計(jì),已經(jīng)有一個網(wǎng)站可以直接將圖片轉(zhuǎn)化為站點(diǎn)小圖標(biāo),站點(diǎn)鏈接為:https://realfavicongenerator.net[1],到這里上傳一張圖,便可以直接打包下載各種尺寸和適配不同設(shè)備的小圖標(biāo)。
圖標(biāo)下載下來之后把它放在 themes/next/source/images 目錄下面。
然后在配置文件里面找到 favicon 配置項(xiàng),把一些相關(guān)路徑配置進(jìn)去即可,示例如下:
favicon:small:/images/favicon-16x16.pngmedium:/images/favicon-32x32.pngapple_touch_icon:/images/apple-touch-icon.pngsafari_pinned_tab:/images/safari-pinned-tab.svg
配置完成之后刷新頁面,整個頁面的標(biāo)簽圖標(biāo)就被更新了。
avatar
avatar 這個就類似站點(diǎn)的頭像,如果設(shè)置了這個,會在站點(diǎn)的作者信息旁邊額外顯示一個頭像,比如我這邊有一張 avatar.png 圖片:

將其放置到 themes/next/source/images/avatar.png 路徑,然后在主題 _config.yml 文件下編輯 avatar 的配置,修改為正確的路徑即可。
# Sidebar Avataravatar:# In theme directory (source/images): /images/avatar.gif# In site directory (source/uploads): /uploads/avatar.gif# You can also use other linking images.url: /images/avatar.png# If true, the avatar would be dispalyed in circle.rounded: true# If true, the avatar would be rotated with the cursor.rotated: true
這里有 rounded 選項(xiàng)是是否顯示圓形,rotated 是是否帶有旋轉(zhuǎn)效果,大家可以根據(jù)喜好選擇是否開啟。
效果如下:

配置完成之后就會顯示頭像。
rss
博客一般是需要 RSS 訂閱的,如果要開啟 RSS 訂閱,這里需要安裝一個插件,叫做 hexo-generator-feed,安裝完成之后,站點(diǎn)會自動生成 RSS Feed 文件,安裝命令如下:
npm install hexo-generator-feed --save在項(xiàng)目根目錄下運(yùn)行這個命令,安裝完成之后不需要其他的配置,以后每次編譯生成站點(diǎn)的時候就會自動生成 RSS Feed 文件了。
code
作為程序猿,代碼塊的顯示還是需要很講究的,默認(rèn)的代碼塊我個人不是特別喜歡,因此我把代碼的顏色修改為黑色,并把復(fù)制按鈕的樣式修改為類似 Mac 的樣式,修改 _config.yml 文件的 codeblock 區(qū)塊如下:
codeblock:# Code Highlight theme# Available values: normal | night | night eighties | night blue | night bright# See: https://github.com/chriskempson/tomorrow-themehighlight_theme: night bright# Add copy button on codeblockcopy_button:enable: true# Show text copy result.show_result: true# Available values: default | flat | macstyle: mac
修改前的代碼樣式:

修改后的代碼樣式:

嗯,個人覺得整體看起來逼格高了不少。
top
我們在瀏覽網(wǎng)頁的時候,如果已經(jīng)看完了想快速返回到網(wǎng)站的上端,一般都是有一個按鈕來輔助的,這里也支持它的配置,修改 _config.yml 的 back2top 字段即可,我的設(shè)置如下:
back2top:enable:true# Back to top in sidebar.sidebar: false# Scroll percent label in b2t button.scrollpercent: true
enable 默認(rèn)為 true,即默認(rèn)顯示。sidebar 如果設(shè)置為 true,按鈕會出現(xiàn)在側(cè)欄下方,個人覺得并不是很好看,就取消了,scrollpercent 就是顯示閱讀百分比,個人覺得還不錯,就將其設(shè)置為 true。
具體的效果大家可以設(shè)置后根據(jù)喜好選擇。
reading_process
reading_process,閱讀進(jìn)度。大家可能注意到有些站點(diǎn)的最上側(cè)會出現(xiàn)一個細(xì)細(xì)的進(jìn)度條,代表頁面加載進(jìn)度和閱讀進(jìn)度,如果大家想設(shè)置的話也可以試試,我將其打開了,修改 _config.yml 如下:
reading_progress:enable:true# Available values: top | bottomposition: topcolor: "#222"height: 2px
設(shè)置之后顯示效果如下:

bookmark
書簽,可以根據(jù)閱讀歷史記錄,在下次打開頁面的時候快速幫助我們定位到上次的位置,大家可以根據(jù)喜好開啟和關(guān)閉,我的配置如下:
bookmark:enable:false# Customize the color of the bookmark.color: "#222"# If auto, save the reading progress when closing the page or clicking the bookmark-icon.# If manual, only save it by clicking the bookmark-icon.save: auto
github_banner
在一些技術(shù)博客上,大家可能注意到在頁面的右上角有個 GitHub 圖標(biāo),點(diǎn)擊之后可以跳轉(zhuǎn)到其源碼頁面,可以為 GitHub Repository 引流,大家如果想顯示的話可以自行選擇打開,我的配置如下:
# `Follow me on GitHub` banner in the top-right corner.github_banner:enable: truepermalink: https://github.com/NightTeam/nightteam.github.iotitle: NightTeam GitHub
記得修改下鏈接 permalink 和標(biāo)題 title,顯示效果如下:

可以看到在頁面右上角顯示了 GitHub 的圖標(biāo),點(diǎn)擊可以進(jìn)去到 Repository 頁面。
gitalk
由于 Hexo 的博客是靜態(tài)博客,而且也沒有連接數(shù)據(jù)庫的功能,所以它的評論功能是不能自行集成的,但可以集成第三方的服務(wù)。
Next 主題里面提供了多種評論插件的集成,有 changyan | disqus | disqusjs | facebook_comments_plugin | gitalk | livere | valine | vkontakte 這些。
作為一名程序員,我個人比較喜歡 gitalk,它是利用 GitHub 的 Issue 來當(dāng)評論,樣式也比較不錯。
首先需要在 GitHub 上面注冊一個 OAuth Application,鏈接為:https://github.com/settings/applications/new,注冊完畢之后拿到 Client ID、Client Secret 就可以了。
首先需要在 _config.yml 文件的 comments 區(qū)域配置使用 gitalk:
# Multiple Comment System Supportcomments:# Available values: tabs | buttonsstyle: tabs# Choose a comment system to be displayed by default.# Available values: changyan | disqus | disqusjs | facebook_comments_plugin | gitalk | livere | valine | vkontakteactive: gitalk
主要是 comments.active 字段選擇對應(yīng)的名稱即可。
然后找打 gitalk 配置,添加它的各項(xiàng)配置:
# Gitalk# Demo: https://gitalk.github.io# For more information: https://github.com/gitalk/gitalkgitalk:enable: truegithub_id: NightTeamrepo: nightteam.github.io # Repository name to store issuesclient_id: {your client id} # GitHub Application Client IDclient_secret: {your client secret} # GitHub Application Client Secretadmin_user: germey # GitHub repo owner and collaborators, only these guys can initialize gitHub issuesdistraction_free_mode: true # Facebook-like distraction free mode# Gitalk's display language depends on user's browser or system environment# If you want everyone visiting your site to see a uniform language, you can set a force language value# Available values: en | es-ES | fr | ru | zh-CN | zh-TWlanguage: zh-CN
配置完成之后 gitalk 就可以使用了,點(diǎn)擊進(jìn)入文章頁面,就會出現(xiàn)如下頁面:

GitHub 授權(quán)登錄之后就可以使用了,評論的內(nèi)容會自動出現(xiàn)在 Issue 里面。
pangu
我個人有個強(qiáng)迫癥,那就是寫中文和英文的時候中間必須要留有間距,一個簡單直接的方法就是中間加個空格,但某些情況下可能習(xí)慣性不加或者忘記加了,這就導(dǎo)致中英文混排并不是那么美觀。
pangu 就是來解決這個問題的,我們只需要在主題里面開啟這個選項(xiàng),在編譯生成頁面的時候,中英文之間就會自動添加空格,看起來更加美觀。
具體的修改如下:
pangu:truemath
可能在一些情況下我們需要寫一個公式,比如演示一個算法推導(dǎo)過程,MarkDown 是支持公式顯示的,Hexo 的 Next 主題同樣是支持的。
Next 主題提供了兩個渲染引擎,分別是 mathjax 和 katex,后者相對前者來說渲染速度更快,而且不需要 JavaScript 的額外支持,但后者支持的功能現(xiàn)在還不如前者豐富,具體的對比可以看官方文檔:https://theme-next.org/docs/third-party-services/math-equations。
所以我這里選擇了 mathjax,通過修改配置即可啟用:
math:enable:true# Default (true) will load mathjax / katex script on demand.# That is it only render those page which has `mathjax: true` in Front-matter.# If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.per_page: true# hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.mathjax:enable: true# See: https://mhchem.github.io/MathJax-mhchem/mhchem: true
mathjax 的使用需要我們額外安裝一個插件,叫做 hexo-renderer-kramed,另外也可以安裝 hexo-renderer-pandoc,命令如下:
npm un hexo-renderer-marked --savenpm i hexo-renderer-kramed --save
另外還有其他的插件支持,大家可以到官方文檔查看。
pjax
可能大家聽說過 Ajax,沒聽說過 pjax,這個技術(shù)實(shí)際上就是利用 Ajax 技術(shù)實(shí)現(xiàn)了局部頁面刷新,既可以實(shí)現(xiàn) URL 的更換,有可以做到無刷新加載。
要開啟這個功能需要先將 pjax 功能開啟,然后安裝對應(yīng)的 pjax 依賴庫,首先修改 _config.yml 修改如下:
pjax:true然后安裝依賴庫,切換到 next 主題下,然后安裝依賴庫:
$ cd themes/next$ git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax
這樣 pjax 就開啟了,頁面就可以實(shí)現(xiàn)無刷新加載了。
另外關(guān)于 Next 主題的設(shè)置還有挺多的,這里就介紹到這里了,更多的主題設(shè)置大家可以參考官方文檔:https://theme-next.org/docs/。
文章
現(xiàn)在整個站點(diǎn)只有一篇文章,那么我們怎樣來增加其他的文章呢?
這個很簡單,只需要調(diào)用 Hexo 提供的命令即可,比如我們要新建一篇「HelloWorld」的文章,命令如下:
hexo new hello-world創(chuàng)建的文章會出現(xiàn)在?source/_posts?文件夾下,是 MarkDown 格式。
在文章開頭通過如下格式添加必要信息:
---title:標(biāo)題# 自動創(chuàng)建,如 hello-worlddate: 日期 # 自動創(chuàng)建,如 2019-09-22 01:47:21tags:- 標(biāo)簽1- 標(biāo)簽2- 標(biāo)簽3categories:- 分類1- 分類2---
開頭下方撰寫正文,MarkDown 格式書寫即可。
這樣在下次編譯的時候就會自動識別標(biāo)題、時間、類別等等,另外還有其他的一些參數(shù)設(shè)置,可以參考文檔:https://hexo.io/zh-cn/docs/writing.html。
標(biāo)簽頁
現(xiàn)在我們的博客只有首頁、文章頁,如果我們想要增加標(biāo)簽頁,可以自行添加,這里 Hexo 也給我們提供了這個功能,在根目錄執(zhí)行命令如下:
hexo new page tags執(zhí)行這個命令之后會自動幫我們生成一個 source/tags/index.md 文件,內(nèi)容就只有這樣子的:
---title: tagsdate:2019-09-2616:44:17---
我們可以自行添加一個 type 字段來指定頁面的類型:
type: tagscomments:false
然后再在主題的 _config.yml 文件將這個頁面的鏈接添加到主菜單里面,修改 menu 字段如下:
menu:home:/ || home#about: /about/|| usertags:/tags/|| tags#categories: /categories/ || tharchives: /archives/ || archive#schedule: /schedule/ || calendar#sitemap: /sitemap.xml || sitemap#commonweal: /404/ || heartbeat
這樣重新本地啟動看下頁面狀態(tài),效果如下:

可以看到左側(cè)導(dǎo)航也出現(xiàn)了標(biāo)簽,點(diǎn)擊之后右側(cè)會顯示標(biāo)簽的列表。
分類頁
分類功能和標(biāo)簽類似,一個文章可以對應(yīng)某個分類,如果要增加分類頁面可以使用如下命令創(chuàng)建:
hexo new page categories然后同樣地,會生成一個 source/categories/index.md 文件。
我們可以自行添加一個 type 字段來指定頁面的類型:
type: categoriescomments:false
然后再在主題的 _config.yml 文件將這個頁面的鏈接添加到主菜單里面,修改 menu 字段如下:
menu:home:/ || home#about: /about/|| usertags:/tags/|| tagscategories:/categories/|| tharchives:/archives/|| archive#schedule: /schedule/ || calendar#sitemap: /sitemap.xml || sitemap#commonweal: /404/ || heartbeat
這樣頁面就會增加分類的支持,效果如下:

搜索頁
很多情況下我們需要搜索全站的內(nèi)容,所以一個搜索功能的支持也是很有必要的。
如果要添加搜索的支持,需要先安裝一個插件,叫做 hexo-generator-searchdb,命令如下:
npm install hexo-generator-searchdb --save然后在項(xiàng)目的 _config.yml 里面添加搜索設(shè)置如下:
search:path: search.xmlfield: postformat: htmllimit:10000
然后在主題的 _config.yml 里面修改如下:
# Local search# Dependencies: https://github.com/wzpan/hexo-generator-searchlocal_search:enable: true# If auto, trigger search by changing input.# If manual, trigger search by pressing enter key or search button.trigger: auto# Show top n results per article, show all results by setting to -1top_n_per_article: 5# Unescape html strings to the readable one.unescape: false# Preload the search data when the page loads.preload: false
這里用的是 Local Search,如果想啟用其他是 Search Service 的話可以參考官方文檔:https://theme-next.org/docs/third-party-services/search-services。
404 頁面
另外還需要添加一個 404 頁面,直接在根目錄 source 文件夾新建一個 404.md 文件即可,內(nèi)容可以仿照如下:
---title:404NotFounddate:2019-09-2210:41:27---對不起,您所訪問的頁面不存在或者已刪除。您可以<a href="https://blog.nightteam.cn>">點(diǎn)擊此處</a>返回首頁。center><blockquote class="blockquote-center">NightTeamblockquote>
這里面的一些相關(guān)信息和鏈接可以替換成自己的。
增加了這個 404 頁面之后就可以
完成了上面的配置基本就完成了大半了,其實(shí) Hexo 還有很多很多功能,這里就介紹不過來了,大家可以直接參考官方文檔:https://hexo.io/zh-cn/docs/ 查看更多的配置。
部署腳本
最后我這邊還增加了一個簡易版的部署腳本,其實(shí)就是重新 gererate 下文件,然后重新部署。在根目錄下新建一個 deploy.sh 的腳本文件,內(nèi)容如下:
hexo cleanhexo generatehexo deploy
這樣我們在部署發(fā)布的時候只需要執(zhí)行:
sh deploy.sh就可以完成博客的更新了,非常簡單。
自定義域名
將頁面修改之后可以用上面的腳本重新部署下博客,其內(nèi)容便會跟著更新。
另外我們也可以在 GitHub 的 Repository 里面設(shè)置域名,找到 Settings,拉到下面,可以看到有個 GitHub Pages 的配置項(xiàng),如圖所示:

下面有個 custom domain 的選項(xiàng),輸入你想自定義的域名地址,然后添加 CNAME 解析就好了。
另外下面還有一個 Enforce HTTPS 的選項(xiàng),GitHub Pages 會在我們配置自定義域名之后自動幫我們配置 HTTPS 服務(wù)。剛配置完自定義域名的時候可能這個選項(xiàng)是不可用的,一段時間后等到其可以勾選了,直接勾選即可,這樣整個博客就會變成 HTTPS 的協(xié)議的了。
另外有一個值得注意的地方,如果配置了自定義域名,在目前的情況下,每次部署的時候這個自定義域名的設(shè)置是會被自動清除的。所以為了避免這個情況,我們需要在項(xiàng)目目錄下面新建一個 CNAME 文件,路徑為 source/CNAME,內(nèi)容就是自定義域名。
比如我就在 source 目錄下新建了一個 CNAME 文件,內(nèi)容為:
blog.nightteam.cn這樣避免了每次部署的時候自定義域名被清除的情況了。
以上就是從零搭建一個 Hexo 博客的流程,希望對大家有幫助。
References
[1]?https://realfavicongenerator.net:?https://realfavicongenerator.net/
崔慶才
靜覓博客博主,《Python3網(wǎng)絡(luò)爬蟲開發(fā)實(shí)戰(zhàn)》作者
隱形字
個人公眾號:進(jìn)擊的Coder


長按識別二維碼關(guān)注
