### Build and Serve Hugo Docs

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/hugoisforlovers.md

Commands to clone the Hugo repository, navigate into it, and run the Hugo server to build and serve the documentation site locally. Includes the expected output from the server.

```shell
git clone https://github.com/spf13/hugo
cd hugo
/path/to/where/you/installed/hugo server --source=./docs
> 29 pages created
> 0 tags index created
> in 27 ms
> Web Server is available at http://localhost:1313
> Press ctrl+c to stop
```

--------------------------------

### Starting Hugo Development Server (Verbose)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Executes the Hugo development server command with the verbose flag to show detailed output, including configuration loading, file syncing, layout lookup warnings, build summary, and the local server address.

```Shell
$ hugo server --verbose
INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
WARN: 2014/09/29 Unable to locate layout: [404.html]
0 draft content 
0 future content 
0 pages created 
0 tags created
0 categories created
in 2 ms
Serving pages from /Users/quoha/Sites/zafta/public
Web Server is available at http://localhost:1313
Press Ctrl+C to stop
```

--------------------------------

### Serve Hugo Docs with Watch Mode

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/hugoisforlovers.md

Command to run the Hugo server with the --watch flag enabled, allowing automatic site rebuilding when source files change. Includes the expected output showing watch mode is active.

```shell
/path/to/hugo/from/step/1/hugo server --source=./docs --watch
> 29 pages created
> 0 tags index created
> in 27 ms
> Web Server is available at http://localhost:1313
> Watching for changes in /Users/spf13/Code/hugo/docs/content
> Press ctrl+c to stop
```

--------------------------------

### Editing Hugo Theme Configuration (theme.toml)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Illustrates opening the theme's configuration file using a command-line editor and provides example TOML content to populate the theme.toml file with metadata like author, description, license, name, and tags.

```TOML
author = "michael d henderson"
description = "a minimal working template"
license = "MIT"
name = "zafta"
source_repo = ""
tags = ["tags", "categories"]
```

--------------------------------

### Example Shell Commands for File Editing

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

This snippet demonstrates basic shell commands including adding comments, executing a command, editing a file using `vi`, and displaying file content using `cat`. It also shows the structure of a Hugo content file with TOML front matter.

```bash
## this is a comment
$ echo this is a command
this is a command

## edit the file
$ vi foo.md
+++
date = "2014-09-28"
title = "creating a new theme"
+++

bah and humbug
:wq

## show it
$ cat foo.md
+++
date = "2014-09-28"
title = "creating a new theme"
+++

bah and humbug
$
```

--------------------------------

### Find and List Index HTML Files (Shell)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Uses the `find` command to locate all files named `index.html` starting from the current directory (`.`) and pipes the results to `xargs ls -l` to list their details. This is used to compare the generated `public/index.html` with the theme's template `themes/zafta/layouts/index.html`, showing both are currently empty.

```Shell
$ find . -name index.html | xargs ls -l
-rw-r--r--  1 quoha  staff  0 Sep 29 20:21 ./public/index.html
-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 ./themes/zafta/layouts/index.html
$
```

--------------------------------

### Hugo Watch Mode Rebuild Output

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/hugoisforlovers.md

Example output displayed in the terminal when Hugo's watch mode detects a change in the source files and triggers a site rebuild.

```shell
> Change detected, rebuilding site

> 29 pages created
> 0 tags index created
> in 26 ms
```

--------------------------------

### Hugo Development Workflow Commands (Shell)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

These commands demonstrate a typical Hugo theme development workflow: first, purging the `public` directory to ensure a clean build, and then starting the Hugo development server with watch mode enabled for automatic site regeneration on file changes.

```Shell
## purge old files. hugo will recreate the public directory.
##
$ rm -rf public
##
## run hugo in watch mode
##
$ hugo server --watch --verbose
```

--------------------------------

### And & Or Logic in Go Template Conditionals

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/goisforlovers.md

Example demonstrating the use of 'and' and 'or' functions to combine multiple conditions within an 'if' statement.

```Go Template
{{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
```

--------------------------------

### Defining Page Parameters in YAML Front Matter

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/goisforlovers.md

Provides an example of how to define custom parameters within the YAML front matter of a content file. These parameters become available to the page's templates via `.Params`.

