# 前言

# 為什麼選擇使用 Hexo 等類似的靜態博客框架？

首先，讓我們了解一下什麼是靜態網站
靜態網站是指全部由 HTML 代碼格式的靜態頁面頁面組成的網站，無論是否被訪問都是一個獨立存在的文件，但沒有數據庫的支持，製作與維護的工程量較大，交互性較差，在功能方面有著很大的限制

而動態網站，它會因為變量的改變而產生不同的網頁，交互性強，功能限制少，擁有後台數據庫。
現在的許多網站都是動態網站，但是，雖然維護的工程量減少了，但相對應的維護成本提高了不少。
但請注意，這不代表使用了靜態博客框架就可以媲美動態網站，動態網站能實現的功能大大超過了靜態網站
但是作為博客，靜態博客框架已經足夠滿足我們了；當然，如果您有足夠的能力還是可以去嘗試動態網站製作。

說回使用靜態博客框架的好處，除了成本低以外，相比於原本的沒有框架的靜態網站來說，管理也十分簡單，比如在基於 markdown 插件下您可以去除那些繁瑣的代碼來快速撰寫自己的文章
而且您也可在網上搜索（如 Hexo 官方主題頁面）其他人公開發布的免費主題來裝飾自己的網站

# Hexo 介紹

Hexo 是一款基於 Node.js 的靜態博客框架，依賴少易於安裝使用，可以方便的生成靜態網頁託管在 GitHub 和 Heroku 上，是搭建博客的首選框架

# 使用前準備 (安裝環境準備)

需要準備好使用環境才可以安裝 Hexo

# 編寫工具

個人是使用 Visual Stdio Code ，因為這個工具有需多外掛，支援多種語言

# 創建 Github 倉庫

前往 Github 官網註冊 / 登陸自己的 GitHub 帳號，在此不會多提
登陸完畢後，點擊右上角的 + 號，再點擊 New repository 創建新的倉庫
倉庫名應該設置為： 你的GitHub用戶名.github.io

描述你可以選擇不填，但是倉庫必須選擇公開狀態 Public
下面三個選項 RADEME.md 、 .gitignore 、 許可證 ，可以先不選擇
創建完畢後你可能處於一個選項頁面，是因為你的倉庫沒有任何上傳文件，但倉庫已經存在

# 安裝 Git 並綁定 Github 帳號

您需要使用 Git 完成本地同步 GitHub 的倉庫
Git 官網 安裝根據自己配置需求安裝相應版本
安裝完畢後，在命令行（ cmd 或者 powershell ）輸入 git 測試是否安裝成功
如若安裝失敗，請查看其他 Git 安裝教程
安裝成功後，您需要將 Git 綁定 GitHub 帳號：
鼠標右鍵或者菜單搜索打開 Git Bash
（鼠標右鍵為 Git Bash Here 在此路徑打開，不影響以下操作）

設置 user.name 和 user.email 的配置信息，分別輸入後回車:

git config --global user.name "你的Github用戶名"

git config --global user.email "你的Github註冊信箱"

綁定後生成 ssh密鑰 文件:

ssh-keygen -t rsa -C "你的Github註冊信箱"

默認不需要設置密碼
生成 ssh 文件後，git 會直接給出 .ssh 文件夾所在路徑 C:\Users\用戶名\.ssh 打開 .ssh 文件夾找到 id_rsa.pub ，複製裡面的全部內容
最後打開 GitHub ，點擊右上角個人頭像後點擊 Setting 進入設置界面再點擊 SSH and GPG keys 點擊 New SSH key 新建 title 任意填寫，將你複製的內容貼至 Key 中，點擊 add SSH Key 添加

在 Git Bash 中輸入 ssh git@github.com 檢測公鑰設置是否成功
如若出現 Hi 你的用戶名！ You've successfully authenticated…… 的說明即為成功
設置密鑰可以讓你在使用 Git 上傳時省去輸入帳號密碼驗證的過程

# 安裝 Node.js

因為 Hexo 基於 Node.js 環境的因素，您還需要下載安裝 Node.js
Node.js 官網安裝根據自己配置需求安裝相應版本
安裝 Node.js 會包含環境變量以及 npm 的安裝
在命令行輸入 node -v 來檢測 Node.js 是否安裝成功，顯示相應版本即為安裝成功
輸入 npm -v 來檢測 npm 是否安裝成功，顯示相應版本即為安裝成功

