Hugo on Commentary of Takao

為 Hugo 部落格設計現代內容安全策略

Fri, 05 Jun 2026 00:00:00 +0900

為什麼 CSP 對於靜態網站很重要

使用 Hugo 建立的靜態網站本質上比動態應用程式更安全，但它們仍然執行用於分析、廣告和嵌入的第三方腳本。 內容安全策略 (CSP) 透過控制可以載入的資源來保護您的訪客免受 XSS、資料注入和惡意腳本執行的侵害。

透過 Cloudflare Pages 設定 CSP

Cloudflare Pages 支援自訂 _headers 檔案來控制 HTTP 回應標頭：

# static/_headers
/*
 Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self'

對於 Hugo，將 _headers 檔案放在 static/ 目錄中，以便將其複製到輸出：

static/
├── _headers
├── css/
└── js/

為 Hugo 建構現實的 CSP

使用 Google AdSense、Google Analytics 和嵌入式 YouTube 影片的部落格需要更寬鬆的政策。這是一個生產就緒的 CSP：

# static/_headers
/*
 Content-Security-Policy:
 default-src 'self';
 script-src 'self'
 'strict-dynamic'
 'sha256-...' (inline script hash)
 https://www.googletagmanager.com
 https://pagead2.googlesyndication.com
 https://www.youtube.com;
 style-src 'self'
 'sha256-...' (inline style hash)
 https://fonts.googleapis.com;
 img-src 'self'
 https://*.googleapis.com
 https://*.googlesyndication.com
 https://www.google.com
 https://*.doubleclick.net
 https://*.youtube.com
 data:;
 font-src 'self'
 https://fonts.gstatic.com;
 frame-src 'self'
 https://www.youtube.com
 https://www.google.com;
 connect-src 'self'
 https://*.google-analytics.com;
 report-uri /csp-report;

使用隨機數與哈希值

對於內嵌腳本（在 Hugo 主題中常見），您有兩個選項：

隨機數字（每個請求唯一）：

<script nonce="ABC123">console.log("safe")</script>

客戶服務提供者：script-src 'nonce-ABC123'

隨機數最適合動態站點，但需要伺服器端生成，這對於完全靜態的 Hugo 站點來說很困難。

哈希（基於內容）：

<script>console.log("safe")</script>

客戶服務提供者：script-src 'sha256-...'

哈希對於靜態站點來說是理想的選擇，因為它們在部署過程中保持不變。計算內聯腳本的雜湊值並將其新增至策略中：

echo -n 'console.log("safe")' | openssl dgst -sha256 -binary | base64

理解嚴格動態

'strict-dynamic' 指令是一項強大的 CSP 功能。它告訴瀏覽器信任由已信任腳本載入的腳本，從而減少枚舉所有 CDN URL 的需要：

script-src 'self' 'strict-dynamic' 'sha256-ABC...';

使用 strict-dynamic ，如果您的主套件（透過雜湊受信任）載入 CDN 腳本，則該 CDN 腳本會自動受信任。這顯著簡化了具有許多第三方腳本的網站的 CSP 管理。

AdSense 需要特定的 CSP 津贴。主要指令：

指令	所需來源
腳本-src	`https://pagead2.googlesyndication.com`、`'unsafe-inline'`（或雜湊）
img-src	`https://.googlesyndication.com`、`https://.doubleclick.net`
框架-src	佔位符_0

考慮僅將 'unsafe-inline' 作為最後的手段 - 哈希值更好。

雲端服務提供者報告

設定 report-uri 或 report-to 指令以接收違規報告：

Content-Security-Policy: ...; report-uri /csp-report;

您可以使用 report-uri.com 或 Cloudflare CSP Analytics 等服務來收集和視覺化報告。這有助於識別被阻止的資源而不破壞功能。

測試您的 CSP

在部署之前，使用 Content-Security-Policy-Report-Only 進行限制性策略測試：

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report;

該標頭除了發送違規報告外什麼也不強制執行，讓您安全地識別問題。

結論

配置良好的 CSP 可保護 Hugo 部落格訪客免受 XSS 和腳本注入的侵害，同時允許合法的第三方服務運作。透過僅報告模式結合 strict-dynamic、腳本雜湊和增量部署，您可以建立強大的安全態勢，平衡保護與功能。

2026 靜態站點產生器：Astro、Hugo 與 11ty

Tue, 05 May 2026 00:00:00 +0900

2026 靜態站點產生器：Astro、Hugo 與 11ty

2026 年的靜態站點生成器格局比以往任何時候都更加多樣化。開發人員可以在基於 Go 的速度極快的 Hugo、島嶼架構先驅 Astro 和極簡、靈活的 11ty (Eleventy) 之間進行選擇。每個工具都在不同的場景中表現出色——了解它們的權衡對於為您的專案選擇正確的工具至關重要。

此比較從建置速度、範本、內容管理、影像最佳化、i18n 和部署方面對它們進行評估。

建構速度

SSG	語言	建置時間（10k 頁）	冷啟動	開發伺服器重新載入
雨果	去	〜3-5秒	即時	〜50ms
天文學	Node.js（打字稿）	~45-90 年代	中	約 200 毫秒
11歲	Node.js（JavaScript）	〜60-120秒	中	約 300 毫秒

Hugo 在建造速度方面擊敗了競爭對手。其基於 Go 的架構可在幾秒鐘內處理數千個頁面，使其成為大型文件網站和部落格的理想選擇。 Astro 為其功能集提供了出色的速度，尤其是其部分補水方法。 11ty 在大型站點上速度較慢，但其簡單性意味著小型專案的開銷更少。

模板化和靈活性

Hugo 使用 Go 範本及其自己的 .RenderShortcodes 管道。學習曲線很陡——Go 模板語法很特殊——但短代碼系統很強大。

{{ $pages := where .Site.RegularPages "Section" "blog" }}
{{ range $pages }}
 <article>
 <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
 <p>{{ .Summary }}</p>
 </article>
{{ end }}

Astro 使用 .astro 元件文件，將 HTML、JavaScript 和 CSS 混合在單一文件元件模型中。它透過其島嶼架構支援 UI 框架（React、Vue、Svelte、Solid）。

---
const { posts } = Astro.props;
---
{posts.map(post => (
 <article>
 <h2><a href={post.url}>{post.title}</a></h2>
 <p>{post.excerpt}</p>
 </article>
))}

11ty 允許您選擇範本語言：Nunjucks、Liquid、Handlebars、EJS 或原始 JavaScript。這種無與倫比的靈活性是 11ty 的超能力。

{% for post in collections.blog %}
<article>
 <h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
 <p>{{ post.data.excerpt }}</p>
</article>
{% endfor %}

內容管理

特色	雨果	天文學	11 歲
內容類型	Markdown，自訂 frontmatter	Markdown、MDX、內容集	Markdown，任何格式
分類	標籤、類別、自訂	基於 Frontmatter 的	基於標籤/集合
資料檔	`data/` 中的 YAML/TOML/JSON	`src/data/` 中的 YAML/JSON	`_data/` 中的 JS 模組
無頭 CMS	Decap CMS、CloudCannon	Decap CMS、Sanity、Storyblok	Decap CMS，任何基於 JS 的 CMS

所有這三個都支援 Markdown frontmatter。 Astro 的 Content Collections 透過 Zod 架構提供類型安全的 frontmatter 驗證，這是團隊中出色的功能。

// Astro Content Collection schema
import { defineCollection, z } from 'astro:content';
const blogCollection = defineCollection({
 schema: z.object({
 title: z.string(),
 date: z.date(),
 tags: z.array(z.string()).optional(),
 }),
});

影像優化

Hugo — 透過 .Resize、.Fill、.Fit 和 .Filter 進行內建影像處理。支援WebP AVIF輸出。零配置但命令式語法。

{{ $image := .Resources.Get "photo.jpg" }}
{{ $thumb := $image.Fill "400x300 webp" }}
<img src="{{ $thumb.RelPermalink }}" width="400" height="300">

Astro — @astrojs/image （或 Astro 的內建 Image 元件）提供自動最佳化、響應式 srcsets 和延遲載入。

---
import { Image } from 'astro:assets';
---
<Image src={/photos/photo.jpg} alt="Photo" width={400} height={300} format="webp" />

11ty — 無內建影像處理。使用 eleventy-img 外掛程式來實現類似的功能。更多設定但完全控制。

國際化（i18n）

SSG	i18n 支援
雨果	本地多語言、每種語言的內容目錄、翻譯連結
天文	`@astrojs/i18n`（2025 年以上穩定），基於 URL 的區域設定路由
11歲	社群插件，手動擷取為主的方法

Hugo 擁有最成熟的 i18n 系統，具有內建的翻譯管理和回退行為。 Astro 的 i18n 支援已經顯著成熟，提供 URL 前綴、區域設定檢測和翻譯功能。

部署和生態系統

所有這三個都部署到任何靜態主機（Netlify、Vercel、Cloudflare Pages、AWS S3）：

Hugo — 單一二進位部署，無運行時依賴
Astro — 可部署為靜態或 SSR（Node.js、Deno、邊緣函數）
11ty — 零運行時靜態輸出

用例推薦

使用案例	推薦SSG
大型文件網站（5000+ 頁）	雨果
具有框架組件的行銷網站	天文學
簡單的部落格/個人網站	11ty 或雨果
電子商務登陸頁面	天文學
多語言公司網站	雨果
自訂建置管道/現有範本	11 歲
SSR + 靜態混合	天文

結論

2026 年沒有單一的「最佳」靜態網站產生器 - 正確的選擇取決於您的特定要求。 Hugo 主導原始建置速度和多語言網站。 Astro 在組件驅動架構和框架整合方面領先於開發人員體驗。 11ty 仍然是極簡主義和靈活性的冠軍。

評估專案的規模、團隊專業知識和功能需求。擁有 100 篇貼文的部落格在任何 SSG 上都表現良好。 50,000 頁的企業文件入口網站將受益於 Hugo 的速度。具有互動式 React 小工具的內容網站是 Astro 的最佳選擇。做出相應的選擇，您的靜態網站將變得快速、可維護且面向未來。

如何 Set Up Hugo: Complete 指南 for 初學者s

Wed, 23 Aug 2023 00:00:00 +0900

How to install Hugo - Static Site Generator Installation Instructions

Hugo is a fast and simple static site generator and tool that makes building websites easy. This article details the steps to install Hugo.

Step 1: Download Hugo

To install Hugo, first download the appropriate version of the Hugo binary from the official download page.

go to the official Hugo download page. 2.
select the installation method appropriate for your operating system (Windows, macOS, Linux, etc.)
open a terminal (command prompt) and follow the instructions to download the Hugo binary.

Step 2: Confirm installation

After the Hugo binary has been downloaded, verify that the installation was successful. 1.

open a terminal and type the following command to check the version of Hugo.

hugo version

If installed correctly, the Hugo version information will be displayed.

Step 3: Start using Hugo

Once Hugo has been installed correctly, 讓我們 create a new website. 1.

open a terminal and navigate to the directory where you want to create the website. 2.
create a new Hugo site by entering the following command.

hugo new site mywebsite

Navigate to the website directory.

cd mywebsite

choose a theme and install it. For example, to use Ananke, the official Hugo theme, enter the following command.

git clone https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

create the website content and generate the website using Hugo.

hugo new post/sample.md

You can create a new page with this command.

To build the page, type the following command.

hugo -t ananke

Now you are ready to install and use Hugo in a basic way. Proceed to customize and build your website and 享受 the charm of a static site!

Note: Installation procedures and requirements are subject to change. We recommend that you follow the instructions provided on the official website and in the documentation.

Hugo on Commentary of Takao

為 Hugo 部落格設計現代內容安全策略

為什麼 CSP 對於靜態網站很重要

透過 Cloudflare Pages 設定 CSP

為 Hugo 建構現實的 CSP

使用隨機數與哈希值

理解嚴格動態

Google AdSense 的 CSP

雲端服務提供者報告

測試您的 CSP

結論

2026 靜態站點產生器：Astro、Hugo 與 11ty

2026 靜態站點產生器：Astro、Hugo 與 11ty

建構速度

模板化和靈活性

內容管理

影像優化

國際化（i18n）

部署和生態系統

用例推薦

結論

如何 Set Up Hugo: Complete 指南 for 初學者s

How to install Hugo - Static Site Generator Installation Instructions

Step 1: Download Hugo

Step 2: Confirm installation

Step 3: Start using Hugo