```YAML
---
title: "Permalinks"
date: "2013-11-18"
aliases:
  - "/doc/permalinks/"
groups: ["extras"]
groups_weight: 30
notoc: true
---
```

--------------------------------

### Jekyll Image Tag Usage Example (Liquid)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/migrate-from-jekyll.md

Example syntax for using the custom `image` Liquid tag in a Jekyll markdown file. It shows how to pass parameters like class, URL, caption, and link using positional arguments and a specific delimiter (`->`) for the link.

```Liquid
{% image full http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg "One of my favorite touristy-type photos. I secretly waited for the good light while we were "having fun" and took this. Only regret: a stupid pole in the top-left corner of the frame I had to clumsily get rid of at post-processing." ->http://www.flickr.com/photos/alexnormand/4829260124/in/set-72157624547713078/ %}
```

--------------------------------

### Hugo Server Watch Mode Output (Shell)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

This output shows the console log from running `hugo server --watch --verbose`. It indicates the server starting, syncing static files, detecting file changes, and automatically rebuilding the site, demonstrating the live reload feature.

```Shell
$ rm -rf public
$ hugo server --watch --verbose
INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
0 draft content 
0 future content 
0 pages created 
0 tags created
0 categories created
in 2 ms
Watching for changes in /Users/quoha/Sites/zafta/content
Serving pages from /Users/quoha/Sites/zafta/public
Web Server is available at http://localhost:1313
Press Ctrl+C to stop
INFO: 2014/09/29 File System Event: ["/Users/quoha/Sites/zafta/themes/zafta/layouts/index.html": MODIFY|ATTRIB]
Change detected, rebuilding site

WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
0 draft content 
0 future content 
0 pages created 
0 tags created
0 categories created
in 1 ms
```

--------------------------------

### Grouping Expressions with Parentheses in Go Template

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/goisforlovers.md

Example demonstrating the use of parentheses to group expressions within a Go template, combined with conditional logic ('if', 'or', 'isset') to check for parameters.

```Go Template
{{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }}
```

--------------------------------

### Example Placeholder Text Block

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/test-1.md

A block containing standard Lorem ipsum placeholder text. This snippet is included as a generic code block without a specified language, often used for demonstrating formatting or non-code content.

```text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in dictum tortor.
Morbi laoreet enim id sem euismod lobortis. Donec quam libero, bibendum non cursus vitae, dictum vel eros.
```

--------------------------------

### Hugo Image Shortcode Usage Example (Hugo)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/migrate-from-jekyll.md

Example syntax for using a Hugo shortcode (specifically `fig` in this case, an extended version of `figure`) to embed an image. It demonstrates passing parameters like `class`, `src`, `title`, and `link` using named attributes within the shortcode syntax.

```Hugo
{{%/* fig class="full" src="http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg" title="One of my favorite touristy-type photos. I secretly waited for the good light while we were having fun and took this. Only regret: a stupid pole in the top-left corner of the frame I had to clumsily get rid of at post-processing." link="http://www.flickr.com/photos/alexnormand/4829260124/in/set-72157624547713078/" */%}}
```

--------------------------------

### Jekyll Static File Structure

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/migrate-from-jekyll.md

Illustrates the typical directory structure in Jekyll where static content is placed directly under the root or in subdirectories not starting with `_`.

```Text
▾ <root>/
    ▾ images/
        logo.png
```

--------------------------------

### Build Hugo Site Verbose Output (Shell)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Executes the `hugo --verbose` command to build the static site, showing detailed output including configuration file usage, file syncing operations, and a summary of content creation.

```Shell
hugo --verbose
INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
0 draft content 
0 future content 
0 pages created 
0 tags created
0 categories created
in 2 ms
```

--------------------------------

### Build Hugo Site (Shell)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Cleans the `public` directory and builds the Hugo site with verbose output to see the process and identify potential warnings or errors.

```Shell
$ rm -rf public
$ hugo --verbose
```

--------------------------------

### Define Basic Static Home Page Template (HTML)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Defines the initial HTML content for the `themes/zafta/layouts/index.html` template file, creating a simple static home page with a 'hugo says hello!' paragraph. This content is typically added using a text editor like `vi`.

