Hugo Integration

Add Ask0 to your Hugo static site. Step-by-step guide for enhancing Hugo-built websites with AI-powered search and chat.

Add Ask0 to your Hugo static site or documentation.

Installation

Partial Template

Create a partial template for the widget:

layouts/partials/ask0.html

<script
  src="https://assets.ask0.ai/scripts/ask.js"
  data-project-id="{{ .Site.Params.ask0.projectId }}"
  data-position="{{ .Site.Params.ask0.position | default "bottom-right" }}"
  data-theme="{{ .Site.Params.ask0.theme | default "auto" }}"
  async
></script>

Include in Layout

Add to your base layout:

layouts/_default/baseof.html

<!DOCTYPE html>
<html lang="{{ .Site.Language.Lang }}">
<head>
  <meta charset="UTF-8">
  <title>{{ .Title }}</title>
</head>
<body>
  {{ block "main" . }}{{ end }}

  {{ partial "ask0.html" . }}
</body>
</html>

Configuration

Add to your Hugo config:

config.toml

[params.ask0]
  projectId = "YOUR_PROJECT_ID"
  position = "bottom-right"
  theme = "auto"

Or in YAML:

config.yaml

params:
  ask0:
    projectId: YOUR_PROJECT_ID
    position: bottom-right
    theme: auto

Docsy Theme

For Hugo Docsy documentation theme:

layouts/partials/hooks/body-end.html

{{ if .Site.Params.ask0.enabled }}
<script
  src="https://assets.ask0.ai/scripts/ask.js"
  data-project-id="{{ .Site.Params.ask0.projectId }}"
  async
></script>
{{ end }}

Configuration:

config.toml

[params.ask0]
  enabled = true
  projectId = "YOUR_PROJECT_ID"

Ananke Theme

For Hugo Ananke theme:

layouts/partials/site-scripts.html

<script
  src="https://assets.ask0.ai/scripts/ask.js"
  data-project-id="{{ getenv "HUGO_ASK0_PROJECT_ID" }}"
  async
></script>

Conditional Loading

Load only on specific sections:

layouts/partials/ask0.html

{{ if or (eq .Section "docs") (eq .Section "blog") }}
<script
  src="https://assets.ask0.ai/scripts/ask.js"
  data-project-id="{{ .Site.Params.ask0.projectId }}"
  async
></script>
{{ end }}

Environment Variables

Use environment variables for different environments:

layouts/partials/ask0.html

{{ $projectId := getenv "HUGO_ASK0_PROJECT_ID" }}
{{ if not $projectId }}
  {{ $projectId = .Site.Params.ask0.projectId }}
{{ end }}

<script
  src="https://assets.ask0.ai/scripts/ask.js"
  data-project-id="{{ $projectId }}"
  async
></script>

Hugo Tips:

Use partials for reusable components
Store config in config.toml or config.yaml
Use environment variables for deployment
Works with all Hugo themes
Compatible with Hugo Modules

Hugo Integration

Installation

Partial Template

Include in Layout

Configuration

Docsy Theme

Ananke Theme

Conditional Loading

Environment Variables

Next Steps

On this page