徹底搞懂如何使用Hexo+GitHubPages搭建個人博客

很榮幸您能通過搜索引擎,在眾多介紹如何使用Hexo搭建個人博客的教程中檢索到本文。本著不讓您失望的原則,我會盡我最大努力將本篇文章寫地全面并具有可操作性。讓您在閱讀之后明白Hexo和GitHub Pages之間是如何聯系及運作的,如何搭建一個完整個人博客。首先,本文會首先講述個人博客各個模塊。然后會解釋Hexo到底做了什么,即Hexo在個人博客中起到的作用,GitHub Pages又在個人博客中扮演一個什么角色。在理解了以上內容后,搭建博客就變成了一件非常容易的事情,所以最后將以操作手冊式的描述引導你一步步搭建出一個個人博客。按照指引很快就可以搭建出你的個人博客。相信在閱讀完本文后,你會對搭建博客的完整流程有深刻的理解。

使用Hexo搭建個人博客

博客在讀研期間就已經搭建好了,當時很大一部分原因是為了在求職時有個加分項。當然,搭建這個博客的初衷是想將學到的知識分享出來,但是一直以來并沒有一個強大的驅動力去督促我來做這件事情。工作了接近兩年后,日漸覺得需要有一些技術的沉淀,需要將學到的東西總結并分享出來。而且作為一位程序猿,日常讀別人的博客時,看到一些很優秀的博客經常會很羨慕。感嘆只能望其項背之時,內心也有著見賢思齊的沖動,想著自己也要做出一個優秀的博客,因為通過在運營博客的過程中會有以下幾點益處:

  1. 檢驗學習成果:檢驗學成成果最有效的方式就是把你學到的東西講給另外一個人聽。如果他也能聽懂,那么證明你掌握了。同時,在你的講述過程中,你會對你學到的知識點進行歸納總結,達到一個更高視角的理解。在講給別人聽的過程中,也會發現薄弱的地方。當別人向你提問時,也是一個檢驗你的時刻,如果你不能很好地解答,也說明你對某個知識點理解的還不夠深刻,需要加強你對這個知識點的理解和掌握;

  2. 強迫自己不斷地輸入: 保證將個人的知識儲備不斷地向外輸出地前提是源源不斷的去輸入更多新的知識;

  3. 打造個人品牌:流量為王的時代,個人品牌能帶來太多的益處。通過個人博客打造個人品牌,融入相應的圈子,不斷交流,不斷地提升。

本文主要是講述一個博客搭建的流程,并且明白讓你明白每一步的作用。為了文章的連貫性,一些通過搜索引擎就可以隨手獲取的細枝末節的內容,本文就不展開講述。當然文中會附上相應的鏈接,以防你實在找不到相應的資料。再次聲明,我目前是一位iOS開發者,對前端的知識掌握的也不多,所以本文也不會涉及相關JS之類的知識。絮叨了那么多,下面讓我們先來看下一個完整的博客是由哪些模塊組成,以及各模塊都是如何配合運作地。

博客如何運作:博客的各模塊架構及組成

很多教程都跳過了這一步,直接開始告訴你Hexo是什么,如何安裝npm,如何安裝Hexo,怎么安裝評論插件,怎么安裝字數統計插件...按著這些教程可以搭建出一個基于Hexo的個人博客。之前也是這樣照著這些教程,搭建了此博客。但是始終都不知道Hexo到底是做什么的,認為Hexo是什么黑科技。每次搭建好一個博客之后都是一頭霧水,以至于在打算重新開通此博客之前,竟找不到頭緒。所以這次狠下心想弄明白Hexo到底是什么,搞明白一件事物的原理始終是一件讓人開心的事情。幸運地是讀到了《A Guide Of Making Your Personal Blog》系列文章,讀后感覺豁然開朗,感慨所有技術的原理其實都是大同小異,所以特別想分享出來。

首先要明確一個問題:個人博客是不是一個Web網站呢?

答案是:是的。

通過瀏覽器,在地址欄輸入鏈接 http://www.num0.top 來打開此博客。數據在互聯網上傳遞、交互、處理后,最終將本博客的內容呈現在你的屏幕上。這和Web網站有什么區別呢?如果你說博客不是一個網站,難道它會是一個App或者一個桌面程序嗎?Web網站有靜態和動態之分,靜態指的是用戶和Web頁面之間不能做一些交互,而動態網站可以允許用戶與網站做一些交互。使用Hexo+GitHub Pages搭建的個人博客其實類似于一個靜態的網站,并可以達到一些動態的交互效果。

