【轉載】Hexo+GitHub構建個人部落格

boxboss發表於2020-10-23
HexoGithub

原文地址：https://www.namidame.tech/Hexo+GitHub_build_blog.html

本篇教程講述如何用Hexo和GitHub搭建一個靜態部落格。

一、安裝Node.js

  • 到Node.js官網下載最新版本安裝。本教程使用6.3.0版本。
  • 安裝完畢後開啟命令列，輸入
node -v

若正常顯示版本號，則安裝成功
在這裡插入圖片描述

二、安裝Hexo

Hexo是一個快速、簡潔且高效的部落格框架，支援Markdown格式編寫，能夠快速構建、部署部落格。

  • 建立一個資料夾，你的部落格檔案將存放在此資料夾內，例如E:/MyBlog
  • 進入MyBlog資料夾，shift+右鍵彈出選單，點選"在此處開啟命令視窗"，輸入命令在全域性安裝hexo框架
npm install hexo-cli -g
  • hexo安裝完成後，輸入
hexo init

程式將自動克隆GitHub上的hexo初始工程到目錄中，並安裝package.json裡預設的依賴包

  • 測試Hexo部落格。輸入命令
hexo server

本地測試預設監聽4000埠，開啟後顯示以下資訊則啟動成功
在這裡插入圖片描述

還可以使用以下命令啟動部落格，以輸出更詳細的啟動資訊

hexo server --debug

伺服器啟動後會自動監聽檔案改變，大部分改變在檔案儲存後直接訪問localhost:4000即可檢視效果。
也可以使用以下簡化命令來啟動部落格

hexo s

三、安裝Git

  • 網上很多教程推薦在msysgit.github.io下載，但是我訪問不了。我推薦在git-scm.com下載。本教程使用Git-2.12.2-64-bit版本。一般安裝一直往下一步點就行。
  • 安裝完畢在命令列輸入命令，顯示git版本號則成功安裝
git --version

在這裡插入圖片描述

四、使用GitHub託管你的部落格

GitHub提供GitHub Pages服務，為你建立的每一個專案提供專有的頁面給其他人訪問，如果我們將部落格生成的靜態HTML檔案等內容佈置到GitHub Pages上，那麼其他人就可以訪問這個頁面來閱讀你的部落格，相當於一個伺服器的作用。

假設你的GitHub使用者名稱為yourname，那麼如果你想建立你的GitHub個人主頁，可以新建一個名為yourname.github.io的倉庫，這樣GitHub會為你生成一個名為yourname.github.io/的頁面作為你的個人主頁。而其他名字的倉庫(例如other)生成的GitHub Pages則會是yourname.github.io/other/的地址形式。

我們需要建立兩個repository，一個是用來存放部落格的原始碼，另一個用來存放部落格生成的靜態檔案。我的部落格原始碼存放在https://github.com/drawfromwreck/BlogSource，部落格靜態檔案存放在https://github.com/drawfromwreck/drawfromwreck.github.io中，於是我建立的兩個倉庫名字分別為"drawfromwreck.github.io"和"BlogSource"。

  • 首先在GitHub上申請自己的帳號。

  • 申請好之後，在主頁點選Start a project建立新的程式碼倉庫(repository)
    在這裡插入圖片描述

  • 輸入你所設定的兩個倉庫名字，本教程中分別為"drawfromwreck.github.io"和"BlogSource"。這樣GitHub倉庫就建立好了。

在這裡插入圖片描述在這裡插入圖片描述

五、配置SSH

  • 在E:/MyBlog/裡點選滑鼠右鍵，點選"Git Bash Here"
  • 輸入命令
cd ~/.ssh

如果目錄不存在，則建立目錄

cd ~/
mkdir .ssh
  • 進入.ssh目錄，生成ssh證書
cd ~/.ssh
ssh-keygen -t rsa -C "your e-mail"

