Writing blog posts

Folder structure

You must create the blog posts inside the content directory.

content/
  blog-post-1.md
  blog-post-2.md

If you have more than one language configured (example: en and fr), you can translate files by adding the language code before the file's extension.

content/
  blog-post-1.md
  blog-post-1.fr.md
  blog-post-2.md
  blog-post-2.fr.md

The file without language code represents the default language (en). You can have blog posts that are not translated. The blog post for the default language will be used.

You can create subfolders to organize your blog posts. It is useful when you have many blog posts, translated files, or both.

content/
  vuejs/
    vuejs-blog-post-1/
      vuejs-blog-post-1.md
      vuejs-blog-post-1.ar.md
      vuejs-blog-post-1.es.md
      vuejs-blog-post-1.fr.md
    vuejs-blog-post-2.md
    vuejs-blog-post-2.fr.md
  nuxtjs/
    nuxtjs-blog-post-1.md
    nuxtjs-blog-post-2.md

Front Matter

The beginning of each blog post must start with a YAML front matter block.

Required fields

---
title: Blog title
description: Blog description
publishedAt: 2020-04-08
---
  • title (String)

    • The title of the blog post;
    • Used as the:
      • title of the page (<title>);
      • Open Graph og:title meta tag.
  • description (String)

    • A short description/summary/introduction to the blog post;
    • Used in the:
      • blog post preview card;
      • description meta tag;
      • Open Graph og:description meta tag.
  • publishedAt (Datetime)

    • The date and time when the blog post was first published. It must follow the ISO 8601 standard;
    • Used in the:
      • blog post preview card;
      • blog post itself;
      • article:published_time meta tag;
      • feed.

Optional fields

---
image: blog-post-image.png
authors:
  - name: José Silva
    avatarUrl: external url
    link: https://twitter.com/jmanuelsilvapt
tags:
  - list
  - of
  - tags
---
  • image (String)

    • The URL can be absolute (external to the blog) or relative to the static folder.
    • Used in the:
      • blog post preview card;
      • blog post page;
      • cards generated by social media websites when sharing the blog post.
  • authors (Array<Object>)

    • An array of objects that can have the properties name, avatarUrl, link and email;
    • The name, avatarUrl, link properties are used in the:
      • blog post preview card;
      • blog post page;
    • The name, link and email properties are used to display the author of a blog post in the feed.
  • tags (Array<String>)

    • An array of strings. For the sake of readability, I suggest you write the tags in PascalCase. PascalCase combines words by capitalizing all words (even the first word) and removing the spaces.
    • The tags are displayed in the:
      • blog post preview card;
      • blog post page;
      • cards generated by the social media websites when you share the blog post through the sharing widget.

Content/Markdown

The content of a blog post must be written in markdown. You can check the basic syntax guide to help you master it.

You can also check the Nuxt Content documentation to explore more advanced features.

Edit this page on GitHub Updated at Mon, Mar 15, 2021