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


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


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


前言

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

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

特別鳴謝:陳素封,我也是跟著他的教程一點(diǎn)一點(diǎn)學(xué)會的。
特別聲明:此教程中部分內(nèi)容轉(zhuǎn)自cnFeat編寫的教程大家也可移步去學(xué)習(xí)


為什么要搭建獨(dú)立博客

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

新人須知

  • 1 請保持足夠的耐心
  • 2 善于使用搜索引擎
  • 3 可以適當(dāng)了解寫網(wǎng)頁制作的基礎(chǔ)知識

為什么選擇GitHub Pages

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

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

GitHub Pages 是什么?

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

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

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


注冊 GitHub

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

申請成功后,在 GitHub 官網(wǎng)上登錄,并驗證郵箱。

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


環(huán)境安裝

依次下載安裝以下軟件(直接一直點(diǎ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.

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

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


使用 GitHub Pages 建立博客

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

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

GitHub 上建立倉庫

如圖:

提示:詳細(xì)可以看這里:一步步在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 默認(rèn)裝在 C盤,啟動時默認(rèn)路徑為 C:\Users\xxx(用戶名)\Documents\GitHub,輸入 cd / 命令后就返回到了 C盤根目錄下,需不需要使用 cd / 看個人習(xí)慣(下同)。

Hexo 部署

Hexo 的部署有兩種方法

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

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

$ cd /
$ hexo init Hexo

回車后出現(xiàn)該提示則表示正確:

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

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

$ cd Hexo
$ npm install

回車后出現(xiàn)該提示則表示正確:

第二種方法 命令 hexo init

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

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

$ cd /
$ cd Hexo
$ hexo init

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

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

回車后出現(xiàn)該提示則表示正確:

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

$ npm install

回車后出現(xiàn)該提示則表示正確:

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

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

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

如圖所示則表示正確:

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

如圖:

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

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

將本地文件部署到 GitHub

修改 Hexo 中的 _config.yml 文件

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

找到其中的 deploy 標(biāo)簽,改成如圖所示,并保存:

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

將其 deploy 到倉庫中

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

$ hexo clean
$ hexo generate
$ hexo deploy

如果出現(xiàn)如圖錯誤,不要著急:

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

$ npm install hexo-deployer-git --save

再重新來一遍:

$ hexo clean
$ hexo generate
$ hexo deploy

出現(xiàn)以下提示則表示正確:

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

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容