hexo + github page 搭博客

博客發佈原理

撰寫博客 --> hexo 渲染生成靜態頁面 --> 部署到 github page --> 用戶訪問

GitHub Pages 是由 GitHub 官方提供的一種免費的靜態站點託管服務,
讓我們可以在 GitHub 倉庫裏託管和發佈自己的靜態網站頁面。
Hexo 是一個快速、簡潔且高效的靜態博客框架,它基於 Node.js 運行,
可以將我們撰寫的 Markdown 文檔解析渲染成靜態的 HTML 網頁。

安裝 Node.js

linux 有編好的二進制

wget https://nodejs.org/dist/v12.16.1/node-v12.16.1-linux-x64.tar.xz \
--no-check-certificate

解壓後,將可執行文件軟鏈接到某個環境變量能找到的位置,例如 /usr/local/bin
ln -s xxx/node-v12.16.1-linux-x64/bin/npm /usr/local/bin
ln -s xxx/node-v12.16.1-linux-x64/bin/node /usr/local/bin
ln -s xxx/node-v12.16.1-linux-x64/bin/npx /usr/local/bin

安裝 hexo

如果沒法科學上網的話,建議採用國內鏡像加速
npm config set registry https://registry.npm.taobao.org
npm install hexo-cli -g

hexo-cli 被放在了 node_xx/node_modules/,安裝完成後會自動完成以下軟鏈接
xxx/node-v12.16.1-linux-x64/bin/hexo ->
xxx/node-v12.16.1-linux-x64/lib/node_modules/hexo-cli/bin/hexo
建議和 npm node npx 一樣在 /usr/local/bin 下面建一個軟鏈接

安裝 git

以上安裝完成後以下命令均應當有相應的輸出。

npm -v
node -v
hexo -v
git --version

配置 git,通過 ssh 協議訪問 github,這樣不用每次輸密碼。

git config --global user.name "username"
git config --global user.email "youremail"

# use ssh to connet the github
ssh-keygen -t rsa -C "your comments" #生成 ssh 祕鑰對
cat ~/.ssh/id_rsa.pub #將公鑰內容拷貝到 github

打開 github,在頭像下面點擊 settings,再點擊SSH and GPG keys,New SSH key。
把上面 id_rsa.pub 的內容複製進去即可。

ssh -T [email protected]
應當顯示校驗成功。You've successfully authenticated

github 上新建一個倉庫,倉庫名必須是 github 用戶名開頭,.github.io 爲後綴。github_user_name.github.io

生成博客框架

在本機創建博客目錄,初始化該目錄,安裝依賴包,通過 hexo 生成靜態網頁。

mkdir blog #博客根目錄
cd blog
hexo init #初始化博客目錄
npm install #安裝所有依賴包
hexo g #等同於hexo generate,生成靜態文件
hexo s #等同於hexo server,在本地服務器運行

打開 localhost:4000 查看博客效果
http://your_server_ip:4000

博客目錄結構

.
├── _config.yml  #站點配置文件
├── db.json
├── node_modules #npm 包
├── package.json #npm 包信息
├── package-lock.json
├── public       #待部署的網頁信息
├── scaffolds    #文章模板
├── source       #博客內容
└── themes       #博客網站主題

5 directories, 4 files

站點配置文件 blog/_config.yml
主題配置文件 blog/themes/xxx/_config.yml

寫博客

新建博客,hexo new "title"
編輯博客
生成網頁 hexo g
本地預覽 hexo s
瀏覽器登錄查看
部署到 github, hexo g

將博客部署到 github page

常用插件
hexo-deployer-git 部署
hexo-generator-feed RSS 訂閱
hexo-generator-sitemap 站點地圖

安裝一個擴展,在博客根目錄執行 npm i hexo-deployer-git
在站點配置文件末尾添加如下配置項。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  repo: https://github.com/usrname/usrname.github.io.git
  type: git
  branch: master

注意換成自己的用戶名,之後 hexo d 就能將本地網頁內容部署到 github 上。只要有互聯網,都可以通過倉庫名 username.github.io 來訪問博客啦。

綁定域名

默認域名是 xxx.github.io,如果有其他域名需求可在各種雲服務商上購買服務。在雲服務商那裏配置解析記錄。然後在 github 博客倉庫 settings 裏找到 Custom domain 裏填上域名。
在這裏插入圖片描述
這時候項目根目錄應該會出現一個名爲 CNAME 的文件。如果沒有的話,打開本地博客的 /source 目錄,新建 CNAME 文件。
然後在裏面寫上域名。最後運行 hexo ghexo d上傳到 github

博客備份

本地博客目錄文件大小還是很大的,關鍵的配置文件可以備份,方便在其他電腦上進行寫作。

一個全新的博客本地文件目錄如下
.
├── _config.yml
├── node_modules
├── package.json
├── package-lock.json
├── scaffolds
├── source
└── themes

4 directories, 3 files
在生成網頁後會多出 public 目錄以及 db.jason,可能會對其他文件進行修改。
├── db.json
├── public
在部署時還會生成
.depolyer_git 目錄

主要的大目錄是 node_modules 以及 public。前者可以用 git submodule 管理,或者進行壓縮備份,後者用於部署的生成的網頁信息,不是框架必須的,只需要備份餘下的所有文件即可。本地測試 hexo init 初始化的全新博客目錄發現,node_modules 佔用了 40M,而整個博客項目才 41M。因此上述方案是可行的。可以在 .gitignore 中直接忽略相應的文件

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

安裝主題

# download theme next
git clone https://github.com/iissnan/hexo-theme-next themes/next
# config
修改 _config.yml 裏的 theme 字段爲 next,默認主題是 landscape

因爲會對主題做定製化修改,建議採用 submodule 的方式跟蹤主題倉庫,一方面方便回合上游的補丁,另一方面以後換電腦寫博客也會方便很多。首先在 github 上 fork 一個主題倉庫,作爲 submodule 的倉庫地址,然後執行

git add submodule https://github.com/xxx/hexo-theme-next.git ./theme/next

以後克隆博客倉庫只需要執行
git clone --recursive-submodules xxx.git

或者
git clone xxx.git
git submodule init
git submodule update

If you already cloned the project and forgot --recurse-submodules, you can combine the git submodule init and git submodule update steps by running git submodule update --init. To also initialize, fetch and checkout any nested submodules, you can use the foolproof git submodule update --init --recursive.

記錄一些 submodules 的命令
git config --global diff.submodule log
git config -f .gitmodules submodule.xxx.branch trace_branch
git config status.submodulesummary 1
git submodule sync --recursive
git submodule update --remote --rebase
git config push.recurseSubmodules check
git config push.recurseSubmodules on-demand
git submodule foreach 'git stash'
git submodule foreach 'git checkout -b feature-A

# 可以定義一些命令別名,省得記那麼長的命令
$ git config alias.sdiff '!'"git diff && git submodule foreach 'git diff'"
$ git config alias.spush 'push --recurse-submodules=on-demand'
$ git config alias.supdate 'submodule update --remote --merge''
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章