天天看點
傳回

【Hexo部落格搭建】将其部署到GitHub Pages（二）：如何初始化并部署？前言步驟 總結參考文章關于我

 簡介： 本系列文章屬于半筆記半教程的零基礎小白入門文，教你将 Hexo 部署到 GitHub Pages 應該怎麼做，跟着此系列文章最終可以獲得自己的靜态部落格網站。流程很長，分成不同的篇幅，此為本系列的第二篇。

目錄

前言

步驟 

六、初始化 Hexo 工程

七、生成靜态檔案

八、與遠端倉庫建立關聯

九、部署到 GitHub Pages

十、備份與自動部署

總結

參考文章

關于我

前言

        本系列文章屬于半筆記半教程的零基礎小白入門文，教你将 Hexo 部署到了 GitHub Pages，進而獲得自己的靜态部落格網站。流程很長，分成不同的篇幅，此為本系列的第二篇。

【注意】：本文純屬才疏尚淺的我以筆記的形式進行的記錄，很多知識其實我也不是太懂，可能存在了解偏差和錯誤，來學習的朋友們請自己甄别，路過的大神們也别噴我哈哈哈，有什麼建議和問題可以評論提出或者其它方式聯系我。我會盡可能保持更新該文章所使用到的技術和做法，并随時接受勘誤。

步驟 

六、初始化 Hexo 工程

注意：接下來應該是你自己的自定義的目錄，請不要完全複制粘貼我的！

比如說我是Windows使用者，想把我的網站代碼儲存在

電腦 E 盤的 BarryFlynn\Github\ 檔案夾下

那麼我要先在E盤建立相應的檔案夾，然後再繼續操作。

由于cmd終端最開始預設在C槽操作，我得先切換到E盤，那麼我要輸入 E:  然後回車,即：

Microsoft Windows [版本 10.0.19042.1165]
(c) Microsoft Corporation。保留所有權利。

C:\Users\10272>E:

E:\>

 然後此時，我要通過 cd  進入我本地電腦打算存儲網站代碼的檔案夾目錄。（或者右鍵檔案夾 Git Bash Here），即 BarryFlynn\Github\ 檔案夾裡

cd | DOS 指令

cd （LINUXSHELL 指令）

 也就是說我需要輸入 cd BarryFlynn\Github\ 然後回車，我會看到：

E:\>cd BarryFlynn\Github\

E:\BarryFlynn\Github>

好了成功進入，接下來輸入下方代碼，再按回車：

hexo init 你的名字.github.io

hexo

  ：正是因為我們之前安裝了 

hexo-cli

  這一個包，是以我們可以在終端中使用 

hexo

  這一指令。

init

  ：用來初始化部落格的模版檔案。後面跟的是你要建立的檔案夾，最好和你此前建立的倉庫名一緻，比如我的是：Barry-Flynn.github.io

然後我會看到

