(Ⅰ)基於Hexo+GitHub Page搭建博客,綁定域名及備份

前言

這裏引用阮一峯老師網絡日誌裏說的,對於喜歡寫博客的人,會經歷三個階段:

第一階段,剛接觸 Blog,覺得很新鮮,試着選擇一個免費空間來寫。

第二階段,發現免費空間限制太多,就自己購買域名和空間,搭建獨立博客。

第三階段,覺得獨立博客的管理太麻煩,最好在保留控制權的前提下,讓別人來管,自己只負責寫文章。

大多數博客作者,都停留在第一和第二階段,因爲第三階段不太容易到達:你很難找到俯首聽命、願意爲你管理服務器的人。

但是其實該情況早已改變,很多程序員早已在 GitHub 網站上搭建 Blog。他們既擁有絕對管理權,又享受 GitHub 帶來的便利——不管何時何地,只要向主機提交 commit,就能發佈新文章。更妙的是,這一切還是免費的,GitHub 提供無限流量,世界各地都有理想的訪問速度。

好了,本文就來講如何在 GitHub 上搭建博客及採用 Git 分支進行文章備份。

基於 Hexo+GitHub Page 搭建博客的教程,網上這樣的文章很多,在這之前我也記錄過一篇 基於Hexo+GitHub Page搭建免費個人博客教程。網上相關文章也很多:

本文主要是梳理搭建步驟,特別地,本文主要特點有采用 Git 分支進行對博客源文章進行備份。

1. 博客搭建

在搭建過程之前,先了解下 npm。

先簡單介紹下 npm:npm 是 Node 的模塊管理器,功能極其強大。它是 Node 獲得成功的重要原因之一。正因爲有了 npm,我們只要一行命令,就能安裝別人寫好的模塊 。npm install命令用來安裝模塊到 node_modules目錄。

NPM 是隨同 NodeJS 一起安裝的包管理工具,能解決 NodeJS 代碼部署上的很多問題,常見的使用場景有以下幾種:

  • 允許用戶從 NPM 服務器下載別人編寫的第三方包到本地使用。
  • 允許用戶從 NPM 服務器下載並安裝別人編寫的命令行程序到本地使用。
  • 允許用戶將自己編寫的包或命令行程序上傳到 NPM 服務器供別人使用。
    由於新版的 nodejs 已經集成了 npm,所以之前 npm 也一併安裝好了。同樣可以通過輸入 “npm -v” 來測試是否成功安裝。命令如下,出現版本提示表示安裝成功。

—— From: 菜鳥教程

npm 的包安裝分爲本地安裝(local)、全局安裝(global)兩種,從敲的命令行來看,差別只是有沒有 -g 而已,比如:

npm install express	# 本地安裝
npm install express -g   # 全局安裝

本地安裝:

將安裝包放在 ./node_modules 下(運行 npm 命令時所在的目錄),如果沒有 node_modules 目錄,會在當前執行 npm 命令的目錄下生成 node_modules 目錄。可以通過 require() 來引入本地安裝的包。

全局安裝:

將安裝包放在 /usr/local 下或者你 node 的安裝目錄。可以直接在命令行裏使用。

如果你希望具備兩者功能,則需要在兩個地方安裝它或使用 npm link。

1.1 搭建步驟

(1) 第一步:Github Pages

Github Pages 免費的靜態站點,其特點:免費託管、自帶主題、支持自制頁面等。

創建 Github Pages 比較簡單,只要你有一個 GitHub 賬號在創建一個倉庫就行了,但是這個倉庫是有規則的,其格式必須爲:yourusername.github.io。然後根據提示一直下一步即可,非常簡單。比如我的賬戶名爲strivebo,則格式爲strivebo.github.io。(這裏在 GitHub 上創建倉庫我就不多講了吧?)

(2) 第二步:Hexo相關操作

我把用到的命令先記錄在此:

hexo new "postName" #新建文章,縮寫爲:hexo n
hexo new page "pageName" #新建頁面
hexo generate #生成靜態頁面至public目錄,,縮寫爲:hexo g
hexo server #開啓預覽訪問端口(默認端口4000,'ctrl + c'關閉server),縮寫爲:hexo s  
hexo s -p 8080  #本地預覽的時候修改端口爲8080 
hexo s -debug #本地預覽調試
hexo deploy #部署到GitHub,縮寫爲:hexo d
hexo clean  # 清除緩存文件 db.json 和已生成的靜態文件 public 
hexo help  # 查看幫助
hexo version  #查看Hexo的版本
---------------以下爲組合命令----------------------------------
hexo s -g  #生成並本地預覽
hexo d -g  #生成並上傳

具體的操作步驟:

  1. 安裝 Gitnode.js(筆者實踐使用的 Git-2.15.0-64-bit.exenode-v9.4.0-x64.msi 版本);

  2. 新建目錄,如名稱爲 blog 的文件夾,然後在該目錄下的Git Bash (安裝了 Git 就有這個,鼠標右鍵會出現)下輸入npm install -g hexo

    基於上面對 npm 的瞭解,此命令爲全局安裝 hexo;也有看到教程寫的是:npm install -g hexo-cli這個(並且官方文檔也是用的這個命令說是安裝 hexo);或者好像也可以使用npm install hexo --save進行安裝(親測:不可以先使用這個命令!),安裝完畢生成了node_node_modules文件夾(莫非這個命令纔是此版本 node.js 對應的安裝方式?),然後再執行hexo或者是後面的需要用到的hexo g命令,都會生成db.json文件,我現在還不知道其作用,當然hexo g還會生成 public 文件內容(文章被編譯形成的文件夾)。

    去網上找了下解釋:hexo和hexo-cli的關係?

    ① hexo 本身是一個靜態博客生成工具,具備編譯 Markdown、拼接主題模板、生成 HTML、上傳 Git 或 FTP 等基本功能。將這些功能封裝爲命令,提供給用戶通過 hexo server / hexo deploy 等命令調用的模塊,就是 hexo-cli 了。CLI = Command Line Interface 命令行界面。

    ② 後者是前者的命令行模式,即 hexo-clihexo的命令行模式。

  3. 再在該目錄下,Git Bash 下敲hexo init,會自動下載如下文件及文件夾到這個目錄,但不包括 public 文件夾。

    node_node_modules 文件夾(納悶:按道理不是在npm install -g hexo生成嗎?)
    scaffolds 文件夾
    source 文件夾
    themes 文件夾
    .gitignore 
    _config.yml 
    package.json 
    package-lock.json 
    

    備註:public 文件夾爲 hexo generatehexo g(其實是這個「編譯過程」)生成靜態頁面纔會生成的文件夾。

  4. 然後 hexo generatehexo g生成 public 文件夾(該文件夾下爲 .md 文件編譯後生成的靜態文件,包括html/css/js/圖片等等)和db.json文件

    public文件夾下爲.md文件編譯後形成的文件,也正是被 hexo deploy部署到 GitHub 上的文件。

  5. 可以hexo s開啓本地預覽端口,輸入 http://localhost:4000/ 進行預覽,可以看到默認主題下的博客,如果遇到 4000 端口被佔用的問題,可以使用比如 hexo s -p 8080 指定 8080 端口預覽。好了! 本地搭建的活幹完了!

    現在可以試試寫文章了實踐了,執行hexo new "第一篇博客.md",這樣就在 source 目錄下生成該博客文章了,然後可以進行寫作了,再去執行hexo g編譯和hexo s預覽了,另外如果文章寫錯了需修改,可以重新生成;網站顯示異常時,可以先使用hexo clean清除緩存文件 db.json 和已生成的靜態文件目錄 public,再hexo g重新生成。

  6. 本地預覽完畢,則hexo deployhexo d 發佈至 GitHub,訪問地址格式如:https://yourname.github.io

    注:若在發佈至 GitHub 提示 Deployer not found: github 或者 Deployer not found: git , 原因是需要安裝一個插件,命令是:npm install hexo-deployer-git --save(網上搜了下,這步的含義說是在安裝 git 插件)

    發佈之後,該文件下該目錄下生成了 .deploy_git 文件夾(目測了下:該文件有一個.git文件夾;其他文件和public文件夾下內容一樣)。那該文件夾幹嘛的?

    網上看到的解釋 1:

    .deploy_git: 這個應該是 git 部署用的文件。比如你寫好的博客想部署到 GitHub Pages 上去的話,可以用 git 部署插件,那個插件會創建這個目錄

    網上看到的解釋 2:

    注意,使用這種方式,只會將 hexo 編譯後生成的 html、css、js 等上傳到 github.io 代碼庫中,並不會將本地的其它源碼提交;
    同時,在本地生成一個 .deploy_git 目錄,表示是 hexo 專用的 git 庫;

    我在部署,即上傳至 GitHub 完畢之後,查看到 master 分支上的文件和.deploy_git文件夾下的文件相同,所以我的猜測正如網上看到的解釋的意思:**hexo d 只會發佈編譯後生成的文件,.deploy_git目錄表示 hexo 專用的 git 庫,在 hexo d 進行發佈部署的時候,會拷貝 public 文件夾所有內容至 .deploy_git 目錄下,再把該文件內容推送到 GitHub 倉庫。**在後面的實踐中,證實了這點!

    這裏有個思考的地方?hexo d 發佈的時候爲什麼就會發布到倉庫下 master 的分支(我倉庫下明明還有 backup 分支)呢?哈哈,我猜測是在設置_config.yml該文件的時候:

    deploy: 
    type: git
    repository: [email protected]:strivebo/strivebo.github.io.git
    branch: master
    

    我這裏 branch 設置的爲 master,所以默認部署到 master 分支。

    其中這裏的配置我解釋下:如repository配置爲[email protected]:strivebo/strivebo.github.io.git 寫上這樣的表示採用的 ssh 方式,若爲https://github.com/strivebo/strivebo.github.io.git表示採用 https 方式提交。注意的地方,type 值這裏爲 git,我看網上很多人說之前很多人設置的值爲 github,被坑了。