至此，恭喜您完成全部安裝 Hexo 的前置環境搭建

# 安裝 Hexo

Hexo 是作為我們整個靜態博客的框架
首先在電腦中新建一個文件夾，取名隨意（最好是在自己已經規劃好的路徑，比如 D:\Blog\MyBlog ） 打開新建文件夾，在文件夾上方的路徑欄裡輸入 cmd 或者 powershell 在該路徑中打開命令行

在命令行中輸入 npm 命令安裝 Hexo

npm i -g hexo-cli

在這裡將 install 縮寫成 i ，你也可以寫 install

Hexo 安裝可能需要一段時間，中途可能出現幾個報錯，可以先無視它
安裝完成後，在命令行輸入 hexo -v 驗證是否安裝成功
如若顯示版本等各項信息即為安裝成功

隨後在命令行輸入 hexo init 初始化文件夾，接著輸入 npm install 安裝必備的組件

至此 Hexo 安裝完畢！！

# Hexo 的使用及發布

# Hexo 常用指令

首先要了解 Hexo 的常用指令

hexo n "xxx" = hexo new "xxx" # 新增名為 xxx 的文章

hexo g = hexo generate # 生成靜態網站

hexo s = hexo sever # 啟動本地預覽

hexo d = hexo deploy # 部屬網站

hexo clean # 清除緩存 ，一般不會用到

# 站點配置文件 _config.yml

_config.yml 是你網站的配置文件，位於根目錄，在這裡可以設置網站的基礎信息以及插件指令

# 本地預覽

輸入 hexo g 生成靜態網頁，再輸入 hexo s 打開本地服務器預覽 默
認本地服務器路徑為 localhost:4000 在瀏覽器中打開就可以看到 Hexo 默認的樣式了

如需關閉，在命令行中按下 Ctrl + C

# 推送網站

如果您的網站一切準備就緒，是時候將網站部署在 GitHub 上了
首先打開 站點配置文件 _config.yml 並找到 deploy 項，一般都在最後
將其修改為

# 格式可能不一，建議手動添加

deploy:

  type: git

  repo: https://github.com/用戶名/倉庫名.git # 倉庫地址

  branch: master

保存站點配置文件
上傳前需要安裝 Git 部屬插件，輸入命令

npm i hexo-deployer-git --save

安裝完畢後分別輸入

hexo clean # 更換主題或者出現問題時可以嘗試

hexo g

hexo d

輸入 hexo d 後，網站就會由 Git 插件上傳至 GitHub 倉庫
在倉庫中點擊 setting 進入倉庫設置界面
在 GitHub Pages 選項中，將 Branch 設置為 master , /(root) 保持根目錄不變
點擊 save 保存，刷新後就會顯示正在部署網站了
部署完畢後，在瀏覽器輸入自己的域名 https://你的GitHub用戶名.github.io 即可訪問你的網站了！

至此，基礎的博客部署已經成功了

# 更換主題

我們不可能就使用 Hexo 自帶的默認主題
在 Hexo 官網的 Themes 專區，有許多用戶自製的開源 Hexo 主題 您可以找到並根據主題介紹文檔下載並配置自己喜歡的主題，在這裡不會具體介紹 主題應安裝在 \themes 中 安裝主題後，記得將站點配置文件 _config.yml 的 theme 項修改成您安裝的主題名稱 當然，如果您有能力可以魔改甚至自製主題

# 撰寫文章

安裝完 Hexo 後，Hexo 會自動在文件夾 \source\_posts 中生成一個名為 hello world.md 的文件 這個文件就是 Hexo 自動幫你生成的第一篇文章，裡面寫的是 Hexo 的初始指令 _posts 就是你以後寫文章所放置 .md 文件的地方， .md 後綴的文件即是 markdown 文件，是你寫完的文章文件 markdown 是你寫文章所使用的語法，具體寫作方法請自行搜索

hexo n post xxx

就會在 _post 目錄下新建一個名為 xxx 文章了
文章寫完後保存，在使用相同的方式上傳到 GitHub 倉庫即可