這篇文章首發於我的部落格,歡迎大家訪問留言討論?
說在前面
我的部落格在曾經的很長一段時間以內,我都是將部落格靜態頁面託管到Github pages進行渲染的,但是大家都知道,我們國內訪問GitHub如果不掛翻牆的話,訪問速度非常慢☹️.雖然我的部落格一直以來都沒有太多的訪問量,但是作為一個追求極致體驗的人,怎麼忍受得了呢 ?.
尋找方案
於是我在網上搜尋最優化的解決方案.我想的是,生成部落格的渲染框架還是使用Hexo,但是頁面託管我得重新找一個託管商,於是我在vue的官網,知道了Netlify這個神器.Netlify是什麼：
Netlify is a unified platform that automates your code to create high-performant, easily maintainable sites and web apps.
我看了官網的介紹,總結一下,它有如下功能：
- 可以託管靜態資源
- 可以將靜態網站部署到CDN上
- Continuous Deployment 持續部署,當你提交改變到git 倉庫,它就會自動執行build command,進行自動部署
- 可以新增自定義域名
- 可以啟用免費的TLS證書,啟用HTTPS
Oh my God!!,這可比Git pages好太多了?我們來對比一下Github pages：
-
github雖然沒有被牆,但是那個訪問速度非常的慢,對國內訪問的使用者來說體驗極差
-
百度無法抓取,眾所周知國內用百度的還是多,如果你寫的文章,無法被百度抓取收錄,那還是有點坑的
-
配置繁瑣,使用不友好.https證書配置這一項就麻煩的要死
-
無法做CDN加速.未備案域名伺服器,無法使用國內的cnd加速服務
所以,我準備採用Netlify作為我的頁面託管商.下面我們即將開始搭建部落格咯！
開始動手
第一步,我們需要安裝Hexo
安裝hexo之前需要安裝一下環境：
安裝完node後安裝npm:
$ npm -g install npm
複製程式碼不能翻牆的同學,可使用npm淘寶映象cnpm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
複製程式碼注：安裝了淘寶源的映象cnpm之後,接下來所有的npm 開頭的命令均使用
cnpm來代替
接著我們來安裝Hexo：
$ npm install -g hexo-cli
複製程式碼測試一下是否安裝成功：
$ hexo version
複製程式碼然後在我們的電腦上,選擇一個目錄：
$ hexo init "部落格目錄" #使用hexo命令在指定的<folder>資料夾下初始化建立一個部落格專案
$ cd "部落格目錄" #進入建立好的專案目錄
$ npm install #使用npm安裝所需依賴.
複製程式碼這個新建的"部落格目錄"就是用來作為你以後存放部落格的目錄,這其中包括部落格的配置、文章等等的一切.新建完成之後,我們用任何一個程式碼編輯器開啟我們剛剛新建的目錄,有如下目錄結構：
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
複製程式碼注：這裡會涉及一些hexo cli的指令,請自行學習一下,以後都會用到的.
然後我們試著跑一下,看是否能夠成功啟動:
$ hexo clean #清理各種快取和舊檔案
$ hexo g #生成靜態檔案
$ hexo s #開啟伺服器預覽
複製程式碼執行完 hexo s 後命令列視窗將提示您如下資訊:
INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
複製程式碼開啟http://localhost:4000 即可預覽你的第一篇hexo博文.
部署
接下來才是重頭戲：進入部署環節.在正式進行部署之前,我先來講一下什麼是部署：
當我們使用 hexo g 和 hexo s 命令生成並開啟服務後,我們本地訪問的測試域名-http://localhost:4000 實際是指向了我們當前目錄下的 public 目錄,也就是說 hexo g 命令會生成 public 目錄,這個目錄下面裝著我們的靜態頁面檔案和相關依賴,部署的過程就是將這個 public 目錄下的檔案放到我們的伺服器上這樣就完成了部署.
好了接下來我們來進行部署：
同步到Github
先到GitHub新建一個repository:
複製你剛剛新建的repository的地址,像這樣:
https://github.com/xieyezi/your-Repository.git
複製程式碼回到專案根目錄,將你的本地專案和新建的repository聯絡起來:
git remote add origin https://github.com/xieyezi/your-Repository.git
複製程式碼在當前根目錄下新建.gitignore檔案 將不需要同步的檔案和目錄寫到.gitignore:
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
themes/
.deploy*/
複製程式碼完成之後,到根目錄:
git add ./
複製程式碼 git commit -m 'commit information'
複製程式碼接著推送到GitHub:
git push --set-upstream origin master
複製程式碼到這裡,我們已經講我們的專案推送到GitHub的master分支下面了.接下來我們要對hexo進行一些配置:
開啟hexo根目錄的_config.yml檔案找到deploy項：
deploy:
type: git #部署方式
repository: git@github.com:xieyezi/your-Repository.git #關聯github倉庫
branch: run-page #部署分支
複製程式碼在這裡,我們將在這個專案倉庫下新建一個run-page分支,至於有什麼用,我等一下會解釋,先跟著我操作起來.
配置好了之後,儲存退出,我們重新執行一下:
$ hexo clean #清理各種快取和舊檔案
$ hexo g #生成靜態檔案
複製程式碼最後,我們將public目錄同步到Github:
$ hexo d #部署應用
複製程式碼在執行這個命令的時候,我們可能會出現如下錯誤：
$ ERROR Deployer not found: git
複製程式碼那是因為我們缺少一個依賴,我們安裝一下:
npm install hexo-deployer-git --save
複製程式碼然後再次執行一下,執行完成我們到Github 會發現我們的專案多了一個run-page,這個分支就是我們後面要用來生成我們到靜態頁面的.
託管到Netlify
我們先到Netlify官網註冊一下賬號,因為我們是將專案託管到GitHub的,所以我們選擇GitHub登入：
進入官網,點選新建：
選擇GitHub來源：
然後選擇我們剛剛新建的專案：
進入一步進行配置：
接著等待一會兒,Netlify會自動幫我們生成網址：
第一次新建的時候,它會隨機生成一個Netlify的二級域名,我們可以進行自定義二級域名,點選"Change site name"即可進行設定,像這樣：
點選Save,等待Netlify進行熱部署即可.
然後點選建立好的二級域名,成功訪問✌️！！！
以後我們寫好部落格之後,直接執行：
$ hexo clean
$ hexo g
$ hexo d
複製程式碼我們的個人部落格就會自動進行重新整理,是不是超厲害！！
思路
部署完成之後,到這裡,可能有的同學會覺得很暈,我畫了一個部署的流程圖：
這就是我們為什麼要利用兩個分支的原因,我們將我們的專案分支託管到master,然後將生成的public目錄,託管到run-page分支,以後我們可以寫完部落格以後,就可以直接輸入：
$ hexo clean
$ hexo g
$ hexo d
複製程式碼進行我們部落格的推送,一旦我們推送到run-page分支,Netlify監測到我們的倉庫發生了變化,就會根據這個分支的變化進行實時拉取並部署.
繫結自己的域名
在Netlify官網的這個專案下,進入Domain Settings進行設定:
設定之後,它會提醒什麼去設定域名解析.我的域名提供商是阿里雲,所以我去阿里雲進行解析記錄:
設定兩條記錄,將記錄值寫入為netlify為你提供的二級域名,返回netlify檢視結果:
成功顯示你繫結的域名,此時已經可以通過你的自定義域名訪問你的部落格了.
設定Https證書
我們可以選擇netlify為我們自動生成的證書,它會幫你去Let’s Encrypt申請免費的證書,我們也可以用我們自己的證書,我用的是阿里雲的免費證書,先下載Apache的證書:
然後到Netlify的Domain Settings進行設定:
點選安裝證書,然後等待結果.
大功告成(〃’▽’〃)！！再次訪問網站,瀏覽器已經講我們的網站標記為安全.
怎麼樣,你學會了嗎,趕緊操作起來吧!!!