超級詳細的Hexo+GitHubPages搭建博客實例教程

Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環境，可以在非瀏覽器環境下，解釋運行 JS 代碼。

在 Node.js 官網： 下載安裝包 v6.10.3 LTS

保持默認設置即可，一路Next，安裝很快就結束了。

然后打開命令提示符，輸入 node -v、npm -v，出現版本號則說明 Node.js 環境配置成功，第一步完成！！！

搭建 Git 環境

為什么要搭建 Git 環境？ - 因為需要把本地的網頁和文章等提交到 GitHub 上。

Git 是一款免費、開源的分布式版本控制系統，用于敏捷高效地處理任何或小或大的項目。

在 Git 官網： 下載安裝包 Git-2.13.0-64-bit.exe

桌面右鍵，打開 Git Bush Here，輸入 git --version，出現版本號則說明 Git 環境配置成功，第二步完成！！！

GitHub 注冊和配置

GitHub 是一個代碼托管平臺，因為只支持 Git 作為唯一的版本庫格式進行托管，故名 GitHub。

Github注冊：

創建倉庫：Repository name 使用自己的用戶名，倉庫名規則：

注意：yourname 必須是你的用戶名。

yourname/yourname.github.io

訪問 yourname.github.io，如果可以正常訪問，那么 Github 的配置已經結束了。

到此搭建 Hexo 博客的相關環境配置已經完成，下面開始講解 Hexo 的相關操作

安裝配置 Hexo

Hexo 是一個快速、簡潔且高效的博客框架，使用 Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。

強烈建議你花20分鐘區讀一讀 Hexo 的官方文檔：https://hexo.io/zh-cn/

使用 npm 安裝 Hexo：在命令行中輸入

npm install hexo-cli -g

然后你將會看到下圖，可能你會看到一個WARN，但是不用擔心，這不會影響你的正常使用。

查看Hexo的版本

hexo version

安裝 Hexo 完成后，請執行下列命令來初始化 Hexo，用戶名改成你的，Hexo 將會在指定文件夾中新建所需要的文件。

hexo init bxm0927.github.io

cd bxm0927.github.io

npm install

新建完成后，指定文件夾的目錄如下：

.
├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的靜態網頁文件
├── scaffolds #模板
├── source #博客正文和其他源文件，404、favicon、CNAME 都應該放在這里
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主題
├── _config.yml #全局配置文件
└── package.json #npm 依賴等

運行本地 Hexo 服務

hexo server
或者
hexo s

您的網站會在 http://localhost:4000 下啟動。如果 http://localhost:4000 能夠正常訪問，則說明 Hexo 本地博客已經搭建起來了，只是本地哦，別人看不到的。下面，我們要部署到Github。

注意1：執行hexo server提示找不到該指令

解決辦法：在Hexo 3.0 后server被單獨出來了，需要安裝server，安裝的命令如下：

sudo npm install hexo-server
或者
npm install hexo -server --save

關聯 Hexo 與 GitHub Pages

我們如何讓本地git項目與遠程的github建立聯系呢？用 SSH keys

生成SSH keys

輸入你自己的郵箱地址

ssh-keygen -t rsa -C "80583600@qq.com"

在回車中會提示你輸入一個密碼，這個密碼會在你提交項目時使用，如果為空的話提交項目時則不用輸入，我們按回車不設置密碼。

添加 SSH Key 到 GitHub

打開 C:\Users\bxm09\.ssh\id_rsa.pub，此文件里面內容為剛才生成的密鑰，準確的復制這個文件的內容，粘貼到 的 new SSH key 中

測試

可以輸入下面的命令，看看設置是否成功，git@github.com的部分不要修改：

ssh -T git@github.com

如果是下面的反饋：

The authenticity of host ‘github.com (207.97.227.239)’ can’t be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

不要緊張，輸入yes就好，然后會看到：

Hi aierui! You've successfully authenticated, but GitHub does not provide shell access.

配置Git個人信息

現在你已經可以通過 SSH 鏈接到 GitHub 了，還有一些個人信息需要完善的。
Git 會根據用戶的名字和郵箱來記錄提交。GitHub 也是用這些信息來做權限的處理，輸入下面的代碼進行個人信息的設置，把名稱和郵箱替換成你自己的。

git config --global user.name "bxm0927"
git config --global user.email "80583600@qq.com"

配置 Deployment

在_config.yml文件中，找到Deployment，然后按照如下修改，用戶名改成你的：

需要注意的是：冒號后面記得空一格！

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
 type: git
 repo: git@github.com:bxm0927/bxm0927.github.io.git
 branch: master

本地文件提交到 GitHub Pages

// 刪除舊的 public 文件
hexo clean

// 生成新的 public 文件
hexo generate
或者
hexo g

// 開始部署
hexo deploye
或者
hexo d