```HTML
<!DOCTYPE html> 
<html> 
<body> 
  <p>hugo says hello!</p> 
</body> 
</html>
```

--------------------------------

### Building Hugo Site After Post Creation - Shell

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Cleans the public directory using `rm -rf public` and then rebuilds the entire Hugo site using `hugo --verbose`. Shows the build process output, including warnings about missing layouts and the count of pages created.

```Shell
$ rm -rf public
$ hugo --verbose
INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 found taxonomies: map[string]string{"category":"categories", "tag":"tags"}
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
0 draft content 
0 future content 
2 pages created 
0 tags created
0 categories created
in 4 ms
$
```

--------------------------------

### Generate Hugo Site Verbose (Shell)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Runs the `hugo` command with the `--verbose` flag to generate the static site. This command processes content and templates, including the newly configured theme, and provides detailed output about the build process, including syncing theme static files.

```Shell
$ hugo --verbose
INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
0 draft content 
0 future content 
0 pages created 
0 tags created
0 categories created
in 2 ms
$
```

--------------------------------

### Create New Hugo Site and List Directory

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Uses the `hugo new site` command to create a new Hugo project directory structure at the specified path, then changes into that directory and lists its contents to show the initial files and folders.

```Shell
$ hugo new site ~/Sites/zafta
$ cd ~/Sites/zafta
$ ls -l
total 8
drwxr-xr-x  7 quoha  staff  238 Sep 29 16:49 .
drwxr-xr-x  3 quoha  staff  102 Sep 29 16:49 ..
drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 archetypes
-rw-r--r--  1 quoha  staff   82 Sep 29 16:49 config.toml
drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 content
drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 layouts
drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 static
$
```

--------------------------------

### Defining Site Parameters in YAML Configuration

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/goisforlovers.md

Illustrates how to define site-wide parameters within the `params` section of the main configuration file (e.g., `config.yaml`). These values are accessible throughout the site's templates.

```YAML
params:
  CopyrightHTML: "Copyright &#xA9; 2013 John Doe. All Rights Reserved."
  TwitterUser: "spf13"
  SidebarRecentLimit: 5
```

--------------------------------

### Build and Verify Hugo Site

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

This snippet demonstrates the shell commands required to clean the public directory, build the Hugo site with verbose output, list the generated HTML files, and display the content of the generated `index.html` to verify that the post titles are included.

```Shell
$ rm -rf public
$ hugo --verbose
INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 found taxonomies: map[string]string{"tag":"tags", "category":"categories"}
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
0 draft content 
0 future content 
2 pages created 
0 tags created
0 categories created
in 4 ms
$ find public -type f -name '*.html' | xargs ls -l 
-rw-r--r--  1 quoha  staff  94 Sep 29 22:23 public/index.html
-rw-r--r--  1 quoha  staff   0 Sep 29 22:23 public/post/first/index.html
-rw-r--r--  1 quoha  staff   0 Sep 29 22:23 public/post/index.html
-rw-r--r--  1 quoha  staff   0 Sep 29 22:23 public/post/second/index.html
$ cat public/index.html 
<!DOCTYPE html>
<html>
<body>
  
    <h1>second</h1>
  
    <h1>first</h1>
  
</body>
</html>
$
```

--------------------------------

### Generate Hugo Site HTML with Verbose Output

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Runs the `hugo` command without content or layouts to generate the basic site structure. The `--verbose` flag provides detailed output, including configuration file usage, syncing static files, layout warnings, and build statistics.

```Shell
$ hugo --verbose
INFO: 2014/09/29 Using config file: config.toml
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
WARN: 2014/09/29 Unable to locate layout: [404.html]
0 draft content 
0 future content 
0 pages created 
0 tags created
0 categories created
in 2 ms
$
```

--------------------------------

### Configure Hugo Site with Theme (Shell/TOML)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Edits the main Hugo configuration file (`config.toml`) using the `vi` editor to add or update key settings: specifying the theme name, setting the base URL, language code, site title, and the metadata format to TOML. The `:wq` command saves and exits the editor.

```Shell
$ vi config.toml
theme = "zafta"
baseurl = ""
languageCode = "en-us"
title = "zafta - totally refreshing"
MetaDataFormat = "toml"
:wq

$
```

