Hexo + GitHub Pages搭建博客

搭建 Node.js 環境

爲何要搭建 Node.js 環境？ – 由於 Hexo 博客系統是基於 Node.js 編寫的

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

在 Node.js 官網：https://nodejs.org/en/下載最新安裝包LTS版

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

而後打開命令提示符，輸入

node -v npm -v

出現版本號則說明 Node.js 環境配置成功，第一步完成！！！

搭建 Git 環境

爲何要搭建 Git 環境？ – 由於須要把本地的網頁和文章等提交到 GitHub 上。

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

在 Git 官網：https://git-scm.com/下載適合本身系統的安裝包

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

開始菜單Git Bash

或桌面右鍵打開Git Bush Here輸入

git --version

出現版本號則說明 Git 環境配置成功，第二步完成！

GitHub 註冊和配置

GitHub 是一個代碼託管平臺，由於只支持 Git 做爲惟一的版本庫格式進行託管，故名 GitHub。

Github註冊：https://github.com/

建立倉庫：Repository name 使用本身的用戶名，倉庫名規則：

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

yourname/yourname.github.io

例如個人是：mdd1991.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 mdd1991.github.io

cd mdd1991.github.io npm install

出現警告，在網上搜索忽略警告便可：

新建完成後，指定文件夾的目錄以下：

├── .deploy        #須要部署的文件

├── node_modules    #Hexo插件

├── public          #生成的靜態網頁文件

├── scaffolds      #模板

├── source          #博客正文和其餘源文件，40四、favicon、CNAME 都應該放在這裏

| ├── _drafts      #草稿

| └── _posts        #文章

├── themes          #主題

├── _config.yml    #全局配置文件

└── package.json    #npm 依賴等

運行本地 Hexo 服務

hexo server

或者

hexo s

若出現防火牆點擊肯定。

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

在瀏覽器中訪問一直打不開怎麼辦？緣由是端口被另外一個程序佔用，也沒提示，換個端口好比：4001就能夠了。

hexo server --port=<other port>

注意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 "donnymoving@gmail.com"

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

添加 SSH Key 到 GitHub

打開上面提示的路徑C:\Users\User\.ssh\id_rsa.pub，此文件裏面內容爲剛纔生成的密鑰，準確的複製這個文件的內容，粘貼到https://github.com/settings/ssh的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 mdd1991! You’ve successfully authenticated, but GitHub does not provide shell access.

配置Git我的信息

如今你已經能夠經過 SSH 連接到 GitHub 了，還有一些我的信息須要完善的。

Git 會根據用戶的名字和郵箱來記錄提交。GitHub 也是用這些信息來作權限的處理，輸入下面的代碼進行我的信息的設置，把名稱和郵箱替換成你本身的。

git config --global user.name "Donny" git config --global user.email "donnymoving@gmail.com"

配置 Deployment

複製mdd1991.github.io路徑

在_config.yml文件中，找到Deployment，而後按照以下修改，用戶名改爲你的：

須要注意的是：冒號後面記得空一格！

# Deployment

## Docs: https://hexo.io/docs/deployment.html

deploy:

type: git

repo: git@github.com:mdd1991/mdd1991.github.io.git

branch: master

本地文件提交到 GitHub Pages

// 刪除舊的 public 文件

hexo clean

// 生成新的 public 文件

hexo generate

或者

hexo g

// 開始部署

hexo deploy

或者

hexo d

注意1：若上面操做提示ERROR Deployer not found: git，則須要安裝一個擴展：

npm install hexo-deployer-git --save

而後再部署便可解決。須要注意的是yaml語法要求嚴格，注意空格。若一直不行，建議把github地址那條語句從新手寫一遍，每一個冒號後面要有一個半角的空格。

若最後顯示INFO Deploy done: git，表示部署已經成功了，而後在瀏覽器中輸入https://mdd1991.github.io（用戶名改爲你的）看到了 Hexo 與 GitHub Pages 已經成功關聯了，哇哇哇哇哇哇，開心死你了，不要忘了回來給我點贊喲 ~

注意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_git文件夾中。Github的版本庫一般建議同時附上README.md說明文件，可是hexo默認狀況下會把全部md文件解析成html文件，因此即便你在線生成了 README. md，它也會在你下一次部署時被刪去。怎麼解決呢？

將README.md放在source文件夾，而後修改_config.yml，設置 skip_render: README.md選項就好了，將不須要渲染的文件名稱加入的其選項下就好了。

GitHub Pages 地址解析到我的域名

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

看着博客的域名是二級域名，總有一種寄人籬下的感受，爲了讓這個小窩看起來更加正式，我在阿里雲上買了一個域名，打算將博客綁定本身的域名。進行該綁定過程，其實就是一個重定向的過程。

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

www.aboysblog.com

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

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

記錄類型選擇CNAME

主機記錄填www

解析線路選擇默認

記錄值填yourname.github.io

TTL值爲10分鐘

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

主機記錄填www

解析線路選擇默認

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

ping mdd1991.github.com

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

域名綁定成功，域名解析成功，所以你在瀏覽中輸入www.aboysblog.com，或 aboysblog.com 就能夠訪問到博客了，輸入 mdd1991.github.io 會重定向到www.aboysblog.com。過程：www 的方式，會先解析成http://xxxx.github.io，而後根據 CNAME 再變成 www

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

方法一：在hexo g以後，hexo d以前，把CNAME文件複製到 「\public」 目錄下面，裏面寫入你要綁定的域名。

方法二：將須要上傳至github的內容放在source文件夾，例如README.md、CNAME、favicon.ico、images等，這樣在 hexo d 以後就不會被刪除了。

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

修改 _config.yml

url: http://www.aboysblog.com

root: /

permalink: :year/:month/:day/:title/

permalink_defaults:

Hexo 的經常使用操做

發表一篇文章

hexo new "文章標題"

 

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

固然，咱們也能夠手動添加Markdown文件在source->_posts文件夾下，其效果一樣能夠媲美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 -->, 後面的內容就不會顯示在列表。

更改主題

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

Hexo主題很是，推薦使用Next爲主題，請閱讀 Next 的官方文檔（http://theme-next.iissnan.com/），5 分鐘快速安裝。

再提示一點，你們能夠hexo主題修改一步就hexo s看下變化，初次接觸對參數不清楚。只有hexo s後在能夠在本地瀏覽到效果，Ctrl+C 中止服務器。