E:\BarryFlynn\Github>hexo init Barry-Flynn.github.io
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
[32mINFO [39m Install dependencies
added 242 packages from 207 contributors in 105.871s

15 packages are looking for funding
  run `npm fund` for details

INFO  Start blogging with Hexo!

E:\BarryFlynn\Github>

下面通過 cd  進入我的部落格檔案夾，

即輸入 cd Barry-Flynn.github.io 後按回車，我會看到：

E:\BarryFlynn\Github>cd Barry-Flynn.github.io

E:\BarryFlynn\Github\Barry-Flynn.github.io>

現在我就是處于 E:\BarryFlynn\Github\Barry-Flynn.github.io 檔案夾下操作了，

現在在這個檔案夾内預設安裝所有 `package.json` 檔案中提到的包，

即輸入  npm install  然後回車，我會看到：

E:\BarryFlynn\Github\Barry-Flynn.github.io>npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

audited 243 packages in 4.956s

15 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


E:\BarryFlynn\Github\Barry-Flynn.github.io>

這時候，我的 Barry-Flynn.github.io 檔案夾裡面會多出一堆檔案，

檔案夾結構應該大緻是這樣：

.
├── config.yml
├── package.json
├── scaffolds
├── source
|  ├── _drafts
|  └── _posts
└── themes

現在我們輸入  hexo server  然後回車，會看到：

E:\BarryFlynn\Github\Barry-Flynn.github.io>hexo server
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

server

  代表開啟本地的 Hexo 伺服器，這時你就可以打開浏覽器，在位址欄中輸入 

localhost:4000

  就可以看到本地的網頁了。
【Hexo部落格搭建】将其部署到GitHub Pages（二）：如何初始化并部署？前言步驟 總結參考文章關于我

這個網頁就是Hexo為你自動生成的部落格頁面。

按  Ctrl+C  中斷伺服器的運作，

系統提示  終止批處理操作嗎(Y/N)?  輸入 Y 然後回車。

至此，基礎的模版頁面便已經搭建好了。

七、生成靜态檔案

到現在，我們的工作都是在本地進行，想必你也很想放到線上與小夥伴們分享。這便輪到了 GitHub Pages 的出場，不過 GitHub Pages 隻支援純靜态檔案。

是以我們需要使用下面一行指令先來生成站點的靜态檔案。

（如果進行多次生成，為了避免受錯誤緩存影響，最好使用 hexo clean 先清除一遍。）

hexo generate

（上方指令也可以縮寫為 hexo g）

 輸入後回車，我會看到：

E:\BarryFlynn\Github\Barry-Flynn.github.io>hexo g
INFO  Validating config
INFO  Start processing
INFO  Files loaded in 209 ms
INFO  Generated: archives/index.html
INFO  Generated: archives/2021/index.html
INFO  Generated: archives/2021/08/index.html
(node:20772) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:20772) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:20772) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:20772) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(node:20772) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:20772) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
INFO  Generated: index.html
INFO  Generated: fancybox/jquery.fancybox.min.css
INFO  Generated: js/script.js
INFO  Generated: 2021/08/25/hello-world/index.html
INFO  Generated: css/style.css
INFO  Generated: css/fonts/fontawesome-webfont.woff2
INFO  Generated: css/fonts/fontawesome-webfont.woff
INFO  Generated: fancybox/jquery.fancybox.min.js
INFO  Generated: css/fonts/fontawesome-webfont.ttf
INFO  Generated: css/fonts/FontAwesome.otf
INFO  Generated: css/fonts/fontawesome-webfont.eot
INFO  Generated: js/jquery-3.4.1.min.js
INFO  Generated: css/images/banner.jpg
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  17 files generated in 1.98 s

E:\BarryFlynn\Github\Barry-Flynn.github.io>

此時我的檔案夾目錄下會出現 public  這個檔案夾，裡面存放的就是我的站點的靜态檔案。

八、與遠端倉庫建立關聯

接下來我們将本地的倉庫與此前在 GitHub 上建立的倉庫建立關聯。

輸入  git init  初始化 Git 倉庫，隻需要執行一次即可，看到：

E:\BarryFlynn\Github\Barry-Flynn.github.io>git init
Initialized empty Git repository in E:/BarryFlynn/Github/Barry-Flynn.github.io/.git/

在将其部署到 GitHub Pages 上之前，我們最好先建立一個分支。

什麼是分支？

Git 提供了版本管理功能，其中還有一個分支功能，你現在可以簡單地将其了解為平行世界。

 你的名字.github.io 部署後，GitHub Pages 将預設使用你的 main分支（以前叫 master分支，一個意思，主要分支的意思）作為靜态檔案部署。是以我們最好建立一個 hexo 分支（命名無所謂）用來存儲 Hexo 地源代碼，master 分支則用來存儲部署後的靜态檔案。為了友善，不想其他名字了，這個分支我就起名叫 hexo 吧。

建立該分支的指令語句是  git checkout -b hexo  ，然後回車，可以看到：

E:\BarryFlynn\Github\Barry-Flynn.github.io>git checkout -b hexo
Switched to a new branch 'hexo'

E:\BarryFlynn\Github\Barry-Flynn.github.io>

