Hugo + RaisFast

用 RaisFast 作为后端，为你的 Hugo 站点添加评论、搜索、认证和电商功能。

概述

Hugo 是世界上最快的静态站点生成器。RaisFast 是世界上最快的 CMS 和 BaaS。两者组合，两个二进制文件构成完整的网站技术栈。

Hugo  → 生成静态 HTML 页面（前端）
RaisFast → 提供 API、评论、搜索、认证、电商（后端）

前提条件

已安装 Hugo
已安装 RaisFast（安装指南 →）

步骤 1：启动 RaisFast

raisfast

RaisFast 启动在 http://localhost:9898。管理后台在 http://localhost:9898/admin。

步骤 2：创建内容类型

在 RaisFast 管理后台中创建博客文章的内容类型，或在 TOML 中定义：

# content-types/blog.toml
name = "blog"
fields = [
  { name = "title", type = "text", required = true },
  { name = "slug", type = "text", required = true },
  { name = "content", type = "text", widget = "markdown" },
  { name = "category", type = "text" },
  { name = "tags", type = "text", array = true },
  { name = "cover_image", type = "text" },
  { name = "published_at", type = "datetime" },
]

步骤 3：构建时拉取文章

创建脚本从 RaisFast 拉取数据并生成 Hugo 内容文件：

# 从 RaisFast 获取文章并生成 Hugo markdown 文件
curl -s http://localhost:9898/api/v1/content/blog \
  | jq -r '.data.items[] | "---\ntitle: \(.title)\nslug: \(.slug)\ndate: \(.published_at)\ncategories: [\(.category)]\ntags: [\(.tags | join(","))]\n---\n\(.content)"' \
  > content/posts/{{ .slug }}.md

或者使用 Hugo 的 content adapters 实现更紧密的集成。

步骤 4：添加评论

在 Hugo 模板中添加评论区域：

<!-- layouts/partials/comments.html -->
{{ if .Params.comments }}
<div id="raisfast-comments" data-post-id="{{ .File.UniqueID }}"></div>
<script>
  (function() {
    const container = document.getElementById('raisfast-comments');
    const postId = container.dataset.postId;

    fetch('/api/v1/comments?post_id=' + postId)
      .then(r => r.json())
      .then(data => {
        data.data.items.forEach(comment => {
          container.innerHTML += `
            <div class="comment">
              <strong>${comment.author_name}</strong>
              <p>${comment.content}</p>
            </div>`;
        });
      });

    // 评论表单
    container.innerHTML += `
      <form id="comment-form">
        <input name="author_name" placeholder="昵称" required>
        <textarea name="content" placeholder="评论内容" required></textarea>
        <button type="submit">提交评论</button>
      </form>`;

    document.getElementById('comment-form').addEventListener('submit', function(e) {
      e.preventDefault();
      fetch('/api/v1/comments', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          post_id: postId,
          author_name: this.author_name.value,
          content: this.content.value,
        })
      }).then(() => location.reload());
    });
  })();
</script>
{{ end }}

在文章模板中引入：

<!-- layouts/_default/single.html -->
{{ partial "comments.html" . }}

步骤 5：添加搜索

添加使用 RaisFast Tantivy 全文搜索的搜索页面：

<!-- layouts/partials/search.html -->
<div id="raisfast-search">
  <input type="text" id="search-input" placeholder="搜索...">
  <div id="search-results"></div>
</div>

<script>
  document.getElementById('search-input').addEventListener('input', function() {
    if (this.value.length < 2) return;
    fetch('/api/v1/search?q=' + encodeURIComponent(this.value))
      .then(r => r.json())
      .then(data => {
        document.getElementById('search-results').innerHTML = data.data.items.map(post => `
          <a href="${post.url}">${post.title}</a>
          <p>${post.excerpt}</p>
        `).join('');
      });
  });
</script>

步骤 6：部署

方案 A：单服务器

# 构建 Hugo
hugo --minify

# 启动 RaisFast
raisfast &

# 配置 Nginx
# （参见 SSG 概述页面的 Nginx 配置）

方案 B：静态 CDN + RaisFast 服务器

Hugo 产出 → CDN（Cloudflare / Vercel / Netlify）
RaisFast  → 你的服务器（VPS / 独立服务器）
API 调用  → 从 CDN 跨域请求你的 RaisFast 服务器

在 RaisFast 的 .env 中配置 CORS：

RAISFAST_CORS_ORIGINS=https://yourdomain.com