Blog
Below are the steps to set up a blog using Vocs.
Set up a post list page
First, create a new directory called blog/, and inside of it, create an index page (index.mdx).
my-project/
├── docs/
│ ├── pages/
│ │ └── blog/ // [!code ++]
| | └── index.mdx // [!code ++]
│ └── public/
│ └── favicon.ico
├── node_modules/
│ ...Inside of index.mdx, add the following code:
blog/index.mdx
---
layout: minimal
---
# Blog
::blog-postsYou have now created a blog post list page. The ::blog-posts component will automatically generate a list of all blog posts in the blog/ directory.
Write a blog post
Now, create a new post in your blog/ directory named my-first-post.mdx.
my-project/
├── docs/
│ ├── pages/
│ │ └── blog/
| | ├── index.mdx
| | └── my-first-post.mdx // [!code ++]
│ └── public/
│ └── favicon.ico
├── node_modules/
│ ...Inside of the my-first-post.mdx file, you can write your blog content:
blog/my-first-post.mdx
---
layout: minimal
---
# My First Post
Hello everyone, this is my first post!You can also add authors and a date to your frontmatter, and then display it in the post.
blog/my-first-post.mdx
---
layout: minimal
authors:
- "[jxom](https://twitter.com/_jxom)"
- "[awkweb](https://twitter.com/awkweb)"
date: 2023-11-25
---
# My First Post
::authors
Hello everyone, this is my first post!