You can write blog posts in Extended Markdown (.mdx) format nicely. Create a .mdx file under data/blog. The file name will be the slug of the post. E.g. if you create my-blog-post.mdx the post will be at powdr.org/blog/my-blog.post.mdx. Alternatively you can create a folder /my-blog-post and add an my-blog-post/index.mdx.
Easisest is to check out some examples. See https://tailwind-nextjs-starter-blog.vercel.app/ for example posts. Source code of the posts are here.
The part above the .mdx file is called a "frontmatter":
---
title: Deriving the OLS Estimator
date: '2020-12-21'
draft: false
summary: 'How to derive the OLS Estimator with matrix notation and a tour of math typesetting using markdown with the help of KaTeX.'
layout: PostBanner
bibliography: references-data.bib
authors: ['default', 'sparrowhawk']
images: ['/static/images/canada/mountains.jpg']
---
Each post must contain a title and a date, rest is optional.
Some additional notes about blog posts:
- you can set
draft:trueto see it in your developement environment but not publish it. - The default author is "Powdr Labs", you can add additional authors in
data/authorsand refer them inauthorsin the frontmatter. - The default post layout is
PostLayout. You can see the layouts in directorylayouts/. To have a post with a banner image uselayout: PostBannerand add images (typically only one image) inimages: ['/static/images/canada/mountains.jpg']. The images should be under the directorypublic/static.
yarnPlease note, that if you are using Windows, you may need to run:
$env:PWD = $(Get-Location).PathFirst, run the development server:
yarn devOpen http://localhost:3000 with your browser to see the result.
Edit the layout in app or content in data. With live reloading, the pages auto-updates as you edit them.
Run:
$ EXPORT=1 UNOPTIMIZED=1 yarn buildIf you're facing Prettier issues on build, run
yarn prettier --write .
and build after that.
Based on tailwind-nextjs-starter-blog