Skip to main content

Optimizing Decap CMS UX with config.yml and index.html Improvements

· 6 min read
hiroaki
Individual Developer

In a previous article, I explained how to integrate Decap CMS into a Docusaurus site. While the integration established a foundation for content updates, I felt there was room for improvement in daily use, especially regarding mobile usability and the efficiency of routine data entry.

This article introduces the practical customizations I applied to static/admin/config.yml and static/admin/index.html to address these challenges.

  • Optimizing config.yml: Settings to reduce manual input and prevent errors.
  • Modifying index.html: Adding CSS and JavaScript to improve mobile usability.

These tunings have created an environment where I can comfortably update articles not only from a PC but also from a smartphone. I hope this serves as a useful example of leveraging the high customizability of a Git-based CMS.

A Record of Integrating Decap CMS with a Docusaurus Site on Cloud Run

· 8 min read
hiroaki
Individual Developer

To streamline content management for this site, I integrated the headless CMS, Decap CMS (formerly Netlify CMS). This article documents the implementation process, the technical decisions made, and the solutions to problems I encountered.

Ultimately, I settled on a slightly unusual hybrid architecture: the CMS admin panel is managed by Netlify, while the public-facing site is operated on Google Cloud Run.

  • CMS Admin Environment (Netlify)

    • URL: https://[your-site].netlify.app/admin/
    • Role: Provides the Decap CMS admin interface and handles authentication via Netlify Identity.
  • Public Site Environment (Google Cloud Run)

    • URL: https://[your-custom-domain].com/
    • Role: Hosts the static site, maintaining the existing CI/CD pipeline.

I hope this article will be helpful for anyone considering a similar setup.

Implementing Share Buttons in Docusaurus: A Log and Troubleshooting Guide

· 5 min read
hiroaki
Individual Developer

Implementing the Share Buttons

I've added share buttons to each article on this site for social media sharing. This post documents the implementation process and the technical decisions behind it.

A key feature of the final component is its ability to automatically fetch the page title and URL. This means that once it's set up, there's no need for special configurations on a per-article basis, which minimizes maintenance.

Creating a Multilingual News Links Page in Docusaurus

· 4 min read
hiroaki
Individual Developer

This article outlines the key considerations and technical details involved in implementing a "News Page" on a Docusaurus site, designed to list domestic and international news sources.

1. Page Purpose and Key Features

The primary goal was to build a personal information hub for quick access to reliable news sources. The page is built as a static site, emphasizing fast performance, usability, and maintainability.

Optimize Costs by Automatically Deleting Old Docker Images in Artifact Registry

· 4 min read
hiroaki
Individual Developer

Tackling Rising Storage Costs in Artifact Registry

When using a CI/CD pipeline with tools like GitHub Actions to deploy to Google Cloud Run, a new Docker image is pushed to Artifact Registry with every run. While this is a very convenient system, old images will pile up if left unchecked. Have you ever been surprised by a higher-than-expected storage bill?

This article introduces how to solve this problem using Artifact Registry's "Cleanup Policies" feature. I'll provide a step-by-step guide on how to automatically delete unnecessary old Docker images to continuously optimize your storage costs.

This guide is based on the Google Cloud Console UI as of July 2025.

Browser Memo Feature: A Log of URL Sharing and UX Improvements

· 4 min read
hiroaki
Individual Developer

Browser Memo Feature: A Log of URL Sharing and UI/UX Improvements

Introduction

Regarding the previously implemented Browser Memo feature.

Based on user experience and analysis of competing services, I have implemented significant feature enhancements.

This article outlines the key technical points of implementing a URL-based memo sharing feature and the UI/UX improvements made in the process.

Related:

How to Enable Key Repeat on Mac by Disabling the Accent Menu

· 3 min read
hiroaki
Individual Developer

Restore Comfortable Typing on Your Mac

When you're writing or coding on your Mac, have you ever held down a key like a, expecting it to repeat like aaaaa..., only to be interrupted by a menu of accented characters (like à)?

Accent Menu

This is a handy macOS feature called "Press and Hold," but it can hinder your workflow, especially when you need to type the same character repeatedly for coding or writing.

This article provides a clear, step-by-step guide on how to disable this accent menu and enable traditional key repeat, even for those unfamiliar with macOS.

This guide has been tested on the following environment:

  • Mac: M1, 2020
  • macOS: Sonoma 15.1 (24B83)

How to Optimize Algolia Search by Language on a Docusaurus Multi-language Site

· 6 min read
hiroaki
Individual Developer

When implementing Algolia DocSearch on a multi-language (i18n) site built with Docusaurus, I faced the challenge of search results containing mixed languages. It's common for situations to arise that harm the user experience, such as English pages appearing in search results when searching in Japanese.

This article organizes the specific setup steps as a technical memo to solve this problem and achieve an optimal search experience that syncs with the site's display language.

What you can achieve with this article
  • Filter search results to match the site's display language (Japanese/English).
  • Automatically route content to language-specific Algolia indexes based on the URL path (/ or /en/).
  • Improve search accuracy with index settings tailored to the characteristics of each language, such as Japanese and English.

A Simple Way to Display 'Last Updated' on Docusaurus Docs Articles

· 4 min read

This post outlines a simple implementation for displaying a "Last Updated" date on our Docusaurus documentation articles to indicate the freshness of the information. Unlike the Blog folder, the Docs folder does not display creation dates by default, so we decided to add this feature. We opted for a method using Front Matter, which doesn't rely on Git history and requires no changes to our CI/CD setup.

References: