用 GitHub Pages + Hexo 搭建個人專屬博客

如果你也渴望擁有一個屬於自己的博客,那麼你應該花費一些時間好好閱讀本教程。


學習最好的方法論 —— 就是去做。

什麼是 GitHub Pages?

GitHub Pages 是 GitHub 提供的靜態站點託管服務,它可以通過 GitHub 庫託管你的個人、組織或項目的站點。
你可以使用 Jekyll Theme Chooser 在線創建和部署 GitHub Pages 站點。如果你更喜歡通過本地創建和部署站點,你也可以使用 GitHub Desktop 或者命令行。
GitHub Pages 是一種靜態網頁託管服務,因此不支持 PHP, Ruby, or Python 等服務端代碼。
本教程使用 Hexo 搭建個人 GitHub Pages,因此如果你想創建和部署組織或項目的網頁,部分內容可能會不太適用,需要自行作出調整。

注意:GitHub Pages 站點在互聯網上是公開可見的,即便你的託管庫是私密的。因此如果在你的網頁庫中有敏感數據,你可能會想在網頁發佈前移除它們。

什麼是 Hexo?

Hexo 是一個快捷、簡潔且高效的博客框架。你可以使用 Markdown 書寫博文,彈指一揮間 Hexo 就可以利用其精緻的主題生成精美的靜態博客網頁。

Markdown 是一種標記語言,其語法簡潔明瞭、學習容易,而且功能比純文本更強大。

準備

  1. 下載、安裝與配置 Git

  2. 下載與安裝 Node.js

什麼是 Git ? Git 是目前世界上最先進的分佈式版本控制系統(沒有之一)。

下載、安裝與配置 Git 的具體方式取決於你當前所使用的操作系統。

基於 Windows 操作系統安裝 Git

下載 git for windows 安裝程序。由於衆所周知的原因,從左側的鏈接下載 git for windows 十分緩慢。可以參考頁面,收錄了存儲於百度雲的下載地址。
安裝完成後,還需要最後一步設置,在命令行輸入:

$ git config --global user.name "Your Name"$ git config --global user.email "[email protected]"

例如,你的名字爲 Yunhao Zhu, 郵箱爲 [email protected]

$ git config --global user.name "Yunhao Zhu"$ git config --global user.email "[email protected]"

基於 Mac OS X 操作系統安裝 Git

有三種方法:

brew install git
  • 直接從 AppStore 安裝 Xcode,Xcode 集成了 Git,不過默認沒有安裝,你需要運行Xcode,選擇菜單“Xcode”->“Preferences”,在彈出窗口中找到“Downloads”,選擇“Command Line Tools”,點“Install”就可以完成安裝了。

  • 或者下載 git for Mac OS X 安裝程序。

基於 Linux 操作系統安裝 Git

  • Linux (Ubuntu, Debian):

sudo apt-get install git-core.
  • Linux (Fedora, Red Hat, CentOS):

sudo yum install git-core.

安裝 Node.js

在Windows上安裝時務必選擇全部組件,包括勾選 Add to Path

安裝完成後,請打開命令提示符 cmd 輸入

node -v

出現 vxx.xx.xx 代表安裝成功!

  • 安裝 Node.js 的最佳方式是使用 nvm

cURL:

$ curl https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

Wget:

$ wget -qO- https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

安裝完成後,重啓終端並執行下列命令即可安裝 Node.js

$ nvm install stable

第三部:安裝 Hexo

呼,準備工作終於完成了!讓我們馬上使用 npm 來安裝 Hexo,執行如下命令:

$ npm install -g hexo-cli

安裝 Hexo 完成後,接着執行以下命令:

$ hexo init <folder>
$ cd <folder>
$ npm install

例如,你安裝在c盤hexo文件夾下,則執行:

$ hexo init /c/hexo
$ cd /c/hexo
$ npm install
$ hexo generetor
$ hexo server

什麼是 npm?

npm 是 Node.js 的包管理工具(package manager), 幫助我們管理開發中會用到的各種 Node.js 包,極大的方便了我們的開發。

新建完成後,指定文件夾的目錄如下:

.
├── _config.yml
├── package.json
├── scaffolds
├── source|   ├── _drafts
|   └── _posts
└── themes

打開瀏覽器輸入http://localhost:4000/

創建 GitHub Pages

  1. 註冊 GitHub 賬號

  2. 新建一個 repository 庫,Repository name 輸入 "Your username.github.io"

  3. 點擊 Settings 下拉至 -> GitHub Pages -> Page name 必須與剛纔的庫名保持一致 -> 選擇一個喜歡的主題 Publish page -> 在地址欄輸入你的博客地址即可看到效果

將本地 Hexo 代碼部署至 GitHub

  • 修改本地 Hexo 站點的配置文件 _config.yml,在末尾添加(xxx爲你註冊的GitHub用戶名)

deploy:  type: git
  repository: https://github.com/xxx/xxx.github.io
  branch: master
  • 利用 npm,上傳本地代碼,第一次 GitHub 可能會要求你輸入用戶名和密碼

npm install hexo-deployer-git --save
hexo g
hexo d

輸入剛纔設置的 https://github.com/xxx/xxx.github.io 即可查看效果

  • 發佈你的第一篇博客,在根目錄下輸入

$ hexo new "postname"$ hexo g
$ hexo d

結語

恭喜你!看到這裏,你已經成功掌握了個人博客的搭建技術,教程到這裏也就結束了,都是最最基礎的內容,關於 GitHub Pages 和 Hexo 還有很多進階內容等着你去學習。本教程後續也會有更多進階內容,如果你感興趣的話,歡迎持續關注。
最後,作者水平有限,如有錯誤、遺漏,歡迎批評指正。

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