前言

近些年來很多用戶都喜歡使用 GitHub Pages 來搭建 Hexo 靜態博客網站，其最吸引人的莫過于完全免費使用，并且非常穩定。

雖然搭建時比較麻煩，有點折騰，但是配置完成后，基本不需要操心維護的事，甚至放了幾年都忘記了，打開來看文章依然還在。

本文就詳細介紹下如何使用 Hexo + GitHub 搭建免費個人博客網站的教程。

---

為了照顧小白用戶（第一次使用 GitHub 和 Hexo），盡可能詳細，包括常見的坑和問題都有提示說明。下面目錄中第 3~5 步為最重要的步驟，其他內容如果已經會的可以選擇性跳過。

看起來有點繁雜，捋順了倒也簡單，認真跟教程走，完整操作一遍大概需要 30 分鐘。

o(￣▽￣)ｄ

內容目錄：

• 簡介：GitHub Pages 和 Hexo & 原理

準備：環境搭建
1.1. 注意事項
1.2. 環境搭建

連接 Github

創建 Github Pages 倉庫

本地安裝 Hexo 博客程序
4.1. 安裝 Hexo
4.2. Hexo 初始化和本地預覽

部署 Hexo 到 GitHub Pages

綁定域名（可選）

開始使用
7.1. 發布文章
7.2. 網站設置
7.3. 更換主題
7.4. 常用代碼

常見問題

簡介

# GitHub Pages 是什么？

• What is GitHub Pages? - GitHub Help

GitHub Pages 是由 GitHub 官方提供的一種免費的靜態站點托管服務，讓我們可以在 GitHub 倉庫里托管和發布自己的靜態網站頁面。

# Hexo 是什么？

• 官網：hexo.io

Hexo 是一個快速、簡潔且高效的靜態博客框架，它基于 Node.js 運行，可以將我們撰寫的 Markdown 文檔解析渲染成靜態的 HTML 網頁。

# Hexo + GitHub 文章發布原理

在本地撰寫 Markdown 格式文章后，通過 Hexo 解析文檔，渲染生成具有主題樣式的 HTML 靜態網頁，再推送到 GitHub 上完成博文的發布。

# 優點和不足

優點：完全免費；靜態站點，輕量快速；可按需求自由定制改造；托管在 GitHub，安全省心；遷移方便……

不足：發文不便，依賴于本地環境；更適合個人博客使用；GitHub 在國內訪問速度有點不快。

1. 準備

# 注意事項

• 輸入代碼時，核對準確，最好切換成英文輸入法；
• 將文中的 “用戶名” 和 “郵箱” 替換為自己的 GitHub 賬戶名和綁定的郵箱；
• 統一使用 Git Bash 進行操作（支持 Win、Mac）；
• 小白請嚴格按步驟進行，不要跳！

# 環境搭建

Hexo 基于 Node.js，搭建過程中還需要使用 npm（Node.js 已帶） 和 git，因此先搭建本地操作環境，安裝 Node.js 和 Git。

• Node.js：https://nodejs.org/zh-cn
• Git：https://git-scm.com/downloads

下載 Node.js 和 Git 程序并安裝，一路點 “下一步” 按默認配置完成安裝。

安裝完成后，Win+R 輸入 cmd 并打開，依次輸入 node -v、npm -v 和 git --version 并回車，如下圖出現程序版本號即可。

2. 連接 Github

使用郵箱注冊 GitHub 賬戶，選擇免費賬戶（Free），并完成郵件驗證。

右鍵 -> Git Bash Here，設置用戶名和郵箱：

git config --global user.name "GitHub 用戶名" git config --global user.email "GitHub 郵箱"

創建 SSH 密匙：

輸入 ssh-keygen -t rsa -C "GitHub 郵箱"，然后一路回車。

添加密匙：

進入 [C:Users用戶名.ssh] 目錄（要勾選顯示“隱藏的項目”），用記事本打開公鑰 id_rsa.pub 文件并復制里面的內容。

