JERRY-Hexo-GitHub

《JERRY Hexo & GitHub 靜態網站搭建說明》

原創內容，轉載請註明出處！

一、前言

1.1 什麼是 Hexo？

一個基於 Node.js 設計的快速、簡潔且高效的部落格框架

  • 超快速度
  • 支援 Markdown
  • 一鍵部署
  • 外掛和可擴充套件性
  • 免費開源

1.2 什麼是 GitHub？

一個面向開源及私有軟體專案的託管平臺，因為只支援 Git 作為唯一的版本庫格式，故名 GitHub

  • 全球最活躍開源社群
  • 開源社交平臺
  • 企業專案管理平臺

1.3 什麼是靜態網站？

通俗的講靜態網站指：只有 前端 沒有 後端 的網站，靜態網站的所有頁面內容在沒有被修改的前提下都是固定不變的

適用於部落格、固定頁面展示等網站。

1.4 Hexo 與 GitHub 搭配建站的優缺點

（1）優點

  • 簡單穩定
  • 開源免費
  • 社群活躍利於交流

（2）缺點：

  • 國內訪問速度慢
  • 不支援動態網站搭建

二、安裝 Git

2.1 什麼是 Git？

Git 是一個開源的分散式版本控制系統，用於敏捷高效地處理任何或小或大的專案

使用 GitHub 必須有 Git。

2.2 Git 的下載安裝與配置

（1）下載安裝

Git官網

選擇對應系統版本下載，安裝預設下一步即可。

（2）配置

開啟終端鍵入以下命令：

$ git --version

# 檢視 git 版本號

# 若成功識別即為 git 安裝成功


$ git config --global user.name "xxx"

$ git config --global user.email [email protected]

# 配置個人的使用者名稱稱和電子郵件地址


$ git config --list

# ...

# user.name=xxx

# [email protected]

# 檢查已有的配置資訊

# 若配置資訊中出現正確使用者名稱及郵箱即為配置成功

三、安裝 Node.js

3.1 什麼是 Node.js？

一個基於 Chrome V8 引擎的 JavaScript 執行環境，使用了一個事件驅動 、非阻塞式 I/O 模型，讓 JavaScript 執行在服務端的開發平臺，它讓 JavaScript 成為與 PHP、Python、Perl、Ruby 等服務端語言平起平坐的 指令碼語言。

3.2 Node.js 的下載安裝與配置

Node.js官網

選擇對應系統的長期支援版下載，安裝預設下一步即可。

安裝完成，開啟終端鍵入以下命令：

$ node -v

# 檢視 Node.js 版本


$ npm -v

# 檢視 npm 包管理器版本

若以上兩個命令都成功識別，那麼 Node.js 便安裝成功。

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

# 利用 npm 下載國內淘寶映象 cnpm


$ cnpm -v

# 檢視 cnpm 版本

# 若以上命令成功識別，那麼 cnpm 便安裝成功

什麼是 npm 和 cnpm ?

  • npm (node package manager)：Node.js 的包管理器，用於 node 外掛管理（包括安裝、解除安裝、管理依賴等）。

  • cnpm：因為 npm 安裝外掛是從國外伺服器下載，受網路的影響比較大，可能會出現異常，所以樂於分享的淘寶團隊解決了這事。來自官網：“這是一個完整 npmjs.org 映象，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鐘 一次以保證儘量與官方服務同步”。

四、安裝 Hexo

4.1 Hexo 的下載安裝與配置

下載安裝：

可以參考Hexo官網

開啟終端鍵入以下命令：

$ cnpm install hexo-cli -g

# 等待一會，安裝完畢


$ hexo -v

# 檢視 hexo 版本

# 若以上命令成功識別，那麼 hexo 便安裝成功

五、搭建靜態網站

5.1 新建一個網站

$ hexo init [folder]

# 如果沒有設定 folder，Hexo 預設在當前的資料夾建立網站

5.2 生成靜態檔案

$ hexo generate

# 該命令可以簡寫為 $ hexo g

5.3 啟動伺服器

$ hexo server

# 該命令可以簡寫為 $ hexo s

# 預設情況下，訪問埠為：http://localhost:4000/

# 在瀏覽器中訪問 http://localhost:4000/ 即可開啟本地搭建好的網站

5.4 新建一篇文章

$ hexo new <title>

# 如果標題包含空格的話，請使用引號括起來 $ hexo new "first blog"

# 生成的 Markdown 文章放在 source 內的 _posts 下

六、利用 GitHub 部署網站

6.1 註冊使用者

GitHub官網

點選右上角註冊即可。

6.2 建立同名倉庫

  • 點選右上的 +，選擇 New repository 新建一個倉庫

  • 倉庫名稱設為 使用者名稱.github.io

  • 倉庫型別為 Public 公共型別

  • 複製倉庫 HTTPS URL

6.3 更改 Hexo 配置檔案

修改根目錄 _config.yml 內的 deploy。

# Deployment

## Docs: https://hexo.io/docs/one-command-deployment

deploy:

  type: 'git'

  repo: https://github.com/使用者名稱/使用者名稱.github.io.git	# HTTPS URL

  branch: master

6.4 安裝 hexo - git 部署工具

在 Hexo 部落格根目錄下，開啟終端鍵入：

$ cnpm install hexo-deployer-git --save

# 安裝 hexo-deployer-git 工具

6.5 遠端部署到 GitHub Pages 伺服器

$ hexo deploy

# 該命令可以簡寫為 $ hexo d

部署成功後即使用 https://使用者名稱.github.io/ 在瀏覽器中訪問網站。

七、結束語

7.1 美化 Hexo 網站

Hexo 支援主題自定義，並且有一個活躍的 主題社群。

切換主題方法：下載主題到 themes 資料夾內並修改根目錄 _config.yml 內的 theme 設定，即可切換主題。

修改配置主題請查閱相應主題的文件。

目前比較熱門的幾個主題：

7.2 使用 Hexo 外掛

Hexo 是一個支援外掛的可擴充套件框架，具體外掛型別及安裝方法請前往 Hexo 官網檢視 或在搜尋引擎求助。

7.3 幫助文件

Hexo 提供了全面的 Hexo 使用文件（中英文版）及 API 文件，在使用及開發優化 Hexo 的過程中，建議以官方文件為基準。

【與我聯絡 - 周吉瑞（JERRY）】