基於hexo+github搭建一個獨立博客


一直聽說用hexo搭建一個擁有自己域名的博客是很酷炫的事情~,在這十一花上半個小時整個hexo博客豈不美哉。

使用Hexo吸引我的是,其簡單優雅, 而且風格多變, 適合程序員搭建個人博客,而且支持多平台的搭建,再加上有些node,git基礎,分分鍾創建出一個高大上的博客。廢話少說,開始吧。

准備工作

1.node:用來生成靜態頁面的 到Node.js官網下載相應平台的最新版本,一路安裝即可。

2.git: 把本地的hexo內容提交到github上去.沒有安裝的可以看此教程

3.github:用來做博客的遠程創庫、域名、服務器。(~不多說了)

然后你還要知道一點點linux命令,域名解析相關知識(以上條件你都達到了,那么恭喜你30分鍾搭建倒計時開始~)

安裝Hexo

(本人是Mac系統,其他系統的朋友這部分可以看官網教程

當Node.js和Git都安裝好后就可以正式安裝Hexo了,終端執行如下命令:

$ sudo npm install -g hexo

輸入管理員密碼即開始安裝

Hexo官網上的安裝命令是$ npm install -g hexo-cli,安裝時不要忘記前面加上sudo,否則會因為權限問題報錯。
注意坑一

初始化

終端cd到一個你選定的目錄(比如創建一個blog文件,$cd blog),執行hexo init命令:

$ hexo init

在blog目錄下,執行如下命令,安裝npm:

$ npm install

執行如下命令,開啟hexo服務器:

$ hexo s

此時,瀏覽器中打開網址http://localhost:4000,能看到如下頁面:

 

本地設置好后,接下來開始關聯Github。

1.創建倉庫

登錄你的Github帳號,新建倉庫,名為用戶名.github.io固定寫法。

本地的blog文件夾下內容為:

_config.yml    
db.json 
node_modules 
package.json
scaffolds
source
themes

終端cd到blog文件夾下,vim打開_config.yml,命令如下:

$ vim _config.yml

打開后往下滑到最后,修改成下邊的樣子:

deploy:
    type: git
    repository: https://github.com/MuYunyun/MuYunyun.github.io.git
    branch: master

你需要將repository后MuYunyun換成你自己的用戶名  

注意坑二:在配置所有的_config.yml文件時(包括theme中的),在所有的冒號:后邊都要加一個空格,否則執行hexo命令會報錯,切記 切記
注意坑二

blog文件夾目錄下執行生成靜態頁面命令:

$ hexo generate        或者:hexo g
此時若出現如下報錯:
ERROR Local hexo not found in ~/blog
ERROR Try runing: 'npm install hexo --save'
則執行命令:
npm install hexo --save
若無報錯,自行忽略此步驟。

再執行配置命令:

$ hexo deploy            或者:hexo d

注意坑三:若執行命令hexo deploy仍然報錯:無法連接git或找不到git,則執行如下命令來安裝hexo-deployer-git

$ npm install hexo-deployer-git --save

若你未關聯Github,則執行hexo deploy命令時終端會提示你輸入Github的用戶名和密碼,即

Username for 'https://github.com':
Password for 'https://github.com':

hexo deploy命令執行成功后,瀏覽器中打開網址http://MuYunyun.github.io(將MuYunyun換成你的用戶名)能看到和打開http://localhost:4000時一樣的頁面。 

 

為避免每次輸入Github用戶名和密碼的麻煩,可參照第二節方法

2.添加ssh key到Github

1.1.檢查SSH keys是否存在Github

執行如下命令,檢查SSH keys是否存在。如果有文件id_rsa.pubid_dsa.pub,則直接進入步驟1.3將SSH key添加到Github中,否則進入下一步生成SSH key。

$ ls -al ~/.ssh

1.2.生成新的ssh key

執行如下命令生成public/private rsa key pair,注意將your_email@example.com換成你自己注冊Github的郵箱地址。

$ ssh-keygen -t rsa -C "your_email@example.com"

默認會在相應路徑下(~/.ssh/id_rsa.pub)生成id_rsaid_rsa.pub兩個文件。

1.3.將ssh key添加到Github中

Find前往文件夾~/.ssh/id_rsa.pub打開id_rsa.pub文件,里面的信息即為SSH key,將這些信息復制到Github的Add SSH key頁面即可。

進入Github --> Settings --> SSH keys --> add SSH key:

Title里任意添一個標題,將復制的內容粘貼到Key里,點擊下方Add key綠色按鈕即可。

3.發布文章

終端cd到blog文件夾下,執行如下命令新建文章:

hexo new "postName"

名為postName.md的文件會建在目錄/blog/source/_posts下。

文章編輯完成后,終端cd到blog文件夾下,執行如下命令來發布: 

hexo generate             //生成靜態頁面
hexo deploy            //將文章部署到Github

 

安裝theme

你可以到Hexo官網主題頁去搜尋自己喜歡的theme。這里以hexo-theme-next為例

終端cd到 blog 目錄下執行如下命令:

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

blog目錄下_config.ymltheme的名稱landscape修改為next

終端cd到blog目錄下執行如下命令(每次部署文章的步驟):

$ hexo clean           //清除緩存文件 (db.json) 和已生成的靜態文件 (public)
$ hexo g             //生成緩存和靜態文件
$ hexo d             //重新部署到服務器

至於更改theme內容,比如名稱,描述,頭像等去修改blog/_config.yml文件和blog/themes/next/_config.yml文件中對應的屬性名稱即可,不要忘記冒號:后加空格。NexT 使用文檔里有極詳細的介紹。

綁定個人域名

首先假設你有一個域名並且是可用狀態。修改你域名的DNS地址為 f1g1ns1.dnspod.netf1g1ns2.dnspod.net

 

現在使用的域名是Github提供的二級域名,也可以綁定為自己的個性域名。購買域名,我是在萬網買的,可直接在其網站做域名解析。

1.Github端

/blog/themes/landscape/source目錄下新建文件名為:CNAME文件,注意沒有后綴名!直接將自己的域名如:muyunyun.cn寫入。

終端cd到blog目錄下執行如下命令重新部署:

$ hexo clean
$ hexo g
$ hexo d
網上許多都是說在Github上直接新建CNAME文件,如果這樣的話,在你下一次執行hexo d部署命令后CNAME文件就消失了,因為本地沒有此文件嘛。
注意坑四

2.域名解析

如果將域名指向一個域名,實現與被指向域名相同的訪問效果,需要增加CNAME記錄。登錄萬網,在你購買的域名后邊點擊:解析 --> 添加解析

記錄類型:CNAME

主機記錄:將域名解析為example.com(不帶www),填寫@或者不填寫

記錄值:MuYunyun.github.io. (不要忘記最后的.MuYunyun改為你自己的用戶名),點擊保存即可,如下圖:

ps:萬網DNS地址更換貌似需要一段時間才能生效,如果不能訪問請晚點或者隔天再訪問域名,如果還是不行可能就是出問題了。

鐺鐺鐺,點擊MuYunyun.github.io和訪問http://muyunyun.cn/訪問效果一致

 

總結和說明

github pages雖然免費,但畢竟是國外的服務器,國內訪問可以稍微緩慢,如果可以的話,可去買一個支持Node.js的國內雲空間即可。可以參考我之前寫的

1元搭建自己的雲服務器~~搭建好這個博客,滿滿的成就感。祝大家節日快樂~~

 

參考鏈接:Mac上搭建基於GitHub的Hexo博客 (這篇博文寫得已經大部分很到位了,本文是基於這篇博文上做了些改動,博文所寫的都經過實踐,如有錯誤,歡迎指正)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM