Aligning Hugo & Decap CMS i18n Structure

[iBasher]

I’m working on a multilingual project using Hugo and Decap CMS, but I’m running into issues with their different i18n structures.

Key Differences:

• Decap CMS [docs]:
  • multiple_folders → <folder>/<locale>/<slug>.md
  • multiple_files → <folder>/<slug>.<locale>.md
  • single_file → <folder>/<slug>.md
• Hugo [docs]:
  • Uses <locale>/<folder>/<slug>.md structure

The problem is that I can either:
Edit content multilingually in Decap CMS
Display it correctly in Hugo with proper URLs
But not both at the same time.

I will need both posts and custom layout pages (“landing” pages)

Has anyone successfully handled this integration? Any advice or working examples would be much appreciated!

[iBasher]

Here is a simple example that works. Just replace %pagename% with your preferred name.

siteroot
├─ content
│    └── %pagename%
│             ├── _index.en.md
│             └── _index.ua.md
├─ layouts
│    └─ section
│           └── %pagename%.html

Decap CMS config (./static/admin/config.yml):

i18n:
  structure: multiple_files
  locales: [ua, en]
  default_locale: ua

collections:

  - name: %pagename%
    label: Pagename label
    folder: /content/%pagename%/
    i18n:
      structure: multiple_files
      locales: [ua, en]
    create: true // if you want to allow page creation from the admin panel
    fields:
      - label: Title
        name: title
        widget: string
        i18n: true

Hugo config (./config/_default/hugo.yml or ./config.yml):

languages:
  ua:
    weight: 1
    languageCode: ua
    languageName: "UA"

  en:
    weight: 2
    languageCode: en
    languageName: "EN"

Dealing with menus is a bit harder, but basic strings can still be translated here: /i18n/{locale}.yml