Windows下一步步搭建自己的獨立博客——使用 GitHub Pages + Hexo 基礎教程(一)


-此教程不僅面向計算機專業(yè)的同學,任何想搭建個人獨立博客的同學,都可以來看看-
--By Y.R.H


摘要:本文是一篇關于如何在 Windows 下搭建一個獨立博客的教程,里面介紹了如何使用 GitHub PagesHexo 搭建一個屬于自己的博客,并配置它的過程。


前言

偶然間發(fā)現我的姓名拼音的域名沒有被人購買,心想,作為一名準程序員,怎么能把個人域名讓給別人,于是勒緊褲腰帶,花光身上僅剩的一點點積蓄將其買了下來,買下來后不知道用它能做點什么(我不會網頁制作),想起了很久以前在知乎上看到的一個問題:如何搭建個人獨立博客,心想閑著也是閑著,不如折騰一下,說不定就能成功,以后把學習筆記什么的都放到個人博客上,之后回味起來也方便,于是便開始查資料,經過兩天的折騰,個人博客也基本成型了,搭建的步驟也差不多都很熟練了,于是便寫下這篇教程,有兩個目的:其一,熟練markdown的語法(此教程使用純 markdown 寫成),并整理下自己的思路,鍛煉下自己的語言表達能力;其二,本著能幫一個是一個,大家一起討論才能進步的原則,將自己所學到的知識分享給各位小伙伴,大家一起折騰起來,我們一同學習,一同進步。

有人可能會問為什么要寫博客?請看這里

特別鳴謝:陳素封,我也是跟著他的教程一點一點學會的。
特別聲明:此教程中部分內容轉自cnFeat編寫的教程大家也可移步去學習


為什么要搭建獨立博客

  • 1 獨立的才是自己的
  • 2 鍛煉自己的動手能力
  • 3 更好的宣傳自己

新人須知

  • 1 請保持足夠的耐心
  • 2 善于使用搜索引擎
  • 3 可以適當了解寫網頁制作的基礎知識

為什么選擇GitHub Pages

很多人用wordpress,你為什么要用GitHub Pages來搭建?

  • 1 GitHub Pages 有300M免費空間,資料自己管理,保存可靠;
  • 2 學著用 GitHub ,享受 GitHub 的便利,上面有很多大牛,眼界會開闊很多;
  • 3 順便看看 GitHub 工作原理,最好的團隊協作流程;
  • 4 GitHub 是趨勢;
  • 5 你不覺得一個文科生用 GitHub 很geek嗎?瞬間躋身技術界;
  • 6 就算 GitHub 被墻了,我可以搬到國內的 GitCafe 中去。

GitHub Pages 是什么?

GitHub Pages本用于介紹托管在GitHub的項目, 不過,由于他的空間免費穩(wěn)定,用來做搭建一個博客再好不過了。

GitHub Pages 可以被認為是用戶編寫的、托管在 GitHub 上的靜態(tài)網頁。

