Mac上搭建基于GitHub/Coding的Hexo博客

環境配置

Hexo官網上本就有對Hexo安裝及使用的詳細介紹,強烈推薦。這里來講述自己安裝的親身步驟,或有區別。

1.Node.js

用來生成靜態頁面。移步Node.js官網,下載v6.10.0 LTS 一路安裝即可。

2.Git

用來將本地Hexo內容提交到Github上。Mac OS自帶Git,這里不再贅述。如果沒有可以參考Hexo官網上的安裝方法。

安裝Hexo

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

sudo npm install -g hexo

輸入管理員密碼(Mac登錄密碼)即開始安裝 (sudo:linux系統管理指令 -g:全局安裝)

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

初始化

終端cd到一個你選定的目錄,執行hexo init命令:

hexo init myblog

myblog是你建立的文件夾名稱。cd到myblog文件夾下,執行如下命令,安裝npm:

npm install

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

hexo s

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

hexo-hello.png

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

關聯Github

1.創建倉庫

登錄你的Github帳號,新建倉庫,名為用戶名.github.io固定寫法,如jovelin.github.io即下圖中所示:

repositories.png

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

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

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

vim _config.yml

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

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

你需要將repository后jovelin換成你自己的用戶名,地址在GitHub倉庫獲取。hexo 3.1.1版本后type:值為git。

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

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

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

再次執行hexo generate和hexo deploy命令。

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

Username for 'https://github.com': GitHub用戶名
Password for 'https://github.com': GitHub密碼

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

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

2.添加ssh key到Github

1.1.檢查SSH keys是否存在Github

執行如下命令,檢查SSH keys是否存在。如果有文件id_rsa.pub或id_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_rsa和id_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到myblog文件夾下,執行如下命令新建文章:

hexo new "firstArticle"

名為firstArticle.md的文件會建在目錄/blog/source/_ posts下,firstArticle是文件名,為方便鏈接不建議摻雜漢字。你當然可以用vim來編輯文章。還可以用Mou、Atom編輯器,支持預覽!

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

hexo generate               //生成靜態頁面

hexo deploy         //將文章部署到Github

至此,Mac上搭建基于Github的Hexo博客就完成了。下面的內容是介紹安裝theme和綁定個人域名,如果有興趣且還有耐心的話,請繼續吧。

安裝Theme

你可以到Hexo官網主題頁去搜尋自己喜歡的theme。這里以hexo-theme-next為例
終端cd到 myblog 目錄下執行如下命令:

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

將myblog目錄下_config.yml里theme的名稱landscape修改為next

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

hexo clean   //清除緩存文件 (db.json) 和已生成的靜態文件 (public)

hexo g       //生成緩存和靜態文件

hexo d       //重新部署到服務器

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

注意坑四:hexo g 時會根據NexT.Mist主題重新生成緩存和靜態文件,如果要修改頭像的話,記得替換/myblog/themes/next/source/images/avatar.gif圖片, 其它的文件同理!

綁定個人域名

現在使用的域名是Github提供的二級域名,也可以綁定為自己的個性域名。購買域名,可以到GoDaddy官網,網友親切稱呼為:狗爹,也可以到阿里萬網新網購買。我是在萬網買的,可直接在其網站做域名解析。

1.Github端

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

CNAME.png

2.域名解析

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

記錄類型:CNAME

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

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

domain.png

[海外]是從國外訪問時的鏈接,開始使用[默認]國內就行。

此時,點擊訪問http://jovelin.cn和訪問http://jovelin.github.io效果一致。

1、把Github項目轉移到Coding.net

操作如下:

1.首先找到github的托管地址https://github.com/***/*****.git
比如:https://github.com/jovelin/jovelin.github.io.git

2.在coding.net上創建個私有倉庫,不用同步本地代碼比如新倉庫地址為https://git.coding.net/xxx/xxxxx.git
比如:https://git.coding.net/jovelin/jovelin.git

3.在控制臺cd到桌面路徑

git clone --bare https://github.com/***/******.git
//--bare 創建的克隆版本庫都不包含工作區,直接就是版本庫的內容,這樣的版本庫稱為裸版本庫。

然后桌面就會出現一個xxxxx.git 這就是在github上的項目

4.使用鏡像推送的方式上傳代碼到新的服務器

cd xxxx.git
git -push --mirror https://git.coding.net/xxx/xxxxx.git
//https://git.coding.net/xxx/xxxxx.git  是coding.net倉庫地址

5.刪除本地代碼

cd ..//返回上一路徑
rm -rf xxxx.git //干掉

6.從新服務器clone下來

git clone https://git.coding.net/xxx/xxxxx.git
2、將個人博客同時部署到 GitHub 和 Coding

1、首先到 Coding 上注冊并開一個項目,項目名稱和用戶個性后綴相同(方便二級域名訪問博客),拿到項目的 https 地址(上面操作已克隆好GitHub上的項目)

2、打開本地 myblog 目錄下的 _config.yml 文件,修改如下

deploy:
  type: git
  repository:
            github: https://github.com/jovelin/jovelin.github.io.git
            coding: https://git.coding.net/jovelin/jovelin.git
  branch: master

3、cd 到本地 myblog/source 目錄下執行如下命令新建 Staticfile 文件

touch Staticfile  //名字必須是Staticfile

原因是 coding.net 需要以這個文件來作為靜態文件部署的標志,就是說看到這個 Staticfile 就知道按照靜態文件來發布。

4、執行發布命令 hexo g 、 hexo d

5、個人域名添加兩條 CNAME 解析。將 jovelin.github.io. 解析為 [海外] ,將 jovelin.coding.me. 解析為 [默認]


domain.png

這樣就是為了從國內訪問 jovelin.cn 就是訪問 Coding 上的博客項目,從國外訪問 jovelin.cn 就是訪問 GitHub 上的博客項目。

6、到 Coding 上的博客項目主頁,點擊 Pages服務 輸入部署分支 master 立即開啟

Pages.png

這樣就可以訪問自己在 Coding 上的個人博客了 jovelin.coding.me/jovelin 如果像這樣你的用戶后綴名與博客項目名稱相同你還可以省略項目名稱直接訪問 jovelin.coding.me

Pages.png

7、添加域名綁定,輸入個人域名就 OK 了,可能需要耐心等待幾分鐘,這樣在國內訪問自己的博客就快得多了。

OK,大功告成!

參考鏈接

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,606評論 6 533
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,582評論 3 418
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,540評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,028評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,801評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,223評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,294評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,442評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,976評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,800評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,996評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,543評論 5 360
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,233評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,662評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,926評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,702評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,991評論 2 374

推薦閱讀更多精彩內容