From 2b27785915da1c03b5c6da82753e8527bd0777b2 Mon Sep 17 00:00:00 2001 From: Giraffe Academy Date: Mon, 11 Sep 2017 16:06:09 -0400 Subject: [PATCH] Add tutorial videos to several docs pages Credits go to @giraffeacademy --- content/content-management/archetypes.md | 4 ++-- content/content-management/front-matter.md | 2 ++ content/content-management/organization.md | 2 ++ content/content-management/shortcodes.md | 2 ++ content/content-management/taxonomies.md | 2 +- content/getting-started/directory-structure.md | 2 ++ content/getting-started/installing.md | 4 ++++ content/templates/base.md | 2 ++ content/templates/data-templates.md | 2 ++ content/templates/homepage.md | 2 ++ content/templates/introduction.md | 2 ++ content/templates/lists.md | 2 ++ content/templates/partials.md | 2 ++ content/templates/section-templates.md | 2 ++ content/templates/shortcode-templates.md | 2 ++ content/templates/single-page-templates.md | 2 ++ content/themes/installing-and-using-themes.md | 2 ++ 17 files changed, 35 insertions(+), 3 deletions(-) diff --git a/content/content-management/archetypes.md b/content/content-management/archetypes.md index 235de4ff2..ec8b36325 100644 --- a/content/content-management/archetypes.md +++ b/content/content-management/archetypes.md @@ -29,7 +29,7 @@ See above **Archetypes** are content files in the [archetypes directory][] of your project that contain preconfigured [front matter][] for your website's [content types][]. Archetypes facilitate consistent metadata across your website content and allow content authors to quickly generate instances of a content type via the `hugo new` command. -{{< youtube S3Tj3UcTFz8 >}} +{{< youtube bcme8AzVh6o >}} The `hugo new` generator for archetypes assumes your working directory is the content folder at the root of your project. Hugo is able to infer the appropriate archetype by assuming the content type from the content section passed to the CLI command: @@ -94,7 +94,7 @@ Default archetypes are convenient if your content's front matter stays consisten ### Create the Default Archetype -When you create a new Hugo project using `hugo new site`, you'll notice that Hugo has already scaffolded a file at `archetypes/default.md`. +When you create a new Hugo project using `hugo new site`, you'll notice that Hugo has already scaffolded a file at `archetypes/default.md`. The following examples are from a site that's using `tags` and `categories` as [taxonomies][]. If we assume that all content files will require these two key-values, we can create a `default.md` archetype that *extends* Hugo's base archetype. In this example, we are including "golang" and "hugo" as tags and "web development" as a category. diff --git a/content/content-management/front-matter.md b/content/content-management/front-matter.md index 664b7f7f0..bae6252fb 100644 --- a/content/content-management/front-matter.md +++ b/content/content-management/front-matter.md @@ -19,6 +19,8 @@ toc: true **Front matter** allows you to keep metadata attached to an instance of a [content type][]---i.e., embedded inside a content file---and is one of the many features that gives Hugo its strength. +{{< youtube Yh2xKRJGff4 >}} + ## Front Matter Formats Hugo supports three formats for front matter, each with their own identifying tokens. diff --git a/content/content-management/organization.md b/content/content-management/organization.md index 95fd3562a..7d34c2b80 100644 --- a/content/content-management/organization.md +++ b/content/content-management/organization.md @@ -24,6 +24,8 @@ This section is not updated with the new nested sections support in Hugo 0.24, s See above {{% /todo %}} +{{< youtube 0GZxidrlaRM >}} + ## Organization of Content Source In Hugo, your content should be organized in a manner that reflects the rendered website. diff --git a/content/content-management/shortcodes.md b/content/content-management/shortcodes.md index a4424a996..5990d7827 100644 --- a/content/content-management/shortcodes.md +++ b/content/content-management/shortcodes.md @@ -30,6 +30,8 @@ In addition to cleaner Markdown, shortcodes can be updated any time to reflect n ## Use Shortcodes +{{< youtube 2xkNJL4gJ9E >}} + In your content files, a shortcode can be called by calling `{{%/* shortcodename parameters */%}}`. Shortcode parameters are space delimited, and parameters with internal spaces can be quoted. The first word in the shortcode declaration is always the name of the shortcode. Parameters follow the name. Depending upon how the shortcode is defined, the parameters may be named, positional, or both, although you can't mix parameter types in a single call. The format for named parameters models that of HTML with the format `name="value"`. diff --git a/content/content-management/taxonomies.md b/content/content-management/taxonomies.md index 409fe98d9..f33392fc5 100644 --- a/content/content-management/taxonomies.md +++ b/content/content-management/taxonomies.md @@ -32,7 +32,7 @@ Term Value : a piece of content assigned to a term -{{< youtube "-np9GX6cL38" >}} +{{< youtube pCPCQgqC8RA >}} ## Example Taxonomy: Movie Website diff --git a/content/getting-started/directory-structure.md b/content/getting-started/directory-structure.md index 2d1e121ba..8ea684959 100644 --- a/content/getting-started/directory-structure.md +++ b/content/getting-started/directory-structure.md @@ -20,6 +20,8 @@ toc: true ## New Site Scaffolding +{{< youtube sB0HLHjgQ7E >}} + Running the `hugo new site` generator from the command line will create a directory structure with the following elements: ``` diff --git a/content/getting-started/installing.md b/content/getting-started/installing.md index 6485de4ec..c0a68fa4e 100644 --- a/content/getting-started/installing.md +++ b/content/getting-started/installing.md @@ -121,6 +121,8 @@ Since building from source is appealing to more seasoned command line users, thi ### Install Hugo with Brew +{{< youtube WvhCGlLcrF8 >}} + #### Step 1: Install `brew` if you haven't already Go to the `brew` website, , and follow the directions there. The most important step is the installation from the command line: @@ -299,6 +301,8 @@ Then place the `hugo` executable somewhere in your `$PATH`. You're now ready to The following aims to be a complete guide to installing Hugo on your Windows PC. +{{< youtube G7umPCU-8xc >}} + ### Assumptions 1. You will use `C:\Hugo\Sites` as the starting point for your new project. diff --git a/content/templates/base.md b/content/templates/base.md index 9433dc9f5..afb7a611e 100644 --- a/content/templates/base.md +++ b/content/templates/base.md @@ -21,6 +21,8 @@ toc: true The `block` keyword allows you to define the outer shell of your pages' one or more master template(s) and then fill in or override portions as necessary. +{{< youtube QVOMCYitLEc >}} + ## Base Template Lookup Order The [lookup order][lookup] for base templates is as follows: diff --git a/content/templates/data-templates.md b/content/templates/data-templates.md index 5ca8c2877..232102473 100644 --- a/content/templates/data-templates.md +++ b/content/templates/data-templates.md @@ -22,6 +22,8 @@ toc: true Hugo supports loading data from YAML, JSON, and TOML files located in the `data` directory in the root of your Hugo project. +{{< youtube FyPgSuwIMWQ >}} + ## The Data Folder The `data` folder is where you can store additional data for Hugo to use when generating your site. Data files aren't used to generate standalone pages; rather, they're meant to be supplemental to content files. This feature can extend the content in case your front matter fields grow out of control. Or perhaps you want to show a larger dataset in a template (see example below). In both cases, it's a good idea to outsource the data in their own files. diff --git a/content/templates/homepage.md b/content/templates/homepage.md index c3ff08eb3..4cd2a4355 100644 --- a/content/templates/homepage.md +++ b/content/templates/homepage.md @@ -24,6 +24,8 @@ Homepage is a `Page` and therefore has all the [page variables][pagevars] and [s The homepage template is the *only* required template for building a site and therefore useful when bootstrapping a new site and template. It is also the only required template if you are developing a single-page website. {{% /note %}} +{{< youtube ut1xtRZ1QOA >}} + ## Homepage Template Lookup Order The [lookup order][lookup] for the homepage template is as follows: diff --git a/content/templates/introduction.md b/content/templates/introduction.md index 08ef0272e..5f6d7d8a5 100644 --- a/content/templates/introduction.md +++ b/content/templates/introduction.md @@ -25,6 +25,8 @@ The following is only a primer on Go templates. For an in-depth look into Go tem Go templates provide an extremely simple template language that adheres to the belief that only the most basic of logic belongs in the template or view layer. +{{< youtube gnJbPO-GFIw >}} + ## Basic Syntax Golang templates are HTML files with the addition of [variables][variables] and [functions][functions]. Golang template variables and functions are accessible within `{{ }}`. diff --git a/content/templates/lists.md b/content/templates/lists.md index 0e81d454c..3dcf61160 100644 --- a/content/templates/lists.md +++ b/content/templates/lists.md @@ -20,6 +20,8 @@ toc: true ## What is a List Page Template? +{{< youtube 8b2YTSMdMps >}} + A list page template is a template used to render multiple pieces of content in a single HTML page. The exception to this rule is the homepage, which is still a list but has its own [dedicated template][homepage]. Hugo uses the term *list* in its truest sense; i.e. a sequential arrangement of material, especially in alphabetical or numerical order. Hugo uses list templates on any output HTML page where content is traditionally listed: diff --git a/content/templates/partials.md b/content/templates/partials.md index 6f8f0d841..fcbff653e 100644 --- a/content/templates/partials.md +++ b/content/templates/partials.md @@ -18,6 +18,8 @@ aliases: [/templates/partial/,/layout/chrome/,/extras/analytics/] toc: true --- +{{< youtube pjS4pOLyB7c >}} + ## Partial Template Lookup Order Partial templates---like [single page templates][singletemps] and [list page templates][listtemps]---have a specific [lookup order][]. However, partials are simpler in that Hugo will only check in two places: diff --git a/content/templates/section-templates.md b/content/templates/section-templates.md index 95b1b5ad5..00911b569 100644 --- a/content/templates/section-templates.md +++ b/content/templates/section-templates.md @@ -35,6 +35,8 @@ The [lookup order][lookup] for section templates is as follows: 7. `/themes//layouts/_default/section.html` 8. `/themes//layouts/_default/list.html` +{{< youtube jrMClsB3VsY >}} + ## `.Site.GetPage` with Sections Every `Page` in Hugo has a `.Kind` attribute. `Kind` can easily be combined with the [`where` function][where] in your templates to create kind-specific lists of content. This method is ideal for creating lists, but there are times where you may want to fetch just the index page of a single section via the section's path. diff --git a/content/templates/shortcode-templates.md b/content/templates/shortcode-templates.md index 65642ae61..e7dbf0a64 100644 --- a/content/templates/shortcode-templates.md +++ b/content/templates/shortcode-templates.md @@ -28,6 +28,8 @@ Hugo also ships with built-in shortcodes for common use cases. (See [Content Man Hugo's built-in shortcodes cover many common, but not all, use cases. Luckily, Hugo provides the ability to easily create custom shortcodes to meet your website's needs. +{{< youtube Eu4zSaKOY4A >}} + ### File Placement To create a shortcode, place an HTML template in the `layouts/shortcodes` directory of your [source organization][]. Consider the file name carefully since the shortcode name will mirror that of the file but without the `.html` extension. For example, `layouts/shortcodes/myshortcode.html` will be called with either `{{}}` or `{{%/* myshortcode /*/%}}` depending on the type of parameters you choose. diff --git a/content/templates/single-page-templates.md b/content/templates/single-page-templates.md index cb86b36aa..30ebc6249 100644 --- a/content/templates/single-page-templates.md +++ b/content/templates/single-page-templates.md @@ -35,6 +35,8 @@ Hugo assumes your content section and content type are the same unless you tell 9. `/themes//layouts/
/single.html` 10. `/themes//layouts/_default/single.html` +{{< youtube ZYQ5k0RQzmo >}} + ## Example Single Page Templates Content pages are of the type `page` and will therefore have all the [page variables][pagevars] and [site variables][] available to use in their templates. diff --git a/content/themes/installing-and-using-themes.md b/content/themes/installing-and-using-themes.md index 4d2be5b71..27caad55d 100644 --- a/content/themes/installing-and-using-themes.md +++ b/content/themes/installing-and-using-themes.md @@ -30,6 +30,8 @@ Hugo currently doesn’t ship with a “default” theme. This decision is inten ## Install Themes +{{< youtube L34JL_3Jkyc >}} + The community-contributed themes featured on [themes.gohugo.io](//themes.gohugo.io/) are hosted in a [centralized GitHub repository][themesrepo]. The Hugo Themes Repo at is really a meta repository that contains pointers to a set of contributed themes. {{% warning "Get `git` First" %}}