弄清楚使用Hexo+GitHub Pages搭建的博客本質是一個Web網站之后,問題基本就解決了80%了。偉大的二八定律,僅用了20%的內容,就達成了80%的目標。剩下的80%內容會講述Hexo和GitHub Pages到底在博客架構中起到了什么作用即博客是如何運作的。

Web運作流程

已經知道Hexo+GitHub Pages搭建的個人博客本質是一個Web網站。先運用儲備知識設想一下:靜態網站是如何運作的呢?

Web網站工作原理

粗略地畫了Web工作的原理圖(省略了很多內容,真實的網絡請求要復雜的多),對比Web工作原理及各流程,分析博客是如何運作的。當在客戶端(PC、手機、iPad等)的瀏覽器的地址欄中輸入http://www.num0.top這個URL鏈接并按下回車鍵后,客戶端會首先處理這個請求。客戶端根據URL地址去互聯網索取你所需要的資源,并在獲取相應的資源文件后將文件內容呈現在當前的瀏覽器上。

  • DNS查詢:客戶端首先要知道資源存放的具體存儲在互聯網的具體位置。因為互聯網基本是基于TCP/IP協議進行通信的,TCP/IP協議棧中使用IP地址進行網絡尋址(使用arp/rarp協議進行物理尋址),所以客戶端要先知道這個資源存在那臺服務器下,那么就需要IP地址來尋找這臺服務器。本質就是要知道num0.top這個域名背后指向的IP地址是多少,然后按照此IP進行尋址,找到服務器并通過www服務獲取所需要的資源。從圖上看就是DNS查詢過程,這里省略了DNS查詢過程的細節,有興趣的同學可以去計算機網絡課本中了解具體的流程。簡單地說這一過程就是通過http://www.num0.top這個URL地址去DNS服務器查詢到num0.top域名的IP地址是185.199.108.153。
  • 資源請求:通過TCP協議的三次握手與服務器建立連接后,客戶端會使用HTTP/HTTPS協議構建一個HTTP請求包,并發送給185.199.108.153這個地址下的服務器,并告訴服務器需要通過www服務獲取index.html這個資源。
  • 服務器處理請求:服務器的網關收到請求后,發現是一個www服務的請求,就把這個請求轉到Web服務器去處理。Web服務器上開啟的諸如Apache、Nginx、IIS等服務會響應這個請求。這些服務發現是請求index.html資源文件的,就會交由后臺程序去裝配html資源。后臺程序會根據各種程序邏輯來從數據庫等地方讀取數據,并組裝成需要的index.html資源文件返回給Web服務器,最后經由Web服務器將資源返回給客戶端。
  • 瀏覽器解析HTML:客戶端拿到html資源文件后交由瀏覽器去解析處理,瀏覽器需要解析的不僅是HTML文件,還需要處理css、js等文件,并加載圖片視頻等媒體資源。通過一系列的處理后瀏覽器將資源展現給用戶。

最簡單的Web請求流程大致如上。其中包含了諸多計算機網絡、服務器、Web前端后端的知識點:如IP路由/尋址、URL協議、DNS解析、TCP三次握手、服務器等,再次就不展開敘述,你可以通過《細說留言器輸入URL后發生了什么》更深入地理解整個過程。

Github Pages之于服務器

搭建博客就如搭建一個Web網站一樣,首先需要一臺服務器。使用服務器來搭建博客服務并存放博客資源,這樣才能使其他人來訪問到它。服務器分為虛擬主機、虛擬專享服務器VPS、專屬服務器,這三類服務器的差別在《A Guide Of Making Your Personal Blog-Part2》一文中有詳細的闡述。對于服務器的總的來說有很多種選擇:

  • 使用阿里云、騰訊云的虛機主機服務,使用此類云服務搭建個人博客;

  • 購買功能和性能更優的虛擬專享服務器VPS;

  • 搭建一臺個人的服務器。

    nanopi neo2搭建的一個小型web服務器

    PS:之前在B站知名科技UP主稚暉君的一個視頻中看到使用nanopi neo2搭建的一個小型web服務器,很是敬佩。小到什么程度呢,大概是上面這個樣子,我特意多截了一部分圖大家可以和旁邊手柄對比一下大小很Geek。

標題說的是使用GitHub Pages來搭建個人博客,我們常用GitHub來存儲代碼并進行版本控制。GitHub大家都知道,世界最大的同性交友網站,GitHub Pages是什么呢?GitHub Pages是否能承擔一個服務器的作用?

Git與GitHub