這裡的-t表示type為rsa加密，-C(Common)表示生成的key最後加上你GitHub帳號的郵箱名，以提示這段加密串是屬於哪個帳號的。

  • 提示選擇儲存證書的檔名，直接回車使用預設值
    在這裡插入圖片描述

  • 提示設定passphrase，此密碼以後每次提交的時候需要輸入。再次輸入以確認密碼，則成功建立證書。
    在這裡插入圖片描述

  • 檢視ssh公鑰

cat id_rsa.pub

在這裡插入圖片描述

  • 點選GitHub右上角的使用者頭像，點選Settings，點選右側的SSH and GPG keys，點選右上角的New SSH key加入新的ssh證書。Title我設定成為home表示這是家裡的電腦提交時用的證書，Key裡貼上上剛剛生成的ssh公鑰，記得把最後加上的郵箱名去掉。
    在這裡插入圖片描述

六、上傳部落格靜態檔案

  • 配置_config.yml檔案。用文字編輯器開啟部落格根目錄下的_config.yml檔案，拉到最下面，如圖設定
    在這裡插入圖片描述

deploy表示釋出設定，type選擇git釋出，repo表示倉庫地址的配置，這裡我們按如下格式填寫，yourname表示你的GitHub使用者名稱，master表示釋出到倉庫的master分支。

github:git@github.com:yourname/yourname.github.io.git,master
  • 安裝hexo的git釋出工具
npm install hexo-deployer-git
  • 生成靜態檔案併發布到GitHub倉庫。輸入以下其中一種命令，hexo便會生成public檔案並將public資料夾內容釋出到倉庫
hexo d -g
hexo g -d

提示輸入ssh設定的密碼，輸入密碼即可釋出成功
在這裡插入圖片描述

  • 進入GitHub倉庫github.com/yourname/yourname.github.io，此時倉庫中已有上傳的靜態檔案
    在這裡插入圖片描述

  • 點選右側Settings，在GitHub Pages項選擇Source為master branch，點選Save，頁面重新整理後則已生成個人部落格頁面，點選連結即可檢視
    在這裡插入圖片描述

七、上傳部落格原始檔

上傳部落格原始檔的目的是為了多地開發。比如你在家裡建立了hexo部落格，將生成的靜態檔案上傳到GitHub，但你在公司也想寫部落格，最方便的方式就是用GitHub管理部落格的原始檔，這樣在公司的電腦將部落格專案克隆下來，再進行相應配置，便可進行部落格的編寫。現在將部落格原始檔釋出到BlogSource倉庫。

  • 開啟部落格根目錄，將.git資料夾刪除
  • 如下編輯.gitignore檔案
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
themes/

這樣在上傳原始檔時就會忽略掉node依賴模組、生成的public靜態檔案、themes下的主題庫等不需要上傳的檔案

  • 開啟Git Bash，建立一個空的git專案
git init
  • 輸入命令將所有有改動的檔案加入git緩衝區，因為是第一次釋出，等於加入全部需要上傳的檔案
git add .
  • 檢視git緩衝區檔案狀態，或檢視簡化資訊
git status
git status -s
  • 第一次上傳執行以下命令，git會將此倉庫地址設定成預設的地址
git remote add origin git@github.com:yourname/BlogSource.git

在.git/config檔案裡可以修改預設倉庫地址

[remote "origin"]
	url = http://github.com/yourname/BlogSource
	fetch = +refs/heads/*:refs/remotes/origin/*
  • 提交git更改，m引數填寫更新原因，如為空會失敗
git commit -m "..."
  • 推送更改。則成功將部落格原始檔上傳至BlogSource倉庫。
git push origin

在這裡插入圖片描述

著作權歸作者所有。
商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。
作者: 你很德布羅意
郵箱: namidame@sina.cn
部落格地址: https://www.namidame.tech/
原文地址: http://www.namidame.tech/Hexo+GitHub_build_blog.html

相關文章