[Hugo] Summary of how to add pages to sites built with Learn

Overview

I will summarize the procedure for adding pages and applying layout to the site (theme: Learn) built with Hugo.

Premise

-[Docker] Environment construction for using Hugo -[Docker] Build a site on Hugo and publish it on GitHub

The procedure described above The environment is built and the page is created, and the explanation is based on the assumption that the posts folder is in the "content" folder below.

content
└── posts
    └── my-first-post.md

Completed page at the moment

goal

The goal is to create the following site by adding pages (children) and setting index pages (parents).

site

Folder structure

The final file structure is as follows

content
├── _index.md         // baseurl 
└── posts　　　
    ├── _index.md     // .../post 
    ├── my-first-post.md　　　　// .../post/my-first-post
    └── my-second-post.md　　　// .../post/my-second-post

Site index page, page settings depend on folder structure

Creating a page

A page (child) is created by executing the hugo new command. In Previous article, the following command has been executed.

hugo new posts/my-first-post.md　

By executing this command, the contents described in the "default.md" file in the "archetypes" folder will be added to the specified .md file.

The items added by default are as follows

default.md

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---

You can create a website by filling in these parameters.

How to change the title name of the table of contents

Explain how to change the title of the table of contents

Since the title is set in "title:" of "my-first-post.md", change the character string here.

my-first-post.md

---
title: "My First Post" //Specified here
date: 2020-XX-XX
draft: true
---

#title
Try to create a hoge site

If you change to title:" Chapter 1 ", the following three parts will be changed.

How to add a page (child)

There are two ways to add pages:

1. Execute with the hugo new command as when creating a new page
2. Manually fill in the items that will be added when you run the hugo new command

The difference is whether the contents of the default.md file are commanded or entered manually.

Here, copy "my-first-post.md", rename it to "my-second-post.md", save it in the same hierarchy, and add the page

my-second-post.md

---
title: "Chapter 2"
date: 2020-XX-XX
draft: true
---

#Add page
my-first-post.Copy md to modify the contents, my-second.Save as md file

Page added

Add index page (parent)

I want to set the page that is displayed when I click "Post" or "My New Hugo Site" Looking at the current file structure, it is as follows. These are the parent pages, called index pages. Learn Guide: _index.md

content
└── posts
    ├── my-first-post.md
    └── my-second-post.md

By default, there are no files that make up the Post or My New Hugo Site pages. You can configure the page by creating _index.md in each folder.

Add content> _index.md

_index.md

---
title: "Site information"
date: 2020-XX-XX
draft: true
---
This site is testing Learn customization.

posts> Add _index.md

_index.md

---
title: "Customization procedure"
date: 2020-XX-XX
draft: true
---
#Learn customization
_You can edit this page by creating an index file.

With the operations up to this point, the file structure is as follows.

content
├── _index.md
└── posts
    ├── _index.md
    ├── my-first-post.md
    └── my-second-post.md

Apply page layout

Learn provides layouts for chapter pages in addition to regular page layouts Learn Guide: Create your first chapter page The layout is applied by adding chapter: true to the header part and writing as follows.

###Subheading
#title
Write a sentence here

posts> Apply layout for chapters to _index.md file

_index.md

---
title: "Customization procedure"
date: 2020-XX-XX
draft: true
chapter: true //Postscript
---
###Beginners
#Learn customization
_You can edit this page by creating an index file.

reference

Hugo Learn Guide Hugo Content Organization