要先搞清楚gitGitHub是兩個概念,git只是一種版本控制工具,而GitHub是支持git的一個代碼倉庫網站,像GitLab其實也是一個代碼倉庫的網站。這篇文章《An Intro to Git and GitHub for Beginners PartI(Tutorial)》講述了git與GitHub的區別。

GitHub Pages是GitHub公司提供的免費靜態網站托管服務。GitHub Pages嚴格意義上來說并不是一個服務器,只是可以提供類似服務器功能的一種服務。當我們把HTML等資源文件存放到GitHub指定的位置時,也就是一個GitHub Pages倉庫下,GitHub Pages服務會對這些文件進行處理并把它展示為一個網站。所以說可以將GitHub Pages提供的功能替代Web服務器的功能。我們只需要把編寫好的HTML等資源文件存到GitHub指定的位置,那么就實現了類似的Web服務器的功能,可以響應請求,并把相應的資源文件發送給客戶端。

Hexo博客框架之于Web框架

了解GitHub Pages服務的作用之于服務器的作用后,只需將博客資源放置在服務器上就可以讓其他用戶訪問。這里博客資源文件指的是html、css、js等資源文件,以及圖片、視頻等媒體文件。可以使用Java,Python等后端語言編寫Web程序來動態的生成html文件并在其中嵌入媒體資源文件。甚至可以直接用超文本標記語言編寫html文件,但這些方式的學習成本顯然較高,且較耗時。其實使用Dijango、Flask、Spring等Web框架也可以快速構建一個博客系統,但是這些需要你具備相關編程語言基礎及Web編程相關基礎知識。對于像html文件及css文件都寫的不是很好的同學,如果有一種工具可以將文本編輯器中撰寫的文字快速生成html文件,那么將大大提升效能。

Hexo其實就是做這個工作的。Hexo是一款快速、簡潔且高效的博客框架,可以將我們使用Markdown編輯的md格式的文件生成html資源文件。將這些文件上傳到GitHub Pages上,理論上別人就能訪問到我們的博客了。另外,Markdown語法學習曲線十分友好,上手非常容易且快。通過不斷地使用加深對Markdown語法的掌握,你能很優雅的編寫一篇精美的博文。關于Markdown的基本語法,請使用Google自行搜索。

所以,Hexo的作用就是生成資源文件的一個博客框架。相信你也聽說過JeklyllHugo等框架。其作用與Hexo類似,都是一款Website生成框架。使用這些框架可以快速的搭建需要的Website。Jekyll是一款將純文本轉化為靜態博客網站的框架。支持Markdow(Textile)、Liquid和HTML&CSS構建可發布的靜態網站,常用的Octopress就是基于Jekyll二次開發而成Hugo是一款由Go語言實現的靜態網站生成器。這幾種工具都支持將GithubPages作為資源文件的容器,這些框架起到的作用就是將Markdown格式的博文轉換成HTML格式的資源文件。

申請個性域名

至此,博客理論上已經可以通過IP地址或者GitHubPages的倉庫地址進行訪問了。但想象一下,我們平日訪問網站并不是輸入一串數字組層的IP地址,而是一串具有特殊意義的域名。此時你肯定也想擁有一個屬于自己且獨特、簡單、有特殊含義的個人域名。比起使用IP地址和GitHubPages的倉庫地址,瀏覽者可以很容易的記住你的博客。申請一個屬于自己的個性域名并綁定到我們的GithubPages倉庫地址上,也是搭建博客的一個重要步驟。本博客的域名是很早之前在阿里云上購買的,每年都需要續費,并且通過騰訊進行了備案。好像現在國內的域名大多數都需要備案了。選擇騰訊云備案,整個備案過程非常簡單,只需通過微信公眾號提交個人實名認證信息就好了,當初本來想使用阿里云備案,但是因為賬號遷移等原因一直沒有備案成功。后來使用了騰訊云后進行域名備案后發現操作起來確實十分便捷,而且客服人員會相當熱情地對備案過程進行指導,推薦一波。

你也可以在國外的域名服務商上購買域名,比如《A Guide Of Making Your Personal Blog-Part2》一文的作者是在GoDaddy上購買的,也很方便。如果你想在購買國外域名服務商的域名,可以參考下那篇文章。

本章小結

個人博客之于Web架構

為什么選擇Hexo+GithubPages

這個問題的回答其實就一個字”懶“。對,有時候,”懶“是第一生產力。不是嗎?想想程序猿平日做地大多數工作:造輪子,復用,編寫自動化工具,初衷不都是因為懶嗎。

