使用Hexo和github page和coding page搭建個人部落格

• 成果預覽
• 搭建環境
• 安裝
• 新建網站
• 生成SSH
• 將部落格部署到 github
• 將部落格部署到 coding
• 設定個人域名
  • github中的設定
  • coding中的設定

成果預覽

• 我的個人部落格

搭建環境

• Windows

安裝

• 安裝 Node.js

• 安裝 Git

• 安裝 Hexo

  • 滑鼠右鍵開啟git bash
  • 在在git bash中輸入下列命令

  npm install -g hexo-cli
  

• 安裝hexo-deployer-git

npm install hexo-deployer-git --save
 

• 檢視版本
  • 檢視node的版本

  node -v
  

  • 檢視npm的版本

  npm -v
  

  • 檢視hexo的版本

  hexo -v
  

新建網站

• 初始化hexo，在git bash中輸入如下命令。***是資料夾名稱，名稱任意，如果為空，則預設在當前的資料夾下建立網站。以後的部落格內容都在該資料夾中。

hexo init ***

• 進入***資料夾

cd ***

• 在***資料夾下執行

npm install

• 生成靜態檔案

hexo generate

• 啟動伺服器

hexo server

• 訪問網站，預設情況下，訪問網址為：http://localhost:4000/

生成SSH

• 配置git使用者名稱。-–global引數，用了這個引數，表示你這臺機器上所有的Git倉庫都會使用這個配置，也可以對某個倉庫指定不同的使用者名稱和Email地址，我配置的使用者名稱和郵箱與github和coding平臺的相同。

git config --global user.name "name"

• 配置git郵箱

git config --global user.email "email"

• 檢視使用者配置

git config --global -l

• 建立SSH。建立過程中會要求設定密碼，可以不設定密碼，直接按回車鍵

ssh-keygen -t rsa -C "email"
 

• id_rsa是私鑰，id_rsa.pub是公鑰，預設位置在C:\Users\使用者名稱\.ssh中。
• 將公鑰新增到github中
  • Settings->SSH and GPG keys->New SSH key
  • 將id_rsa.pub公鑰檔案中的內容複製到Key中
  • 公鑰名稱任意
  • 檢視是否新增成功

  ssh -T [email protected]
  

• 將公鑰新增到coding中
  • 個人賬戶設定->SSH公鑰->新增公鑰
  • 將id_rsa.pub公鑰檔案中的內容複製到公鑰內容中
  • 公鑰名稱任意
  • 檢視是否新增成功

  ssh -T [email protected]
  

將部落格部署到 github

• 在github中建立一個倉庫，倉庫名稱為***.github.io,***為github的使用者名稱。
• 開啟站點配置檔案_config.yml，新增下列內容

deploy:
  type: git
  repo:
    github: [email protected]:phd99/phd99.github.io.git,master

• 將部落格內容部署到github，- 部署成功後，可以訪問http://***.github.io檢視自己的個人部落格

hexo clean && hexo g && hexo d

將部落格部署到 coding

• 在coding中建立一個專案，名稱任意
• 在該專案中建立一個程式碼倉庫，名稱任意，倉庫型別為git倉庫
• 開啟coding pages服務
  • 在該專案中選擇持續部署->靜態網站
  • 部署成功後會提供一個網路地址，使用該url檢視自己的部落格
• 開啟站點配置檔案_config.yml，修改下列內容

deploy:
  type: git
  repo:
    coding: [email protected]:phd99/phd99/phd99.git,master
    github: [email protected]:phd99/phd99.github.io.git,master

• 將部落格內容部署到coding，- 部署成功後，可以訪問coding提供的網路地址來檢視個人部落格

hexo clean && hexo g && hexo d

設定個人域名

• 如果購買了域名，可以設定通過購買的域名來訪問個人部落格，我是在阿里雲上購買的域名

github中的設定

• 登入github->進入倉庫->Settings->Options->GitHub Pages
  • 在Custom domain中新增自己購買的域名
  • 點選儲存
  • 勾選Enforce HTTPS
• 登入阿里雲->賬號管理->域名控制檯->找到要設定的域名->解析->新增記錄
  • 記錄型別為CNAME
  • 主機記錄為@，再重新新增一條記錄並將主機記錄改為www，其他的不變
  • 解析線路為預設，若還使用了coding，可以將github設定為境外，將coding設定為預設
  • 記錄值為***.github.io
• 在部落格根目錄下source資料夾中建立一個檔案，名稱為CNAME，沒有後綴
• 編輯CNAME檔案，將購買的域名輸入到該檔案內

www.phd99.com

• 重新部署一下，過一會兒就可以通過訪問購買的域名來檢視個人部落格了

hexo clean && hexo g && hexo d

coding中的設定

• 登入coding->進入專案->持續部署->靜態網站->自定義域名->新建域名->輸入購買的域名->確定
• 新增域名後，網站會自動重新部署，並且同時去申請SSL證書
  • 申請證書時，會提供一些資訊，需要給域名新增一條記錄，新增之後，過一會兒，SSL證書就申請成功了，此時域名也新增成功了
• 登入阿里雲->賬號管理->域名控制檯->找到要設定的域名->解析->新增記錄
  • 記錄型別為CNAME
  • 主機記錄為@，再重新新增一條記錄並將主機記錄改為www，其他的不變
  • 解析線路為預設
  • 記錄值為***.com.cdn.dnsv1.com
• 登入coding->進入專案->持續部署->靜態網站->重新部署