這時便成功建立了一個 hexo 分支。（此後的工作都将在 hexo 分支下進行）

你可以通過 

git branch -v

 來檢視目前有哪些分支，使用 

git checkout 分支名

 來切換到對應的分支。

Git 學習筆記

九、部署到 GitHub Pages

為了更友善的部署到 GitHub Pages，Hexo 提供了 

hexo-deployer-git

 插件。

老規矩，安裝該插件，要輸入下面指令，

npm install hexo-deployer-git

回車後可以看到

E:\BarryFlynn\Github\Barry-Flynn.github.io>npm install hexo-deployer-git
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 1 package from 1 contributor and audited 244 packages in 8.166s

15 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


E:\BarryFlynn\Github\Barry-Flynn.github.io>

下面對  Barry-Flynn.github.io 檔案夾下的  _config.yml  檔案進行配置。

右鍵  _config.yml  ，打開方式選VS Code（或者直接用VS Code打開該檔案），

滑到最下面，把關于

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:' '

的這段代碼補充為

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/Barry-Flynn/Barry-Flynn.github.io #倉庫位址
  branch: main # 預設使用 master 分支(Github現在改名為main分支)
  message: Update Hexo Static Content # 你可以自定義此次部署更新的說明說明

Ctrl+S儲存，退出VS Code，部署！

終端裡輸入指令  hexo deploy  後（或者縮寫為  hexo d  ）回車，我的電腦顯示：

E:\BarryFlynn\Github\Barry-Flynn.github.io>hexo deploy
INFO  Validating config
INFO  Deploying: git
INFO  Setting up Git deployment...
Initialized empty Git repository in E:/BarryFlynn/Github/Barry-Flynn.github.io/.deploy_git/.git/
Author identity unknown

*** Please tell me who you are.

Run

  git config --global user.email "[email protected]"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

fatal: unable to auto-detect email address (got '[email protected].(none)')
FATAL {
  err: Error: Spawn failed
      at ChildProcess.<anonymous> (E:\BarryFlynn\Github\Barry-Flynn.github.io\node_modules\hexo-util\lib\spawn.js:51:21)      at ChildProcess.emit (events.js:400:28)
      at ChildProcess.cp.emit (E:\BarryFlynn\Github\Barry-Flynn.github.io\node_modules\cross-spawn\lib\enoent.js:34:29)
      at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12) {
    code: 128
  }
} Something's wrong. Maybe you can find the solution here: %s https://hexo.io/docs/troubleshooting.html

E:\BarryFlynn\Github\Barry-Flynn.github.io>

是的，部署出錯（FATAL）了,“ Please tell me who you are.”

原來是建立git檔案夾的時候資訊不完善導緻的，

它提示我需要運作（Run）下面兩行程式，來設定我帳戶的預設辨別。

  git config --global user.email "[email protected]"

  git config --global user.name "Your Name"

注意雙引号前有空格，郵箱随便填也可以，比如QQ郵箱啥的，

我用的這個郵箱查找路徑是：點選Github首頁右上角頭像，點選settings，點選Emails，然後就能找到Github的這個郵箱了

 那麼我分别輸入這兩個指令按回車，可見下方代碼：

E:\BarryFlynn\Github\Barry-Flynn.github.io>git config --global user.email "[email protected]"

E:\BarryFlynn\Github\Barry-Flynn.github.io>git config --global user.name "Barry Flynn"

E:\BarryFlynn\Github\Barry-Flynn.github.io>

再用指令  git config -l  檢視所有的配置資訊

E:\BarryFlynn\Github\Barry-Flynn.github.io>git config -l
diff.astextplain.textconv=astextplain
filter.lfs.clean=git-lfs clean -- %f
filter.lfs.smudge=git-lfs smudge -- %f
filter.lfs.process=git-lfs filter-process
filter.lfs.required=true
http.sslbackend=openssl
http.sslcainfo=E:/Git/mingw64/ssl/certs/ca-bundle.crt
core.autocrlf=true
core.fscache=true
core.symlinks=false
pull.rebase=false
credential.helper=manager-core
credential.https://dev.azure.com.usehttppath=true
init.defaultbranch=master
[email protected]
user.name=Barry Flynn
core.repositoryformatversion=0
core.filemode=false
core.bare=false
core.logallrefupdates=true
core.symlinks=false
core.ignorecase=true

