使用hexo+github pages搭建部落格
為什麼寫部落格
就如我在部落格主頁上所說,主要有三點:
- 記錄與分享
- 錘鍊技術,提高寫作能力和表達能力
- 樹立個人品牌,提高影響力
而在此部落格之前,我在CSDN上(小旋鋒的部落格)寫過一些部落格,截止於2018年5月23日,個人資料如下:
當我在CSDN上寫部落格的時候,幾乎每天都會去看看閱讀量增加了多少,排名增加了多少,又增加了幾個粉絲或者新評論,每每都會帶給我興奮感,讓我感到寫部落格其實是一件很有意義的事情,並且反過來推動我學習和記錄,寫更多的部落格。
而為什麼現在要重新整一個部落格呢?主要是因為之前CSDN的部落格更多的是轉載和低質量的,而博主即將畢業,正走在程式設計師的職業道路上,需要樹立個人品牌,寫部落格是目前對我比較合適且能做到的方式。
而獨立部落格自由度更高,第三方部落格平臺推廣則更快,所以最終決定採用獨立部落格首發,第三方平臺分發引流的模式。
我的第三方平臺賬戶:
Hexo主題選擇
Hexo 是一個快速、簡潔且高效的部落格框架,可託管於github pages,可免去維護伺服器的麻煩,博主們可更專注於內容的創作,並且Hexo主題眾多,總有一款適合你。
我對主題的要求主要有:
1. 不要太大眾
2. 大氣美觀
3. 功能齊全
經過了幾天的搜尋之後,篩選了幾個比較滿意的Hexo主題如下:
最終選擇了 3-hexo 這款主題,當然還有很多不錯的主題。
搭建步驟
1. 根據 Hexo官網 步驟安裝 git,node.js
2. 安裝Hexo
npm install -g hexo-cli
安裝 Hexo 完成後,新建一個部落格的主目錄,然後執行以下命令:
hexo init <folder>
cd <folder>
npm install
新建完成之後該目錄的目錄結構如下:
.
├── _config.yml # 網站的 配置 資訊
├── package.json # 應用程式的資訊
├── scaffolds # 模板資料夾
├── source # 博文原始檔目錄
| ├── _drafts # 草稿資料夾
| └── _posts # 博文資料夾
└── themes # 主題資料夾
hexo g
hexo s
3. 根據 Hexo文件 對網站做一些簡單的配置,然後修改主題為 3-hexo
安裝
git clone https://github.com/yelog/hexo-theme-3-hexo.git themes/3-hexo
修改hexo根目錄的_config.yml中的theme引數
theme: 3-hexo
然後執行 hexo clean & hexo g & hexo s 即可看到效果
4. 配置 github pages
到github上建立一個新的空倉庫,名字格式為 賬戶名.github.io,譬如我的github賬戶名是 whirlys,所以我的github pages 倉庫的名字應為 whirlys.github.io
安裝外掛
npm install hexo-deployer-git --save
然後配置 Hexo根目錄的 _config.yml,xxx為你的使用者名稱,注意還需要加入你的 github 使用者名稱和密碼,不然後面推送失敗(但是上傳程式碼時注意防止密碼洩露)
deploy:
type: git
repo: https://[github使用者名稱]:[github密碼]@github.com/xxx/xxx.github.io.git
branch: master
如果你是第一次配置 github 遠端倉庫,你還須將你電腦的ssh key 配置到 github 上,具體可參考 git遠端倉庫
推送Hexo到github
hexo deploy
訪問 xxx.github.io 即可看到你的 github pages 部落格了
5. 繫結私有域名
我的域名為 laijianfeng.org,是一年前買 騰訊雲1元學生主機 時送的,當然可以選擇其他域名提供商
在 hexo source 目錄下新建一個 CNAME 檔案(沒有後綴名),在檔案裡填入你的域名,然後 hexo d 推送到github
登入域名提供商網站,進入域名解析頁面,分別新增兩條記錄
主機記錄 | 記錄型別 | 線路型別 | 記錄值 |
---|---|---|---|
@ | CNAME | 預設 | xxx.github.io |
www | CNAME | 預設 | www.xxx.github.io |
等待十分鐘之後,訪問你的域名即可跳轉到你的部落格
6. 其他的配置
- 接入評論,3-hexo主題中已經集成了多種評論,我選擇了gitment,具體的配置參考 完美替代多說-gitment,如果gitment遇到問題,譬如報Error:validation failed異常,可參考 新增Gitment評論系統踩過的坑 以及 gitment issue上的解決方法
更多內容,請訪問我的個人獨立部落格 小旋鋒