其實,對于我來說,最大的原因是:對前端知識不是很熟悉。使用Web框架自己搭建一個自己的服務器,起碼需要花費1-2周的時間學習諸多的知識并實踐。構建這個博客的目的就是為了能便捷地分享一些技術心得,搭建過程不能也不應該占用太長的時間。相對于掘金、簡書等博客網站,受制于人不如自力更新,所以最后選擇使用Hexo+GithubPages的方式。Hexo+GithubPages完全可以滿足我目前的所有需求,如果后期不能滿足我的需求了,到時可以進一步升級我的博客。

這也是一個技術選型的問題。業務需求做多了,在一個新的需求來了之后,要根據有限的開發時間及開發成本快速選擇一種技術方案來高效地完成業務需求。如果這個需求上線后效果比較好,用戶量慢慢提升,到那時才去考慮如何提升性能的需求,做二次優化改版開發。不可能一上來就按照百萬級的并發量來開發你的個人博客,時間和收益不成正比。這也是工作以來形成的一個良好的思維習慣,首先進行需求分析,需要什么,達到什么目標,現階段需要做什么,技術方案熟悉嗎,會有何潛在風險點。最后,快速實現出來!

更具地來說,選用Hexo框架而不是JeklyllHugo等框架,因為之前使用過它,對其基本使用方式有一定的了解,可以快速上手。雖然沒有搞懂,但是心理上知道它并不難。且Hexo的教程文檔比較完善,社區氛圍也比較好,遇到問題可以通過查文檔并向社區尋求幫助來快速地解決問題。功能層面,Hexo提供的功能可以滿足我的續期需求:展示,分類,評論,統計功能等。后期遷移也比較方便,所以毫不猶豫的使用Hexo。使用GitHubPages主要是出于安全性的考慮,自己目前不能很好地保證我的服務器的安全性,而GitHubPages是搭建在GitHub之上。故可以暫時不用考慮安全性及相應的運維工作。綜上所述,最后選擇了Hexo+GitHubPages來搭建我的個人博客。從下一章的內容,將會是操作性手冊性的搭建流程介紹。

使用Hexo+GitHubPages搭建個人博客

GitHubPages設置

git安裝及配置

搭建一個Hexo+GithubPages博客需要做的第一步就是在GitHub上創建一個倉庫。在這之前,需要在你的電腦上安裝git。無論是Mac、Linux、Windows系統中的哪一種,Google上都能找到詳細的安裝教程說明,建議直接參考git官網的安裝教程。

初次運行git前,你需要做一些配置:

  • 設置Git用戶信息

      $ git config —global user.name “your_name”
      $ git config —global user.email your_email
    
  • 生成SSH Key公鑰

    查看當前用戶的目錄下是否存在.ssh目錄,如果存在進入到此目錄下檢查是否存在id_rsa和id_rsa.pub兩個文件,這兩個文件分別對應的是公鑰和私鑰,如果存在直接跳過此步,否則輸入下面的命令:

    $ ssh-keygen -t rsa -C “your_github_email”
    

    其中-t type:指定你要生成的密鑰類型-C commit:提供一個新的注釋。然后一路回車,直到生成一個矩形的圖案為止。記下生成的這串字符,這就是后面需要給GitHub配置的公鑰。

配置GitHub中的公鑰

首先需要在GitHub官網上注冊一個賬號,GitHubPages的創建需要一個GitHub的賬號,這一步就直接跳過。如果有GitHub賬號,直接登錄就可以。

登陸到后Github后,如果你是初次申請,需要先配置SSH,按照下述步驟進行操作:

配置SSH公鑰

?
配置SSH2
  • Setp1:點擊頭像

  • Setp2:選擇Settings

  • Setp3:選擇側邊欄的SSH and GPG keys

  • Setp4:右上角點擊New SSH key按鈕

此時會看到如下界面,Titlt輸入框中填寫的是你要輸入得SSH公鑰的名稱。我這里填的是”MacHome“,就是指我家里Mac電腦的SSH公鑰。Key的輸入框中需要填寫剛才在本機生成公鑰串:

SSH輸入

如果剛才你講命令行窗口給關閉了,也不要緊,輸入命令入cat ~/.ssh/id_rsa.pub就可以查看你剛生成的公鑰

查看本地SSH公鑰

Key中復制查詢到的SSH公鑰。點擊Add SSH key,這里需要你再次輸入密碼來確認。成功后會生成如下界面:

SSH配置成功界面

創建GitHub Pages倉庫

配置好git和GitHub后,需要在GitHub上創建Github Pages服務,具體步驟如下圖:

創建GitHubPages1

