quicker than the official doc
Presented by Creative Squad, Marco Huang
My Project Overview Documentation:
.
└── content //<- We manage the content we want to publish here in markdown
└── posts
├── mypost.md // <- https://example.com/posts/mypost/
├── happy
| └── ness.md // <- https://example.com/posts/happy/ness/
├── sad
| └── index.md // <- https://example.com/posts/sad/
└── secondpost.md // <- https://example.com/posts/secondpost/
└── config.toml // <- site configuration
└── layouts //<- We design the html template here to render the content
├── 404.html // 404 page design
└── index.html // home page design
└── _default
├── single.html // single page rendering
└── list.html // list page design to render taxonomy pages
└── themes //<- We import the themes here
Quick start steps (press space): Documentation
Install Hugo: brew install hugo
Start your site: hugo new site hello-world
Pick your favorite theme
Configure the config.toml file
Design the html template
Enjoy creating your content
Preview your content locally: hugo server -D -p1314
- Create a site: hugo new site hello-world && cd hello-world
- Add a theme: git init && git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
- Edit config.toml: theme = "ananke"
- Create a new post: hugo new hello-world.md
- Edit post: echo "## Hello World" >> content/hello-world.md
- Bring up local server: hugo server -D -p1314
- View your content locally in localhost:1314/hello-world/
It is built by Hugo Variable, more specifically Page Variable and HTML Element.
<header>
<p class="f6 b helvetica tracked">
{{ humanize .Section | upper }}
</p>
<h1 class="f1">
{{ .Title }} Wow
</h1>
</header>
<div class="nested-copy-line-height lh-copy f4 nested-links nested-img mid-gray">
{{ .Content }}
</div>
## Hello World
follows markdown style--- <- This part is front matter
title: "Hello World"
date: 2020-03-15T16:09:35-04:00
draft: true
--- <- This is the rear of front matter
## Hello World <- Start of content
mkdir content/another-hello-world && cp content/hello-world.md content/another-hello-world/index.md
draft
true
there?hugo server -D
{{< youtube Eu4zSaKOY4A >}}
Let’s include that in our new hello world page{{- $aid := .Get "aid" | default (.Get 0) -}}
{{- $class := .Get "class" | default (.Get 1) }}
<div {{ with $class }}class="{{ . }}"{{ else }}style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"{{ end }}>
<iframe src="https://player.bilibili.com/player.html?aid={{ $aid }}&cid={{ with .Get "cid" }}{{ . }}{{ end }}&page=1" {{ if not $class }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" {{ end }}allowfullscreen title="Bilibili Video"></iframe>
</div>
hugo
or hugo -D
to allow draft as well