Blog prototype using Hugo and Tailwind 4

Demo

https://hugo-tailwind-blog.pages.dev/

Local development

npm run dev

Featuring a blog post

The most recent blog post with the featured frontmatter param set to true will be shown on the home page.

params:
  featured: true

Blog post feature, cover, and thumbnail images

To associate a feature, cover, or thumbnail image to a blog post, you do not have to specify them in the frontmatter. You can simply name them feature, cover, or thumbnail, place them in the page bundle, and they will automattically be used. The images will be processed to the appropriate size. For example:

blog/
└── 2024/
    └── 0102-my-blog-post/
        ├── cover.jpg
        ├── index.md
        └── thumbnail.jpg

If a thumbnail image is not present in the page bundle, then the cover image will be used, and the image will be cropped into a square.

If the blog post is featured on the home page, and the feature image is not present in the page bundle, then the cover image will be used.

If you need to name your images another way, you can reference the image names in the frontmatter:

params:
  cover: hero.png
  feature: hero-cropped.png
  thumbnail: tn.png

If .Params.cover or .Params.thumbnail are not set, and cover.* and thumbnail.* images are not present in the page bundle, then default images located in the /assets/blog/ directory will be used.

Blog post content images

To show an image in the content of a blog post, just use Markdown syntax. The image will be scaled down to the appropriate size if it is too large. For example:

![My image](image.jpg)

Author avatars

An author avatar can be defined by adding an image resource to the page bundle, and referencing it in the avatar frontmatter param. The image will be processed to the appropriate size.

params:
  avatar: image.jpg

Open Graph images

Open Graph images for a page can be defined in a couple ways.

An image can be defined in the frontmatter images array. It can reference a page resource, or can also be an absolute url from the static directory. For example:

images: [image.jpg]

If the images array is empty or undefined, and there is a page resource image with file name matching feature.*, cover.*, or thumbnail.*, it will be used as the Open Graph image.