目錄

• 1 整體流程
• 2. 本地環境準備
  • 2.1 安裝 Node.js 和 Git
  • 2.2 安裝 Hexo
• 3. 服務端環境準備
  • 3.1 Nginx 環境配置
    • 3.1.1 安裝 Nginx
    • 3.1.2 更改 Nginx 配置文件
  • 3.2 Node.js 環境配置
  • 3.3 Git 環境配置
    • 3.3.1 安裝 Git
    • 3.3.2 創建 Git 用戶
    • 3.3.3 配置 SSH 免密登錄
    • 3.3.4 配置 Git 倉庫
• 4. 部署 Hexo 博客到服務端 Git 倉庫
• 5. Hexo 寫作新文章并發布

目前搭建博客的主流框架有 WordPress、VuePress、Hugo、Hexo 等等，我主要是感覺 Hexo 好看的主題比較多，所以就來折騰一下這個博客框架

1 整體流程

1. 在本地運行 hexo deploy 命令，Hexo 會將生成的靜態文件(hexo generate)推送到遠程的 Git 倉庫
2. 在 Git 倉庫中，配置一個鉤子腳本，它會在接收到推送后執行——將最新的靜態文件強制覆蓋到指定的工作目錄
3. 在 Nginx 服務器中，配置訪問根路徑的請求指向該工作目錄

2. 本地環境準備

2.1 安裝 Node.js 和 Git

這兩個我是很早就安裝好了，網上也有大量的資料，我就不重復了，這里主要記錄 Hexo 相關筆記

(1) 驗證 Node.js是否安裝成功，打開 cmd 輸入node -v，出現版本信息，則 ok

C:\Users\gzl>node -v
v18.16.1

(2) 驗證 Git 是否安裝成功，打開 cmd 輸入git --version，出現版本信息，則 ok

C:\Users\gzl>git --version
git version 2.39.0.windows.2

同時在文件夾中點擊右鍵會出現 Git Bash Here

2.2 安裝 Hexo

(1) 新建一個文件夾用來存儲個人博客：E:\MyBlog

進入該文件夾，進入 Git Bash，輸入npm install -g hexo-cli 將 Hexo 命令行工具安裝到系統的全局環境中

gzl@gzl MINGW64 /e/MyBlog
$ npm install -g hexo-cli

(2) 待安裝完畢，輸入以下指令，將會新建一個 myblogs 文件夾，并且安裝 Hexo 項目所需的依賴項

# 創建一個新的 Hexo 項目
$ hexo init myblogs
$ cd myblogs
# 安裝 Hexo 項目所需的依賴項
$ npm install

最后，會在 myblogs 文件中生成如下文件：

(3) 繼續在 Git Bash 中執行指令hexo server

$ hexo server

執行完畢后，打開本地瀏覽器，訪問http://localhost:4000/，出現以下界面，說明第一步成功了

3. 服務端環境準備

3.1 Nginx 環境配置

3.1.1 安裝 Nginx

依次執行以下指令

# 安裝 nginx 依賴環境，遇到 yes 選 yes
yum install gcc-c++
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel

# 下載并解壓 nginx 安裝包
wget -c https://nginx.org/download/nginx-1.10.1.tar.gz 
tar -xvf nginx-1.10.1.tar.gz -C /usr/local

# 執行配置文件
cd /usr/local/nginx-1.10.1
./configure

# 編譯并安裝 nginx
make
make install

# 開放 80 端口
cd /usr/local/nginx
/sbin/iptables -I INPUT -p tcp --dport 80 -j ACCEPT

# 啟動 nginx
cd sbin
./nginx

沒有任何消息，代表啟動成功，在瀏覽器訪問公網ip:80就可以進入 nginx 頁面了

如果需要停止 nginx 服務，執行./nginx -s stop

3.1.2 更改 Nginx 配置文件

需要將 Nginx 的配置文件中網站的根目錄(root)指向 hexo 的部署目錄，以及修改域名(server_name)為自己已備案的域名，如果沒有，則填公網ip

所以，首先創建一個文件用來存放 hexo 的部署文件

mkdir -p /data/hexo

然后修改 nginx 配置文件

cd /usr/local/nginx/conf
vim nginx.conf
# 進入后，按 i 鍵進入編輯模式

修改server_name和root即可

server {
        listen       80;
        server_name  www.cheyaoyao.cn;

        location / {
            root   /data/hexo;
        }
        ...
}

修改完畢后按 Esc 鍵進入命令模式，再輸入 :wq 保存并退出

3.2 Node.js 環境配置

安裝 node.js，依次執行以下命令：

# 切換到根目錄，安裝 node.js
cd ~
curl -sL https://rpm.nodesource.com/setup_10.x | bash -
yum install -y nodejs

# 查看安裝結果，打印對應版本號則安裝成功
node -v
npm -v

3.3 Git 環境配置

3.3.1 安裝 Git

依次執行以下命令：

# 安裝，遇到 yes 選 yes
yum install git

# 查看版本號
git --version