--------------------------------

### Verify Generated HTML Files (Shell)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Uses the `find` command to list all generated HTML files in the `public` directory after building the site.

```Shell
$ find public -name '*.html' | xargs ls -l
```

--------------------------------

### Verifying Hugo Archetype Files - Shell

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Uses `find` and `ls -l` commands to list and show details of the archetype files in the theme directory, confirming the creation of the `post.md` file and the existence of the default archetype.

```Shell
$ find themes/zafta/archetypes -type f | xargs ls -l
-rw-r--r--  1 quoha  staff   0 Sep 29 21:53 themes/zafta/archetypes/default.md
-rw-r--r--  1 quoha  staff  51 Sep 29 21:54 themes/zafta/archetypes/post.md

$
```

--------------------------------

### Using Pipes with 'if' in Go Template

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/goisforlovers.md

Demonstrates the basic concept of pipes in Go templates, showing how the output of one function (`eq 1 1`) becomes the input for the next (`if`). This illustrates the pipe syntax even if the placement of 'if' looks unconventional.

```Go Template
{{ if eq 1 1 }} Same {{ end }}
```

```Go Template
{{ eq 1 1 | if }} Same {{ end }}
```

--------------------------------

### List Directory After Hugo Build

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Lists the contents of the site directory again after running the `hugo` command. This demonstrates the creation of the new `public` directory where the generated site files are placed.

```Shell
$ ls -l
total 8
drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 archetypes
-rw-r--r--  1 quoha  staff   82 Sep 29 16:49 config.toml
drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 content
drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 layouts
drwxr-xr-x  4 quoha  staff  136 Sep 29 17:02 public
drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 static
$
```

--------------------------------

### Build Hugo Site Again (Shell)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Cleans the `public` directory and rebuilds the Hugo site after updating the index template.

```Shell
$ rm -rf public
$ hugo --verbose
```

--------------------------------

### Creating a New Hugo Site (Bash)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/README.md

This command initializes a new Hugo site directory structure at the specified path.

```bash
hugo new site [path]
```

--------------------------------

### Inspect Built HTML Files (Shell)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Finds all generated HTML files in the `public` directory after the build and lists their details using `ls -l` to verify their creation and size.

```Shell
$ find public -type f -name '*.html' | xargs ls -l
```

--------------------------------

### List Empty Hugo Theme Template Files (Shell)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Uses the `find` command to locate all `.html` files within the newly created theme directory (`themes/zafta`) and pipes the output to `xargs ls -l` to list their details, confirming they are initially empty.

```Shell
$ find themes/zafta -name '*.html' | xargs ls -l
-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/_default/list.html
-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/_default/single.html
-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/index.html
-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/partials/footer.html
-rw-r--r--  1 quoha  staff  0 Sep 29 17:31 themes/zafta/layouts/partials/header.html
$
```

--------------------------------

### Creating First Hugo Post (Success) - Shell

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Executes the `hugo new post/first.md` command again after creating the correct archetype. Shows the verbose output confirming that the `post.md` archetype was used and the content file was successfully created.

```Shell
$ hugo --verbose new post/first.md
INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
INFO: 2014/09/29 attempting to create  post/first.md of post
INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/post.md
INFO: 2014/09/29 creating /Users/quoha/Sites/zafta/content/post/first.md
/Users/quoha/Sites/zafta/content/post/first.md created

$
```

--------------------------------

### Demonstrating Basic Shell Commands

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/test-9.md

This snippet shows a sequence of shell commands. It includes echoing text, using the vi editor to create/edit a file with front matter and content, and displaying the file's content using cat. Comments explain each step.

```shell
## this is a comment
$ echo this is a command
this is a command

## edit the file
$ vi foo.md
+++
date = "2014-09-28"
title = "creating a new theme"
+++

bah and humbug
:wq

## show it
$ cat foo.md
+++
date = "2014-09-28"
title = "creating a new theme"
+++

bah and humbug
$
```

--------------------------------

### Comparing Hugo Template and Partial Calls (Hugo Template)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Illustrates the syntax difference between calling a standard Hugo template with a full path and calling a partial template using its name, both passing the context object.

