frontmatter blog template

frontmatter-blog.md

## Tutorial

### Step 1: Create your first blog post

1. Create a new file called `my-fourth-post.md` in the `./src/blog` directory

Your file explorer should now look like this:

```{8}
.
├── src
│   └── .vuepress
│   └── blog
│       └── my-first-post.md
│       └── my-second-post.md
│       └── my-third-post.md
│       └── my-fourth-post.md
│   └── README.md
├── .gitignore
├── package.json
├── README.md

2. Open my-fourth-post.md in your favorite text editor.

3. Copy and paste the following into your markdown file:

---
title: My Fourth Post
date: 2018-12-28 17:22:00
type: post
blog: true
excerpt: I'm creating my first post!
tags:
    - Blogging
    - Tutorials
---

# Hello!

This is pretty awesome!

::: tip
Aren't custom containers cool?
:::

> "I have a big head... and little arms." - T-rex from 'Meet the Robinsons'

4. Once you save, you should now see the fourth post show up on your home page!

5. 🎊 You now have the ability to write all the blog posts you want!

Step 2: Create a new page

Odds are you will also want to customize the top navigation with a couple pages of your own to personalize the site. So let's create a simple About page together!

1. Create a new directory in the ./src directory called about

2. Create a new file in the new about directory called README.md

.
├── src
│   └── .vuepress
│   └── about
│       └── README.md
│   └── blog
│   └── README.md
├── .gitignore
├── package.json
├── README.md

::: tip README.md files in directories get converted to index.html files at build time so don't worry if it looks weird right now. :::

3. Let's just paste something simple in the about/README.md file.

# About Me

I'm a great developer who has a lot of great things to share with the world.
Can't wait to start writing more about topics I love and am passionate about!

4. Now if you visit, http://localhost:8080/about/, you should see your page!

::: warning If you are getting an error, just restart your VuePress server and everything should be good to go! :::

Step 3: Add an item to the main nav

1. Open the ./src/.vuepress/config.js file in your favorite text editor

2. Locate the section under themeConfig.nav:

module.exports = {
	title: 'My New VuePress Blog',
	ga: '',
	dest: './public',
	themeConfig: {
		repo: 'https://wwww.github.com',
		repoLabel: 'Custom Repo Label',
		docsDir: 'src',
		logo: '/vuepress-blog-logo.png',
		editLinks: true,
		editLinkText: 'Found a bug? Help me improve this page!',
		nav: [
			{ text: 'Home', link: '/' },
			{ text: 'RSS Feed', link: '/rss.xml' }
		]
	},

3. Add a new object for the About page to the nav array like this:

module.exports = {
	title: 'My New VuePress Blog',
	ga: '',
	dest: './public',
	themeConfig: {
		repo: 'https://wwww.github.com',
		repoLabel: 'Custom Repo Label',
		docsDir: 'src',
		logo: '/vuepress-blog-logo.png',
		editLinks: true,
		editLinkText: 'Found a bug? Help me improve this page!',
		nav: [
			{ text: 'Home', link: '/' },
            { text: 'About', link: '/about/' },
			{ text: 'RSS Feed', link: '/rss.xml' }
		]
    },

::: warning When you want the user to go to the index.html of a directory, it's critical that you put a / at the end of the relative link because it will break otherwise.

// Good
{ text: 'About', link: '/about/' }

// Bad
{ text: 'About', link: '/about' }

:::