《開發(fā)工具系列》

一、引言

相信很多學(xué)習(xí)技術(shù)的讀者朋友們，都夢想能創(chuàng)建一個屬于自己的個人博客?，F(xiàn)在，這將不是夢想，下面跟著 Huazie 一起利用 GitHub Pages + Hexo 搭建一個屬于自己的個人博客吧。

二、接入 Node.js

2.1 下載并安裝 Node.js

Node.js 官方下載地址

注意：Hexo 官方建議使用 Node.js 12.0 及以上版本

筆者本地下載的是 20.11.0 LTS，這對大多數(shù)用戶來說已經(jīng)足夠了

筆者的 Windows 系統(tǒng)，下載完了是如下的 msi 安裝包【其他系統(tǒng)自行去官網(wǎng)下載即可】：

這里直接雙擊安裝即可，安裝完了就可以去配置相關(guān)的環(huán)境變量了。

2.2 環(huán)境變量配置

現(xiàn)在，Huazie 以 windows 11 系統(tǒng)為例，介紹下配置環(huán)境變量，如下：

右擊 Window 圖標，打開下圖并選擇 系統(tǒng)：

點擊 高級系統(tǒng)設(shè)置，打開系統(tǒng)屬性頁面，點擊 環(huán)境變量 ：

找到 Path 系統(tǒng)環(huán)境變量，配置上面你的 Node.js 的安裝目錄進去：

環(huán)境變量配置好之后，我們就可以通過 CMD 命令行，檢查：

• npm -v ：查看當(dāng)前安裝的 npm 的版本號
  
• node -v : 查看當(dāng)前安裝的 Node.js 的版本號
  

三、接入 Git

3.1 下載并安裝 Git

Windows 下載地址，其他可參考 【Hexo 官方文檔里的安裝 Git】

筆者本地下載的版本如下【大家從上述地址下載的版本比我本地的高些】：

這里也是一樣直接雙擊安裝即可，安裝完了就可以去配置相關(guān)的環(huán)境變量了。

3.2 環(huán)境變量配置

我們先來看看 Git 的安裝目錄：

在上述的 bin 和 cmd 目錄，我們都可以看到 git.exe，按需配置，我本地環(huán)境配置的是 cmd 目錄。

參考上面 Node.js 環(huán)境變量配置，配置好之后，我們就可以在命令行輸入如下命令查看：

四、接入 Hexo

4.1 安裝 Hexo

接入 Node.js 和 Git 之后，我們就可以使用 npm 安裝 Hexo。

npm install -g hexo-cli

上述安裝成功后，提示我 npm 有新的小版本更新，于是我進行了更新：

• npm install -g npm ：更新到最新版本
• npm install -g npm@<version> ：更新到特定的版本

這時我再查看當(dāng)前安裝的 npm 的版本號：

注意：上述更新不強制，大家按需更新即可

當(dāng)然，對于熟悉 npm 的進階用戶，可以僅局部安裝 hexo 包。

npm install hexo

安裝 Hexo 以后，可以使用以下兩種方式執(zhí)行 Hexo：

• npx hexo <command>

• Linux 用戶可以將 Hexo 所在的目錄下的 node_modules 添加到環(huán)境變量之中即可直接使用 hexo <command>：

  echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile
  

4.2 建站

# 沒有設(shè)置 folder 參數(shù)，Hexo 默認在當(dāng)前文件夾下創(chuàng)建網(wǎng)站
hexo init <folder>

我們需要選個本地文件夾，然后輸入上述命令，用于在指定文件夾下初始化一個本地網(wǎng)站。

下圖即為 Huazie 本地在 E:\fleaworkspace\blog 目錄開始初始化一個博客網(wǎng)站：

因為要從 GitHub 克隆項目，這一步可能需要花點事件，請慢慢等待，不要關(guān)閉窗口

等待一會，如果如下圖顯示，就表示 hexo 初始化網(wǎng)站成功了。

接著我們切換到上述初始化的網(wǎng)站目錄，當(dāng)然如果按筆者上述操作，當(dāng)前目錄就是我們的網(wǎng)站根目錄。

接著我們輸入 npm install 命令，用來下載我們網(wǎng)站必要的依賴包。

npm install 命令的作用包括：

1. 從 npm 注冊表下載包：npm install 會從 npm 注冊表（一個在線倉庫）中查找并下載指定的包。你可以指定包的名稱和版本號，以獲取正確的包版本。
2. 解析依賴：npm install 會解析項目中的 package.json 文件，讀取其中的 dependencies 和 devDependencies 字段，確定需要安裝的依賴項及其版本。它會下載并安裝所有必要的依賴項，以確保項目的正常運行。
3. 安裝本地緩存：npm install 會將下載的包和依賴項安裝到項目的本地緩存中，這樣其他開發(fā)者也可以共享相同的依賴項版本，確保項目的可移植性和一致性。
4. 生成 node_modules 目錄：在安裝完成后，npm install 會生成一個 node_modules 目錄，其中包含所有安裝的包和依賴項

上述操作完成之后，可以查看我們初始化的網(wǎng)站目錄，如下所示：

有關(guān)上述文件，我們這里簡單介紹下：

• _config.yml ：網(wǎng)站的配置信息。
• package.json ：應(yīng)用程序的信息。
• scaffolds ：模版文件夾。當(dāng)您新建文章時，Hexo 會根據(jù) scaffold 來創(chuàng)建文件。Hexo 的模板是指在新建的文章文件中默認填充的內(nèi)容。例如，如果您修改 scaffold/post.md 中的 Front-matter 內(nèi)容，那么每次新建一篇文章時都會包含這個修改。
• source ：資源文件夾是存放用戶資源的地方。除 _posts 文件夾之外，開頭命名為 _ (下劃線)的文件 / 文件夾和隱藏的文件將會被忽略。Markdown 和 HTML 文件會被解析并放到 public 文件夾，而其他文件會被拷貝過去。
• themes ：主題文件夾。Hexo 會根據(jù)主題來生成靜態(tài)頁面。