```Hugo Template
{{ template "theme/partials/header.html" . }}

{{ partial "header.html" . }}
```

--------------------------------

### Inspect Built HTML Files Again (Shell)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Finds all generated HTML files in the `public` directory after the second build and lists their details to verify the updated index file.

```Shell
$ find public -type f -name '*.html' | xargs ls -l
```

--------------------------------

### Viewing First Hugo Post Content - Shell

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Uses the `cat` command to display the initial content of the `content/post/first.md` file, showing the front matter generated by the archetype and the placeholder content added manually.

```Shell
$ cat content/post/first.md 
+++
Categories = []
Description = ""
Tags = []
date = "2014-09-29T21:54:53-05:00"
title = "first"

+++
my first post

$
```

--------------------------------

### Calling Function with Parameters in Go Template

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/goisforlovers.md

Illustrates how to call a function named 'add' in a Go template, passing parameters (1 and 2) separated by spaces.

```Go Template
{{ add 1 2 }}
```

--------------------------------

### List Contents of Hugo Public Directory

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Lists the files generated inside the `public` directory after running the `hugo` command on an empty site. Shows the default `index.xml` and `sitemap.xml` files that are created.

```Shell
$ ls -l public
total 16
-rw-r--r--  1 quoha  staff  416 Sep 29 17:02 index.xml
-rw-r--r--  1 quoha  staff  262 Sep 29 17:02 sitemap.xml
$
```

--------------------------------

### Find Default Single Post Template (Shell)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Uses the `find` command to locate the `single.html` template within the theme's layouts directory and lists its details using `ls -l`.

```Shell
$ find themes/zafta -name single.html | xargs ls -l
```

--------------------------------

### Initial Hugo Default Single Template (_default/single.html) (Hugo Template)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Sets up the default single page template to use the header and footer partials and display the page title and content.

```Hugo Template
{{ partial "header.html" . }}

  <h1>{{ .Title }}</h1>
  {{ .Content }}

{{ partial "footer.html" . }}
```

--------------------------------

### Creating Hugo Post Archetype File - Shell

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Shows the process of creating a specific archetype file (`post.md`) for post content using a text editor (`vi`). This file provides the necessary front matter structure to prevent the error encountered previously. Includes the command to open the file and the content added.

```Shell
$ vi themes/zafta/archetypes/post.md
+++
Description = ""
Tags = []
Categories = []
+++
:wq

$
```

--------------------------------

### Attempting Hugo Post Creation (Error) - Shell

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Demonstrates the initial attempt to create a new post using `hugo new post/first.md` which results in an error due to a missing or incorrect archetype file when a theme is present. Shows the command and the resulting error output.

```Shell
$ hugo --verbose new post/first.md
INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
INFO: 2014/09/29 attempting to create  post/first.md of post
INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/default.md
ERROR: 2014/09/29 Unable to Cast <nil> to map[string]interface{}

$
```

--------------------------------

### Viewing Second Hugo Post Content - Shell

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Uses the `cat` command to display the initial content of the `content/post/second.md` file, similar to the first post, confirming it was also created using the archetype.

```Shell
$ cat content/post/second.md 
+++
Categories = []
Description = ""
Tags = []
date = "2014-09-29T21:57:09-05:00"
title = "second"

+++
my second post

$
```

--------------------------------

### Creating Second Hugo Post - Shell

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Creates a second post file (`post/second.md`) using the same successful command pattern, demonstrating the repeatable process once the archetype is in place.

```Shell
$ hugo --verbose new post/second.md
INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
INFO: 2014/09/29 attempting to create  post/second.md of post
INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/post.md
INFO: 2014/09/29 creating /Users/quoha/Sites/zafta/content/post/second.md
/Users/quoha/Sites/zafta/content/post/second.md created

$
```

--------------------------------

### Locate and List Generated HTML File (Shell)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Uses a combination of `find` and `xargs ls -l` to locate the generated `index.html` file within the `public` directory after the build process and display its file details.

```Shell
find public -type f -name '*.html' | xargs ls -l
-rw-r--r--  1 quoha  staff  78 Sep 29 21:26 public/index.html
```

--------------------------------

### View Generated Single Post HTML (HTML)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Displays the content of the generated HTML file for the 'first' post (`public/post/first/index.html`) to confirm that the template changes were applied correctly and the title and content are rendered.

