hexo小教學

how to hexo

Set up

小的用 MacOS 安裝，其他作業系統這裡沒有QAQ
要先載好以下兩個東西

  • Git
  • Node.js

    可以順邊裝一下 npm 他是Node.js的版本管理

檢查一下有沒有裝好(我一律用檢查版本的方式檢查)

node -v #檢查版本
npm -v #檢查版本

接著安裝 Hexo

$ npm install -g hexo-cli

如果你 Git 和 Node.js 有裝好但無法下載，有可能是權限問題。
用以下指令解決

$ sudo npm install --unsafe-perm --verbose -g hexo

檢查安裝是否完成

$ hexo -v #檢查版本

okok安裝就這樣完成了！

建立專案

terminal移動到想要的資料夾上打以下指令生成專案

hexo init 專案名稱

啟動專案

$ hexo s

這樣就建好了喔～
可以看到已經有一個預設文章，裡面是hexo的指令介紹，可以稍微看一下。

_config.yml

_config.yml就是網站的主要設定檔，資料都會在這裡設定。介紹一些我會比較會動到的東西。

# Site
title: Hexo # 網站名稱
subtitle: '' # 網站副標題
description: '' # 網站描述
keywords: # 關鍵字
author: John Doe # 作者
language: en # 語言 
timezone: '' # 時區

這是網站最主要得東西，可以修改成自己喜歡的樣子。但語言與時區須依照規範而打，像是 Zh-TW 是繁體中文(但我會使用預設，好像沒什麼區別)， Asia/Taipei 是台北時區

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:    # 為 code 上色
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:    # 為 code 上色，跟 highlight 只能保留一個
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

這段其實我只會用到 highlight 為 code 上色，畢竟要打一些需要用到程式碼的文章。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape # 主題

主題是Hexo中最好玩的東西，會額外拉一個段落來講如何使用

建立第一個文章

我喜歡用 VSCode 打開，打開專案之後在 terminal 輸入以下指令

$ hexo new 文章名稱

執行完就可以在 source/_posts 中看到你新建立文章。

藍色框框就是他得所在位置，紅色是寫文章的地方，綠色是 terminal

我們來放大看一下

---
title: myfirstpage # 文章標題
date: 2022-09-26 10:39:41 # 建立時間
tags: # 標籤
---

這些都可以隨時修改而 tags 如果只有一個，那就在後面打上就好，諾有數個，要用無序清單的方式呈現：

---
title:
...
tags:
    - one
    - two
    - ...
---

也可以用另一種 list 方式呈現

---
title:
...
tags:
    - [one, three]
    - [two, four]
    - ...
---

除了標題、時間還有標籤，還有其他可以加入的東西：

---
title: myfirstpage
date: 2022-09-26 10:39:41
tags:
categories: # 分類
thumbnail: # 預覽圖參數
banner: # 預覽圖位置
---

開始打文章拉～～

文章首句只能是純文字，不能是標題之類的，要不然會跑不出來，我之前在這裡卡超級久＝＝

打完之後儲存，打 hexo s 就可以看到自己的文章樓～

建立分頁

來建一個關於 about

$ hexo new page 分頁名稱

打完之後按下 Enter 就可以在 soource 底下看到你建立的新分頁了

更換主題

在介紹 _config.yml 時，有稍微提到主題就是在那裡換的。按照以下步驟：

  • 進入 hexo 官網挑選喜歡的主題 https://hexo.io/themes/
  • 點開一個下載 zip 檔
  • 把下載好的zip 檔解壓縮，移至專案底下的 theme
  • 把 _config.yml 底下的 theme 改成 zip 檔上的主題

測試看看

$ hexo s