GitHub Pages + Hexo搭建個人部落格網站-github風格-採坑記錄

不曉得儂發表於2022-04-05

使用github pages + hexo 搭建個人部落格,網上很多教程,這裡並不具體記錄,只是記錄下自己搭建過程中遇到的一些問題。

1.本機安裝nodejs

省略

2.github上建立倉庫

倉庫名稱格式必須為<使用者名稱>.github.io,比如我的倉庫名zhangyj131.github.io,接著在倉庫內建立一個index.html,內容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zhangyj</title>
</head>
<body>
    <h1>zhangyj的個人主頁</h1>
    <h1>Hello ~</h1>
</body>
</html>

接著在Settings -> Pages,找到自己的域名 https://zhangyj131.github.io/,訪問此域名,展示index成功。

3.安裝hexo

我們採用Hexo來建立我們的部落格網站,Hexo 是一個基於NodeJS的靜態部落格網站生成器,使用Hexo不需開發,只要進行一些必要的配置即可生成一個個性化的部落格網站,非常方便。點選進入 官網。

安裝 Hexo,檢視版本

npm install -g hexo-cli
hexo -v

在cmd命令下,建立一個專案 github_hexo 並初始化

hexo init github_hexo
cd github_hexo
npm install  #如果有問題,按照說明audit執行
hexo new page categories #建立分類
hexo new page tags #建立tag
hexo new page archives #建立歸檔

hexo命令

hexo clean #清空
hexo g  #生成
hexo s #啟動,訪問 http://localhost:4000 檢視效果

hexo g -d  #生成並部署(github)

4.hexo主題

hexo預設主題我並不喜歡,從中找到一個主題hexo-theme-replica,github效果,感覺很好,但是這個有點小bug,點選categories和tag並沒有按照用,還是跳轉到了首頁,這個問題在作者的issue有人提問,但是並沒有解決,而作者本人的blog 卻是正常的,被這個問題坑了一個多晚上,由於不懂前端程式碼,本來想放棄這個主題,但是由於太喜歡,最終自己終於找到解決辦法,我是通過grep搜尋tag_dir,發現在如下檔案

image-20220329230936808

就有這麼個設想,是否修改了href表示式是否就可以了,因此<%= url_for(theme.tag_dir) %> 替換為/tags,重寫hexo g & hexo -s,發現可以。同理修改<%= url_for(theme.archive_dir) %> 替換為/archives
<%= url_for(theme.category_dir) %> 替換為/categories

總計要修改 hexo-theme-replica\layout\_partial\header.ejshexo-theme-replica\layout\_partial\navbar.ejshexo-theme-replica\layout\_partial\navbar-secondary.ejs 三個檔案,把裡面的超鏈地址替換即可。這種方式不是優雅的,應該可以通過配置_config.yml,但是我沒有一直配置正確,因此採用了這個粗暴方法(實際上在idea中可以全域性替換,更加方便,我後來才想到)。

5.配置主題

完全根據README來操作即可,只需要修改 github_hexo\_config.yml檔案即可,不需要修改replica目錄下的此檔案,readme說的很清楚。建議_config.yml檔案內容按照readme來即可。

6.新增文章

把個人的markdown放到github_hexo\source\_posts目錄,然後hexo g & hexo -s即可。

7.使用分類和標籤

在marddown前面要加如下內容

---
title: Hello World
date: 2017-05-26 12:12:57
categories: 
- 隨筆
tags:
- java
- linux
---

這樣就分類到 隨筆 下,tag是 java、linux,效果如下圖

image-20220329234715788

image-20220329234730108

image-20220329234738568

文章修改,並不需要hexo重新生成或者是重啟,本地刷就可以看到效果。

8.增加文章目錄

在markdown開頭增加<!-- toc -->即可

image-20220331014800114

顯示效果如圖

image-20220331014820018

9.推送github

只需要把github_hexo\public\*下所有檔案和目錄推送到github即可,在 github_hexo\_config.yml檔案內新增

deploy:
  type: git
  repo: https://github.com/yaorongke/yaorongke.github.io.git
  branch: master
  token: xxx

執行hexo g -d 即可推送。

參考 GitHub Pages + Hexo搭建個人部落格網站,史上最全教程

相關文章