(3) 更換主題

對於默認主題我們不喜歡怎麼辦?不着急,是可以換主題的,可以到官網推薦的主題選擇:https://hexo.io/themes/,或者到 GitHub 上搜索關鍵字「hexo-theme」也能搜到很多;然後就是直接下載下來就行,解壓出來裏面文件夾複製粘貼到博客根目錄的 themes 文件夾下,最後配置好主題配置文件_config.yml站點配置文件_config.yml(即博客根目錄下的_config.yml),其中站點配置文件只要把theme值改爲複製粘貼過來的主題的那個文件夾名稱就行。

然後編譯、發佈、預覽就可以看到效果了!

1.2 域名綁定

不綁定域名肯定也是可以的,就用默認的 xxx.github.io 來訪問,如果想更個性一點,想擁有一個屬於自己的域名,那也是 OK 的。

分兩大步驟:先到服務商比如阿里雲旗下萬網進行的操作;然後在倉庫項目的操作。

關於域名的註冊,以前域名的註冊總是推薦去國外的 godaddy , 但是現在國內的 阿里雲旗下萬網 也很多人在使用,價格也不貴,一般首次註冊使用還是很便宜的,但據大家說在萬網註冊 .cn 等後綴域名是需要在國內備案的,如果在國外服務商註冊,如 godaddy 註冊,就不用備案。

關於備案問題,我有在網上了解了下,以下摘自網上:

域名的備案根據你的服務器主機而定,主機在哪就在哪裏備案;

只有中國國內的空間纔要求備案,接入商會嚴格把關的,不備案的網站是絕對不能訪問的;

網站備案主要是看你的網絡主機是哪家公司的,就在哪家公司做備案;

備案與域名註冊商無關,與服務器有關,也就是說你的域名可以接入其他任何一家 IDC,但如果你的服務器在萬網,那麼萬網作爲服務器接入商,你的備案信息就必須先經過萬網的審覈後才能遞交工信部終審;

註冊 cn 域名做網站並不是一定需要備案的,主要還是看用的是哪時主機。如果用的是國內主機,那麼就必須備案,如果用的是國外的空間,那麼就不需要備案,直接使用即可。不過需要注意的是,根據 CN 域名管理機構 CNNIC 的規定,cn 域名在註冊時需要註冊人提交身份證掃描件進行審覈,在審覈通過後才能正常使用,否則就會註冊失敗;