![](http://7xi78f.com1.z0.glb.clouddn.com/github pages.png)


注冊 GitHub

訪問:https://www.github.com
注冊十分簡單,一定要記住注冊時使用的郵箱,因為 GitHub 上很多通知都是通過郵箱的。
如圖:

申請成功后,在 GitHub 官網上登錄,并驗證郵箱。

如果還是不明白,詳細也可以看:
一步步在GitHub上創(chuàng)建博客主頁 全系列 by pchou(推薦)


環(huán)境安裝

依次下載安裝以下軟件(直接一直點下一步即可)

提示:若因種種原因 GitHub 客戶端沒登上自己的賬號,可以通過如下方法登錄,也可以通過此方法查看是否登錄成功
如圖:


測試 SSH Key

在桌面或開始菜單中找到 Git Shell(win7為例,win8及8.1 在 Metro 界面也可以找到)


  • 等待打開后輸入以下命令('$'符號無需輸入)

$ ssh -T git@github.com

如圖:


  • 如果是下面之類的反饋(或者顯示 Hi xxx):

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 xxx(你的用戶名)! You've successfully authenticated, but GitHub does not provide shell access.

這時,便測試成功了。
如圖:

提示:如果出現問題,請卸載 GitHub for Windows 客戶端,重新安裝一遍,或轉到使用 Git 方法
常見錯誤請參考:
GitHub Help - Generating SSH Keys
GitHub Help - Error Permission denied (publickey)


使用 GitHub Pages 建立博客

與 GitHub 建立好鏈接之后,就可以方便的使用它提供的 Pages 服務,GitHub Pages 分兩種,一種是你的GitHub用戶名建立的username.github.io這樣的用戶&組織頁(站),另一種是依附項目的pages。

想建立個人博客是用的第一種,形如yangruihan0306.github.io這樣的可訪問的站,每個用戶名下面只能建立一個。

GitHub 上建立倉庫

如圖:

提示:詳細可以看這里:一步步在GitHub上創(chuàng)建博客主頁(2)


使用 Hexo 創(chuàng)建博客框架

Hexo 介紹

A fast, simple & powerful blog framework

Hexo 安裝

打開 Git Shell (方法同上)
啟動后依次輸入以下命令:

$ cd /
$ npm install hexo-cli -g

如圖:

提示:cd / 作用是返回根目錄,Git Shell 默認裝在 C盤,啟動時默認路徑為 C:\Users\xxx(用戶名)\Documents\GitHub,輸入 cd / 命令后就返回到了 C盤根目錄下,需不需要使用 cd / 看個人習慣(下同)。

Hexo 部署

Hexo 的部署有兩種方法

第一種方法 命令 hexo init [文件名]

打開 Git Shell (方法同上)
啟動后依次輸入以下命令:

$ cd /
$ hexo init Hexo

回車后出現該提示則表示正確:

這時會發(fā)現 C盤根目錄下(或是 Git Shell 里指定的目錄下)會多出一個文件夾,名為 Hexo

再輸入以下命令,安裝依賴文件:

$ cd Hexo
$ npm install

回車后出現該提示則表示正確:

第二種方法 命令 hexo init

手動在 C盤根目錄下(或是自己指定的目錄下)創(chuàng)建一個文件夾,名為 Hexo。

如果在 C盤根目錄下
依次次輸入以下命令:

$ cd /
$ cd Hexo
$ hexo init

如果在自己指定的目錄下
依次次輸入以下命令:

$ cd your_file_path(你的文件夾路徑)
$ hexo init

回車后出現該提示則表示正確:

再輸入以下命令,安裝依賴文件:

$ npm install

回車后出現該提示則表示正確:

經過以上兩個方法的任意一種之后,Hexo 會自動在目標文件夾建立博客網站所需要的所有文件。
此時可以通過輸入以下命令在本地進行預覽(在剛才創(chuàng)建的文件夾里):

$ hexo generate (可以簡寫成: hexo g)
$ hexo server

系統(tǒng)可能會出現提示,請點擊允許。

如圖所示則表示正確:

此時打開瀏覽器,在瀏覽器地址欄輸入 http://localhost:4000/ (默認端口為4000)便可以看到最原始的博客了(以后發(fā)表博文想先預覽,也可以通過 hexo server 在本地先跑起來,看看效果)。

如圖:

恭喜,到目前為止個人博客的雛形已經有了。
在 Git Shell 中按 Ctrl + C 并輸入 y 可以停止該服務。

提示:如果在以上過程中,輸入帶有 npm 的命令時,報以下錯誤,則說明 Node.js 沒有裝好,請重裝

將本地文件部署到 GitHub

修改 Hexo 中的 _config.yml 文件

在 Hexo 文件夾下找到 _config.yml 文件
如圖:

找到其中的 deploy 標簽,改成如圖所示,并保存:

其中 branch 選項可以填寫 master 或 gh-pages。
如果你是為一個項目制作網站,那么需要把 branch 設置為 gh-pages 。若要綁定自定義域名也可以參考Hexo 或 Github Page 的幫助文檔,制作一個 CNAME 文件。

將其 deploy 到倉庫中

打開 Git Shell 進入創(chuàng)建的文件夾,依次輸入以下命令:

$ hexo clean
$ hexo generate
$ hexo deploy

如果出現如圖錯誤,不要著急:

deploy 的 type 改成 git,然后再在 Git Shell 中運行以下命令

$ npm install hexo-deployer-git --save

再重新來一遍:

$ hexo clean
$ hexo generate
$ hexo deploy

出現以下提示則表示正確:

恭喜,到這一步,個人博客就已經部署到 GitHub 上了,此時通過 your_user_name.github.io(即你那個倉庫的名稱,形如:"你的 GitHub 用戶名".github.io) 就可以看到你的個人博客了。

P.S:如果發(fā)現文章中有明顯的錯誤和問題請在下面留言或者聯系本人,本人將及時改正,避免給大家?guī)聿槐匾恼`導,謝謝~

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

推薦閱讀更多精彩內容