在瀏覽器中輸入 https://bxm0927.github.io （用戶名改成你的）看到了 Hexo 與 GitHub Pages 已經成功關聯了，哇哇哇哇哇哇，開心死你了，不要忘了回來給我點贊喲 ~

注意1：若上面操作失敗，則需要提前安裝一個擴展：

npm install hexo-deployer-git --save

注意2：如果在執行 hexo d 后,出現 error deployer not found:github 的錯誤（如下），則是因為沒有設置好 public key 所致，重新詳細設置即可。

Permission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.

注意3：怎么避免 .md 文件被解析？

Hexo原理就是hexo在執行hexo generate時會在本地先把博客生成的一套靜態站點放到public文件夾中，在執行hexo deploy時將其復制到.deploy文件夾中。Github的版本庫通常建議同時附上README.md說明文件，但是hexo默認情況下會把所有md文件解析成html文件，所以即使你在線生成了 README. md，它也會在你下一次部署時被刪去。怎么解決呢？

在執行hexo deploy前把在本地寫好的README.md文件復制到.deploy文件夾中，再去執行hexo deploy。

GitHub Pages 地址解析到個人域名

Github Pages 是面向用戶、組織和項目開放的公共靜態頁面搭建托管服 務，站點可以被免費托管在 Github 上，你可以選擇使用 Github Pages 默 認提供的域名 github.io 或者自定義域名來發布站點。

看著博客的域名是二級域名，總有一種寄人籬下的感覺，為了讓這個小窩看起來更加正式，我在阿里云上買了一個域名，打算將博客綁定自己的域名。

進行該綁定過程，其實就是一個重定向的過程。

在 GitHub 倉庫的根目錄下建立一個 CNAME 的文本文件(注意：沒有擴展名)，文件里面只能輸入一個你的域名，不能加http://

www.lovebxm.com

注意：CNAME 一定是在你 Github 項目的 master 根目錄下

進入阿里云域名解析地址，添加解析：

1. 記錄類型選擇CNAME

2. 主機記錄填www

3. 解析線路選擇默認

4. 記錄值填yourname.github.io

5. TTL值為10分鐘

6. 再添加一個解析，記錄類型A

7. 主機記錄填www

8. 解析線路選擇默認

9. 記錄值填你GitHub 的ip地址（在cmd中ping：）

ping bxm0927.github.com

點擊保存，等 1 分鐘，訪問下你自己的域名，一切就ok了。

域名綁定成功，域名解析成功，因此你在瀏覽中輸入 www.lovebxm.com，或 lovebxm.com 就可以訪問到博客了，輸入 bxm0927.github.io 會重定向到 www.lovebxm.com。過程：www 的方式，會先解析成 http://xxxx.github.io，然后根據 CNAME 再變成 www

注意：CNAME文件在下次 hexo deploy的時候就消失了，需要重新創建，這樣就很繁瑣

方法一：每次 hexo d 之后，就去 GitHub 倉庫根目錄新建 CNAME文件

方法二：在 hexo g 之后， hexo d 之前，把CNAME文件復制到 “\public" 目錄下面，里面寫入你要綁定的域名。

方法三（推薦）：將需要上傳至github的內容放在source文件夾，例如CNAME、favicon.ico、images等，這樣在 hexo d 之后就不會被刪除了。

方法四：通過安裝插件實現永久保留

$ npm install hexo-generator-cname --save

之后在_config.yml中添加一條

plugins:
- hexo-generator-cname

需要注意的是：如果是在github上建立的CNAME文件，需要先clone到本地，然后安裝插件，在deploy上去即可。CNAME只允許一個域名地址。

注意1：每次生成的 CNAME 都是 yoursite.com 怎么解決？

修改 _config.yml

url: 
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

Hexo 的常用操作

發表一篇文章

hexo new "文章標題"

D:\GitHub\Hexo\test>hexo new "文章標題"
INFO Created: D:\GitHub\Hexo\test\source\_posts\文章標題.md

在本地博客文件夾 source\_posts 文件夾下看到我們新建的 markdown 文件。

當然，我們也可以手動添加Markdown文件在source->_deploy文件夾下，其效果同樣可以媲美hexo new

文章編輯好之后，運行生成、部署命令：

hexo clean

hexo g

hexo d

當然你也可以執行下面的命令，相當于上面兩條命令的效果

hexo clean

hexo d -g

新建一個自定義頁面

hexo new page folder

文章如何添加多個標簽

有兩種多標簽格式

tags: [a, b, c]
或
tags:
 - a
 - b
 - c

顯示部分文章內容

如果在博客文章列表中，不想全文顯示，可以增加 <!-- more -->, 后面的內容就不會顯示在列表。

<!--more-->

更改主題

官方主題庫：https://hexo.io/themes/

Hexo主題非常，推薦使用 Next 為主題，請閱讀 Next 的官方文檔（ ），5 分鐘快速安裝。

再提示一點，大家可以hexo主題修改一步就hexo s看下變化，初次接觸對參數不清楚。只有hexo s后在可以在本地瀏覽到效果，Ctrl+C 停止服務器。

添加插件

添加 sitemap 和 feed 插件

切換到你本地的 hexo 目 CIA ，在命令行窗口，輸入以下命令

npm install hexo-generator-feed -save
npm install hexo-generator-sitemap -save

修改 _config.yml，增加以下內容

# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
#Feed Atom
feed:
 type: atom
 path: atom.xml
 limit: 20
#sitemap
sitemap:
 path: sitemap.xml

再執行以下命令，部署服務端

hexo d -g

配完之后，就可以訪問 https://bxm0927.github.io/atom.xml 和 https://bxm0927.github.io/sitemap.xml ，發現這兩個文件已經成功生成了。

添加 404 頁面

GitHub Pages 自定義404頁面非常容易，直接在根目錄下創建自己的404.html就可以。但是自定義404頁面僅對綁定頂級域名的項目才起作用，GitHub默認分配的二級域名是不起作用的，使用hexo server在本機調試也是不起作用的。

其實，404頁面可以做更多有意義的事，來做個404公益項目吧。

推薦使用騰訊公益404 ：

<script type="text/javascript"
 src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js?1.1.11"
 charset="utf-8"
 homePageUrl="http://www.lovebxm.com/"
 homePageName="回到我的主頁">
</script>

復制上面代碼，貼粘到目錄下新建的404.html即可！

多PC同步管理博客

很多人可能家里一臺筆記本，公司一個臺式機，想兩個同時管理博客，同時達到備份的博客主題、文章、配置的目的。下面就介紹一下用github來備份博客并同步博客。

1. A電腦備份博客內容到github

配置.gitignore文件。進入博客目錄文件夾下，找到此文件，用sublime text 打開，在最后增加兩行內容/.deploy_git和/public

1. 初始化倉庫。

在博客根目錄下，在git bash下依次執行git init和git remote add origin 為遠程倉庫地址。

1. 同步到遠程倉庫。

gitbash下依次執行以下命令

git add . #添加目錄下所有文件

git commit -m "更新說明" #提交并添加更新說明

git push -u origin master #推送更新到遠程倉庫

1. B電腦拉下遠程倉庫文件

在B電腦上同樣先安裝好node、git、ssh、hexo，然后建好hexo文件夾，安裝好插件，（然后選做：將備份到遠程倉庫的文件及文件夾刪除），然后執行以下命令：

git init

git remote add origin <server>

git fetch --all

git reset --hard origin/master

1. 發布博客后同步

在B電腦發布完博客之后，記得將博客備份同步到遠程倉庫
執行以下命令：

git add .

#可以用git master 查看更改內容

git commit -m "更新信息"

git push -u origin master #以后每次提交可以直接git push

平時同步管理
每次想寫博客時，先執行：git pull進行同步更新。發布完文章后同樣按照上面的 發布博客后同步 同步到遠程倉庫。

中文亂碼

在 md 文件中寫中文內容，發布出來后為亂碼，原因是 md 的編碼不對，將 md 文件另存為UTF-8編碼的文件即可解決問題。

結束語

建站的系統有很多，如：
- Hexo + GitHub Pages
- Jekyll + GitHub Pages
- WordPress + 服務器 + 域名
- DeDeCMS + 服務器 + 域名
- …

使用 Hexo + GitHub Pages 建站，有優點也有缺點：
- GitHub Pages 不支持數據庫管理，所以你只能做靜態頁面的博客，不能像其他博客（如 WordPress）那樣通過數據庫管理自己的博客內容。
- 但是，GitHub Pages 無需購置服務器，免服務器費的同時還能做負載均衡，github pages有300M免費空間。
- 個人博客真的有必要用數據庫嗎？答案是否定的。博客靜態化，評論記錄使用第三方的 網易云跟帖就可以了。靜態的博客更有利于搜索引擎蜘蛛爬取，輕量化的感覺真的很好。
- 通過 Hexo 你可以輕松地使用 Markdown 編寫文章，非常符合我的口味。Markdown 真的是專門針對程序員開發的語言啊，現在感覺沒有 Markdown什么都不想寫。什么富文本編輯器，什么word，太麻煩了！而且樣式都好丑！效率太低！

推薦幾個很好用的在線 Markdown 編輯器：
- 作業部落：
- 馬克飛象：https://maxiang.io

推薦圖床：
- 極簡圖床 + chrome 插件 + 七牛空間，七牛云儲存提供10G的免費空間,以及每月10G的流量，存放個人博客外鏈圖片最好不過了，七牛云儲存還有各種圖形處理功能、縮略圖、視頻存放速度也給力。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com