博客發佈原理
撰寫博客 --> 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 g
,hexo 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''