[DOCKER] [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 スクリーンショット 2020-09-16 23.06.41.png

goal

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

site

スクリーンショット_2020-10-15_15_55_18.png

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 スクリーンショット_2020-10-13_15_03_04.png

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. スクリーンショット_2020-10-13_15_13_24.png

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 スクリーンショット 2020-10-13 15.27.02.png

Add index page (parent)

I want to set the page that is displayed when I click "Post" or "My New Hugo Site" スクリーンショット_2020-10-13_15_34_02.png 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.

スクリーンショット 2020-10-13 15.49.22.png

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.

スクリーンショット 2020-10-13 15.49.13.png

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.

スクリーンショット 2020-10-13 16.01.23.png

reference

Hugo Learn Guide Hugo Content Organization

Recommended Posts

[Hugo] Summary of how to add pages to sites built with Learn
How to learn structured SVM of ChainCRF with PyStruct
Summary of how to share state with multiple functions
Summary of how to use pandas.DataFrame.loc
Summary of how to use pyenv-virtualenv
Summary of how to use csvkit
Here's a brief summary of how to get started with Django
[Python] Summary of how to use pandas
How to add a package with PyCharm
[Python2.7] Summary of how to use unittest
"How to pass PATH" to learn with homebrew
Summary of how to use Python list
[Python2.7] Summary of how to use subprocess
Summary of how to write AWS Lambda
Summary of how to build a LAMP + Wordpress environment with Sakura VPS
Summary of how to import files in Python 3
How to add arbitrary headers to response with FastAPI
Summary of how to use MNIST in Python
How to specify attributes with Mock of python
How to implement "named_scope" of RubyOnRails with Django
How to Learn Kaldi with the JUST Corpus
Summary of how to read numerical data with python [CSV, NetCDF, Fortran binary]
[Python] Summary of eval / exec functions + How to write character strings with line breaks
How to add help to HDA (with Python script bonus)
Add information to the bottom of the figure with Matplotlib
[Blender] Summary of how to install / update / uninstall add-ons
How to output CSV of multi-line header with pandas
Site summary to learn machine learning with English video
How to infer MAP estimate of HMM with PyStruct
[Python] Summary of how to specify the color of the figure
How to infer MAP estimate of HMM with OpenGM
Summary of sites where you can learn programming online
[How to!] Learn and play Super Mario with Tensorflow !!
[python] Summary of how to retrieve lists and dictionary elements
How to enable Read / Write of net.Conn with context with golang
[Linux] [C / C ++] Summary of how to get pid, ppid, tid
[Python] Summary of how to use split and join functions
How to display a list of installable versions with pyenv
How to run an app built with Python + py2app built with Anaconda
Summary of how to write .proto files used in gRPC
How to update with SQLAlchemy?
How to cast with Theano
How to Alter with SQLAlchemy?
How to separate strings with','
How to RDP with Fedora31
How to Delete with SQLAlchemy?
How to extract features of time series data with PySpark Basics
How to get the ID of Type2Tag NXP NTAG213 with nfcpy
How to get the directory where the EXE built with Pyinstaller exists
How to monitor the execution status of sqlldr with the pv command
Explain how to use TensorFlow 2.X with implementation of VGG16 / ResNet50
Node.js: How to kill offspring of a process started with child_process.fork ()
How to cancel RT with tweepy
Python: How to use async with
Add fields to features with ArcPy
How to use virtualenv with PowerShell
How to deal with imbalanced data
How to install python-pip with ubuntu20.04LTS
How to deal with imbalanced data
How to add sudo when debugging
How to get started with Scrapy