Hugo Post Template

Example how a new post can be structured. Header information, highlights, etc…

The world’s fastest framework for building websites #

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

Anything that requires attention.

Can be enhanced with emojis or colors…

Linking internal content #

[Better Comments Options]({ {< ref "my-vscode-setup/#better-comments-options-"  >} })

Folders #

Folder location:
- content/posts/category
Replace thumb.jpg
Replace cover.jpg (if applicable)

*use feature.jpg if thumb and cover are the same (see: #feature-cover-and-thumbnail-images for more information.)

🟢Colors #

Color	HEX	HTML	Usage
Red	`#EB4925`	`<font color=#EB4925>`	Warning, Important
Yellow	`#EBAC25`	`<font color=#EBAC25>`	Highlights
Green	`#C7EB25`	`<font color=#C7EB25>`	Highlights, interesting, etc.
Blue	`#27D3F5`	`<font color=#27D3F5>`	Color used for content to be corrected later (i.e. new links to not-yet existing content, etc…)

HTML Color Codes: https://htmlcolorcodes.com/

🏷️Icons #

list of available icons:

Insert an icon: { {< icon "circle-info" >} }

❤️Emojis #

Emoji	Usage
‼️	Attention
🚩/ ⚠️	Issue / Problem
🚫 / ☢️ / ☣️	Prohibited / Hazard
🔍	Issue Investigation
✅	Solution / Resolved
ℹ️	Info
💡	Idea
👨🏻‍💻	To Do
💾	Download
📺	YouTube
✨/ 🔥	Post title highlight
🗂️	Series
🏅	Certified
📄	File / Code

💾 https://emojipedia.org/

🔥References #

If anything requires further explanation, it can be referenced¹ like that…

Referenced text[^Ref1] (word!).

[^Ref1]: This is the explanation of the referenced point 1.

Organizing content #

Content: https://jpanther.github.io/congo/docs/getting-started/#organising-content
Shortcodes: https://jpanther.github.io/congo/docs/shortcodes
Content examples: https://jpanther.github.io/congo/docs/content-examples/

Markdown #

https://jpanther.github.io/congo/samples/markdown/

Shortcodes #

🖰 Buttons and Badges #

Button	Badge
{ {< button href="../../../tags" target="_self" >}} 🏷️ Tags { {< /button >}}	{ {< badge >}} Badge Shortcode… { {< /badge >}}

≥ Code Blocks #

Code block with backticks #

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Example HTML5 Document</title>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>

Code block indented with four spaces #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

Code block with Hugo’s internal highlight shortcode #

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

Mermaid - Diagrams and Flowcharts #

https://jpanther.github.io/congo/samples/diagrams-flowcharts/ https://jpanther.github.io/congo/docs/shortcodes/#mermaid https://mermaid.js.org https://mermaid.js.org/syntax/architecture.html https://mermaidviewer.com/

🖫 PowerShell string replace #

Get-ChildItem -Path "C:\Users\robk\Documents\Documents\Notes\Obsidian\Zettelkasten\4 - Content Creation\Git\rtdevx.github.io" -Recurse -Filter *.md | ForEach-Object {
    (Get-Content $_.FullName) -replace '<font color=#f4e40b>', '<font color=#EBAC25>' | Set-Content $_.FullName
}

🪎 Other Elements - abbr, sub, sup, kbd, mark #

Example	Code
GIF is a bitmap image format.	`<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.`
H₂O	`H<sub>2</sub>O`
Xⁿ + Yⁿ = Zⁿ	`X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>`
Press `CTRL`+`ALT`+`Delete` to end the session.	`Press <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> to end the session.`
Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.	`Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.`

» Sources « #

Congo, a powerful, lightweight theme for Hugo built with Tailwind CSS
Congo Docs
Congo Samples
HTML Color Codes: https://htmlcolorcodes.com/
Emojis: https://emojipedia.org/

» References « #

» Table of contents « #


1. What is Cloud Computing	2. IAM	3. Budget
4. EC2	5. Security Groups	6. Storage
	25. Preparing for AWS Practitioner exam

» Disclaimer « #

Disclaimer: Content for educational purposes only, no rights reserved.

{ {< alert "circle-info" >}}
Disclaimer: _Content for educational purposes only, no rights reserved._
{ {< /alert >}}

This is the reference point number 1. ↩︎