Github Actions 實例：自架伺服器自動部署 Blog

Fri, 25 Sep 2026 00:01:27 +0800

以自架伺服器部署 Devblog 為例，介紹如何設定 GitHub Actions Self-hosted Runner，並透過 Workflow 自動建置與部署網站。從 Workflow 的基本結構、Runner 的目錄管理，到環境變數與 Context 的差異，逐步說明 GitHub Actions 的運作方式。

一天一指令 Day 3 - dd

Wed, 11 Jun 2025 22:57:47 +0800

dd 這麼方便的小工具你一定要會！

一天一指令 Day 2 - htop

Fri, 30 May 2025 20:35:20 +0800

關於 htop 的便捷小技巧

一天一指令 Day 1 - grep 和他的兄弟：egrep、fgrep、rgrep

Thu, 29 May 2025 21:59:12 +0800

關於grep的常用功能及常見問題

台大資工NASA修課心得(2)-第5~8週

Wed, 10 Apr 2024 02:48:54 +0800

關於NASA(網路管理及系統管理)課程的內容摘要、筆記與心得，之二

台大資工NASA修課心得(1)-第0~4週

Thu, 21 Mar 2024 16:57:52 +0800

關於NASA(網路管理及系統管理)課程的內容摘要、筆記與心得

使用Hugo架設個人Blog

Wed, 20 Mar 2024 03:41:31 +0800

前言

升上大學之後，開始覺得想要紀錄一下自己學習的軌跡，另一方面也可以將習得的知識寫成文章，日後便可以自己回頭複習檢視，甚至讓其他和我一樣遇到相同瓶頸的人得到解決方法。再者，撰寫自己的Blog大概也算是某種品牌經營吧？諸如此類，現在這個網站才會誕生啦！

Framework選擇

到2024年3月為止，比較主流的靜態網頁生成框架有：

Jekyll
Hexo
Hugo
Pelican

我最後選擇使用Hugo來架設這個Blog，主要是它在Github上面的Stars蠻多的，而且很多人都因它在速度上的優勢推薦它。

Logo of Hugo

Theme選擇

我選擇使用PaperMod這個Theme，我個人偏好這種簡潔的版面設計，而且調整起來相當簡單，不需要花費太多心力就能了解它提供的Features。

設定Markup Parser

Hugo預設使用Goldmark這個Parser來將以Markdown寫成的文章在生成網頁時轉換為適當的html。其中我想修改的是這一項：

# config/_default/markup.yaml
goldmark:
 renderer:
 unsafe: true

當unsafe選項改為true時，markdown中的html標記會直接被保留，才能使用像是<mark>之類的html tag。

$\LaTeX$

作為一個devblog，需要用到數學式子的日子肯定不會少，就算沒有用到也沒關係，我仍然會加入$\LaTeX$的功能。

這邊我使用$\KaTeX$這個Library來達成，將一些script放在我們的html head中，它會自動尋找內文中所有使用delimiter的部分，並將其替換成適當的元素。 KaTeX使用的js function可以自行傳入想要使用的delimiter，這樣我們就可以根據自己的偏好進行設定了。

<!-- layouts/partials/entend_head.html -->

{{ if or .Params.math .Site.Params.math }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"></script>
<script>
 document.addEventListener("DOMContentLoaded", function() {
 renderMathInElement(document.body, {
 // customised options
 // • auto-render specific keys, e.g.:
 delimiters: [
 {left: '$$', right: '$$', display: true},
 {left: '$', right: '$', display: false},
 {left: '\\(', right: '\\)', display: false},
 {left: '\\[', right: '\\]', display: true}
 ],
 // • rendering keys, e.g.:
 throwOnError : false
 });
 });
</script>
{{ end }}

將這段html放置在layouts/partials/entend_head.html中，PaperMod會引用這個partial，將它嵌入在所有生成網頁的head中，我們就可以盡情使用$\LaTeX$了： $$ e^{i\pi} + 1 = 0 $$

ICEYIC