靜態(tài)網(wǎng)站搭建筆記 GitHub Page+Hexo

時間：2023-07-12 02:18:01 | 來源：網(wǎng)站運營

時間：2023-07-12 02:18:01 來源：網(wǎng)站運營

靜態(tài)網(wǎng)站搭建筆記 GitHub Page+Hexo：Update: 2023.01.16.1

零、概述

目的：寫東西。要求：簡潔、高效、優(yōu)美。

方法：個人GitHub倉庫在開啟GitHub Page設(shè)置后，用戶可以得到一個域名為"用戶名.http://github.io"的個人站點，而倉庫會作為站點的免費服務(wù)器，適合拿來作為個人博客網(wǎng)站。選擇Hexo博客框架作為搭建工具，通過Git部署至GitHub倉庫。

過程：在Git bush終端里通過Hexo博客框架工具將本地編寫好的Markdown文本生成本地網(wǎng)頁文件，把這些網(wǎng)頁文件用Git方式上傳到GitHub里作為個人GitHub page服務(wù)器的倉庫中，然后Github page會識別這些文件并在個人頁面里顯示出來。邏輯順序：

安裝建站環(huán)境（Git、Node.Js、Hexo） → 安裝網(wǎng)站模板 → 配置網(wǎng)站（個性化） → 發(fā)布網(wǎng)站（GitHub）

一、創(chuàng)建本地環(huán)境和倉庫

1. 安裝Git

Git是先進(jìn)的分布式版本控制系統(tǒng)，可以有效、高速的處理從很小到非常大的項目版本管理。是用來管理你的hexo博客，上傳到GitHub的工具。廖雪峰老師的Git教程。

下載地址 git download 安裝后會有一個Git Bash的命令行工具，以后就用這個工具來使用git。

選擇需要安裝的組件，默認(rèn)即可，推薦勾選(NEW!) Add a Git Bash Profile to Windows Terminal

我使用VSCode作為默認(rèn)編輯器（前提是先得安裝VSCode）。

調(diào)整新存儲庫中初始分支的名稱，默認(rèn)的讓Git決定即可，將會使用master作為默認(rèn)的分支。

是否添加 Git 環(huán)境變量，推薦默認(rèn)配置。

選擇 OpenSSH 客戶端程序，默認(rèn)的使用 Git 自帶的 OpenSSH 即可。

選擇 HTTPS 傳輸后端，默認(rèn) 使用OpenSSL 庫 即可。

配置 Git 文件的行末換行符，默認(rèn)的第一個即可。

配置終端模擬器，默認(rèn)的第一個即可。

選擇 git pull 合并的模式，默認(rèn)的即可。

選擇 Git 的憑據(jù)管理器，默認(rèn)的跨平臺的憑據(jù)管理器即可。

配置額外選項，默認(rèn)的即可。

配置實驗選項，直接點擊 Install

安裝完成。

配置環(huán)境變量(如果沒有)，如下：右鍵此電腦 → 屬性 → 高級系統(tǒng)設(shè)置 → 高級→“環(huán)境變量”→“系統(tǒng)變量”：編輯系統(tǒng)變量里的Path，新增：“C:/Program Files/Git/cmd”，如下：

安裝完成后打開cmd輸入

git --version檢查安裝是否成功，成功后會返回版本信息。

2. 安裝Node.js

Hexo是基于nodeJS編寫的，所以需要安裝一下node.Js和里面的npm工具。下載地址 nodejs download 雙擊執(zhí)行文件，單擊下一步（選第一個“Node.js runtime”）→下一步（不勾選安裝其他插件）→下一步。安裝完成后打開cmd輸入

node -vnpm -v檢查安裝是否成功，成功后會返回版本信息。

windows在git安裝完后，就可以直接使用git bash來敲命令行也行。

3. 安裝Hexo并部署本地倉庫

新建一個本地文件夾“blog”作為倉庫，隨便什么名字，文件夾內(nèi)右鍵“Git Bash”打開終端，執(zhí)行以下步驟：

• 默認(rèn)軟件源網(wǎng)速可能比較慢，所以我們更換一個（非必須）：

npm config set registry "https://registry.npm.taobao.org"

• 安裝hexo（全局）：

npm install hexo-cli -g如果報錯，找到C盤下的用戶目錄刪除隱藏文件.npmrc文件

