ripabak.github.io

Imported from ripabak/ripabak.github.io (AGENTS.md). Install upstream with npx skills add ripabak/ripabak.github.io. Copyright stays with the author.

AGENTS.md – ripabak Blog Guide

Project Overview

• Hugo v0.154+ (static site generator) with PaperMod theme
• Hosted on GitHub Pages via .github/workflows/hugo.yaml
• Repo: ripabak/ripabak.github.io (master branch)
• Local dev: hugo server (serves at http://localhost:1313)

Directory Structure (Key Files Only)

.
├── hugo.yaml                  # Main config: languages, menus, PaperMod params
├── archetypes/post.md         # Frontmatter template for new posts
├── assets/images/             # All blog images, one subfolder per post slug
├── content/posts/             # ALL blog posts (flat, no subdirectories)
│   ├── {slug}.md              # Indonesian version (default language)
│   └── {slug}.en.md           # English version
├── i18n/                      # UI translation strings (id.yaml, en.yaml)
├── layouts/
│   ├── index.html             # Custom homepage (posts + projects carousel)
│   └── partials/extend_head.html
└── themes/PaperMod/           # Git submodule – do NOT modify

• archetypes/post.md is the canonical frontmatter template. Run hugo new --kind post content/posts/{slug}.md to scaffold a new post.
• assets/images/{slug}/ holds all images for a post. Images are referenced as images/{slug}/file.png in markdown.
• static/ is only for Partytown JS – not for blog assets.
• assets/css/extended/ has custom CSS overrides (custom.css, projects.css).

Multi-Language System

Language is inferred from the filename suffix, NOT from a frontmatter field.

Hugo auto-links translations when two files share the exact same slug (the part before .md / .en.md).

Creating a Bilingual Post

1. Create the Indonesian file:

   hugo new --kind post content/posts/{My-Post-Slug}.md
   

2. Copy to English:

   cp content/posts/{My-Post-Slug}.md content/posts/{My-Post-Slug}.en.md
   

3. Translate the English version:
   • title → English title
   • description → English description
   • Body → natural English translation (not literal/word-for-word)
   • All other fields (date, tags, booleans) stay identical
   • editPost.URL in the .en.md file should still point to the .md file path

Bilingual Rules (CHECKLIST)

• Same slug in both filenames
• Same date value in both files
• Same tags array in both files
• Same boolean params in both files
• editPost.URL in .en.md points to the .md file, not the .en.md file
• Body is a natural translation, not literal

If a post is intentionally Indonesian-only, omit the .en.md file entirely.

Frontmatter Template

---
title: "My Post Title"
date: 2026-06-15T12:00:00+07:00
tags: ["Tag1", "Tag2"]
author: "Me"
showToc: true
TocOpen: false
draft: false
hidemeta: false
comments: true
description: "Short summary – shows in meta tags and post listings."
searchHidden: false
ShowReadingTime: true
ShowBreadCrumbs: true
ShowPostNavLinks: true
ShowWordCount: true
ShowRssButtonInSectionTermList: true
UseHugoToc: true
editPost:
    URL: "https://github.com/ripabak/ripabak.github.io/content/posts/{My-Post-Slug}.md"
    Text: "Suggest Changes"
    appendFilePath: true
---

Optional Fields

canonicalURL: "https://medium.com/..."     # cross-post origin link
disableHLJS: true                          # disable highlight.js syntax coloring
cover:
    image: "images/{slug}/banner.png"      # path relative to assets/
    alt: "Alt text for image"
    caption: "Caption under cover image"
    relative: false                        # always false (no page bundles)
    hiddenInSingle: true                   # hide cover on the post page, keep it in listings
    # hidden: true                         # hides cover on BOTH post page AND listings

Field Notes

Comments System (Giscus)

Comments use Giscus (backed by GitHub Discussions on this repo).

How It Works

• Each post URL maps to its own GitHub Discussion thread (via data-mapping="pathname"). Threads are auto-created the first time someone comments.
• Threads are grouped under the General category in GitHub Discussions (purely organizational — does NOT mean posts share a thread).
• Because mapping is pathname, the Indonesian (/posts/{slug}/) and English (/en/posts/{slug}/) versions have separate comment threads.
• The Giscus UI language follows the post language via data-lang (id or en), set dynamically in layouts/partials/comments.html.
• Comments only render on single pages when .Param "comments" is truthy — frontmatter overrides the global params.comments: true in hugo.yaml.

Files

Gotchas

• Don't change data-repo-id / data-category-id unless the repo or category changes (get new values from https://giscus.app).
• Keep comments identical in both language files of a post.
• Comment threads live in GitHub Discussions — moderation happens there (https://github.com/ripabak/ripabak.github.io/discussions).
• If a post is a draft (draft: true), its page (and comments) are not built.

Writing Style Guide

Core Tone (Applies to Both Languages)

• First-person, conversational, personal. Write like you're talking to a friend over coffee.
• Casual & informal. No academic or corporate tone. Short sentences. Natural flow.
• No dashes. Never use em dashes (—), en dashes (–), or hyphens (-) as punctuation or emphasis (e.g. "context window — yang membengkak"). Replace with commas, periods, or start a new sentence. Dash-heavy text reads like AI-generated writing. Hyphens inside compound words ("battle-tested", "output-nya") are fine.
• Code-switching in Indonesian is normal and encouraged. English technical terms, filler phrases like "btw", "so far", "at least", "it should be make sense" belong in Indonesian posts.
• Self-deprecating humor and personal anecdotes. Don't take yourself too seriously.
• Reflective. Include why you built something, what you learned, what you'd do differently.
• Full style reference. See WRITING-STYLE.md (repo root) for the complete style guide with examples.
• Close with a friendly sign-off. "Makasih udah baca, semoga membantu :)" / "Thank you for reading :)"

Indonesian Style

• Pronouns: aku (I), kamu (you), casual; saya, anda also appear but aku/kamu dominates.
• Colloquial particles: dong, nih, ya, sih, deh, kan, lho, wkwk, kok
• Opening phrases: "Jadi gini...", "Beberapa waktu yang lalu, aku..."
• Mid-sentence English: "sounds impossible right?", "it should be make sense right (?)", "so disturbing", "its okay", "whatt? how?"
• Example tone (from existing posts):
  • "Aku pernah dengar cerita dari seorang teman dekat aku, dia pernah berada di situasi yang sulit, dia di palak sama pihak tertentu, aku gabisa sebutin pihak nya ya disini wkwk."
  • "Di sini bisa di pahami lah ya, teman aku itu adalah korban, dimana dia bisa dapat keadilan di situasi seperti itu (?)."
  • "Tenang hasil video nya akan disimpan di browsermu sendiri kok, tidak akan disimpan di server."

English Style

• Clean, simple English. Not a literal translation. Make it read naturally to an English speaker.
• Pronouns: I, you (never we in academic sense, never passive voice).
• Example tone (from existing posts):
  • "So, this website is my personal space that I created as an archive of knowledge and reflection."
  • "I once heard a story from a close friend of mine. He was in a difficult situation, being extorted by certain parties—I can't mention who here haha."
  • "Don't worry, the video results will be stored in your own browser, not on a server."

Recommended Post Structure

1. Personal hook/story: Why this matters to you, how you got into it (1-2 short paragraphs)
2. What you built / discovered: The core content, problem statement
3. How it works / Features / Steps: With code blocks, screenshots, or numbered steps
4. Reflection / Closing: What you took away, link to GitHub/tool, friendly sign-off

Content Type Patterns

Image & Asset Conventions

• Store images in assets/images/{post-slug}/ (one folder per post, slug must match post filename).
• Cover banner: name it banner.png inside the slug folder.
• Reference in frontmatter: images/{slug}/banner.png
• Reference in markdown body: ![Alt](images/{slug}/filename.png)
• Supported formats: .png, .webp, .jpg, .jpeg, .gif
• Images are processed through Hugo's asset pipeline (not raw static/ files).

Image Checklist for New Post

• Create assets/images/{slug}/ directory
• Add banner.png (cover image)
• Add all screenshots/photos to that folder
• Update cover.image in frontmatter
• Inline images use paths relative to assets/: ![Alt](images/{slug}/filename.png)

Tags System

All categorization uses tags – there is no separate categories field.

Tags generate listing pages at /tags/{tagname}/ (or /en/tags/{tagname}/).

Tag Rules

• Use 2-6 tags per post.
• Always include category-level tags plus specific tags.
• Project posts: always include "Projects" as the first tag, plus technology-specific tags.
• Both language files must have identical tags.

Quick Reference: New Blog Post Checklist

1. Pick a kebab-case slug (e.g. My-New-Project)
2. Run hugo new --kind post content/posts/{slug}.md
3. Edit the .md file: set title, description, tags, real date, draft: false
4. Write the Indonesian body following the style guide above
5. No dashes (—/–/-) used as punctuation anywhere in the post, both language versions
6. Copy .md → .en.md and translate naturally
7. Fix editPost.URL in .en.md to point to the .md file
8. Create assets/images/{slug}/ and add images
9. Set cover.image in frontmatter (if applicable)
10. Verify date matches, tags match, slug matches across both files
11. Run hugo server and test both /posts/{slug}/ and /en/posts/{slug}/

Commands

# Create a new post from archetype
hugo new --kind post content/posts/My-Post-Slug.md

# Start dev server (drafts included)
hugo server -D

# Build for production
hugo

# Build minified for production
hugo --minify