↓Skip to main content
  1. Posts/

Adding a 'Thoughts' Page to a Hugo Site with Memos

·3 mins
Skills Hugo Memos Frontend
Table of Contents

I often have fragmented thoughts and ideas that are worth recording but not substantial enough for a full article. I wanted to add a separate page to my blog to record and share this content.

You can see the final result here.

This solution has been open-sourced on GitHub, and your Stars and Forks are most welcome: hugo-memos-integration

Requirements #

Here’s a simple list of requirements for this page:

  • Display fragmented thought records in reverse chronological order, similar to a Twitter timeline.
  • Support Markdown rendering.
  • Responsive design, adapting to both desktop and mobile.
  • Maintain a consistent style with the existing site.
  • Easy to publish and update.

After some research and investigation, I chose to use Memos. The last time I heard about Memos was when the developer of Flomo accused it of plagiarizing their interface. Looking at it now, Memos has changed significantly.

Implementation #

Sticking to the principle of keeping things simple, I adopted a straightforward implementation: the page’s frontend JavaScript calls the Memos API:

Hugo Site → JavaScript → Memos API → Dynamically Rendered Content

The advantages of this approach are:

  • Simple implementation, no backend development required.
  • Content publishing, updating, and management can all be done on the Memos side.
  • Decoupled from the Hugo site’s build process.

There are also disadvantages:

  • Since content is fetched and rendered dynamically via an API, it’s not SEO-friendly.
  • It doesn’t support bilingual (Chinese/English) content.

First, Deploy Memos #

I won’t go into detail here; you can refer to the official documentation. I deployed it on my own server using Docker and linked it to my subdomain: https://memos.yandong.xyz

Create the Page Structure #

Create a new content page, just like a regular post:

# Chinese page
content/thoughts/index.zh.md

# English page
content/thoughts/index.en.md

Content:

---
title: "Thoughts"
description: "Recording fragmented ideas and thoughts from daily life."
layout: "thoughts"
build:
    render: true
    list: never
---

💡Here I record my fleeting ideas, which may be fragmented and not fully thought out.

The most crucial field here is layout: "thoughts", which tells Hugo to render this page using the thoughts.html template. Next, we’ll create this template.

Create a Custom Template #

Simply create a thoughts.html file at this path: layouts/_default/thoughts.html. The code was implemented with the help of Vibe Coding. I won’t go into the details; you can grab the source code on GitHub: hugo-memos-integration.

For the JavaScript part, pay attention to CORS.

Finalize Hugo Configuration #

Add the Memos-related configuration to config/_default/params.toml:

[memos]
# Memos server URL (required)
serverURL = "https://memos.yandong.xyz"

# Access token (optional, if Memos requires authentication)
# accessToken = "your-access-token"

# User ID (optional, to filter memos for a specific user)
# userID = "your-user-id"

Summary #

By integrating Memos, I’ve added a dynamic ’thoughts’ page to my Hugo-based blog. In fact, with Memos’ capabilities, there are more possibilities, such as creating a photo gallery.

As mentioned earlier, the current solution has two obvious drawbacks:

  1. No support for English.
  2. Dynamic content is not SEO-friendly.

I’ll try to address these when I have time, with two potential directions:

  1. Use Memos’ webhooks to call an AI service to synchronously publish an English version when Chinese content is posted.
  2. Statically render the dynamic content during the Hugo deployment phase.

If you have a better solution, please share it. Should you encounter any problems, don’t hesitate to reach out to me.😉

References #