GitHub Pages + Hexo搭建個人博客網站，史上最全教程-有解無憂

文章目錄

- - 一、準備作業
  - - 1. GitHub賬號
    - 2. 安裝Git
    - 3. 安裝NodeJS
  - 二、創建倉庫
  - 三、安裝Hexo
  - 四、更換主題
  - - 1. NexT 主題
    - 2. Fluid主題
  - 四、創建文章
  - 五、個性化頁面展示
  - - 1. 瀏覽器tab頁名稱
    - 2. 博客標題
    - 3. 主頁正中間的文字
  - 六、添加閱讀量統計
  - - 1. 申請LeanCloud賬號并創建應用
    - 2. 修改Fluid配置
    - - 單篇文章閱讀量計數
      - 頁面底部展示網站的 PV、UV 統計數
  - 七、添加評論功能
  - 八、發布到GitHub Pages
  - - 方式一
    - 方式二
  - 九、發布到自己服務器，Nginx代理
  - 十、最終效果展示

本文介紹如何使用GitHub Pages + Hexo搭建個人博客網站，完全免費，所有內容本人親測，絕對可用，

一、準備作業

1. GitHub賬號

需要有一個GitHub賬號，沒有的話到官網申請一個，
注冊很簡單，不懂的話可以參考 GitHub申請賬號

2. 安裝Git

在自己電腦上安裝好Git，hexo部署到GitHub時要用，
網上找篇教程或者參考 Git安裝(Windows)

3. 安裝NodeJS

在自己電腦上安裝好NodeJS，Hexo是基于NodeJS撰寫的，所以需要安裝NodeJS和npm工具，
網上找篇教程或者參考 NodeJS安裝及配置(Windows)

二、創建倉庫

在GitHub上創建一個新的代碼倉庫用于保存我們的網頁，

點擊Your repositories，進入倉庫頁面，
請添加圖片描述
點擊New按鈕，進入倉庫創建頁面，

填寫倉庫名，格式必須為<用戶名>.github.io，然后點擊Create repository，

點擊creating a new file創建一個新檔案，作為我們網站的主頁，

新檔案的名字必須為index.html，內容先隨便寫一個簡單的，內容示例如下，填寫之后點擊Commit new file提交，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>yaorongke</title>
</head>
<body>
    <h1>yaorongke的個人主頁</h1>
    <h1>Hello ~</h1>
</body>
</html>

請添加圖片描述
GitHub Pages中找到我們主頁的地址為 https://yaorongke.github.io/

瀏覽器中訪問，展示成功，

這里創建的網頁是非常簡陋的，只是為了演示下GitHub Pages的使用方式，

三、安裝Hexo

我們采用Hexo來創建我們的博客網站，Hexo 是一個基于NodeJS的靜態博客網站生成器，使用Hexo不需開發，只要進行一些必要的配置即可生成一個個性化的博客網站，非常方便，點擊進入官網，

安裝 Hexo

npm install -g hexo-cli

查看版本

hexo -v

創建一個專案 hexo-blog 并初始化

hexo init hexo-blog
cd hexo-blog
npm install

本地啟動

hexo g
hexo server

瀏覽器訪問 http://localhost:4000，頁面默認主圖風格如下
請添加圖片描述

四、更換主題

Hexo 默認的主題不太好看，不過官方提供了數百種主題供用戶選擇，可以根據個人喜好更換，官網主題點這里查看，這里介紹兩個主題的使用方法，Next 和 Fluid，個人比較喜歡Fluid，后面章節的功能也是以 Fluid 為基礎進行講解的，

1. NexT 主題

安裝主題

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

使用 NexT 主題

打開 _config.yml 檔案，該檔案為站點組態檔
請添加圖片描述
將主題修改為 next

theme: next

本地啟動

hexo g -d
hexo s

2. Fluid主題

以下安裝步驟摘自 Fluid官網

安裝主題

下載最新 release 版本解壓到 themes 目錄，并將解壓出的檔案夾重命名為 fluid，

指定主題

如下修改 Hexo 博客目錄中的 _config.yml：

theme: fluid  # 指定主題
language: zh-CN  # 指定語言，會影響主題顯示的語言，按需修改

創建「關于頁」

首次使用主題的「關于頁」需要手動創建：

hexo new page about

創建成功后，編輯博客目錄下 /source/about/index.md，添加 layout 屬性，

修改后的檔案示例如下：

---
title: about
date: 2020-02-23 19:20:33
layout: about
---

這里寫關于頁的正文，支持 Markdown, HTML

本地啟動

hexo g -d
hexo s

瀏覽器訪問 http://localhost:4000，Fluid主題風格頁面如下
請添加圖片描述

四、創建文章

如下修改 Hexo 博客目錄中的 _config.yml，打開這個配置是為了在生成文章的時候生成一個同名的資源目錄用于存放圖片檔案，

post_asset_folder: true

執行如下命令創建一篇新文章，名為《測驗文章》

hexo new post 測驗文章

執行完成后在source\_posts目錄下生成了一個md檔案和一個同名的資源目錄(用于存放圖片)
請添加圖片描述
在資源目錄測驗文章中放一張圖片 test.png