其實是一句話,域名如果綁定指向到國內網站空間就要備案。也就是說如果你這個域名只是純粹註冊下來,用作投資或者暫時不用,是無需備案的。域名指向到國外網站空間,也是無需備案的。但是 CN 域名是特例,CN 域名指向到國外網站空間也要備案,不備案就是暫停解析狀態,無法指向到任何 IP。由於域名備案基本取決於網站空間的情況,所以備案也是空間服務商提供備案,不是域名註冊商。

看了網上一些解釋,我大概明白了,是否備案與域名無關,得看購買的主機/服務器在哪,在國內的才需要備案。我想我利用的是 GitHub Page 服務,相當於服務器在國外,所以不用備案吧。下面以在萬網註冊爲例。

(1) 萬網的操作——域名解析設置

登入萬網購買域名。然後:管理控制檯 → 域名與網站(萬網) → 域名;在購買的那個域名處,點擊「解析」,進行如下設置。

綁定域名分 2 種情況:帶 www 和不帶 www 的。

域名配置最常見有 2 種方式,CNAME 和 A 記錄,CNAME 填寫域名,A 記錄填寫 IP,由於不帶 www 方式只能採用 A 記錄,所以必須先 ping 一下你的 用戶名.github.io 的 IP,然後到你的域名 DNS 設置頁,將 A 記錄指向你 ping 出來的 IP,將 CNAME 指向你的 用戶名.github.io,這樣可以保證無論是否添加 www 都可以訪問,如下:

記錄類型 主機記錄 解析線路 記錄值
A @ 默認 103.245.222.133
CNAME www 默認 strivebo.github.io

(2) 對倉庫的操作——添加CNAME文件

在 GitHub 博客倉庫 master 分支根目錄創建一個 CNAME 文件(無後綴),裏面填寫你的域名,加不加 www 看自己喜好,因爲經測試:

  • 如果你填寫的是沒有 www 的,比如 mygit.me,那麼無論是訪問 http://www.mygit.me 還是 http://mygit.me,都會自動跳轉到 http://mygit.me
  • 如果你填寫的是帶 www 的,比如 www.mygit.me ,那麼無論是訪問 http://www.mygit.me 還是 http://mygit.me,都會自動跳轉到 http://www.mygit.me
  • 如果你填寫的是其它子域名,比如 abc.mygit.me,那麼訪問 http://abc.mygit.me 沒問題,但是訪問 http://mygit.me ,不會自動跳轉到 http://abc.mygit.me

關於添加 CNAME 文件簡單提下,如果你不想如上直接在遠程倉庫創建 CNAME 文件,可按如下操作在本地添加完再部署:

在博客目錄的 source 文件夾下添加 CNAME 文件,hexo g 編譯會自動生成這個文件於 public 中,hexo d 部署的時候會把 public 文件夾下文件複製於 .deploy_git 目錄下進行發佈。

參考資料:使用hexo+github搭建免費個人博客詳細教程

域名綁定個人實操

(1) 域名註冊和解析

一開始我使用的都是阿里雲的,包括購買域名、域名解析,後來域名快要到期了,準備續費三年,發現有點小貴,於是想着買一個新的域名會不會更便宜呢?然後有在騰訊雲下搜了下相同名稱但後綴爲 .com 的域名發現比在阿里雲續費三年價格還便宜一點點,遂直接在騰訊雲買了個新的域名(購買傳送門),解析用的是騰訊雲的免費解析套餐(雲解析套餐 - 騰訊雲 可以瞭解下)。以下是我的解析設置:

主機記錄 記錄類型 線路類型 記錄值
www CNAME 默認 strivebo.github.io.
@ CNAME 默認 strivebo.github.io.

從上圖可以瞭解到,添加 www、@ 記錄,CNAME 的類型,這樣話,不管地址欄輸入的是帶 www 的www.strivebo.com ,還是不帶 www 的 strivebo.com 都是可以訪問到目標網頁。

(2) 創建CNAME文件

在本地博客根目錄下的 source 文件夾中,新建一個名爲 CNAME 的文件,注意這個文件不帶 任何後綴名。打開 CNAME 文件,在裏面填寫你購買的域名,加不加www看前文的說明,就不贅述了。

(3) SSL證書

什麼是 SSL 證書?

