基於Hexo和Github page搭建個人部落格

本文介紹一種基於hexo框架和github page服務搭建部落格的方法，其中還將原始的github page指向了自有網域名稱。

將靜態網頁同時部署到github和國內coding

安裝git,ssh

$ sudo apt-get install git$ sudo apt-get install

ssh

配置git使用者名稱和郵箱

$ git config --global user.name "your name" $ git config--global user.email "your email"

$ ssh-keygen -t rsa -b 4096 -c "your email"

將~/.ssh/id_rsa.pub內容新增到github-setting-ssh keys

驗證github ssh連線

$ ssh -t [email protected]

more info github ss**檔.

配置完github後，建立github庫***.github.io，其中github page庫的名稱必須為xx.github.io

coding是國內的**託管**，部署到coding可以避免部落格訪問速度不穩定等問題，註冊登入coding，為了方便，建立github中的同名專案，在專案-構建與部署-靜態**中開啟服務，並繫結到自有網域名稱。同時在自有網域名稱解析中新增一條新的cname，指向coding page生成的**。

在部落格_config.yml配置檔案中同時配置github和coding部署，如：

deploy: - type: git repo: [email protected]:feiwww/littlepeanut.github.io.git branch: master - type: git repository: [email protected]:wangfeiabn/wangfeiabn.git branch: master

$ ssh-keygen -t rsa -c "your email"

在生成ssh時會提示選擇儲存路徑可以量github和coding的公鑰都儲存在~/.ssh目錄下，並重命名coding公鑰為「my-coding」，並在.ssh/下新建配置檔案

touch ~/.ssh/config

配置檔案具體內容如下：

# github host github hostname github.com preferredauthentications publickey identityfile ~/.ssh/id_rsa user feiwww # coding host coding hostname git.coding.net preferredauthentications publickey identityfile ~/.ssh/my-coding user wangfeiabn

萬網或godaddy購買網域名稱，由於國內備案麻煩謹慎購買.cn網域名稱，除.com常見的網域名稱有.cc，.me，.top，.club等。

萬網網域名稱自動使用hichina雲解析(若使用godaddy，為了加快解析速度，防止被牆，可將 dns 伺服器可設定為為dnspod)

新增兩條解析，使得訪問「***.com」和「www.***.com」時均能夠解析網域名稱

主機記錄@，記錄型別cname，解析線路預設，記錄值littlepeanut.github.io.，ttl1小時；主機記錄www，記錄型別a，解析線路預設，記錄值185.199.109.153，ttl1小時(主機ip可直接ping網域名稱得到)

今後可根據需要新增二級網域名稱

在部落格中source和public中新增cname，記錄網域名稱littlepeanut.top，將本地和github page上的hexo繫結到自有網域名稱

若在github page中使用自有網域名稱，一般在一天後才能在庫的setting中開啟https

hexo是乙個常見的靜態部落格框架.

首先參考 hexo中文文件安裝hexo，注意文件中提到在安裝時盡量不要使用sudo

安裝npm和node.js，驗證

$ node -v $ npm -v $ npx -v

下面初始化部落格

$ hexo init myblog

安裝git管理擴充套件

$ npm i hexo-deployer-git

新建文章，存放在~/source/_posts

$ hexo n "article title"
== hexo new "article title"

生成靜態網頁

$ hexo g

啟動服務，可本地預覽

$ hexo s

部署

hexo d

修改配置檔案_config.yml，首先更改url和root，若不修改，即使在本地服務網頁能夠正常顯示，部署後仍無法識別css等檔案，具體修改規則如下：

如果網域名稱是

url: root: /

如果網域名稱是blog：

url: blog root: /blog

如果網域名稱是

url: root: /blog

如果網域名稱是

url: root: /yourid.github.io/

同樣還須在_config.yml中設定部署的git庫位址

deploy: type: git repo: branch: master

其他常用hexo命令

$ npm update hexo -g #公升級 $ hexo server #hexo會監視檔案變動並自動更新，無須重啟伺服器 $ hexo server -s #靜態模式 $ hexo server -p 5000 #更改埠 $ hexo server -i 192.168.1.1 #自定義 ip $ hexo clean #清除快取，若是網頁正常情況下可以忽略這條命令

在一般情況下更新部落格時，重新生成下靜態部落格並部署到github上即可，使用的操作如下：

$ hexo clean $ hexo g $ hexo d

使用bentech主題效果如下所示。

使用hexo d將hexo部署到github page中後，只是將靜態部落格上傳，並沒有儲存部落格的源**，為了方便在不同終端電腦上對部落格格式和內容進行修改，這裡將部落格所有源**同時儲存到github中，具體是將源**儲存到我們github page專案的分支中。

在網頁端新增hexo分支，並將其設定為主分支，在切換到hexo分支後

將專案clone到本地，取出clone的專案的.git資料夾放到部落格的根目錄下

將**上傳到hexo分支中

$ git checkout hexo $ git add . $ git commit -m "update my blog source code" $ git push origin hexo

基於Hexo和Github page搭建個人部落格

基於 Hexo 的 Github 部落格搭建

基於hexo部落格，運用markdown編寫部落格

基於hexo搭建部落格後更換主題butterfly

基於Hexo和Github page搭建個人部落格

基於 Hexo 的 Github 部落格搭建

基於hexo部落格，運用markdown編寫部落格

基於hexo搭建部落格後更換主題butterfly

相關推薦