檢查hexo版本：

hexo -v

• 初始化hexo（這一步會將hexo的文件復(fù)制到你的博客文件夾中去）：

hexo init

• 安裝其他插件：

npm install

• 設(shè)置用戶名和郵箱：

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

• 設(shè)置用戶郵箱：

git config --global user.email "GitHub注冊郵箱"這一步完成后你已經(jīng)創(chuàng)建了一個本地博客，輸入

hexo g命令生成hexo默認(rèn)的靜態(tài)頁面，然后輸入

hexo s命令啟動本地服務(wù)器，在瀏覽器打開 http://localhost:4000/ 頁面就可以看見自己創(chuàng)建的默認(rèn)博客了。

二、安裝主題（模板）

1. 安裝主題

使用Git安裝基于hexo框架的網(wǎng)站主題模板

所有官方主題：Themes | Hexo

一些受歡迎 的 Hexo 主題：HexoThe.me: Top 10 Hexo themes (voxel.site)

也可以從GitHub fork其他人優(yōu)化配置好的主題。

我選的是Butterfly，在hexo根目錄下運行：

穩(wěn)定版安裝：

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly開發(fā)版安裝：

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly應(yīng)用主題：修改 Hexo 根目錄下的 _config.yml，把主題改為butterfly

theme: butterfly安裝插件：如果你沒有 pug 以及 stylus 的渲染器，請在hexo根目錄下載安裝：

npm install hexo-renderer-pug hexo-renderer-stylus --save測試：檢查主題安裝是否成功

清除緩存：

hexo clean生成頁面文件：

hexo g 啟動本地網(wǎng)站服務(wù)：啟動后在 http://localhost:4000/ 中查看應(yīng)用好的主題。Ctrl+C關(guān)閉服務(wù)。

hexox s

2. 主題升級

在主題目錄下，運行

git pull升級完成后，請到 Github 的 Releases 界面 或者 文檔七 查看新版的更新內(nèi)容。里面有標(biāo)注 _config 文件的變更內(nèi)容（如有），請根據(jù)實際情況更新你的配置內(nèi)容。

為了減少升級主題后帶來的不便，建議進(jìn)行以下操作（非必須）：

在 hexo 的根目錄創(chuàng)建一個文件 _config.butterfly.yml，并把主題目錄的 _config.yml 內(nèi)容復(fù)制到 _config.butterfly.yml 去。

注意： 不要把主題目錄的 _config.yml 刪掉

以后只需要在 _config.butterfly.yml進(jìn)行配置就行。Hexo會自動合併主題中的_config.yml和 _config.butterfly.yml里的配置，如果存在同名配置，會使用_config.butterfly.yml的配置，其優(yōu)先度較高。所以如果使用了 _config.butterfly.yml， 配置主題的 _config.yml 將不會有效果。

三、網(wǎng)站設(shè)置

1. 網(wǎng)站設(shè)置

網(wǎng)站的一些信息必須從博客根目錄中的"_config.yml"文件配置，例如修改網(wǎng)站各種資料，例如標(biāo)題、副標(biāo)題和郵箱等個人資料 詳見 配置 | Hexo

使用Hexo寫作和發(fā)布網(wǎng)站需要用到的 指令 | Hexo

2. 主題設(shè)置

參考官網(wǎng)：Butterfly

3. 網(wǎng)頁優(yōu)化和擴(kuò)展功能

到這一步為止我們已經(jīng)有了一個成形的博客框架，剩下的事情就是往里面填東西，增加功能和使用的便捷性與美觀程度。當(dāng)然，最重要的還是我們創(chuàng)建博客的初衷——寫作、記錄、分享。

我的網(wǎng)站優(yōu)化和維護(hù)細(xì)節(jié)會放在這篇文章中，持續(xù)更新：Hexo 個人博客優(yōu)化日志 - 本站 (zhihu.com)

四、部署至GitHub（使用ssh連接）

1. 生成自己的github page

具體就是在github中建立一個倉庫，倉庫的名稱為：

你的帳號名.github.io然后gigthub會自動為你創(chuàng)建一個個人頁面，進(jìn)入倉庫，在Setting→Page可以看到這消息。

下面選個主題你就可以去自己的站看看了。

