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/
| | └── index.mdx
│ └── public/
│ └── favicon.ico
├── node_modules/
│ ...
Inside of index.mdx
, add the following code:
blog/index.mdx
---
layout: minimal
---
# Blog
::blog-posts
You 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
│ └── 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!