可能是最詳細的 Hexo + GitHub搭建博客的教程

GitHub Hexo Pages HTML IT優就業 2017-06-02

寫博客的好處,不是為了寫而寫,而是一個記錄思想的過程。不要考慮它能帶給你什麼,而是你自己從中收穫了什麼。

最近剛好有空,於是就參照網上的各種教程,搭建了一個博客。現在把 Hexo + GitHub Pages 搭建博客的完整過程記錄下來:

文章很長,希望能夠大家耐心讀下去

目錄流程

1. 搭建 Node.js 環境

2. 搭建 Git 環境

3. GitHub 註冊和配置

4. 安裝配置 Hexo

5. 關聯 Hexo 與 GitHub Pages

6. GitHub Pages 地址解析到個人域名

7. Hexo 的常用操作

8. 結束語

搭建 Node.js 環境

為什麼要搭建 Node.js 環境? - 因為 Hexo 博客系統是基於 Node.js 編寫的

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

在 Node.js 官網:https://nodejs.org/en/ 下載安裝包

v6.10.3 LTS

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

然後打開命令提示符,輸入

node -v

npm -v

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

可能是最詳細的 Hexo + GitHub搭建博客的教程

搭建 Git 環境

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

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

在 Git 官網:https://git-scm.com/ 下載安裝包

Git-2.13.0-64-bit.exe

可能是最詳細的 Hexo + GitHub搭建博客的教程

桌面右鍵,打開

Git Bush Here

,輸入

git --version

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

可能是最詳細的 Hexo + GitHub搭建博客的教程

GitHub 註冊和配置

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

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

創建倉庫:Repository name 使用自己的用戶名,倉庫名規則:

注意

yourname

必須是你的用戶名。

yourname/yourname.github.io

可能是最詳細的 Hexo + GitHub搭建博客的教程

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

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

安裝配置 Hexo

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

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

可能是最詳細的 Hexo + GitHub搭建博客的教程

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

npm install hexo-cli -g

然後你將會看到下圖,可能你會看到一個

WARN

,但是不用擔心,這不會影響你的正常使用。

可能是最詳細的 Hexo + GitHub搭建博客的教程

查看Hexo的版本

hexo version

可能是最詳細的 Hexo + GitHub搭建博客的教程

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

hexo init bxm0927.github.io

新建完成後,指定文件夾的目錄如下:

.

運行本地 Hexo 服務

hexo server

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

可能是最詳細的 Hexo + GitHub搭建博客的教程

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

解決辦法:在Hexo 3.0 後server被單獨出來了,需要安裝server,安裝的命令如下:

sudo npm install hexo-server

關聯 Hexo 與 GitHub Pages

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

生成SSH keys

輸入你自己的郵箱地址

ssh-keygen -t rsa -C "[email protected]"

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

添加 SSH Key 到 GitHub

打開 C:\Users\bxm09\.ssh\id_rsa.pub,此文件裡面內容為剛才生成的密鑰,準確的複製這個文件的內容,粘貼到 https://github.com/settings/ssh 的 new SSH key

測試

可以輸入下面的命令,看看設置是否成功,[email protected]的部分不要修改:

ssh -T [email protected]

如果是下面的反饋:

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"

配置 Deployment

_config.yml文件中,找到Deployment,然後按照如下修改,用戶名改成你的:

需要注意的是:冒號後面記得空一格!

# Deployment

本地文件提交到 GitHub Pages

// 刪除舊的 public 文件

在瀏覽器中輸入 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

可能是最詳細的 Hexo + GitHub搭建博客的教程

點擊保存,等 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:

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

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

修改 _config.yml

url: http://www.lovebxm.com

Hexo 的常用操作

發表一篇文章

hexo new "文章標題"

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

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

文章編輯好之後,運行生成、部署命令:

hexo clean

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

hexo clean

新建一個自定義頁面

hexo new page folder

文章如何添加多個標籤

有兩種多標籤格式

tags: [a, b, c]

顯示部分文章內容

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

<!--more-->

更改主題

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

Hexo主題非常,推薦使用 Next 為主題,請閱讀 Next 的官方文檔( http://theme-next.iissnan.com/ ),5 分鐘快速安裝。

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

添加插件

添加 sitemap 和 feed 插件

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

npm install hexo-generator-feed -save

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

# Extensions

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

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在本機調試也是不起作用的。

可能是最詳細的 Hexo + GitHub搭建博客的教程

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

推薦使用騰訊公益404 http://www.qq.com/404/ :

<script type="text/javascript"

複製上面代碼,貼粘到目錄下新建的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 . #添加目錄下所有文件
  1. B電腦拉下遠程倉庫文件

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

git init
  1. 發佈博客後同步

在B電腦發佈完博客之後,記得將博客備份同步到遠程倉庫

執行以下命令:

git add .

平時同步管理

每次想寫博客時,先執行: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,太麻煩了!而且樣式都好醜!效率太低!


優就業500萬陽光就業基金:http://www.ujiuye.com/zt/jyfc/?wt.bd=zt36716

優就業官網:http://www.ujiuye.com/?wt.bd=zt36716

相關推薦

推薦中...