3.3.2 創建 Git 用戶

依次執行以下指令：

# 創建git用戶
adduser git

# 修改git用戶的權限
chmod 740 /etc/sudoers

# 進入 sudo 命令文件
vim /etc/sudoers

找到root ALL=(ALL) ALL，在下面添加git ALL=(ALL) ALL

繼續執行以下指令

# 修改文件權限
chmod 400 /etc/sudoers

# 設置 git 用戶的密碼
sudo passwd git

3.3.3 配置 SSH 免密登錄

由于是將本地的靜態文件推送到服務器的 Git 倉庫中，所以要配置 ssh 免密登錄服務器

(1) 在服務端，依次執行以下指令：

# 切換到 git 用戶
su git

# 在根目錄創建.ssh文件夾，存放公鑰
cd ~
mkdir .ssh

(2) 在本地計算機打開 Git Bash，執行以下指令

# 在本地生成公鑰/私鑰對
$ cd ~
$ cd .ssh
$ ssh-keygen

遇到系統詢問，就按回車鍵。最后生成的公鑰和秘鑰會自動保存在C:\Users\gzl\.ssh目錄下

(3) 給私鑰設置權限，執行以下指令：

$ chmod 700 ~/.ssh
$ chmod 600 ~/.ssh/id_rsa 

(4) 將本地的公鑰(id_rsa.pub)上傳到服務器的/home/git/.ssh目錄下

(5) 新建authorized_keys文件，并拷貝公鑰的內容到該文件中，依次執行以下指令：

cd ~/.ssh
cp id_rsa.pub authorized_keys
cat id_rsa.pub >> ~/.ssh/authorized_keys

# 設置權限
chmod 600 ~/.ssh/authorized_keys
chmod 700 ~/.ssh

# 確保 SSH 相關的文件和目錄具有正確的 SELinux 安全標簽
restorecon -Rv ~/.ssh 

(6) 測試本地免密登錄服務器

進入本地計算機的 Git Bash，輸入：

$ ssh -v git@xxx.xxx.xxx.xxx（公網IP）

最后面會出現：

3.3.4 配置 Git 倉庫

(1) 在服務器新建一個 Git 倉庫，同時新建一個鉤子文件

cd ~
git init --bare hexo.git
vi ~/hexo.git/hooks/post-receive

輸入git --work-tree=/home/www/hexo --git-dir=/home/git/hexo.git checkout -f，保存并退出

(2) 授予鉤子文件可執行權限

chmod +x ~/hexo.git/hooks/post-receive
cd ~
sudo chmod -R 777 /data/hexo

重啟 ECS 實例，服務端配置完成

4. 部署 Hexo 博客到服務端 Git 倉庫

(1) 在本地計算機打開 Hexo 項目，我用的 vscode，修改_config.yml文件中的deploy：

deploy:
  type: git
  repo: git@公網ip:/home/git/hexo.git
  branch: master

(2) 安裝插件，hexo-deployer-git 和 hexo-server

# 用于將 Hexo 生成的靜態文件推送到指定的 Git 倉庫
npm install hexo-deployer-git --save

# 用于在本地啟動一個 Hexo 服務器，方便在本地預覽博客
npm install hexo-server

(3) 配置 Git 全局變量

回到 Git Bash，輸入：

# email 和 name 隨便填一個也可以
$ git config --global user.email "xxxxxxxxxx@xx.com"
$ git config --global user.name "xxx"

(4) 生成靜態文件和發布博客

在 vscode 的終端中輸入：

# 清除之前生成的靜態文件
hexo clean

# 生成靜態文件
hexo generate

# 部署到 Git 倉庫
hexo deploy

至此，已經全部配置完畢了

如果在 nginx 中配置了域名的話，可以通過域名訪問博客了，沒配置也可以用公網ip訪問

下一篇就研究怎么美化博客吧

5. Hexo 寫作新文章并發布

(1) 在 vscode 中打開 Hexo 項目，打開終端，使用如下命令創建新文章

hexo new "title"

執行該命令，Hexo 會在/source/_posts目錄下創建一篇新的文章

(2) Front-matter

Hexo 創建的文件中開頭有一段配置信息：

這個叫做Front-matter，即前置信息，用于給 Hexo 渲染該 md 文檔

配置項	意義
title	網頁文章標題
date	文章創建如期
tags	文章標簽

(3) 發布文章

隨便編寫點內容

在終端依次輸入：

# 清除之前生成的靜態文件
hexo clean

# 生成靜態文件，hexo generate 的簡寫
hexo g

# 本地啟動，hexo server 的簡寫
hexo s

可以在本地預覽文章

最后部署到遠程的 Git 倉庫中

# 部署到 Git 倉庫，hexo deploy 的簡寫
hexo d

稍微等一下，在瀏覽器訪問域名，就可以看到了

總結

以上是生活随笔為你收集整理的使用 Hexo 搭建个人博客并部署到云服务器的全部內容，希望文章能夠幫你解決所遇到的問題。

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