Build a simple one-page markdown site with Astro
In this project we'll use Astro to create a super minimalist one-page website that uses Markdown to author the page content.
astro markdown tailwind

Sometimes I want to quickly pop up a website and …I don’t have a “starter kit” ready to go, very simple, that I can just pick and go.

What I want from this starter kit is a simple way to render markdown, so I can type something and bam ready to deploy.

I just made this “starter kit” for my own use, so I thought “why don’t I turn this into a tutorial?”.

So here we go.

We’re going to do the following:

  1. Initialize a new Astro site
  2. Create a common layout
  3. Create a markdown page
  4. Add the Tailwind integration
  5. Render the markdown page
  6. Add custom styles for markdown tags
  7. Handle dark mode

The goal of this project is to show you how easy and flexible Astro can be, if you want, by building a site that only shows a single markdown page.

From there, you can extend in any way you want, but sometimes you just need to put a site with a one-page, quickly, so here’s the tutorial.

In this unit:

0: ▶︎ Introduction to the project
1: Initialize a new Astro site
2: Create a markdown page
3: Render the markdown page
4: Add the Tailwind integration
5: Add custom styles for markdown tags
6: Handle dark mode