點擊藍字關注我

本文將詳細介紹利用Github+hexo搭建一個免費、簡潔的個人博客，從獲取域名到菜單欄、搜索框、評論分享這些必要功能的配置，給自己一個個性化的內容分享平臺。

—▼—

我建了一個QQ學習交流群，旨在“分享、討論、學習、資源分享、就業機會、互聯網內推、共同進步！”，感興趣的可以加一下，也可以添加我的QQ~

QQ群：1002821945；QQ號：498073774；

前言

和大多數搭建個人博客的博主一樣，我之所以搭建個人博客的主要原因也是因為不希望受制于各大內容分享平臺，生怕有朝一日被安上一個“莫須有”的罪名，所有辛苦創作的內容都付之一炬。

關于搭建個人博客，我在內心規劃了很久，一直在徘徊于兩個選項之間，

自己從底層搭建、注冊域名、備案全流程做起；

使用一些免費的托管平臺和成熟的博客管理系統；

最終，我還是選擇了后者，主要原因有如下幾點：

• 容易搭建

• 操作和管理簡單

• 免費

• 界面美觀

目前有很多優秀的博客管理系統，例如WordPress、Halo、hexo，經過反復的對比，我選擇了Github Page+hexo的方式進行搭建個人主頁，雖然看上去只涉及兩個工具或平臺，但是要搭建一個完整的個人博客，要做的遠不止這些，還要考慮有如下內容，

• 菜單欄

• 搜索框

• 評論功能

• 分享功能

• 訪問量

• RSS

• 鏈接

• ......

本文就詳細的介紹一下通過Github Page結合hexo搭建一個完整的個人博客。

域名-GithubPage

要想讓別人能夠訪問到我們的個人博客，首先就需要有一個域名，我們可以自己申請、備案域名然后購買并部署到對應服務器，但是對于入門級這顯然是繁瑣且需要耗費一定資金的，因此可以使用github pages來托管我們的靜態網頁，這樣我們就可以獲取一個名為*.github.io的域名。

注冊Github Page的過程如下：

第一步：注冊Github賬號

首先打開鏈接https://github.com/join?source=header-home，注冊github賬號，然后登錄github。

第二步：創建github倉庫

點擊右上角"+"，選擇New repository，填寫Repository name，這個就是可以直接訪問的域名，然后點擊create?repository即可。

到此為止，我們就把創建好了github page。

博客管理工具-hexo

hexo是一個輕量級的博客管理系統，這里要注意，hexo是一個管理系統，它負責新建、部署等博客管理工作。如果使用過git做版本控制的話應該很容易理解，它可以類比為git，可以通過一些命令生成靜態網頁、把靜態網頁推送到遠程倉庫。

hexo安裝

由于hexo是基于node.js制作的一款博客管理工具，所以要按照hexo就需要事先安裝node，http://nodejs.cn/download/

然后打開命令行窗口，執行下面命令，

$?npm?install?-g?hexo-cli

hexo初始化

安裝hexo之后需要對hexo進行初始化，首先需要新建文件夾，進入到新建文件夾之后再進行初始化，

$?mkdir?hexo$?cd?hexo$?hexo?init

然后安裝一些依賴包，

$?npm?install

最后可以得到如下目錄，

這里比較重要的兩個目錄分別是source和themes，其中source里面存儲的是一些網頁顯示相關的內容，其中包括，

• 文章

• 關于

• 分類

• 標簽

themes中包含的是博客的主題相關內容，其中默認的主題是landscape。

hexo使用

前面提到過，hexo其實類似于git，通過一些命令來實現靜態網頁生成、部署等工作，我們在維護博客過程中主要使用的有如下幾個命令，

$?hexo?n?blogname??????#?新建文章，例如，hexo?n?ComputerScience$?hexo?clean??????????#?清除緩存文件$?hexo?g??????????????#?生成靜態文件$?hexo?s??????????????#?啟動本地服務器，預覽網頁$?hexo?d??????????????#?部署文件到指定的倉庫

記住上述命令就可以進行日常的個人博客維護工作。

主題-Next