4.3 本地啟動服務(wù)器

我們可以在本地啟動服務(wù)器。如下所示：

執(zhí)行完之后，不要關(guān)閉命令窗口，直接在瀏覽器打開 http://localhost:4000/，如下圖所示：

當(dāng)然還有很多其他的命令，感興趣的小伙伴，請查看 官方指令文檔。

五、接入 GitHub Pages

5.1 初識 GitHub Pages

GitHub Pages 是一項靜態(tài)站點托管服務(wù)，它直接從 GitHub 上的倉庫獲取 HTML、CSS 和 JavaScript 文件，（可選）通過構(gòu)建過程運行文件，然后發(fā)布網(wǎng)站。 可以在 GitHub Pages 示例集合 中看到 GitHub Pages 站點的示例。

你可以在 GitHub 的 github.io 域或自己的自定義域上托管站點。 有關(guān)詳細信息，請參閱“配置 GitHub Pages 站點的自定義域”。

GitHub Pages 站點的類型，有三種：

• 項目 ：項目站點連接到 GitHub 上托管的特定項目，例如 JavaScript 庫或配方集合
• 用戶 ：用戶站點連接到 github.com 上的特定帳戶。若要發(fā)布用戶站點，必須創(chuàng)建名為 <username>.github.io 的個人帳戶擁有的存儲庫。
• 組織 ：組織站點連接到 github.com 上的特定帳戶。若要發(fā)布組織站點，必須創(chuàng)建名為 <organization>.github.io 的組織帳戶擁有的存儲庫。

除非使用的是自定義域，否則用戶和組織站點在 http(s)://<username>.github.io 或 http(s)://<organization>.github.io 中可用。

GitHub Pages 使用限制：
2016 年 6 月 15 日后創(chuàng)建并使用 github.io 域的 GitHub Pages 站點通過 HTTPS 提供服務(wù)。 如果您在 2016 年 6 月 15 日之前創(chuàng)建站點，您可以為站點的流量啟用 HTTPS 支持。 有關(guān)詳細信息，請參閱“使用 HTTPS 保護 GitHub Pages 站點”。

可以在將更改推送到特定分支時發(fā)布站點，也可以編寫 GitHub Actions 工作流來發(fā)布站點。對于在 GitHub Pages 上部署 Hexo，請查看 《官方文檔》，它就是使用 GitHub Actions 部署至 GitHub Pages。

5.2 在 GitHub Pages 上部署 Hexo

下面 Huazie 來簡單總結(jié)下：

1. 在你的 GitHub 上建立名為 <你的 GitHub 用戶名>.github.io 的倉庫。這里參考 《GitHub Pages 快速入門》 即可。

2. 使用 GitHub 客戶端 克隆上述新建的倉庫，并將 4.2 中初始化的目錄內(nèi)容 全部復(fù)制到新克隆的倉庫中，或者 像官方那樣自己推送到遠端【參考《在 GitHub Pages 上部署 Hexo》】。

3. 在上面新克隆的倉庫目錄下，新建立 .github/workflows/pages.yml 【目錄如果沒有自己新建即可】
   
   pages.yml 中填入以下內(nèi)容 (注意下面的 Node.js 的版本，我這里是 20，大家以自己本地安裝的版本為準)：

   name: Pages
   
   on:
     push:
       branches:
         - main # default branch
   
   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v3
           with:
             token: ${{ secrets.GITHUB_TOKEN }}
             # If your repository depends on submodule, please see: https://github.com/actions/checkout
             submodules: recursive
         - name: Use Node.js 20.x
           uses: actions/setup-node@v2
           with:
             node-version: '20'
         - name: Cache NPM dependencies
           uses: actions/cache@v2
           with:
             path: node_modules
             key: ${{ runner.OS }}-npm-cache
             restore-keys: |
               ${{ runner.OS }}-npm-cache
         - name: Install Dependencies
           run: npm install
         - name: Build
           run: npm run build
         - name: Upload Pages artifact
           uses: actions/upload-pages-artifact@v2
           with:
             path: ./public
     deploy:
       needs: build
       permissions:
         pages: write
         id-token: write
       environment:
         name: github-pages
         url: ${{ steps.deployment.outputs.page_url }}
       runs-on: ubuntu-latest
       steps:
         - name: Deploy to GitHub Pages
           id: deployment
           uses: actions/deploy-pages@v2
   

4. 使用 GitHub 客戶端將上述倉庫新增的文件推送到遠端。
   

5. 前往 GitHub 倉庫，按下圖順序 Settings > Pages > Source ，并將 Source 改為 GitHub Actions。
   

6. 接著等待 GitHub 自動部署，然后就可以通過 https://你的GitHub用戶名.github.io/ 訪問了
   

六、總結(jié)

本篇 Huazie 帶大家利用 GitHub Pages + Hexo 搭建了能訪問的個人博客。一步步實操下來，相信大家都能見到實際的效果。當(dāng)然要想做好個人博客，可不止這么一點點，Huazie 這里也只是拋磚引玉，后續(xù)的深入使用，需要發(fā)揮各位的主觀能動性了。文章來源地址http://www.zghlxwxcb.cn/news/detail-805005.html

七、參考

1. 《Hexo 官方文檔》
2. 《GitHub Actions 文檔》
3. 《GitHub Pages 快速入門》

到了這里，關(guān)于【實操】基于 GitHub Pages + Hexo 搭建個人博客的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！