在GitHub首頁的頂部菜單選擇“+”號按鈕,并且點擊New respository選項。之后會出現下面的頁面:

創建GitHubPages2

一定要注意:在Repository name輸入框中你需要填入你的【Github用戶名】,這一點非常重要。因為這樣才能保證你建立的是GithubPages頁面而不是其他的代碼倉庫。另外一點記得勾選Initialize this repository with a README選項。這個時候你在瀏覽器輸入https://your_github_name.github.io后,可以看到一個簡陋的界面,那么說明你已經成功開啟了GithubPages服務了。下面需要做的就是安裝Hexo,并且使用Hexo來生成Blog站點。

安裝Hexo并初始化博客

安裝Hexo的過程非常的簡單,只需要幾行命令就可以輕松安裝并創建Hexo框架,前提是已經安裝好了Node.js。Hexo是一個快速、簡潔且高效的博客框架。Hexo使用Markdown(或其他渲染引擎)解析文章,Node.js所帶來的超快生成速度,讓上百個頁面在幾秒內瞬間完成渲染。官方建議Node.js版本不低于8.10,建議使用Node.js 10.0及以上版本

安裝Node.js

安裝Node.js請參照官網指南。安裝完成后在終端輸入以下命令,檢查安裝是否成功及Node.js對應的版本號:

$ node —version

安裝Hexo

安裝Hexo也非常的簡單,使用npm安裝Hexo只需要一句命令:

$ npm install -g hexo-cli

初始化創建博客

  • 創建站點根目錄

    創建一個默認主題的博客,首先需要初創建一個博客文件夾,注意這個文件夾的名字最好要和你剛才創建的GitHubPages的地址一致也就是your_github_name.github.io。這個文件夾以后也統稱為站點根目錄<folder>

  • 初始化站點根目錄

    使用以下命令初始化文件夾,Hexo會在指定的這個站點根目錄中創建所需要的文件。然后進入到此文件夾下,安裝npm所依賴的庫文件。

    $ mkdir <folder>  #創建站點根目錄
    $ hexo init <folder>  #使用Hexo初始化站點根目錄
    $ cd <folder>  #進入到站點根目錄
    $ npm install  #安裝npm所依賴的文件
    

創建完成后的目錄結構如下圖:

初始化后的目錄結構

先不著急分析每個目錄是做什么的,博客此時已經創建好了,只需要在命令行輸入以下命令(也先不用理會這兩行命令的含義,后面會做解釋),就可以在本地預覽已生成的博客了。

$ hexo generate # 生成博客
$ hexo server # 本地預覽

打開瀏覽器,在地址欄輸入http://localhost:4000,先看下此時的博客是什么樣子的。

原始博客

此時,可以看到一個默認主題的博客已經生成了,并可以在本地訪問它。但目前距離計劃中的博客還存在一些差距,具體如下:

  • 博客的主題和樣式并不是理想中的主題,需要選擇合適的主題

  • 目前只能在本地訪問,其他人還訪問不到這個博客,需要將其部署到GitHubPages上

  • 通過個性域名來訪問博客

Hexo生成站點目錄結構

在完成以上還未完成的目標前,回到上一節還未解釋的目錄結構。在了解了目錄結構中每個文件夾的含義及作用后,才能更好地來改造它,達成以上目標。

我們再來看一下這個目錄結構,命令行打印出來:

目錄結構2

細心的你可能已經發現,此時的文件目錄下比之前多出來一個文件夾public/和一個文件db.json。執行了hexo generate和hexo server這兩步操作產生了public/文件夾和db.json文件。實際上,正是在執行了hexo generate命令之后,將souce文件夾下的Markdown和HTML文件解析到了public文件夾下,并生成了db.json文件。下面來介紹一下使用Hexo生成的跟站點目錄結構。

config.yml

_config.yml是整個博客的配置文件,至于每項配置參數可以Hexo官網文檔有詳細的介紹。

configyml文件

目前博客只能在本地瀏覽,還沒有部署GitHubPages上。將博客發布到GitHubPages最直接的方式:使用git將本地博客文件夾關聯到GitHub的遠程倉庫,并且把本地文件push到對應的倉庫中。Hexo提供了一種更簡便地方式,只需要在_config.yml中作相應的配置,通過命令行命令就可以很方便地把靜態文件部署到對應的倉庫中。

打開根站點文件夾下的_config.yml博客配置文件,在deployment配置項下設置如下參數:

deploy:
    type: git
    repo:git@github.com:yourname/yourname.github.io.git
    branch:master

安裝以下插件:

$ npm install hexo-deployer-git —save

執行以下命令發布本地博客到遠程倉庫:

$ hexo deploy

然后在瀏覽器中輸入GitHubPages的地址:https://your_github_name.github.io ,你會發現剛才你在本地生成的博客已經可以在互聯網上訪問到了。但此時使用的依然是GitHub加倉庫名稱的URL來訪問博客,當輸入我們自己的個性域名訪問時發現還是404錯誤,因為此時還沒有做域名的解析配置,下一章節會具體講解如果配置個性域名。

package.json

package.json是應用程序信息,打開此文件內容如下:

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "4.2.0"
  },
  "dependencies": {
    "hexo": "^4.0.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-index": "^1.0.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-stylus": "^1.1.0",
    "hexo-renderer-marked": "^2.0.0",
    "hexo-server": "^1.0.0"
  }
}

一個json文件,可以得到hexo的版本信息,所有安裝的依賴程序。并且在scripts字段下發現了幾個剛才執行的命令,其實之前執行的幾個命令實際是執行了對應的腳本。以下列出了Hexo中最重要的幾個命令及其縮略形式,記住以下幾個命令,就可以基本完成Hexo的操作。

hexo clean  = hexo c # 清除本地緩存,也就是清除public/文件夾和db.json文件。

hexo generate = hexo g # 將souce文件夾下的Markdown和HTML文件解析到了public文件夾下,并生成了db.json文件

hexo server = hexo s # 開啟本地調試模式

hexo deploy = hexo d # 將本地資源部署到GithubPages

scaffolds

****scaffolds****是模板文件夾,當創建新的文章時,Hexo會根據scaffold里的不同模板來建立文件。什么意思呢?當使用Hexo新建一篇文章時使用的命令是:

hexo new [layout] <title>   

一般都會忽略[layout]可選參數,此時默認為post,也可以通過_config.yml中的default_layout參數來指定默認布局

繼續打開此文件夾,發現有三個.md文件:

scaffolds1

其實這是Hexo的三種默認布局post、page和draft。使用Hexo創建三種模板類型的文件時,被創建的文件會被保存到不同的路徑。而我們自定義的其他布局和post相同,都會保存在source/_posts文件夾下

不同模板對應的文件夾

由此可見其對應的保存路徑關系如下:

布局 路徑
post source/_post
page source/
draft source/_draft
自定義 source/_post

關于模板及文章發布相關的詳細知識點建議您參考官網文檔

source

source資源文件夾,是存放用戶資源的地方。除post文件夾除外,開頭以_(下劃線)命名的文件/文件夾或隱藏文件都會在generate時被忽略Markdown和HTML文件夾會被解析到public文件夾下,其它文件格式的文件會被直接拷貝過去。

themes

themes是主題文件夾。Hexo會根據設置的主題來生成靜態的頁面,剛才說到使用Hexo init<folder>生成的初始化站點的主題可能并不是你預估的樣子。Hexo提供了豐富的站點主題供你選擇,現在先去官網提供的主題頁面選取一個你喜歡的主題,下一章我們會講解如何更換主題。

Hexo主題配置

根據官網介紹:創建或更換Hexo主題十分容易,只需要在themes文件夾內新增一個以theme名稱命名的文件夾,并站點根目錄下的_config.yml博客配置文件中的theme字段中修改成對應的theme名稱即可切換主題

一個主題的目錄結構雖然相同,但是大致如下:

主題結構目錄

主題文件夾結構

  • _config.yml:主題配置文件

    這里一定要注意區別跟站點目錄下的_config.yml文件,一開始使用Hexo很容易將這兩個配置文件弄混。站點目錄下的_config.yml是博客全局配置文件,而對應的theme文件夾下的_config.yml則是主題配置文件,其中的配置只對當前主題生效如果主題配置文件中的字段與全局配置文件重復,則會優先使用根站點目錄下全局配置文件中的配置

  • languages:語言文件夾

  • layout:布局文件夾

    用于存放主題的模板文件,決定了網站內容的呈現方式,Hexo內建Swig模板引擎,也可以另外安裝插件來獲得EJS、Haml或Jade支持。Hexo模板文件的擴展名決定了所用的引擎模板,如:

    layout.ejs - 使用EJS
    
    layout.swig - 使用Swig
    
    script:腳本文件夾,在啟動時,Hexo會載入此文件夾內的JavaScript文件。
    
    
  • source:資源文件夾

    除了模板以外的Asset,例如CSS、JavaScript文件等,都應該放在這個文件夾中。

修改默認主題