```HTML
<!DOCTYPE html>
<html>
<head>
  <title>first</title>
</head>
<body>
  <h1>first</h1>
  <p>my first post</p>

</body>
</html>
```

--------------------------------

### Create About Page Content (Markdown/TOML)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Creates a new Markdown file (`content/about.md`) with TOML front matter to define metadata for an 'about' page.

```Markdown
+++
title = "about"
description = "about this site"
date = "2014-09-27"
slug = "about time"
+++

## about us

i'm speechless
```

--------------------------------

### Listing Hugo Post Content Files - Shell

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Uses `ls -l` to list the files created in the `content/post` directory, showing the `first.md` and `second.md` files with their sizes and timestamps.

```Shell
$ ls -l content/post
total 16
-rw-r--r--  1 quoha  staff  104 Sep 29 21:54 first.md
-rw-r--r--  1 quoha  staff  105 Sep 29 21:57 second.md

$
```

--------------------------------

### View Generated Homepage HTML (HTML)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Displays the content of the generated `index.html` file (`public/index.html`) to confirm that the index template changes were applied and the links to posts are correctly generated.

```HTML
<!DOCTYPE html>
<html>
<body>
  
    <h1><a href="/post/second/">second</a></h1>
  
    <h1><a href="/post/first/">first</a></h1>
  
</body>
</html>
```

--------------------------------

### Find Default List Template (Shell)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Uses the `find` command to locate the default list template file within the theme directory.

```Shell
$ find themes/zafta -name list.html | xargs ls -l
```

--------------------------------

### Using Site Parameters to Control Loop Behavior in Go Template

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/goisforlovers.md

Illustrates using a site parameter (`.Site.Params.SidebarRecentLimit`) to control the number of items displayed in a list by passing it to the `first` function within a `range` loop.

```Go Template
<nav class="recent">
  <h1>Recent Posts</h1>
  <ul>{{range first .Site.Params.SidebarRecentLimit .Site.Recent}}
    <li><a href="{{.RelPermalink}}">{{.Title}}</a></li>
  {{end}}</ul>
</nav>
```

--------------------------------

### Hugo Static File Structure

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/migrate-from-jekyll.md

Illustrates the recommended directory structure in Hugo where all static content is consolidated under the `static` directory.

```Text
▾ <root>/
    ▾ static/
        ▾ images/
            logo.png
```

--------------------------------

### Verify Generated HTML Files After Template Change (Shell)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Uses the `find` command again to list generated HTML files, confirming the output after modifying the home page template.

```Shell
$ find public -name '*.html' | xargs ls -l
```

--------------------------------

### Including Another Template in Go Template

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/goisforlovers.md

Demonstrates how to include another template file ('chrome/header.html') and pass the current context ('.') to it using the 'template' function.

```Go Template
{{ template "chrome/header.html" . }}
```

--------------------------------

### Update Default Single Post Template (HTML/Go Template)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Modifies the default `single.html` template to display the page title and content using Hugo's Go Template syntax (`{{ .Title }}` and `{{ .Content }}`). This template is used for any content type without a specific template.

```HTML
<!DOCTYPE html>
<html>
<head>
  <title>{{ .Title }}</title>
</head>
<body>
  <h1>{{ .Title }}</h1>
  {{ .Content }}
</body>
</html>
```

--------------------------------

### View Generated Static HTML Content (Shell)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Displays the content of the generated `public/index.html` file using the `cat` command, showing the basic HTML structure defined in the template without any additional scripts.

```Shell
cat public/index.html 
<!DOCTYPE html> 
<html> 
<body> 
  <p>hugo says hello!</p> 
</html>
```

--------------------------------

### Displaying Hugo Theme Directory Structure (Shell)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

This command sequence uses `find` to locate directories within a Hugo theme and `ls` to list their details, illustrating the standard directory layout including `static`, `css`, and `js` directories.

