Writing posts

The starter uses Gridsome's filesystem source plugin, which means blog posts are Markdown files that exist in the /content/posts directory.

Creating a new post

There are 2 ways you can create a new post with Briefly:

  1. Simply add a new, uniquely-named *.md file in the /content/posts directory

  2. In your terminal, navigate to the project root and run this command: 

    npm run newpost "My post title"

    The quotes around the title are mandatory.

    This will create a new file named YYYY-MM-DD-my-post-title.md under /content/posts.

Supported Front Matter keys

You can use the following Front Matter keys when creating a post:

---
title: "Post title" # required
slug: post-title-custom-url # optional, override the auto-generated post slug
description: "Lorem ipsum description sit amet" # required, used in meta tags and RSS feed
date: 2019-03-01 17:54:43 # only date is required; time is optional, but recommended for the <time> tag and better post sorting control
---

Markdown syntax & styling

This is a short guide to using Markdown - see the full spec, or check out how Briefly styles it.

Formatting text

Headings

# This is an H1

## This is an H2

###### This is an H6

Paragraphs

A paragraph is simply one or more consecutive lines of text, separated by one or more blank lines. (A blank line is any line that looks like a blank line — a line containing nothing but spaces or tabs is considered blank.)

Normal paragraphs should not be indented with spaces or tabs.

Inline elements

Make text:

  • bold: **bold text**
  • italic: _italic text_
  • strikethrough: ~~strikethrough text~~
  • highlighted: <mark>highlighted text</mark>
  • link: [link text](https://example.com)

For links, you can also use the reference-style:

[link text][id] reference-style link.
[id]: https://example.com/  "Optional Title Here"

Lists

Unordered:

- one
- two 
- three

Ordered:

1. one
2. two
3. three

Blockquotes

> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere.

Inserting Images

Local images are added with ![Image alt text](./images/image.jpg)

Of course, you can reference images from a CDN:

![Image alt text](https://example.com/image.jpg)

Linking images

With Markdown, do: [![Image alt text](https://example.com/path/to/image.jpg)](url to link to)

Dividing sections

Any of the following:

* * *

***

*****

- - -

---

---------------------------------------

... will create a <hr> like this one:

Code blocks

Both inline code and fenced codeblocks are supported.

To write inline code like this simply surround it with backticks: `some inline code`

Fenced codeblocks

Surround your code with triple backticks, like this:

    ```language
    your code here
    ```

Specify the language (reference) in order to get proper syntax highlighting:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>Lorem ipsum</p>
</body>
</html>

If you don't specify a language, the code block will not be wrapped in a <pre> tag, and will look like this:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p>Lorem ipsum</p> </body> </html>