選擇了一個喜歡的主題后,就可以更換默認主題。一般的話這些主題文件都會放在GitHub上,首先需要在博客根配置文件_config.yml中將theme字段下的主題更換為你選擇的主題,比如此博客的主題就是archer。打開主題對應的GitHub頁面,強烈建議首先閱讀Readme。找到對應的clone地址后,將博客主題使用git clone保存到themes文件夾下。比如以next主題為例進行如下操作:

$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

此時執行Hexo命令:

hexo clean
hexo generate
hexo server

本地打開后博客后,發現已經將博客的主題更換成next主題了。

選取主題注意事宜

這里說一下我在選擇博客主題時是依據哪些事項進行選擇的。

  • 首先是近期有無維護的主題:因為如果是年久未進行維護,可能一些插件已經不能使用或者所依賴的node框架版本也不支持了,那么如果你前端沒有很精通的話就會提高維護成本。所以在美觀的基礎上盡量選擇使用用戶多,一直都在更新的主流主題

  • 主題是否已經集成所需插件:還是那句話,如果你是新手,盡量不用自己去做額外的開發。如果主題不僅提供了所需插件,而且每一功能的插件提供了多種類型是最好不過的。

最后選擇了archer這個主題就是基于以上考慮,首先這個主題的風格就是我喜歡的,其次就是插件集成的非常全面,我只需要做簡單的配置就可以使用。給fi3ework點贊!

配置域名

此時還是不能通過自定義的域名來訪問博客,因為還沒配置域名。

域名解析

配置域名前首先需要在域名的服務商提供的域名解析功能中對域名做相應的域名解析,具體配置如下:

域名解析
  • 主機記錄:用于設置域名前綴,告訴DNS服務器把【域名前綴+域名】的鏈接與記錄值中的地址關聯到一起。這里我的域名是num0.top,那么我在主機記錄里輸入www,在記錄里輸入lenhoon.github.io代表我把www.num0.toplenhoon.github.io關聯到了一起。不同的前綴具有不同含義,這里的@是表示解析域名num0.top,也就是不輸入任何前綴

  • 記錄類型:是用來表示記錄值的類型,A記錄在記錄值里填寫服務器的IP地址;CNAME記錄就在記錄之中填寫相應的域名

上圖中A記錄中填寫了一個IP地址。這里我并沒有去購買一個服務器而是使用了GitHub Pages服務,所以這個IP地址對應的是GitHubPages提供的IP地址。這里可以參考《Mamaging a custom domain for your Github Pages site》。GitHub Pages給出的A記錄IP如下:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

這里還設置了一個主機記錄為www,記錄類型為CNAME的記錄。添加這一條的原因是因為GitHub推薦在DNS中使用A記錄和CNAME相結合的方式

GitHubPages綁定域名

在GitHub中做以下操作:打開我們的博客倉庫,然后點擊Setting按鈕

打開GitHubPagesSetting選項

在此選項卡的Custom domain中填寫你的域名:

填寫域名

稍等片刻,在瀏覽器中輸入設置的域名,就可以打開你的個人博客。至此,已經完成了對個性化域名的綁定工作。

此時你會發現別人的教程中都是去配置一個叫做CNAME的文件。是的,如果此時你不配置這個文件,當你每次執行hexo deploy后,你都需要去Github中去設置Custom domain這個參數,不然就不能每次都通過域名打開博客。主要原始是每次發布之后,這里配置的Custom domain都會被清空。

如果你不想每次都登陸GitHub去配置此域名,你需要做的就是在站點目錄下的source文件夾下新建一個CNAME文件,然后只需在此文件中寫入我們的域名就好。Hexo在source文件夾中遇到不能處理的文件,比如這個CNAME文件就會原封不同的把它拷貝到public文件夾中,這樣就解決了每次要修改Custom Domain的問題。

配置sitemap,讓搜索引擎檢索到博客

經過千辛萬苦終于搭建好了博客,又經過一番千辛萬苦寫出了幾篇博文,于是你興高采烈的等待著別人來評論。幾天過去了發現竟然沒有人來看你的博客。為什么呢?

想想你平時都是怎么看別人博客的,是不是要通過搜索引擎去搜索?如果你去搜索引擎搜索你的博客你會發現基本搜索不到你的博客,為什么呢?

配置sitemap文件

首先我們要明白搜索引擎是通過站點地圖(sitemap)去抓取可供爬取的網頁的,所以首先需要配置站點的sitemap以允許搜索爬蟲搜集到博客的站點信息。

Hexo有自動生成站點地圖的工具,在博客根目錄下輸入以下命令以生成sitemap:

npm install hexo-generator-sitemap —save
npm install hexo-generator-baidu-sitemap —save 