```Shell
$ find themes/zafta -type d | xargs ls -ld
drwxr-xr-x  7 quoha  staff  238 Sep 29 17:38 themes/zafta
drwxr-xr-x  3 quoha  staff  102 Sep 29 17:31 themes/zafta/archetypes
drwxr-xr-x  5 quoha  staff  170 Sep 29 17:31 themes/zafta/layouts
drwxr-xr-x  4 quoha  staff  136 Sep 29 17:31 themes/zafta/layouts/_default
drwxr-xr-x  4 quoha  staff  136 Sep 29 17:31 themes/zafta/layouts/partials
drwxr-xr-x  4 quoha  staff  136 Sep 29 17:31 themes/zafta/static
drwxr-xr-x  2 quoha  staff   68 Sep 29 17:31 themes/zafta/static/css
drwxr-xr-x  2 quoha  staff   68 Sep 29 17:31 themes/zafta/static/js
$
```

--------------------------------

### View Generated Home Page HTML (HTML)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Displays the generated HTML content of the home page (`public/index.html`) to inspect its structure and links.

```HTML
<!DOCTYPE html>
<html>
<body>
    <h1><a href="http://localhost:1313/post/theme/">creating a new theme</a></h1>
    <h1><a href="http://localhost:1313/about-time/">about</a></h1>
    <h1><a href="http://localhost:1313/post/second-post/">second</a></h1>
    <h1><a href="http://localhost:1313/post/first-post/">first</a></h1>
<script>document.write('<script src="http://'
        + (location.host || 'localhost').split(':')[0]
		+ ':1313/livereload.js?mindelay=10"></'
        + 'script>')</script></body>
</html>
```

--------------------------------

### Update Homepage Index Template (HTML/Go Template)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Modifies the `index.html` template to list the 10 most recent pages (`.Data.Pages`) and create a link to each page using its `Permalink` and display its `Title`.

```HTML
<!DOCTYPE html>
<html>
<body>
  {{ range first 10 .Data.Pages }}
    <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
  {{ end }}
</body>
</html>
```

--------------------------------

### Listing Generated Hugo HTML Files - Shell

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Uses `find` and `ls -l` to list the generated HTML files in the `public` directory after the site build. Shows the index page, the post list page, and the individual post pages, although the individual post pages are currently empty.

```Shell
$ find public -type f -name '*.html' | xargs ls -l
-rw-r--r--  1 quoha  staff  78 Sep 29 22:13 public/index.html
-rw-r--r--  1 quoha  staff   0 Sep 29 22:13 public/post/first/index.html
-rw-r--r--  1 quoha  staff   0 Sep 29 22:13 public/post/index.html
-rw-r--r--  1 quoha  staff   0 Sep 29 22:13 public/post/second/index.html
$
```

--------------------------------

### List Generated Public Directory Contents (Shell)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Uses the `ls -l` command to list the contents of the `public/` directory after running the Hugo build. This shows the files and directories created by Hugo, such as `index.html`, `index.xml`, `sitemap.xml`, and static asset directories like `css/` and `js/`.

```Shell
$ ls -l public
total 16
drwxr-xr-x  2 quoha  staff   68 Sep 29 17:56 css
-rw-r--r--  1 quoha  staff    0 Sep 29 17:56 index.html
-rw-r--r--  1 quoha  staff  407 Sep 29 17:56 index.xml
drwxr-xr-x  2 quoha  staff   68 Sep 29 17:56 js
-rw-r--r--  1 quoha  staff  243 Sep 29 17:56 sitemap.xml
$
```

--------------------------------

### View Generated Single Post HTML (Second Post) (HTML)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Displays the content of the generated HTML file for the 'second' post (`public/post/second/index.html`) to confirm that the template changes were applied correctly for multiple posts.

```HTML
<!DOCTYPE html>
<html>
<head>
  <title>second</title>
</head>
<body>
  <h1>second</h1>
  <p>my second post</p>

</body>
</html>
```

--------------------------------

### Using Site Parameters with 'with' in Go Template

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/goisforlovers.md

Shows an alternative to `if` using the `with` keyword. `with` checks if a variable exists and, if so, sets the context (`.`) within its block to that variable, simplifying access.

```Go Template
{{with .Site.Params.TwitterUser}}<span class="twitter">
<a href="https://twitter.com/{{.}}" rel="author">
<img src="/images/twitter.png" width="48" height="48" title="Twitter: {{.}}"
 alt="Twitter"></a>
</span>{{end}}
```