E:\BarryFlynn\Github\Barry-Flynn.github.io>

可以看見下面這兩條資訊，代表資訊以及完善上去了

[email protected]

user.name=Barry Flynn

那我們接着部署吧！

終端裡輸入指令  hexo deploy  後（或者縮寫為  hexo d  ）回車，我的電腦再次報錯：

E:\BarryFlynn\Github\Barry-Flynn.github.io>hexo deploy
INFO  Validating config
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
warning: LF will be replaced by CRLF in 2021/08/25/hello-world/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in archives/2021/08/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in archives/2021/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in archives/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in css/fonts/fontawesome-webfont.svg.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in css/style.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.min.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in js/jquery-3.4.1.min.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in js/script.js.
The file will have its original line endings in your working directory
[master (root-commit) a9fc5f8] Update Hexo Static Content
 17 files changed, 5174 insertions(+)
 create mode 100644 2021/08/25/hello-world/index.html
 create mode 100644 archives/2021/08/index.html
 create mode 100644 archives/2021/index.html
 create mode 100644 archives/index.html
 create mode 100644 css/fonts/FontAwesome.otf
 create mode 100644 css/fonts/fontawesome-webfont.eot
 create mode 100644 css/fonts/fontawesome-webfont.svg
 create mode 100644 css/fonts/fontawesome-webfont.ttf
 create mode 100644 css/fonts/fontawesome-webfont.woff
 create mode 100644 css/fonts/fontawesome-webfont.woff2
 create mode 100644 css/images/banner.jpg
 create mode 100644 css/style.css
 create mode 100644 fancybox/jquery.fancybox.min.css
 create mode 100644 fancybox/jquery.fancybox.min.js
 create mode 100644 index.html
 create mode 100644 js/jquery-3.4.1.min.js
 create mode 100644 js/script.js
fatal: unable to access 'https://github.com/Barry-Flynn/Barry-Flynn.github.io/': OpenSSL SSL_read: Connection was reset, errno 10054
FATAL {
  err: Error: Spawn failed
      at ChildProcess.<anonymous> (E:\BarryFlynn\Github\Barry-Flynn.github.io\node_modules\hexo-util\lib\spawn.js:51:21)      at ChildProcess.emit (events.js:400:28)
      at ChildProcess.cp.emit (E:\BarryFlynn\Github\Barry-Flynn.github.io\node_modules\cross-spawn\lib\enoent.js:34:29)
      at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12) {
    code: 128
  }
} Something's wrong. Maybe you can find the solution here: %s https://hexo.io/docs/troubleshooting.html

E:\BarryFlynn\Github\Barry-Flynn.github.io>

又報錯了？我很暈。問了群裡大佬，說可能是網絡問題。好吧，免費的“科學上網”軟體果然不太靠譜。重新連接配接後第三次輸入指令  hexo deploy  ，回車

E:\BarryFlynn\Github\Barry-Flynn.github.io>hexo deploy
INFO  Validating config
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
warning: LF will be replaced by CRLF in 2021/08/25/hello-world/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in archives/2021/08/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in archives/2021/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in archives/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in css/fonts/fontawesome-webfont.svg.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in css/style.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.min.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in js/jquery-3.4.1.min.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in js/script.js.
The file will have its original line endings in your working directory
On branch master
nothing to commit, working tree clean
info: please complete authentication in your browser...
Enumerating objects: 31, done.
Counting objects: 100% (31/31), done.
Delta compression using up to 4 threads
Compressing objects: 100% (25/25), done.
Writing objects: 100% (31/31), 882.21 KiB | 4.98 MiB/s, done.
Total 31 (delta 3), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (3/3), done.
To https://github.com/Barry-Flynn/Barry-Flynn.github.io
 + 4b62927...a9fc5f8 HEAD -> main (forced update)
