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

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


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


前言

偶然間發現我的姓名拼音的域名沒有被人購買,心想,作爲一名準程序員,怎麼能把個人域名讓給別人,於是勒緊褲腰帶,花光身上僅剩的一點點積蓄將其買了下來,買下來後不知道用它能做點什麼(我不會網頁製作),想起了很久以前在知乎上看到的一個問題:如何搭建個人獨立博客,心想閒着也是閒着,不如折騰一下,說不定就能成功,以後把學習筆記什麼的都放到個人博客上,之後回味起來也方便,於是便開始查資料,經過兩天的折騰,個人博客也基本成型了,搭建的步驟也差不多都很熟練了,於是便寫下這篇教程,有兩個目的:其一,熟練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的項目, 不過,由於他的空間免費穩定,用來做搭建一個博客再好不過了。

GitHub Pages 可以被認爲是用戶編寫的、託管在 GitHub 上的靜態網頁。

註冊 GitHub

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


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

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


環境安裝

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

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



測試 SSH Key

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


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

$ ssh -T [email protected]

如圖:


  • 如果是下面之類的反饋(或者顯示 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上創建博客主頁(2)


使用 Hexo 創建博客框架

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

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


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

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

$ cd Hexo$ npm install

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


第二種方法 命令 hexo init

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

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

$ cd /$ cd Hexo$ hexo init

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

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

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


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

$ npm install

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


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

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

系統可能會出現提示,請點擊允許。

如圖所示則表示正確:



此時打開瀏覽器,在瀏覽器地址欄輸入 http://localhost:4000/ (默認端口爲4000)便可以看到最原始的博客了(以後發表博文想先預覽,也可以通過 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 進入創建的文件夾,依次輸入以下命令:

$ 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) 就可以看到你的個人博客了。



文/Coder_Y(簡書作者)
原文鏈接:http://www.jianshu.com/p/985d07d88ef4
著作權歸作者所有,轉載請聯繫作者獲得授權,並標註“簡書作者”。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章