2. 生成ssh密匙

ssh-keygen -t rsa -C "GitHub注冊郵箱"執(zhí)行過程中會要求創(chuàng)建一個密碼，可以回車默認(rèn)空。

3. 將你的ssh公鑰添加到github賬戶中

此時在你的用戶文件夾中已經(jīng)生成一個".ssh"文件夾，里面有剛剛出生的兩個ssh密鑰文件。"id_rsa"是本機(jī)的私人秘鑰，"id_rsa.pub"是公共秘鑰。用編輯器將"id_rsa.pub"打開，復(fù)制所有內(nèi)容，然后打開你的github網(wǎng)頁頁面，點擊用戶頭像→Settings→SSH and GPG keys→New SSH key→將復(fù)制的內(nèi)容粘貼到Key文本框中，標(biāo)題隨意，僅作自己區(qū)分用。然后點擊Add SSH key(添加SSH)按鈕。

這樣當(dāng)你鏈接GitHub自己的賬戶時，它就會根據(jù)公鑰匹配你的私鑰，當(dāng)能夠相互匹配時，才能夠順利的通過git上傳你的文件到GitHub上?？傊@一步的作用就是以后將本地部署至github倉庫時候省去輸密碼的步驟。

• 檢查連接

ssh -T -v git@github.com【注】如遇到下圖情況，需要在第一次回車確認(rèn)時輸入"yes"再回車。

【注】遇到 "connect to host github.com port 22: Permission denied"多半是撞到殺軟和防火墻。如果是端口問題，在".ssh"文件夾中新建"config"文件，輸入以下內(nèi)容，將接入端口設(shè)置為443。

Host github.com User 你的GitHub注冊郵箱 Hostname ssh.github.com PreferredAuthentications publickey IdentityFile ~/.ssh/id_rsa Port 443更多問題可以看官方指南 使用 SSH 連接到 GitHub - GitHub Docs


4. 部署文件至GitHub Page

打開本地倉庫的_config.yml文件，在文件最后一行找到以下字句并補(bǔ)充。

deploy: type: git repo: git@github.com:你的github帳號名/你的github帳號名.github.io.git branch: master這一步就是告訴hexo把你的文件推到你倉庫中的哪個分支去。

【注】部署之前要先把github倉庫里默認(rèn)的branch："main"修改為"master"

• 安裝deploy-git命令包（不安裝就沒法用部署命令）

npm install hexo-deployer-git

• 清除緩存文件

hexo clean就是清空上次部署時生成的文件，第一次不用輸，以后每次部署前輸入。

• 生成靜態(tài)頁面（hexo generate）

hexo g

• 部署（hexo deploy）

hexo d【注】當(dāng)執(zhí)行hexo deploy時，Hexo 會將public目錄中的文件和目錄推送至_config.yml中指定的遠(yuǎn)端倉庫和分支中，并且完全覆蓋該分支下的已有內(nèi)容。

【注】遇到"ERROR Deployer not found: git"報錯是因為部署插件沒安裝，再安裝一下。

npm install --save hexo-deployer-git【注】最后顯示"INFO Deploy done: git"就是完成部署，檢查一下執(zhí)行日志有無異常。第一次可能會遇到"warning: LF will be replaced by CRLF in ……"，這個問題，是因為windows中的換行符為 CRLF ， 而在linux下的換行符為 LF，所以出現(xiàn)符號轉(zhuǎn)義問題，輸入以下命令將自動轉(zhuǎn)換關(guān)閉就行：

git config --global core.autoCRLF false

五、自定義域名（如果有）

進(jìn)入倉庫，點擊Settings→Custom domain，輸入你的域名。然后在本地博客目錄"source"文件夾中創(chuàng)建一個名為CNAME的無后綴文件，填入自己域名即可。

【注】192.30.252.153 和 192.30.252.154 是GitHub的服務(wù)器地址（未證）

六、快捷命令以及步驟簡化

適用于已經(jīng)了解hexo命令以及相關(guān)代碼的新手。

1建站

npm config set registry "https://registry.npm.taobao.org" && npm install hexo-cli -g && hexo init && npm install && npm install hexo-deployer-git && git config --global user.name "XXXXXXXXXX" && git config --global user.email "XXXXXXXXX" && ssh -T -v git@github.com【注】更換軟件源→安裝hexo→初始化hexo→安裝其他插件→安裝命令插件→配置github用戶名→配置github郵箱→驗證ssh地址