Branch 'master' set up to track remote branch 'main' from 'https://github.com/Barry-Flynn/Barry-Flynn.github.io'.
[32mINFO [39m Deploy done: [35mgit[39m

E:\BarryFlynn\Github\Barry-Flynn.github.io>

成功了！Ohhhhhhhhhhh~

等待完成後，打開網址 

https://你的名字.github.io

 就能看到你的線上網站了！

使用 https，http 可能無法正常打開。HTTPS 是多了安全加密的 HTTP，Chrome 浏覽器已經預設會顯示 

http

 連結為不安全。

為了安全，建議開啟強制 https 跳轉。

項目位址頁面 -> Settings -> Options -> GitHub Pages -> Enforce HTTPS

。（翻到下面）

此時，http 網址會自動重定向到 https

十、備份與自動部署

我們目前隻是将生成的靜态檔案部署到了雲端。

為了以防萬一，我們應該将網站的源代碼檔案也推送到 GitHub 倉庫備份。

輸入下方代碼按回車，與遠端 Git 倉庫建立連接配接，隻此一次即可

git remote add origin https://github.com/你的使用者名/你的名字.github.io

但我一開始因為手抖，沒輸完就按回車了，如下：

（注意，這是錯誤代碼！沒輸完整）

E:\BarryFlynn\Github\Barry-Flynn.github.io>git remote add origin https://github.com/Barry-Flynn

查了一下，我需要運作輸入  git remote rm origin  删除遠端位址，

然後再輸入一遍正确的指令與遠端 Git 倉庫建立連接配接，之後就行了：

（你們不用執行這一步哦，我是因為輸錯位址導緻綁定錯了）

E:\BarryFlynn\Github\Barry-Flynn.github.io>git remote rm origin

E:\BarryFlynn\Github\Barry-Flynn.github.io>git remote add origin https://github.com/Barry-Flynn/Barry-Flynn.github.io

接下來準備送出，這三句指令将是你以後每次備份所需要輸入。

（括号内為注釋，不用輸入哈！）

（添加到緩存區）
git add -A

（這次做了什麼更改，簡單描述下即可）
git commit -m

（第一次送出時，你可能需先運作下面指令設定一下預設送出分支）
（git push --set-upstream origin hexo）

（推送至遠端倉庫）
git push

之後寫文章可以在該項目下寫，與之前一樣，隻不過這裡同時管理了兩個分支。

master -負責展示靜态網頁

hexo -備份本地hexo檔案

master分支更新

hexo d
hexo分支更新 
git add . #添加所有檔案到暫存區
git commit -m "新增部落格文章"  #送出
git push origin hexo #推送hexo分支到Github

總結

好了，這就是本篇文章：

【Hexo部落格搭建】将其部署到 GitHub Pages（二）：如何初始化并部署？

的全部内容了，更多内容會很快寫出來，盡情期待。

參考文章

教你如何從零開始搭建一個屬于自己的網站 | 雲遊君的小站 (yunyoujun.cn)

使用Hexo在GitHub Pages部署屬于你自己的部落格！ | LeoStudio (6cficu.top)

手把手教你從0開始搭建自己的個人部落格 |無坑版視訊教程| hexo_哔哩哔哩_bilibili

關于我

我是  百裡飛洋 ，一個00後小白程式員，平時可能比較中二，在各個平台也基本上都可以找到我。

 哔哩哔哩 :百裡飛洋的個人空間_哔哩哔哩_bilibili

 新浪微網誌 :百裡飛洋的微網誌_微網誌 (weibo.com)

 微信公衆号 :百裡飛洋

有時候喜歡自說自話發表一些“賊幼稚”的雞湯和牢騷啥的，上傳着關于夢想、成長、程式設計、沙雕等等各種類型的圖檔和視訊。如果在哪看見了我，可以跟我打個招呼啊！

【百裡飛洋】部落格搭建筆記 github git node.js vscode Hexo
上一篇: github+hexo搭建獨立部落格
下一篇: AI時代,誰才是晶片王者?全面解讀AI晶片競争格局

繼續閱讀