經過前面的配置，就可以通過hexo s啟動本地服務器http://localhost:4000/，在瀏覽器中打開，對網站進行預覽，

hexo默認的主題是landscape，我們可以修改為我們自己喜歡的主題，目前hexo有很多適配的主題，其中比較常用，也是本文推薦的就是Next主題。

一個hexo主題的好壞不僅僅取決于它的界面，還要考慮到后期擴展必備功能的需要，Next主題相對比較成熟，能夠輕松的配置谷歌、百度檢索，此外還可以很容易添加標題欄、閱讀量等功能，下面就來看一下Next主題的配置。

克隆Next主題

首先需要把Next主題克隆到博客中themes路徑下，

$?cd?hexo$?git?clone?https://github.com/theme-next/hexo-theme-next?themes/next

這樣在~/hexo/themes路徑下就會有一個next文件夾。

修改配置文件

克隆next主題之后需要修改博客根目錄下_config.yml文件，找到theme字段修改成next即可，

#?Extensions##?Plugins:?https://hexo.io/plugins/##?Themes:?https://hexo.io/themes/theme:?next

修改主題樣式

next主題包含多個樣式，我們可以根據自己的喜好進行修改，修改樣式的文件在~/hexo/themes路徑下，名字同為_config.yml，需要注意，這和前面提到的不是同一個文件，前面的配置文件是博客管理系統hexo的配置文件，這里的是主題的配置文件。

#?Schemes#?scheme:?Musescheme:?Mist#?scheme:?Pisces#?scheme:?Gemini

必備功能

通過前面的配置，我們已經完成個人主頁“骨架”部分的搭建，打開預覽頁面如下，

可以看出，目前為止博客還比較“干凈”，很多必要的功能都沒有，例如菜單欄不完整，沒有搜索框，此外，評論、閱讀量、友情鏈接這些重要的功能都沒有，下面就來一一介紹一下這些功能的配置過程。

注意：通過上述配置之后，博客所在路徑和主題所在路徑下分別有一個_config.yml文件，后面所提到的站點配置文件指的是博客根目錄下的_config.yml，主題配置文件是指themes/_config.yml。

菜單欄

打開主題目錄下的配置文件themes/_config.yml，找到menu字段修改菜單欄，

menu:??home:?/?||?home??#about:?/about/?||?user??#tags:?/tags/?||?tags??#categories:?/categories/?||?th??archives:?/archives/?||?archive??#schedule:?/schedule/?||?calendar??#sitemap:?/sitemap.xml?||?sitemap??#commonweal:?/404/?||?heartbeat

其中about是關于，tags是標簽，其他的站點之類的也可以根據自己的喜歡進行添加。

搜索框

搜索框是一個博客必不可少的部分，當更新的文章數量逐漸增加之后，為了方便訪問者閱讀或快速定位目標文章，我們需要給它添加上一個搜索功能，hexo添加搜索框的方式如下，

首先，安裝hexo-generator-search，

$?npm?install?hexo-generator-search?--save

然后，在站點配置文件添加下面內容，

search:??path:?./public/search.xml??field:?post??format:?html??limit:?10000

最后，在把主題配置文件local_search下的enable修改為true，

local_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?-1??top_n_per_article:?1??#?Unescape?html?strings?to?the?readable?one.??unescape:?false??#?Preload?the?search?data?when?the?page?loads.??preload:?false

修改后重新生成靜態網頁，預覽一下即可，

修改博客名稱、作者、語言

到目前為止，應該可以看到，博客的名稱為hexo且沒有作者和網站描述信息、此外，網頁顯示的語言都是英文，我們可以通過修改站點配置文件來把它轉換成英文，同時修改博客標題、描述、作者信息，

title:?平凡而詩意subtitle:?Jackpopdescription:?原創技術分享網站keywords:author:?Jackpoplanguage:?zh-Hans

訪問量、閱讀量

訪問量和文章閱讀量是我們了解文章受歡迎程度最直接的方式，因此，訪問量、閱讀量也是一個完整博客不可或缺的部分，如果使用的是其他主體，需要通過一些腳本配置方式來為博客添加閱讀量訪問量，但是，如果使用Next主題，則不需要這些繁瑣的步驟，這也應了前面所說的那句話--評價一個主題不僅僅要依賴它的美觀程度，還要依賴它完善而強大的功能。Next主題自帶不蒜子計數功能，我們只需要修改主題配置文件，把busuanzi_count下的enable由false改為true即可，

