Hexo結合Github-Pages搭建靜態博客

Hexo結合Github-Pages搭建靜態博客

已經好久沒有寫過博客了，主要是因為懶了。前幾天無聊點進了阿里云的廣告里面，無意中看到了域名查詢，查了一下自己的名字的域名，發現還沒有注冊（我原來記的這個域名是已經注冊的了），然后就花錢買下了這個域名。然后因為這個買到的域名引出了了后面搭建博客的這么一堆事。

我自己已經有一個博客了，是在CSDN的博客，博客地址： http://blog.csdn.net/mengxiangyue ,那個博客維護了好久了，從大三開始吧。斷斷續續也寫了好多年了，里面的文章我個人感覺水平也就一般。但是因為這些水平一般的文章，我也收獲了很多，首先是收獲了一個筆記吧，然后是申請成功了CSDN的博客（偽）專家，因為這個專家的身份，有時候會參加一些CSDN舉辦的活動。說到寫博客，我個人感覺最重要的是技術的積累，我也跟很多人說過寫博客這個事情，但是貌似聽的人不是特別多。

好了貌似扯得有點遠了，下面進入正題。上面我已經說過我買了一個域名，那就大概梳理一下提綱吧：

在開始介紹步驟之前，先扯幾句Hexo、Github Pages的東西（我也不是完全了解，只是我的理解，如果哪里錯了，還請指出） Github Pages是Github提供的一個靜態網站的功能，可以根據在Github倉庫的HTML、CSS、js文件生成一個網站，然后提供一個二級域名，可以直接訪問。這里說的靜態網站，就是所有的頁面的HTML頁面都是靜態的、已經生成好的，而不是動態生成的。Github Pages使用的是已經生成好的HTML，如果我們自己手動寫HTML會累死的，所以就需要使用工具來生成。搭配Github Pages的比較不錯的工具有jekyll、Hexo等，查了一下資料說jekyll比較復雜，Hexo比較簡單，最后選擇了后者。

下面按步驟說吧：

1. 購買一個域名

注冊、登錄阿里云賬號，然后選擇->域名與網站服務，查詢自己想要的域名，加入清單，結算這樣就買了一個域名。這里先不配置DNS，后面會說。

2. 在github上面生成一個github pages的倉庫

2.1 在github上創建一個倉庫,名字你自己隨便起就可以了。如圖： 2.2 創建完了后，選擇該倉庫的Settings，然后找到Github Pages部分。 點擊了之后會進入選擇主題，這時候隨便選擇，然后點擊發布就可以了。做完了這些之后，我們可以訪問以下http://<你的Github用戶名>.github.com，這時候如果能夠打開說明成功了。

3. 搭建Hexo環境

npm install hexo-cli -g # 安裝hexo工具

3.3 初始化博客

hexo init blog #初始化一個blog 可以cd到你想要生成博客的目錄
cd blog # 切換到創建博客的目錄下
npm install # 安裝nodejs依賴 注冊這里一定要在init后面執行一次這個，否則可能會出現一些未知的錯誤

這時候生成的博客目錄： 執行如下命令：

hexo server

這時候在瀏覽器訪問 http://0.0.0.0:4000/ ，應該能夠看到已經搭建好的博客了。

4. 配置博客

首頁: /

如果一個配置項目包含多個子項目，子項目起始位置要留空格，如下：

imglogo:
  enable: true  
  src: img/logo.png

另外在配置的過程中，可能會出現看著配置項目沒問題，然后就是出現錯誤，這時候可以試試換一個工具打開配置文件，然后配置，可能有些工具的編碼問題造成的。在配置的過程中涉及到圖片的路徑都在themes/jacman/source/img目錄下面。

配置多說插件

注冊多說（ http://duoshuo.com/ ）賬戶，然后添加站點，按照自己的要求填寫信息。 右上角點擊你新建的使用多說的配置站點，然后看瀏覽器地址欄的地址，如果出現admin結尾，然后記錄下來多說前面的用戶名，比如我的是 http://mengxinagyue.duoshuo.com/admin/ ，然后我的用戶名就是mengxiangyue。找到配置文件在對應的地方改成你自己的用戶名

duoshuo_shortname: mengxinagyue #修改成你自己的用戶名

到這里多說配置完了。

配置RSS

執行如下命令：

npm install hexo-generator-feed --save

在博客的配置文件_config.yml中添加如下配置：

Plugins:
  hexo-generator-feed

#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

執行如下命令：

hexo generate  # 重新生成配置文件 保證我們的修改會生效
hexo server

訪問 http://0.0.0.0:4000/ ，配置應該已經生效

配置域名

安裝阿里云的幫助文檔，進入到域名解析配置頁面，然后選擇CNAME進行解析（這里的原理我也沒有詳細了解過），類似下面的配置（圖中的域名修改為你自己的），然后保存。

在你的博客的文件夾的source目錄下創建一個”CNAME”文件，沒有后綴，里面的內容就只是寫上你的域名就可以了。

5. 部署博客

在命令行執行如下命令，安裝hexo-deployer-git,這個主要適用于將博客部署到Github上的工具。

npm install hexo-deployer-git --save

在博客的配置文件_config.yml中添加如下配置：

deploy:
  type: git
  repo: <你的博客的倉庫地址，即查看倉庫時候瀏覽器地址欄的地址>

最后執行如下命令：

hexo deploy

最后出現部署成功的提示，這時候訪問你的博客應該就能看到最新的了。

下面是我遇到的一些問題

1 about路徑不存在jacman主題上菜單欄里面有一個about菜單項目，它指向的地址是about/目錄，我們可以使用如下命令創建該目錄，然后修改里面的index.md文件。

hexo new page "about"

2 圖片路徑的問題

我們可以在source目錄下創建一個images目錄，然后在使用的時候，使用相對路徑，例如：’

’

3 站內搜索配置了半天的百度搜索，只能說自己能力有限，最后懶得弄了，就沒弄，如果有誰清楚，還請賜教。

4 目錄序號錯誤

Hexo如果開啟文章目錄，會根據Markdown的##標記自動生成文章目錄，并且自動添加序號，但是如果我們的文章中也使用了序號，那就會出現兩個序號，如圖：

我解決這個問題是是通過js刪除了序號，因為我對于nodejs不熟悉，所以不能從那上面改只能想其他的方法了。在博客的themes/jacman/layout/_partial/after_footer.ejs文件中添加如下代碼，代碼位置可以參看我的Github工程：

<!-- 解決自動生成文章目錄序號問題 -->
<script type="text/javascript"> var regex = new RegExp("^\\d+\\.\\d* "); var tocItemTextArray = $(".toc-article .toc-item .toc-text"); for (var i = 0; i < tocItemTextArray.length; i++) { var item = tocItemTextArray[i]; item.textContent = item.textContent.replace(regex, ""); } </script>

5 回到頂部不顯示jacman主題默認是滾動距離超過1000才會顯示回到頂部按鈕，如果文章過短將永遠不會顯示，我這里改成了300，可以在themes/jacman/source/js/totop.js中修改如下屬性為300：

var upperLimit = 300;

6 首頁不展開配置jacman提供在首頁展開一部分文章，然后添加一個read more的提示。需要在jacman的配置文件中，找到如下配置，然后改成true，

index:
  expand: true  
  excerpt_link: Read More

然后需要在寫文章的時候，在需要在首頁截斷顯示的地方添加”