我們希望Google和百度用戶都能搜索到此博客,所以需要兩個不同的sitemap。然后需要在博客的站點配置文件_cpnfig.yml中作以下配置:

# sitemap
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

此時執行hexo generate后你會發現在public文件夾下多了sitemap.xmlbaidusitemap.xml兩個文件,這就以供搜索Google和百度引擎爬蟲抓取的站點地圖。

站點驗證

博客的sitemap是為了告訴了搜索引擎可以爬取的內容,但是搜索引擎怎么知道你就是這個網站的主人呢?

舉個栗子??:

你在一個超市門口喊:都來吧,今天全場5折,買一送一,路過的人怎么就知道你說的算呢?誰知道你是不是這個超市的工作人員呢?這個時候就需要來驗證一下你的身份了:可以拿出你的工作證件來告訴大家你就是超市的負責人。這時大家才會相信你,然后超市的東西被一搶而空…

而此時你所在的超市旁邊也有一個超市,這家超市正是你所在超市的最大競爭者,這個時候,你跑到別人家的超市門口喊,“快來吧,今天全場清倉處理,所有商品一律1折”,路過的顧客不相信有這種好事情,所以跑過來要看你的證件,結果發現你是旁邊那邊超市的,然后你就被胖揍了一頓...

所以搜索引擎也像路人一樣,你需要向搜索引擎證明sitemap中標記的可以訪問的資源是歸屬于你的,那么就需要驗證下你對站點的所有權了。

再此只以谷歌為例,百度的驗證方法大家可以自行探索。

首先登陸谷歌賬號,設置 Google站點管理工具的驗證字符串。

Google驗證字符串

選擇網址前綴,在網址中輸入你博客的地址:

Google驗證2

使用推薦的驗證方式,下載HTML文件驗證。但是怎么才能把這個html文件放到博客中呢?

想一下,執行hexo generate命令之后,會將souce文件夾下的Markdown和HTML文件解析到public文件夾下,使用hexo deploy時會把public文件夾下的文件拷貝到Github pages中,所以直接把這個html放到public文件加下就可以,然后執行hexo deploy,注意這個時候不用執行hexo generate。大概等待1分鐘左右,點擊驗證出現以下對話框代表驗證成功。

Google驗證成功

此時還需要上傳站點地圖sitemap到搜索引擎,下次讓搜索引擎的爬蟲來的光顧的時候就可以通過這個站點地圖來爬取了相應的鏈接。就等于下一次你的超市有顧客光臨,告訴他在哪里可以領取打折促銷手冊一樣。此時你在登陸 Google站點管理工具 頁面發現會是如下的頁面:

上傳Sitemap

在右側的工具欄選擇站點地圖,并在彈出的界面輸入sitemap的存放路徑。當public/為站點的根目錄后,此時輸入的就是sitemap在public/文件夾下的位置。

等待一段時間,你就可以通過Google檢索到你的博客了。而如何通過百度進行站點地圖設置大同小異,你可以自己嘗試一下。

總結

至此,此篇文章已經講述了使用Hexo+GithubPages搭建個人博客的完整流程,并且講述了一些基本的原理。希望這不僅是一篇可以按照教程搭建博客的操作手冊,更希望這是一篇可以讓你徹底的搞懂Hexo的教程。

網絡上一些其他優秀的博客教程中講了很多插件的設置,其實很多插件都是基于主題的,在一些主題中作者已經幫你集成好了各類插件,每類插件種類也非常的豐富,相信總有一款適合你,你要做的只是按照README中的指南,做一些簡單的配置就好了。如果你對前端不精通,在選擇一個主題前,需要考慮這個主題是否已經集成了你所需要的插件。但是如果你可以自己集成就不存在這個問題啦。

本文是重新開始寫博客后的第一篇文章,用了將近兩周的時間撰寫,排版,修改。真的沒有想象中的容易,此時更加佩服一些優秀的博主,無償地將自己所學知識分享出來。作為一位碼農,深知加班的壓力,最近還是因為疫情沒有加班,才得以每晚有1-2個小時的時間來重新搭建此博客并完成此篇文章。很難想象其他博主是如何高效、快速地輸出一篇篇高質量的文章,這次只有望其項背。雖然一篇博文的輸出很耗時,但是我一定會堅持下去。接下來我也會學習更多的時間管理方面的知識來更好的規劃時間,并且會向其他博主取經如何高產。好了,如果你覺得這篇文章有用就給個贊吧!若有訛處,懇請斧正!

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

推薦閱讀更多精彩內容