搭配我製作的VitePress部落格主題，只需幾個步驟和設定就能建立好部落格並開始寫作。

---

1. 安裝NodeJS

VitePress的最低版本需求為18，如果有多版本使用需求則可以考慮使用NVM或NVS

2. 建立GitHub專案

在GitHub建立一個名為{username}.github.io的新專案，{username}請替換為個人帳號

3. 下載部落格主題

clone剛剛建立的新專案，下載我製作的VitePress主題，將內容解壓縮進該專案目錄

4. 編輯部落格設定

設定檔路徑為".vitepress/theme/config.ts"

此步驟只需先將base改為'/'即可，其他設定可以在看過下方說明後再做更動

const themeConfig = {
  // https://vitepress.dev/reference/site-config
  base: '/',
  lang: 'zh-TW',
  logo: '/avatar.png',
  favicon: '/favicon.png',
  title: 'Trigger !',
  description: 'A blog powered by VitePress',
  hostname: 'https://example.com',
  lastUpdated: true,
  cacheDir: './node_modules/vitepress_cache',
  appearance: <Appearance>'dark',
  cleanUrls: true,
  mdMath: true,  // math equations
  mdLineNums: true,  // line numbers for code block
  // https://vitepress.dev/reference/default-theme-config
  nav: [
    { text: '🏠 Home', link: '/' },
    { text: '📚 Archives', link: '/archives' },
    { text: '📁 Category', link: '/category' },
    { text: `🔖 Tags`, link: '/tags' },
    { text: '🙆 About', link: '/about' }
  ],
  aside: false,
  socialLinks: <SocialLink[]>[
    { icon: 'github', link: 'https://github.com/laplacetw' },
  ],
  footer: {
    message: `Powered by <a target='_blank' href='https://vitepress.dev'>VitePress</a> 
      Theme by <a target='_blank' href='https://github.com/laplacetw/vitepress-theme-trigger'>Trigger</a>`,
    copyright: `<a target='_blank' href='https://creativecommons.org/licenses/by/4.0/'>
      CC BY 4.0</a> | © Trigger ${new Date().getFullYear()}`
  },
  // custom theme config
  postsPerPage: 5,
  utterances: {
    repo: '',
    issueTerm: 'title',
    light: 'github-light',
    dark: 'gruvbox-dark'
  }
}

各項設定值說明

基本上就是整合常用的網站設定和主題設定方便改動而已

• base : 網站部署的基本URL，必須以斜線開頭和結尾。以GitHub Pages為例，若部落格是部署到"user.github.io"則無需設定(預設值為"/")，但如果要部署到"user.github.io/myproject/"則base必須設置為"/myproject/"
• lang : 網站語系設定
• logo : 顯示在導航列中的網站標誌的檔案路徑。可以對亮 / 暗模式設定不同的標誌
• favicon : 請參閱維基百科對於favicon的說明，設定值同logo為檔案路徑
• title : 網站標題
• description : 網站描述
• hostname : 自動生成sitemap的網域設定
• lastUpdated : 是否顯示頁面最後更新時間
• cacheDir : 快取檔案儲存位置
• appearance : 是否啟用深色模式
• cleanUrls : 是否啟用簡潔網址(移除頁面網址中的 .html 後綴，需要伺服器支援)
• mdMath : 是否啟用數學公式語法
• mdLineNums : 是否顯示程式碼區塊行數
• nav : 導航列內容設定，格式如範例所示，文字對應連結
• aside : 是否啟用側邊欄
• socialLinks : 社群連結設定，格式如範例所示，icon對應連結
• footer : 頁尾內容設定，格式如範例所示
• postsPerPage : 每頁顯示文章數設定
• utterances : utterances留言系統設定，不使用則無需設置

5. 部署

直接commit & push即可觸發GitHub Workflow自動部署至{username}.github.io，其他部署需求可以參考官方文件

6. 發文

我製作的VitePress主題附帶了自動生成模板腳本，使用以下指令在posts目錄下建立新文章：

(p)npm run new {new-post-filename}

新文章模板：

---
date: YYYY-MM-DD hh:mm
title: new-post-filename
outline: deep
category: 
tags:
- 
---
write excerpt here

---