【注】在XXXXXXX處替換入相應(yīng)內(nèi)容。

更換主題

git clone https://github.com/iissnan/hexo-theme-next themes/next && cd themes/next && git pull【注】此處以【next】主題為例。下載主題→打開主題文件夾→上傳數(shù)據(jù)。

【注】通常不同主題需要安裝不同的支持組件，若未按要求安裝則會導(dǎo)致頁面報錯。前往主題github倉庫可以了解安裝幫助。

Hexo三連（清除緩存、生成頁面、部署頁面。）

hexo clean && hexo g && hexo d

七、創(chuàng)建頁面&發(fā)表文章

寫文章是建站的初衷。

八、基本操作&BUG排查

1. Git 常用命令（此部分來自【前端學(xué)習(xí)】Git的安裝和基本使用方法和環(huán)境變量配置 時光大魔王）

配置郵箱和用戶名

因為Git是分布式版本控制系統(tǒng)，所以你需要自報家門

// 配置郵箱git config --global user.email "xxx"// 配置用戶名git config --global user.name "xxx"// 配置好后檢查一下git config --global user.emailgit config --global user.name初始化項目

執(zhí)行命令后該文件夾將會多出一個 .git 文件夾，它默認(rèn)是隱藏的，您可以通過開啟系統(tǒng)的 文件管理器的顯示隱藏的項目 來查看它

git init// 或：新建一個文件夾并在此文件夾里初始化git init xxx克隆遠(yuǎn)程項目倉庫到本地

git clone "http://"查看git倉庫的狀態(tài)

顯示工作目錄和暫存區(qū)的狀態(tài)。使用此命令能看到那些修改被暫存到了, 哪些沒有, 哪些文件沒有被Git tracked到等等

git status添加當(dāng)前目錄下的所有文件到暫存區(qū)

這是 必須的，在工作區(qū)（working directory）進(jìn)行內(nèi)容改動后，需要add操作，將文件添加到暫存區(qū)（index）。

git add .將暫存區(qū)內(nèi)容添加到本地倉庫中

git commit -m "這里是自定義的備注信息"【重要】以后每一次代碼有意義的變更，都應(yīng)該依次進(jìn)行這兩個操作

git add .git commit -m "這里是自定義的備注信息"將本地的分支版本上傳到遠(yuǎn)程并合并，即：推送

git push懶人步驟

* 注意：若中途出現(xiàn)需要您輸入賬號和密碼的彈窗，輸入您的遠(yuǎn)程倉庫的登錄賬號和登錄密碼即可！ *

// 配置郵箱git config --global user.email "xxx"// 配置用戶名git config --global user.name "xxx"// 初始化項目git init// 克隆倉庫到本地git clone "http://"// 這時候可以進(jìn)行項目的修改了，修改好后，執(zhí)行下一步 //// 添加當(dāng)前目錄下的所有文件到暫存區(qū)git add .// 將暫存區(qū)內(nèi)容添加到本地倉庫中g(shù)it commit -m "這里是自定義的備注信息"// 推送到倉庫git push

2. npm命令學(xué)習(xí)

npm install <Module Name> // <Module Name>指的是模塊名 // install可以縮寫為inpm install <Module Name> // 本地安裝 將安裝包放在 ./node_modules 下（運行 npm 命令時所在的目錄）如果沒有 node_modules 目錄，會在當(dāng)前執(zhí)行npm 命令的目錄下生成node_modules / 目錄可以通過 require() 來引入本地安裝的包npm install <Module Name> -g // 全局安裝 將安裝包放在 /usr/local 下或者你 node 的安裝目錄 / 可以直接在命令行里使用# 如果出現(xiàn)以下錯誤：npm err! Error: connect ECONNREFUSED 127.0.0.1:8087 解決辦法為：npm config set proxy null

參考鏈接

Butterfly 美化/優(yōu)化/魔改 教程合集 | Butterfly

我的Blog美化日記——Hexo+Butterfly | guole's Blog

guole's Blog

米奇妙妙屋 - ifibe ∞

最后這是我的小站 Chaosmoz - We are time fliers. 還在施工中，歡迎交流！