總有一天會用到的筆記

本站為減緩筆者下列疑難雜症誕生:記性很差,學過就忘;智商低落,囫圇吞棗。

0%

Hexo + Github Pages 架站筆記

Hexo

想寫日記和技術筆記,但我巴哈的身分證字號後四碼忘了,只好自己架部落格。 作為第一篇文章,來記錄這兩天晚上的折騰過程。

Hexo 初識

裝他(我自己沒裝 node.js):

1
2
brew install node
npm install -g hexo-cli

建立 hexo 專案:

1
$ hexo init [Directory]

或是把當前資料夾當成目錄:

1
$ hexo init 

Hexo 會射一坨檔案進去,(常用)目錄結構列舉如下:

  • scaffolds:放模板
  • source:放 post(文章)和 page(如 about、tag)
  • themes:主題直接 clone 到裡面
  • config.yml:站點配置文件

注意,主題配置文件也叫 config.yml,別搞混了。

新增第一則 post

1
$ hexo new 'owo'

接著會新增 source/_posts/owo.md。刪除 post 直接刪該檔案即可。

1
2
$ hexo cl
$ hexo g

前一個好像是清除暫存檔。後者把 hexo 檔案們編譯成靜態網站檔案。

接著,預覽你的網站。他會吐位址給你:

1
$ hexo server

Github Pages

首先建立一個名為 username.github.io 的公開 repo。

接著在 hexo 專案下安裝 deploy 套件:

1
$ npm install --save hexo-deployer-git

打開站點配置文件,修改 deploy 和 url 部分:

1
2
3
4
deploy:
type: git
repo: https://github.com/username/username.github.io.git
branch: master
1
url: you_url.com

然後你就可以編譯並部署:

1
2
$ hexo cl
$ hexo g -d #hexo generate && hexo deploy

Hexo 主題:Next

直接把 Next 主題 clone 到 themes 下:

1
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

修改站點配置文件裡的 theme(預設為 landscape):

1
theme: next

Next 有四大主題:

1
2
3
4
5
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

標籤和分類

產生 tags 頁面和 categories 頁面:

1
2
$ hexo new page tags
$ hexo new page categories

修改主題配置文件中的 menu

1
2
3
menu:
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th

其他頁面如法炮製即可。

在每篇貼文的開始可以指定 tags 和 categories:

1
2
3
4
5
6
---
title: Hexo + Github Pages 架站筆記
date: 2021-09-21 22:48:16
tags: 'Hexo'
catogories: '技術筆記'
---

tags 可以有好幾個,categories 只能有一個。

語言

修改站點配置文件中的 languageszh-TW

在主題資料夾下的 languages 資料夾可以找對應語言的翻譯對照。部分文件如下:

1
2
3
4
5
6
7
8
9
10
menu:
home: 首頁
archives: 歸檔
categories: 分類
tags: 標籤
about: 關於
search: 搜尋
schedule: 時間表
sitemap: 網站地圖
commonweal: 公益 404

頭像

把頭像放在主題資料夾下的 source/images,然後更改主題配置文件(僅支援 gif):

1
2
3
4
5
6
7
avatar:
# Replace the default image and set the url here.
url: /images/avatar.gif
# If true, the avatar will be dispalyed in circle.
rounded: true
# If true, the avatar will be rotated with the cursor.
rotated: false

參考資料

  • https://ithelp.ithome.com.tw/users/20119486/ironman/2944?page=1
  • https://zhuanlan.zhihu.com/p/30836436
  • https://theme-next.iissnan.com/theme-settings.html#use-bg-animation
  • https://blog.akizukineko.tw/hexo-next-themes-backgroudpic/