天天看點

用 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

有三種方法:

  • 使用 Homebrew, MacPorts:
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

  • 下載下傳 安裝程式 安裝 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      
$ hexo new "postname"$ hexo g
$ hexo d      

結語