登陸 GitHub ，進入 Settings 頁面，選擇左邊欄的 SSH and GPG keys，點擊 New SSH key。

Title 隨便取個名字，粘貼復制的 id_rsa.pub 內容到 Key 中，點擊 Add SSH key 完成添加。

驗證連接：

打開 Git Bash，輸入 ssh -T git@github.com 出現 “Are you sure……”，輸入 yes 回車確認。

顯示 “Hi xxx! You've successfully……” 即連接成功。

3. 創建 Github Pages 倉庫

GitHub 主頁右上角加號 -> New repository：

• Repository name 中輸入 用戶名.github.io
• 勾選 “Initialize this repository with a README”
• Description 選填

填好后點擊 Create repository 創建。

創建后默認自動啟用 HTTPS，博客地址為：https://用戶名.github.io

4. 本地安裝 Hexo 博客程序

新建一個文件夾用來存放 Hexo 的程序文件，如 Hexo-Blog。打開該文件夾，右鍵 -> Git Bash Here。

# 4.1 安裝 Hexo

使用 npm 一鍵安裝 Hexo 博客程序：

npm install -g hexo-cli

Mac 用戶需要管理員權限（sudo），運行這條命令：

sudo npm install -g hexo-cli

安裝時間有點久（真的很慢！），界面也沒任何反應，耐心等待，安裝完成后如下圖。

# 4.2 Hexo 初始化和本地預覽

初始化并安裝所需組件：

hexo init # 初始化 npm install # 安裝組件

完成后依次輸入下面命令，啟動本地服務器進行預覽：

hexo g # 生成頁面 hexo s # 啟動預覽

訪問 http://localhost:4000，出現 Hexo 默認頁面，本地博客安裝成功！

Tips：如果出現頁面加載不出來，可能是端口被占用了。Ctrl+C 關閉服務器，運行 hexo server -p 5000 更改端口號后重試。

Hexo 博客文件夾目錄結構如下：

5. 部署 Hexo 到 GitHub Pages

本地博客測試成功后，就是上傳到 GitHub 進行部署，使其能夠在網絡上訪問。

首先安裝 hexo-deployer-git：

npm install hexo-deployer-git --save

然后修改 _config.yml 文件末尾的 Deployment 部分，修改成如下：

deploy:type: gitrepository: git@github.com:用戶名/用戶名.github.io.gitbranch: master

完成后運行 hexo d 將網站上傳部署到 GitHub Pages。

完成！這時訪問我們的 GitHub 域名 https://用戶名.github.io 就可以看到 Hexo 網站了。

6. 綁定域名（可選）

博客搭建完成使用的是 GitHub 的子域名（用戶名.http://github.io），我們可以為 Hexo 博客綁定自己的域名替換 GitHub 域名，更加個性化和專業，也利于 SEO。

我們使用 Namesilo 進行注冊，便宜好用沒啥套路，使用優惠碼 okoff 優惠一美元，com 域名大概 50 塊一年。

# 6.1 域名注冊和解析

• 域名注冊和解析教程：Namesilo 域名購買及使用教程

按上面教程注冊并解析域名，在 DNS 設置部分，刪除自帶的記錄，然后添加 CNAME 記錄將 www 域名解析指向 用戶名.github.io。

# 6.2 綁定域名到 Hexo 博客

進入本地博客文件夾的 source 目錄，打開記事本，里面輸入自己的域名，如 http://www.example.com，保存名稱為 “CNAME”，格式為 “所有文件”（無 .txt 后綴）。

清除緩存等文件并重新發布網站：

hexo clean # 清除緩存文件等 hexo g # 生成頁面 hexo s # 啟動預覽

現在就可以使用自己的域名訪問 Hexo 博客了。

# 6.3 開啟 HTTPS

配置自己的域名后，需要我們手動開啟 HTTPS。打開博客所在 GitHub 倉庫，Settings -> 下拉找到 GitHub Pages -> 勾選 Enforce HTTPS。

HTTPS 證書部署成功需要一定時間，等大概幾分鐘再訪問域名，就可以看到域名前面的小綠鎖了，HTTPS 配置完成！

