Home 筆記

以下是整理好的 Hexo + Shoka 主題安裝與設定筆記：

初始化 Hexo Blog

1
2
3
4
md blog
cd blog
hexo init
npm install

安裝 Shoka 主題

1
git clone https://github.com/amehime/hexo-theme-shoka.git ./themes/shoka

安裝 Shoka 所需套件

1
2
3
4
5
6
7
8
9
npm install hexo-renderer-pug --save
npm install hexo-renderer-sass --save
npm install hexo-generator-feed --save
npm install hexo-generator-sitemap --save
npm install hexo-generator-json-content --save
npm install hexo-generator-search --save
npm install hexo-pagination --save
npm install pangu --save
npm install hexo-deployer-git --save

更換頭像

替換頭像圖檔：

1
blog/themes/shoka/source/images/avatar.jpg

主題設定檔處理

將以下檔案複製與改名：

1
blog/themes/shoka/_config.yml → blog/_config.shoka.yml


進行設定：

  • 修改網站名稱、描述、副標題、社群連結、字型與佈景設定
  • 詳見：_config.shoka.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Alternate site name
alternate: 時間在哪・成就在哪

# Dark Mode
# By default, the page judges whether to turn on the dark mode according to the device settings or user selection
# if `true`, the page will be displayed directly as Dark Mode, unless the user makes another choice
darkmode: true

# click with Firework
fireworks:
  enable: false

# Reward (Donate)
reward:
  # If true, reward will be displayed in every article by default.
  enable: false

# random image api
image_server: 'https://picsum.photos/1920/1080'

修改 Hexo 主設定檔 _config.yml

  • 詳見：_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
title: 冷知識・熱分享
description: 我不是胖・只是瘦得不明顯
author: Sam Lin
language: en
timezone: Asia/Taipei
url: https://samlin-msft.github.io
permalink: :title/
theme: shoka

deploy:
  type: git
  repo: https://github.com/samlin-msft/samlin-msft.github.io.git
  root: /
  branch: gh-pages

其他建議設定：

  • post_asset_folder: true（建議打開以使用圖片資產）
  • syntax_highlighter: highlight.js
  • highlight.line_number: true

自訂主題色彩

編輯檔案：

1
blog/themes/shoka/source/css/_colors.styl

將以下變數進行替換（自訂你要的顏色）：

1
2
3
--color-red:    #20B2AA;
--color-pink:   #B0E0E6;
--color-orange: #00FA9A;

圖片貼上功能 (Paste Image Extension 建議搭配)

建議設定：

  • 快捷鍵：Ctrl + Alt + V
  • Insert pattern: ${imageSyntaxPrefix}${imageFilePath}${imageSyntaxSuffix}
  • Path: ${currentFileDir}/${currentFileNameWithoutExt}

修改 blog\scaffolds\post.md 範本, 加入 categories

1
2
3
4
5
6
---
title: {{ title }}
date: {{ date }}
tags:
categories:
---

新增文章

1
hexo new "文章標題"

本地預覽與清除緩存

1
hexo clean && hexo g && hexo s
  • 預設網址：http://localhost:4000/

上傳至 GitHub Pages

1
hexo deploy