篇Ⅰ:基於Hexo+GitHub Page搭建免費博客並綁定域名以及博客備份

寫在前面

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

第一階段,剛接觸 Blog,以爲很新鮮,試着選擇一個免費空間來寫。
第二階段,發現免費空間限制太多,就本身購買域名和空間,搭建獨立博客。
第三階段,以爲獨立博客的管理太麻煩,最好在保留控制權的前提下,讓別人來管,本身只負責寫文章。
複製代碼

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

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

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

基於 Hexo+GitHub Page 搭建博客的教程,網上這樣的文章不少,在這以前我也記錄過一篇 基於Hexo+GitHub Page搭建免費我的博客教程。網上相關文章也不少:git

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

1、博客搭建

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

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

NPM 是隨同 NodeJS 一塊兒安裝的包管理工具,能解決 NodeJS 代碼部署上的不少問題,常見的使用場景有如下幾種:express

  • 容許用戶從 NPM 服務器下載別人編寫的第三方包到本地使用。
  • 容許用戶從 NPM 服務器下載並安裝別人編寫的命令行程序到本地使用。
  • 容許用戶將本身編寫的包或命令行程序上傳到 NPM 服務器供別人使用。 因爲新版的 nodejs 已經集成了 npm,因此以前 npm 也一併安裝好了。一樣能夠經過輸入 "npm -v" 來測試是否成功安裝。命令以下,出現版本提示表示安裝成功。

—— From: 菜鳥教程npm

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) 第一步: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,訪問地址格式如: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: git@github.com:strivebo/strivebo.github.io.git
    branch: master
    複製代碼

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

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

(3) 更換主題

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

而後編譯、發佈、預覽就能夠看到效果了!

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搭建免費我的博客詳細教程

3. 域名綁定我的實踐

(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,打上勾便可。

4. 問題彙總

問題 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、博客備份

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. 備份實戰

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

  1. git clone git@github.com: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維護着 發佈 這個過程的版本控制信息。)

相關文章
相關標籤/搜索