1. 程式人生 > >使用Hexo搭建GitHub博客(2018年Mac版)

使用Hexo搭建GitHub博客(2018年Mac版)

第三方 編輯 如何使用 master 托管 更換 學習 根據 定義域

技術分享圖片

關於本文

本文僅記錄自己學習搭建Hexo博客之時,搭建過程中掉坑的歷程總結,對零基礎起步的觀眾朋友可能缺乏某些基礎技術的指導,請優先食用下述兩篇優質教程:

  • 【2018更新】小白獨立搭建博客—Github Pages和Hexo簡明教程 - Ryane的個人頁面 - 開源中國
  • GitHub+Hexo 搭建個人網站詳細教程

※ 為了更優質的排版視覺效果,歡迎移步到簡書瀏覽:使用Hexo搭建GitHub博客(2018年Mac版)

十萬個為什麽

什麽是Hexo

度娘谷歌搜索了Hexo各種資料解說,個人感覺上這是一套使用第三方主題模板+自己的博客文章(.md文件)+網站信息配置,通過Node.js進行本地連接混合生成一套靜態網站的工具鏈套件

也就是說,通過Hexo創建的博客是一個僅提供在線瀏覽功能的靜態博客,不存在後臺編輯功能,添加新博客時需要在自己開發機上編寫新博客文章(.md文件),再次生成一個新版本網站,上傳並替換,從而實現新文章發布

優勢是可使用網上各種免費的靜態網站空間,節省服務器租金,省去維護服務器的工作,不需擔心後臺被黑導致數據丟失,無痛隨時全站更換主題…

劣勢是不能在公司電腦上隨時在線更新博客,除非帶著Hexo博客源碼…

和需要自己保管好Hexo博客源碼,否則數據丟了看上去有點難重新把博文整理下來

技術分享圖片

什麽是Node.js

度娘谷歌搜索了Node.js各種資料解說,個人感覺上這就是一套SDK,一套使用JavaScript編寫的,包含多個應用級功能模塊,可用於一般應用開發的工具包

JavaScript的運行需要一個JS解釋器實時運算每一句JavaScript代碼,一般情況下網頁上的JS代碼段會使用瀏覽器提供的解釋器運行,而Node.js使用了谷歌開源的一個名為V8引擎的良心產品(JS解釋器),實現脫離瀏覽器下運行JavaScript代碼

技術分享圖片

什麽是nvm

nvm,Node Version Manager 是一個開源的Node.js版本管理Bash工具,可方便的在Bash環境下下載、更新、管理多個版本並存的Node.js,並選擇性地使用其中一個

技術分享圖片

什麽是GitHub Pages

GitHub Pages 是GitHub提供的個人靜態主頁網站托管服務,原目的是用於提供你在GitHub上托管的所有開源項目介紹,後來也推薦作為個人博客之類的用途

優勢是使用簡單方便,免費高效實時,可用空間高達1G,可綁定自定義域名,原生自帶GitHub級別防護…好像無敵了

技術分享圖片

GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.

什麽是…

技術分享圖片

前提條件

  • 已安裝Git工具
  • 已有GitHub賬號
  • (Mac)已安裝Xcode command line tools

安裝nvm與Node.js

參考我的另一篇文章 Node.js安裝 - 簡書

安裝Hexo

npm install -g hexo-cli

為了便於發布到GitHub上,建議同時安裝hexo-deployer-git

npm install hexo-deployer-git --save

Hexo安裝文檔

初始化,建立博客項目

選定博客網站項目程序文件的存放位置,如~/develop/hexo/github/,Bash中cd進入該目錄下,執行命令:

hexo init

執行完畢後,該命令將在當前目錄下生成一套標準的Hexo博客項目模板

生成網站

上面的操作只是生成了一套網站構成所需的“源代碼”,實際發布時需要根據這套“源代碼”當中的配置文件、博客文檔(.md文件)、主題模板等,進行組合構建,生成服務器可識別的標準HTML網站目錄,此時可使用該命令:

hexo g

執行完畢後,在public目錄下可看到我們自己書寫的博客文檔(.md文件)與所選的博客主題模板鏈接組合,生成的最終靜態網站文件,該目錄也差不多就是之後發布到GitHub上的實際文件(實際發布到GitHub的是.deploy_git目錄),外部的網站“源代碼”不會上傳到github.io

啟動本地服務器

啟動本地服務器可即時查看網站運行效果:

hexo s

默認地址是 localhost:4000

選擇主題

Hexo可隨時使用、更換博客主題

主題文件可在Hexo官方主題網頁中下載,以Material為例,點擊主題預覽圖下方的主題名稱鏈接即可進入該主題的源碼發布頁面 GitHub - viosey/hexo-theme-material: Material Design theme for hexo.

技術分享圖片

根據主題安裝指導,下載項目至博客項目下的themes目錄中,文件夾命名為material,並在博客配置文件_config.yml中指定使用該主題:

theme: material

將material主題目錄下的_config.template.yaml重命名為_config.yaml

參考Material主題文檔進行必要配置

再次執行 hexo g 將會根據新主題重新構建整個博客

註意:
1.5.6版本在執行hexo g時會報出TypeError錯誤,可參考Issue686修改dnsprefetch.ejs文件解決

發布博客

創建github.io倉庫

在自己的GitHub中,創建新倉庫,標準命名為GitHub用戶名.github.io,例如我的:wavky.github.io

倉庫Readme、License之類的留空即可,之後在發布上傳時會被強制覆蓋抹掉

配置SSH密鑰

參考 https://my.oschina.net/ryaneLee/blog/638440 配置SSH密鑰一節

修改博客配置文件_config.yml

deploy:
  type: git
  repo: GitHub上傳倉庫的完整路徑,如 https://github.com/wavky/wavky.github.io.git
  branch: master

發布到GitHub

hexo g生成完畢後,可執行該命令發布博客到GitHub上:

hexo d

或在生成網站的同時進行發布:

hexo g -d

查看效果

點擊倉庫頁面中的GH Pages按鈕,應該可以看到真正發布在互聯網上的效果
技術分享圖片

綁定域名

GitHub Pages 默認提供的是 GitHub用戶名.github.io(例如我的:wavky.github.io)作為博客訪問地址,可設置綁定自定義域名

在博客項目目錄的source文件夾中,創建一個CNAME文件,存儲預備使用的個人域名,如:

# 在source目錄下
echo story.wavky.com > CNAME

清理Hexo緩存並重新生成發布

hexo clean
hexo g -d

GitHub項目頁面中Setting設置界面,滾到GitHub Pages部分確認域名無誤
技術分享圖片

在個人域名提供商(如阿裏雲萬網)中,進入DNS設置界面,追加一條CNAME記錄,這裏我指定以story前綴的個人域名跳轉到原來的默認的博客域名wavky.github.io,記錄如下:
技術分享圖片

註:其他類型的域名綁定方式(例如IP指向等),在最後一步DNS設置中操作會不一樣

等待10分鐘左右應該生效

下一篇:如何使用Hexo寫博客
番外篇:Hexo之我的桌角女友的食用方式

使用Hexo搭建GitHub博客(2018年Mac版)