busuanzi_count:??enable:?true

評論功能

評論是一個博客非常重要的一項功能，目前有很多知名的博客評論插件，例如比較知名的暢言、來必力、valine等，在這里我還是推薦valine，因為它界面比較簡潔，而且不需要訪問者注冊、登錄即可評論，這樣對于訪問者更加友好。

由于評論內容需要耗費存儲資源，因此需要首先注冊LeanCloud獲取存儲引擎，然后復制appid、appkey，然后打開主題配置文件，

valine:??enable:?true??appid:?Ikslsdjflsjdnclskdfjlskdklalla?#?your?leancloud?application?appid??appkey:?Kokkall09kkssmmcsslla?#?your?leancloud?application?appkey??notify:?false?#?mail?notifier?,?https://github.com/xCss/Valine/wiki??verify:?false?#?Verification?code??placeholder:?請在此輸入您的留言?#?comment?box?placeholder??avatar:?mm?#?gravatar?style??guest_info:?nick,mail,link?#?custom?comment?header??pageSize:?10?#?pagination?size

配制后，重新生成，預覽一下可以看到如下效果，

分享功能

當我們看到不錯的文章想分享給其他同學怎么辦？這時候就需要有博客有一個分享功能，強大的Next主題已經集成了百度分享功能，但是百度分享不支持https，如果想正常使用還需要更多的配置。

首先，修改主題配置文件，

#?Baidu?Share#?Available?value:#????button?|?slide#?Warning:?Baidu?Share?does?not?support?https.baidushare:??type:?button??baidushare:?true

把baidushare改為true。

然后，為了解決百度分享不支持https的問題，需要進一步的修改，要先訪問下方鏈接，

https://github.com/hrwhisper/baiduShare

把static文件夾下載到themes\next\source目錄下，

最后，修改themes\next\layout\_partials\share\baidushare.swig文件，把末位的代碼修改一下，

修改前：

.src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new?Date()/36e5)];

修改后：

.src='/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new?Date()/36e5)];

RSS

RSS(Really Simple Syndication)是一種簡易的信息聚合方式，是一種常用的信息訂閱方式，但是對于我個人而言這項功能很少使用，如果覺得有必要也可以配置一下，下面就來介紹一下RSS的配置方式。

首先，安裝RSS訂閱插件，

$?npm?install?hexo-generator-feed?--save

其次，修改站點配置文件，

plugin:-?hexo-generator-feed
#?Feed?Atomfeed:type:?atompath:?atom.xmllimit:?20

最后，修改主題配置文件，添加下面字段，

rss:?/atom.xml

社交、友情鏈接

在我們的博客中，有時需要添加直達github、知乎、E-mail等社交工具的鏈接，也需要一些鏈接到其他網站的友情鏈接，下面來介紹一下怎么添加社交、友情鏈接。

首先，打開主題配置文件，搜索social，配置社交鏈接，

social:??GitHub:?https://github.com/Jackpopc?||?github??E-Mail:?mailto:498073774@qq.com?||?envelope??知乎:?https://www.zhihu.com/people/sharetechlee?||?book??專欄:?https://zhuanlan.zhihu.com/sharetechlee?||?edit

然后，搜索Blog rolls配置友情鏈接，

#?Blog?rollslinks_icon:?linklinks_title:?Linkslinks_layout:?block#links_layout:?inlinelinks:??Title:?http://example.com/

▲

END

有趣的靈魂在等你

長按掃碼可關注?

相關文章辦公效率 | 讓你突飛猛進的10個Word技能學習工具 | 推薦10款提升自己的優質APPGoogle | Python編程規范指南實用工具 | 收下這3款工具，再也不用擔心英語翻譯！我最終還是選擇了VS code！文章好看就點這里

總結

以上是生活随笔為你收集整理的个人博客管理系统_教程 | 一文搭建你的第一个免费专属博客的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。