首先說明 SSL(安全套接層,Secure Sockets Layer)是一種安全協議,目的是爲互聯網通信,提供安全及數據完整性保障。SSL 證書遵循 SSL 協議,可安裝在服務器上,實現數據傳輸加密。

CA(數字證書認證,Certificate Authority)機構,是承擔公鑰合法性檢驗的第三方權威機構,負責指定政策、步驟來驗證用戶的身份,並對 SSL 證書進行簽名,確保證書持有者的身份和公鑰的所有權。CA 機構爲每個使用公開密鑰的用戶發放一個 SSL 證書,SSL 證書的作用是證明證書中列出的個人/企業合法擁有證書中列出的公開密鑰。CA 機構的數字簽名使得攻擊者不能僞造和篡改證書。

SSL 證書實際上就是 CA 機構對用戶公鑰的認證,內容包括電子簽證機關的信息、公鑰用戶信息、公鑰、權威機構的簽字和有效期等。

簡單看,安裝了 SSL 證書,可以讓你的網站支持 HTTPS 地址形式,地址欄不再提示連接不安全。瞭解下:SSL證書_SSL數字證書_HTTPS加密 - 騰訊雲

騰訊雲提供免費 SSL 證書申請,如何申請:SSL 證書 域名型(DV)免費SSL證書 - 騰訊雲。申請到後的證書可下載到本地,或者部署到雲服務。

SSL 證書如何安裝和部署指引:SSL 證書 證書安裝指引 - 騰訊雲hexo 博客開啓 https (SSL 證書)

其實對於 GitHub Page 現在可以對自定義域名支持 HTTPS:

GitHub 官方在 2018 年5 月 1 號宣佈,GitHub Pages 的自定義域名獲得對 HTTPS 的支持。

設置操作:打開倉庫的Settings,找到 GitHub Pages 項,找到 Enforce HTTPS,打上勾即可。

1.3 問題彙總

問題 1: 執行 hexo deploy 命令,README 文件就消失,有什麼解決方法嗎?

在 Hexo 目錄下的 source 目錄下新建一個 README.md文件,修改 Hexo 目錄下的配置文件_config.yml,將skip_render參數的值設置爲上。即 skip_render: README.md保存退出即可。使用 hexo d 命令就不會渲染 README.md 這個文件了。

參考資料:怎麼用hexo上傳一個README.md到github?

2. 博客備份

2.1 備份詳解

博客搭建完畢,就可以通過 https://strivebo.github.io 類似這樣的格式訪問了。如果要綁定了域名就可以使用域名訪問了。

這裏有個問題是:部署上去的,即發佈到 GitHub 的都是編譯後的文件,如 htmlcssjs等文件,但是自己寫的 .md 文章實際是沒有上傳至 GitHub 的,如果需要備份這些源文件,該怎麼備份呢?或者換了別的電腦該怎麼更新博客呢?

(1) 如果備份分支 backup 爲默認分支

如果備份分支 backup 爲默認分支:在完成上面部署至 GitHub 之後,可以把該博客目錄於 GitHub 博客這個倉庫進行關聯(即綁定),這樣就在該根目錄生成記錄版本控制信息的.git目錄,這裏這塊知識就是 git 有關知識了,自行網上了解下 .git 目錄作用。同時也能注意到博客根目錄下有個.gitigore文件,就是可以設置文件要還是不要 push 到 GitHub 倉庫去

因爲首次 GitHub 上沒有非默認分支,使用如下命令:

git push origin backup:backup

這條命令的作用是:把本地 backup 分支推送到名字爲 origin 的遠程服務器的 backup 分支上,但因爲遠程服務器沒有 backup 分支,會自動新建該同名分支,然後在 GitHub 網站的 setting 頁面設置 backup 爲默認分支。 其中,這步操作,就把需要備份文件比如 source 文件夾下的的博客「源文件」已經上傳至分支 backup。

然後下次就算換電腦了,可以直接 clone 該博客倉庫,得到 backup 分支的數據(即得到了 GitHub 默認分支 backup 數據),然後再如最開始安裝 nodejs、Git 以及安裝 hexo,最後再執行相關命令得到編譯後的文件(即 public 目錄),最後hexo d部署至 GitHub 博客倉庫的 master 上。

(2) 如果部署分支 master 爲默認分支