在測驗文章.md中添加內容如下，演示了圖片的三種參考方式，第一種為官方推薦用法，第二種為markdown語法，第三種和前兩種圖片存放位置不一樣，是將圖片放在\source\images目錄下，這三種寫法在md檔案中圖片是無法顯示的，但是在頁面上能正常顯示，

圖片的引入方式可參考官方檔案 https://hexo.io/zh-cn/docs/asset-folders.html，有詳細介紹，

---
title: 測驗文章
date: 2021-06-10 16:35:20
tags:
- 原創
categories:
- Java
---

這是一篇測驗文章

{% asset_img test.png 圖片參考方法一 %}

![圖片參考方法二](test.png)

![圖片參考方法三](/images/test.png)

本地啟動

hexo g -d
hexo s

瀏覽器訪問 http://localhost:4000，頁面如下，文章添加成功
請添加圖片描述

五、個性化頁面展示

頁面的標題等位置顯示默認的文字，可以改下顯示一些個性化的資訊，

1. 瀏覽器tab頁名稱

修改根目錄下 _config.yml 中的 title 欄位，
請添加圖片描述

2. 博客標題

主題目錄 themes\fluid 下 _config.yml 中的 blog_title 欄位，

請添加圖片描述

3. 主頁正中間的文字

主題目錄 themes\fluid 下 _config.yml 中的 text 欄位，
請添加圖片描述
修改好配置后，頁面效果如下，可以看到現在顯示的內容變成了我們的個人資訊，

六、添加閱讀量統計

Fluid 主題寫好了統計閱讀量的代碼，但是缺少相應配置所以沒有開啟，需要借助三方服務來統計閱讀量，這里是有 Leancloud 的免費服務來進行統計，

1. 申請LeanCloud賬號并創建應用

進入官網注冊賬號
請添加圖片描述
需實名認證，完成后才能使用各項服務

驗證郵箱

創建應用，選擇開發版即可，免費的

進入該應用的 設定->應用憑證，找到 AppID 和 AppKey，記錄下來后面配置要用

2. 修改Fluid配置

打開主題目錄 themes\fluid下的 _config.yml 檔案，修改如下配置

單篇文章閱讀量計數

打開統計開關
請添加圖片描述
配置 leancloud的 app_id 和 app_key

打開計數功能，統計來源改為 leancloud

頁面效果

頁面底部展示網站的 PV、UV 統計數

請添加圖片描述
頁面效果

七、添加評論功能

評論功能的代碼已經寫好了，只不過沒有開啟，需要修改一些配置

打開主題目錄 themes\fluid下的 _config.yml 檔案，修改如下配置

啟用評論插件
請添加圖片描述
配置 LeanCloud 的 appId 和 appkey

重新部署后，查看頁面效果，評論功能已開啟

部署在本地時評論無法提交，會報跨域問題，發布到 GitHub Pages 上之后課正常提交評論

八、發布到GitHub Pages

方式一

安裝hexo-deployer-git

npm install hexo-deployer-git --save

修改根目錄下的 _config.yml，配置 GitHub 相關資訊

deploy:
  type: git
  repo: https://github.com/yaorongke/yaorongke.github.io.git
  branch: main
  token: ghp_3KakcaPHerunNRyMerofcFd9pblU282FSbsY

其中 token 為 GitHub 的 Personal access tokens，獲取方式如下圖
請添加圖片描述
部署到GitHub

hexo g -d

瀏覽器訪問 https://yaorongke.github.io/，部署成功
請添加圖片描述

方式二

直接將 public 目錄中的檔案和目錄推送至 GitHub 倉庫和分支中，
請添加圖片描述

九、發布到自己服務器，Nginx代理

如果自己有服務器的話，也可以不使用 GitHub Pages，直接部署的自己的服務器上，通過 Nginx 進行代理，我這里有一個阿里云上的 CentOS 7 版的 Linux 服務器，演示下如何部署，步驟如下，

打開 hexo-blog 根目錄下的 _config.yml，增加如下配置，這是因為把網站存放在了子目錄中，要和 Nginx 配置中的 location /blog 路徑一致，

root: /blog

hexo-blog 根目錄下執行打包命令，打包好的檔案在 public 目錄下

hexo g

將public 目錄下的檔案復制到 Linux 服務器上的某個目錄下，我的存放目錄為

/opt/rkyao/fronted/hexo-blog

修改 Nginx 組態檔，我的 Nginx 安裝路徑為 /usr/local，大家根據自己實際情況調整

cd /usr/local/nginx/conf
vim nginx.conf
# server節點下添加如下配置
location /blog {
    alias  /opt/rkyao/fronted/hexo-blog;
    index  index.html index.htm;
}

重啟 Nginx

cd /usr/local/nginx/sbin
./nginx -s reload

訪問博客

http://47.96.106.173/blog/

十、最終效果展示

可訪問如下地址查看
https://yaorongke.github.io/

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/290225.html

標籤：其他

上一篇：阿晨的運維筆記 | Ubuntu部署Nginx

下一篇：Zabbix 事件通知機制之郵件通知