--------------------------------

### Creating New Hugo Theme Skeleton

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Uses the 'hugo new theme' command to generate the basic directory structure and placeholder files for a new theme, followed by shell commands to list the created directories and files within the theme folder.

```Shell
$ hugo new theme zafta

$ ls -l
total 8
drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 archetypes
-rw-r--r--  1 quoha  staff   82 Sep 29 16:49 config.toml
drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 content
drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 layouts
drwxr-xr-x  4 quoha  staff  136 Sep 29 17:02 public
drwxr-xr-x  2 quoha  staff   68 Sep 29 16:49 static
drwxr-xr-x  3 quoha  staff  102 Sep 29 17:31 themes

$ find themes -type f | xargs ls -l
-rw-r--r--  1 quoha  staff  1081 Sep 29 17:31 themes/zafta/LICENSE.md
-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/archetypes/default.md
-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/_default/list.html
-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/_default/single.html
-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/index.html
-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/partials/footer.html
-rw-r--r--  1 quoha  staff     0 Sep 29 17:31 themes/zafta/layouts/partials/header.html
-rw-r--r--  1 quoha  staff    93 Sep 29 17:31 themes/zafta/theme.toml
$
```

--------------------------------

### Default Server Output Without Content

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Shows the expected output displayed in a web browser when accessing the root of the Hugo development server before any content or an index page has been created, listing the default files found in the public directory.

```Text
index.xml
sitemap.xml
```

--------------------------------

### Set Hugo Publish Directory in JSON Config

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/migrate-from-jekyll.md

Shows a snippet of a Hugo configuration file in JSON format, demonstrating how to set the `publishdir` parameter to `_site` to match Jekyll's default output location.

```JSON
{
    ..
    "publishdir": "_site",
    ..
}
```

--------------------------------

### Configure Permalinks (TOML)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Adds or modifies permalink settings in the Hugo configuration file (`config.toml`) to control the output path of generated pages.

```TOML
[permalinks]
	page = "/:title/"
	about = "/:filename/"
```

--------------------------------

### Modify Home Page Template (Hugo Template/HTML)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Updates the home page template (`themes/zafta/layouts/index.html`) to separate posts and pages into distinct sections using Hugo template logic.

```HTML
<!DOCTYPE html>
<html>
<body>
  <h1>posts</h1>
  {{ range first 10 .Data.Pages }}
    {{ if eq .Type "post"}}
      <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
    {{ end }}
  {{ end }}

  <h1>pages</h1>
  {{ range .Data.Pages }}
    {{ if eq .Type "page" }}
      <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
    {{ end }}
  {{ end }}
</body>
</html>
```

--------------------------------

### Edit Hugo Homepage Template (index.html)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

This snippet shows how to edit the `index.html` template for a Hugo theme using `vi` to add a Go template loop that iterates through the first 10 pages and displays their titles as H1 headings. It includes the shell command to open the file and the HTML content with the Go template logic.

```Shell
$ vi themes/zafta/layouts/index.html
<!DOCTYPE html>
<html>
<body>
  {{ range first 10 .Data.Pages }}
    <h1>{{ .Title }}</h1>
  {{ end }}
</body>
</html>
:wq
$
```

--------------------------------

### Managing Context (.) and Variables in Go Template Loops

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/goisforlovers.md

Illustrates how the context (`.`) changes inside a `range` loop in Go templates. It shows how to store a value from the outer context (`.Site.Title`) in a variable (`$title`) before the loop to access it from within the loop.

```Go Template
{{ $title := .Site.Title }}
{{ range .Params.tags }}
  <li> <a href="{{ $baseurl }}/tags/{{ . | urlize }}">{{ . }}</a> - {{ $title }} </li>
{{ end }}
```

--------------------------------

### Creating Hugo Header Partial (HTML/Hugo Template)

Source: https://github.com/vaga/hugo-theme-m10c/blob/master/exampleSite/content/posts/creating-a-new-theme.md

Defines the basic HTML structure for the head and beginning of the body, intended for use as a reusable header partial in Hugo templates. Includes a placeholder for the page title.

```HTML/Hugo Template
<!DOCTYPE html>
<html>
<head>
	<title>{{ .Title }}</title>
</head>
<body>
```