Dev-Notes on Howar31 Blog

升上 VuePress v2 RC 五個月後，決定再遷移到 Hugo 的紀錄

Wed, 22 Apr 2026 00:00:00 +0000

前言

2025 年 11 月才剛從 VuePress v1.8 升上 v2.0.0-rc.26，本以為至少能安穩用個幾年。結果升完五個月就遇到一堆問題，最後在 2026 年 4 月決定再搬一次，這次換到 Hugo。

這篇記錄從評估、選型、遷移、踩雷到最後部署上線的完整過程，順便也拿這篇當 component 測試文，把 Hugo 版型的 code block、tip、warning、表格、SVG、taxonomy 一次全部跑過。

為什麼升 v2 才 5 個月就要再搬？

升級前以為是一次「大幅刷新但之後穩定」的投資。升完才真正理解現狀：

VuePress v2 本身自 2022 就卡在 RC，到 2026 仍然沒有 stable。這個「卡 RC 3+ 年」的背景是在升上去之後才有切身感受
插件生態沒跟上：v1 時期依賴的若干插件在 v2 沒有對應版本，有些甚至上游直接放棄維護
RC 階段的 theme API 仍會 breaking change：升 v2 時已經改了一次 theme，完全不想再因為某次 RC 升級又全部改一次
Dev server 啟動 30 秒：寫文章的摩擦大到開了就忘記要寫什麼

與其繼續賭 v2 什麼時候脫 RC，不如直接換到生態穩定、建置極快的工具。於是評估了 Astro、Next.js、Eleventy、Hugo，最後選 Hugo：

候選	建置速度	生態穩定度	Runtime 依賴	主要缺點
Hugo	極快（幾百毫秒）	十年以上穩定	Go binary	模板語法較陌生
Astro	中等	快速演進中	Node.js	還在 breaking changes
Next.js	慢（依頁面數成長）	成熟但偏 App	Node.js	對靜態部落格 overkill
Eleventy	快	小眾但穩定	Node.js	template 選擇多到雜亂

Hugo 的勝出原因很簡單：Go 寫的單一執行檔、零 Node.js、零 npm、template 語法雖然怪但至少不會自己 breaking change。

Discord 完全隱藏封鎖/忽略的訊息

Thu, 01 Jan 2026 00:00:00 +0000

前言

Discord 提供了兩種「照顧心理衛生」的方式來處理不想看到的訊息：封鎖（Block）和忽略（Ignore）。這兩種功能可以幫助使用者避免看到特定使用者或伺服器的訊息，讓聊天環境更加舒適。

然而，Discord 官方並沒有提供完全隱藏這些訊息的功能。即使你封鎖或忽略了某個使用者，他們的訊息仍然會在聊天室中顯示一個提示，例如「你已封鎖此使用者」或「你已忽略此使用者」的系統訊息。這些提示雖然不會顯示實際的訊息內容，但仍然會在聊天記錄中佔據空間，對於想要完全「眼不見為淨」的使用者來說，這可能還不夠。

Tip

忽略功能在顯示邏輯（HTML 結構）上與封鎖功能是相同的，因此我們可以使用相同的方法來處理這兩種情況。

實作

為什麼選擇 CSS Injection？

要達成完全隱藏這些訊息提示，我們有幾種方式可以選擇：

Javascript Injection：可以動態修改 DOM 元素
CSS Injection：透過 CSS 選擇器隱藏元素

我選擇使用 CSS Injection 的方式，主要原因如下：

效能考量：CSS 的效能通常比 JavaScript 好，不會對頁面造成額外的運算負擔
動態載入問題：Discord 使用動態載入內容，JavaScript 在處理動態載入的元素時可能會遇到時機問題，需要額外監聽 DOM 變化
簡單直接：CSS 選擇器可以直接針對特定的 HTML 結構進行隱藏，不需要複雜的邏輯

解除 Developer Tool 防護

Discord 官方有針對開發者工具（Developer Tool）進行警告與防護機制。在進行以下操作之前，請先解除 Discord 對開發者工具的防護。

1. 無法開啟開發者工具

如果你無法使用 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（macOS）開啟開發者工具，需要先在設定檔中啟用開發者工具。

Warning

必須先解除防護後，才能使用 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（macOS）開啟開發者工具。

Windows

在 Windows 上，請編輯以下檔案：

%appdata%/discord/settings.json

在 settings.json 中加入以下設定：

從 VuePress v1 升級到 v2

Sun, 23 Nov 2025 00:00:00 +0000

使用 VuePress v1 架設 blog 好幾年了，我決定升級到 VuePress v2，主要是想用更現代的建置系統、更好的效能，還有更好的開發體驗。 VuePress v2 帶來了不少改進，包括 Vite 打包工具、Vue 3 支援、TypeScript 支援，還有更模組化的插件架構。

這篇文章記錄了我從 VuePress v1 升級到 v2 的過程，包括遇到的問題和解決方法。

為什麼要升級？

VuePress v2 有幾個讓我想要升級的理由：

Vite 打包工具 - 建置時間比 webpack 快很多，熱模組替換也更快
Vue 3 支援 - 現代的 Composition API 和更好的效能
TypeScript 支援 - 型別安全的配置和更好的 IDE 支援
模組化架構 - 更好的插件系統和更靈活的客製化
效能改進 - 優化的打包分割和更快的頁面載入
更好的開發體驗 - 改進的錯誤訊息和除錯工具

