Making a Simple Pre-Rendered Blog in Next.js

Making a Simple Pre-Rendered Blog in Next.js

Posted on

I've been meaning to rebuild this site for a while ... and here it is.

This website is built in Next.js.

The content is written in markdown, and a static pre-rendered version is generated and hosted on Netlify.

The design part is all taken care of by Tailwind CSS and @tailwindcss/typography -- nice and easy!

Why did I choose this stack?

  • I work with React on a daily basis. Using Next.js just made sense.
  • Writing in Markdown is a nice, distraction-free way of writing content.
  • Low cost (free as in beer 🍺). The free plan at Netlify is plenty for this use case.
  • Next.js handles page speed and core web vitals very well.

Some tests

These should all render fine out of the box – thanks to tailwindcss/typography.

A code block

import { parseISO, format } from "date-fns";

const Date = ({dateString}, className ) => {
    const date = parseISO(dateString)
    return <time dateTime={dateString} className={className}>{format(date, 'LLLL d, yyyy')}</time>
}

export default Date

An un-ordered list

  • Item 1
  • Item 2
  • Item 3

An ordered list

  1. First item
  2. Second item
  3. Third item

A blockquote

will never stop learning. I won’t just work on things that are assigned to me. I know there’s no such thing as a status quo. I will build our business sustainably through passionate and loyal customers. I will never pass up an opportunity to help out a colleague, and I’ll remember the days before I knew everything. I am more motivated by impact than money, and I know that Open Source is one of the most powerful ideas of our generation. I will communicate as much as possible, because it’s the oxygen of a distributed company. I am in a marathon, not a sprint, and no matter how far away the goal is, the only way to get there is by putting one foot in front of another every day. Given time, there is no problem that’s insurmountable.