Hugo + RaisFast

Add comments, search, auth, and ecommerce to your Hugo site with RaisFast as the backend.

Overview

Hugo is the world's fastest static site generator. RaisFast is the world's fastest CMS and BaaS. Together, they form a complete website stack in two binaries.

Hugo  → generates static HTML pages (frontend)
RaisFast → provides API, comments, search, auth, ecommerce (backend)

Prerequisites

Hugo installed
RaisFast installed (Installation Guide →)

Step 1: Start RaisFast

raisfast

RaisFast starts on http://localhost:9898. The admin dashboard is at http://localhost:9898/admin.

Step 2: Create Content Types

In the RaisFast admin dashboard, create a content type for your blog posts, or define it in 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" },
]

Step 3: Fetch Posts During Hugo Build

Create a Hugo content adapter that pulls data from RaisFast:

# Fetch posts from RaisFast and generate Hugo content files
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

Or use Hugo's built-in content adapters for a more integrated approach.

Step 4: Add Comments

Add a comments section to your Hugo templates:

<!-- 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>`;
        });
      });

    // Comment form
    container.innerHTML += `
      <form id="comment-form">
        <input name="author_name" placeholder="Name" required>
        <textarea name="content" placeholder="Comment" required></textarea>
        <button type="submit">Post Comment</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 }}

Include it in your single post template:

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

Step 5: Add Search

Add a search page that uses RaisFast's Tantivy-powered full-text search:

<!-- layouts/partials/search.html -->
<div id="raisfast-search">
  <input type="text" id="search-input" placeholder="Search...">
  <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>

Step 6: Deploy

Option A: Single Server

# Build Hugo
hugo --minify

# Start RaisFast
raisfast &

# Configure Nginx
# (see SSG index page for Nginx config)

Option B: Static CDN + RaisFast Server

Hugo output → CDN (Cloudflare / Vercel / Netlify)
RaisFast    → Your server (VPS / dedicated)
API calls   → Cross-origin from CDN to your RaisFast server

Configure CORS in RaisFast's .env:

RAISFAST_CORS_ORIGINS=https://yourdomain.com