Tip

寫這篇文章的時候，VuePress v2 還在 Release Candidate (RC) 階段 (v2.0.0-rc.26)，不過已經穩定到可以上 production 了。官方 v2 正式版應該很快就會發布。

環境

升級時使用的環境：

Enable Sidecar for Old Devices

Wed, 26 Jun 2019 00:00:00 +0000

Edit - 2019.08.06

Methods mentioned in this post is no longer working in the latest beta version of macOS (10.15 Beta (19A526h)).

Edit - 2019.07.05

Add some tips.

The public beta of iPadOS and macOS Catalina is currently live for everyone now. You may go to Apple website for more detail info about public beta.

The Sidecar is a hot feature which let you connect your iPad to Mac wireless or wired. But this feature is actually limited to newer Apple devices. My Macbook Air Early 2015 was not showing the “Sidecar” icon in System Preference, neither my iPad Pro 11" showing up in my MBA’s AirDisplay menu.

Made with Love Snippets

Tue, 25 Jun 2019 00:00:00 +0000

Here are several ways to put “Made with Love” on your webpage.

Typing the Heart

Unicode Character

Made with ❤ by Howar31

Made with ❤ by Howar31

UTF-8 Miscellaneous Symbols

Made with ♥ by Howar31

Made with &#9829; by Howar31

HTML Entities

Made with ♥ by Howar31

Made with &hearts; by Howar31

Icon

Made with by Howar31

<link rel="stylesheet" type="text/css" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
Made with <i class="icon ion-heart"></i> by Howar31

Made with by Howar31

Proxy Settings Note

Sun, 21 Apr 2019 00:00:00 +0000

Edit - 2019.09.16

Add/Edit Git section.
Add command for NPM proxy
Fix typo

There are so many different system or tool configs to set if you are behind a proxy. This article simply note where and how to set them.

I will use these settings for the following example:

Proxy Host: host
Proxy Port: 3128
Proxy User: username
Proxy Password: password

Warning

You need to URL encode your username or password if special characters contains.
i.g. whitespace = %20, & = %26, etc…

Ubuntu

Config file path: /etc/environment

Setup Dockerize GitLab Runner on Synology NAS

Thu, 18 Apr 2019 00:00:00 +0000

In this article, I will illustrate how to setup a GitLab Runner with docker executor on Synology NAS DSM. And also show you how to setup docker-in-docker for docker executor in a container to call other docker containers/images on the host.

Environment

I have two Synology NAS and I tested the steps in this article on both devices. And the system (DSM) versions are the same.

Synology DS916+ and DS718+
DSM 6.2.1-23824 Update 6

Although there are some differences from regular Docker installation, I used the Docker package from Synology Package Center which provides GUI for easy management.

Setup VuePress with GitLab Pages on Ubuntu 18.04 LTS

Wed, 17 Apr 2019 00:00:00 +0000

This is a lite version of setup tutorial about Vuepress docs on Ubuntu. For detailed tutorial I wrote, please visit Create a docs with VuePress on GitLab Pages.

Environment

Ubuntu 18.04.1 LTS
Node.js 11.14.0
npm 6.9.0

Setup VuePress

VuePress Official Guide

Install VuePress

First, install VuePress globally:

npm install -g vuepress

or if you want to install locally:

npm install vuepress

Warning

With Vuepress installed locally, you may need to use npx vuepress in command line.

Config Build Path for GitLab Pages

To change the built files destination, we must set it up in config file. By default the config file is not exist, you may create a config file by yourself:

Secure GitLab Pages with Let's Encrypt Certificate

Sat, 23 Mar 2019 00:00:00 +0000

Edit - 2019.06.25

Add About Getting Certificates on Let’s Encrypt section.
Add Automatically Renew and Deploy Certificate on GitLab Pages section.
Add References section.
Fix typo.

Using SSL to secure your website is not only for safety, but also tell browser not show your website as not secure. Let’s Encrypt provides free SSL/TSL cerfiticates as long as you remember to renew them once in a while. And wildcard certificates can be applied to all the subdomains.

Enable PWA Support for VuePress

Fri, 22 Mar 2019 00:00:00 +0000

PWAs, Progressive Web Applications are web applications which is loaded as a website, but can also provide native app functionalities, such as offline mode, push notification, hardware access, and more. For more info about PWA, please read the articles metioned in References.

Environment

The environment I used:

macOS Mojave, 10.14.3
VuePress 0.14.10

I setup my blog as a PWA successfully. You may visit my blog on your phone (Chrome on Android recommended) to see how it works.

Create a Blog with VuePress on GitLab Pages

Wed, 20 Mar 2019 00:00:00 +0000

After several years hosting my blog on Wordpress, I decided to move my blog to VuePress so that I may write my blog with Markdown, and also customize my blog with Vue.js.

VuePress is a Vue-powered static site generator, which can easily help you to setup a SPA website in just few minutes. And with CI/CD and GitLab Pages integration, it becomes one of the best solution for personal blog which can be programmatically themed with Vue.js, automatically publish with CI/CD, and free host with GitLab Pages.