7. 開始使用

# 7.1 發布文章

進入博客所在目錄，右鍵打開 Git Bash Here，創建博文：

hexo new "My New Post"

然后 source 文件夾中會出現一個 My New Post.md 文件，就可以使用 Markdown 編輯器在該文件中撰寫文章了。

寫完后運行下面代碼將文章渲染并部署到 GitHub Pages 上完成發布。以后每次發布文章都是這兩條命令。

hexo g # 生成頁面 hexo d # 部署發布

---

也可以不使用命令自己創建 .md 文件，只需在文件開頭手動加入如下格式 Front-matter 即可，寫完后運行 hexo g 和 hexo d 發布。

--- title: Hello World # 標題 date: 2019/3/26 hh:mm:ss # 時間 categories: # 分類 - Diary tags: # 標簽 - PS3 - Games ---摘要 <!--more--> 正文

# 7.2 網站設置

包括網站名稱、描述、作者、鏈接樣式等，全部在網站目錄下的 _config.yml 文件中，參考官方文檔按需要編輯。

注意：冒號后要加一個空格！

# 7.3 更換主題

在 Themes | Hexo 選擇一個喜歡的主題，比如 NexT，進入網站目錄打開 Git Bash Here 下載主題：

git clone https://github.com/iissnan/hexo-theme-next themes/next

然后修改 _config.yml 中的 theme 為新主題名稱 next，發布。（有的主題需要將 _config.yml 替換為主題自帶的，參考主題說明。）

# 7.4 常用命令

hexo new "name" # 新建文章 hexo new page "name" # 新建頁面 hexo g # 生成頁面 hexo d # 部署 hexo g -d # 生成頁面并部署 hexo s # 本地預覽 hexo clean # 清除緩存和已生成的靜態文件 hexo help # 幫助

8 常見問題

1、Hexo 設置顯示文章摘要，首頁不顯示全文

Hexo 主頁文章列表默認會顯示文章全文，瀏覽時很不方便，可以在文章中插入 <!--more--> 進行分段。

該代碼前面的內容會作為摘要顯示，而后面的內容會替換為 “Read More” 隱藏起來。

2、設置網站圖標

進入 themes/主題 文件夾，打開 _config.yml 配置文件，找到 favicon 修改，一般格式為：favicon: 圖標地址。（不同主題可能略有差別）

3、修改并部署后沒有效果

使用 hexo clean 清理后重新部署。

4、開啟 HTTPS 后訪問網站顯示連接不安全？

證書還未部署生效，等待一會兒，清除瀏覽器緩存再試。

5、Mac 安裝 Hexo 報錯無法安裝

Mac 用戶需要管理員權限運行，使用 sudo npm install -g hexo-cli 命令安裝。

6、npm 下載速度慢，甚至完全沒反應

使用 npm 安裝程序等待很久也沒反應，或者下載速度很慢，可以更換 npm 源為國內 npm 鏡像。

臨時更換方法：在 npm 安裝命令后面加上：

--registry https://registry.npm.taobao.org

結語

Hexo 是一種純靜態的博客，我們必須要在本地完成文章的編輯再部署到 GitHub 上，依賴于本地環境。不能像 WordPress 或 Typecho 那樣的動態博客一樣能直接在瀏覽器中完成撰文和發布。

可以說是一種比較極客的寫博客方式，但是優勢也是明顯的——免費穩定省心，比較適合愛折騰研究的用戶，或者沒有在線發文需求的朋友。

覺得有幫助的朋友，不妨點個贊再走唄 ╰(￣▽￣)╭ ~

建站教程：

• WordPress搭建教程：手把手教你搭建WordPress博客
• 最簡單的建站教程：使用虛擬主機搭建WordPress個人網站
• 30分鐘搭建 Typecho 個人博客教程

總結

以上是生活随笔為你收集整理的hexo部署成功但是没效果_使用 Hexo+GitHub 搭建个人免费博客教程（小白向）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。