如果部署分支 master 爲默認分支 :換了電腦之後,clone 倉庫後默認顯示 master 分支數據,然後執行格式 git checkout -b <本地分支名稱> origin/<遠程分支名稱>,如 git checkout -b backup orgin/backup 該語句作用是在本地創建新的分支,分支的名稱是 backup,第二個 backup 也是我想要 clone 的遠程分支的名字,這樣 GitHub 上非默認分支的數據也 clone下來了,而且還進行了綁定;

git checkout backup 這樣就切換到本地 backup 分支了,然後進行寫文章,編譯,部署等操作,因爲部署只會部署.deloper_git文件夾下文件內容,所以這樣的方式也是可行的。

但是這裏有個問題是,備份分支 backup 並沒有備份「node_modules」文件夾,所以需要重新安裝hexo,即執行一開始講到的npm install -g hexo,如果不行,則用這個npm install -g hexo-cli試試來安裝 hexo,然後可以用 hexo 命令進行一系列如編譯、部署等操作了。

這裏又有個問題出現了,hexo g編譯文章後,使得package.jsonpackage-lock.json文件改動了,如果擔心這裏的變動引起不必要的問題,可以乾脆在.gitignore文件中設置忽略這兩個文件不被提交。

實際操作中,發現每次 add 命令把修改提交到暫緩區後,還是會提示package.json文件的已修改,同時也切換不了到本地 master 分支,得了,commit 一次,然後切換到本地 master 分支查看,發現比遠程 master 分支多了node_modules文件夾和db.json文件。

然後hexo d就可以發佈部署public文件夾內容至 GitHub 上了,OK。

最後,進行 Git 有關操作 git push origin backup:backup 進行備份源文件(不包括.gitgnore設置的那些被忽略提交的文件和目錄,哈哈,比如node_modules這個目錄就不會被提交到備份分支 backup 啊)!

相關學習:

2.2 備份實戰

本人 GitHub 博客那個倉庫設置的是 master 爲默認分支;另外我本機安裝版本爲 Git v2.15.0,nodejs v9.4.0。

  1. git clone [email protected]:strivebo/strivebo.github.io.git克隆默認分支 master 分支數據;

  2. 使用git branch -a可以查看到本地只有 master 分支以及遠程有 master 和 backup 分支,於是git checkout -b backup origin/backup 可以本地自動新建了 backup 分支並且與遠程 backup 分支綁定了,同時切換到了本地 backup 分支,並且可以看到本地分支內容和遠程一樣,內容如下:

    scaffolds 文件夾
    source 文件夾
    themes 文件夾
    .gitignore 
    _config.yml 
    package.json 
    package-lock.json 
    
  3. 使用npm install -g hexo或者npm install -g hexo-cli安裝 hexo,完畢之後未在博客根目錄生成node_modules文件夾,並且繼續敲hexo init提示:

    ERROR Local hexo not found in G:\strivebo.github.io
    ERROR Try running: 'npm install hexo --save'
    

    於是敲npm install hexo --save,可以看到博客根目錄生成了node_modules文件夾及內容,然後可以使用hexo init來生成一些文件了,但是因爲我遠程的備份分支 backup 本來就是備份了這個步驟生成的文件(除了 node_modules 文件夾內容未備份),比如 themes 文件等都是遠程備份了的;

  4. 然後hexo g編譯 source 中的博客文章,生成 public 文件夾,編譯後的 html/css/js 等文件也存於此,hexo s本地預覽;

  5. 然後本地在 source 新增博客文章,以及文章修改,hexo ghexo g即可,最後 hexo d發佈部署至 GitHub(其實 hexo d會自動生成一個.deploy_git文件夾,並且實質是把 public 文件夾內容複製於該文件夾進行發佈的,該文件夾下有個隱藏文件夾.git維護着 發佈 這個過程的版本控制信息。)


update:2018-01-29 v1.1

update:2019-02-13 標題及部分內容和文字表達處修改

update:2019-02-14 增加了「域名綁定個人實操」小節內容;標題由「基於Hexo+GitHub Page搭建博客及備份筆記」改爲「「(Ⅰ)基於Hexo+GitHub Page搭建博客,綁定域名及備份」」

發佈了147 篇原創文章 · 獲贊 241 · 訪問量 83萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章