Astro (work in progress)

Creating our markdown blog

Updated:

Creating our blog project

First, we will need to create a new Astro project. I like to keep all of my code inside a projects folder on my computer. For example, I will create this new Astro project inside projects/getting-started-with-astro. You can create it wherever you like on your machine, however.

Throughout this project, I will be using the terminal built into VSCode. So, I will open up the getting-started-with-astro directory, which is currently empty, in VSCode like so:

empty-vs-code.png

Type the following in the terminal and press Enter.

npm create astro@latest

The Astro CLI will then ask you what to name your new project. I will call it astro-blog.

astro-blog-project-name.png

Next, select the “a few best practices” option.

best-practices.png

When asked if you want to install the NPM dependencies, press y and Astro will install everything automatically.

npm-deps.png

Next, you will be asked if you want to initialize a new git repository, press y.

new-git-repo.png

Then select “Strict” for the TypeScript settings and press Enter.

strict-TS.png

Your project should now be created and ready to go.

install-complete.png

cd into your project folder:

cd astro-blog

and then type:

npm run dev

The dev server should run on http://localhost:3000

astro-dev-server.png

If you open that URL in your browser, you should see the following:

welcom-to-astro.png

Creating our posts page

Now that we have created our new Astro project, let’s create a page called posts that will render all our blog posts. Create a new folder inside src/pages called posts.

posts-folder.png

Inside the src/pages/posts folder, create a new file called index.astro

posts-index-file.png

Create an h1 tag with “The Blog” inside.

the-blog-h1.png

Now let’s visit this page and make sure everything is working correctly. Open up [http://localhost:3000/posts](http://localhost:3000/posts) in your browser. You should see the following:

the-blog-page.png

Markdown posts

Now that we have created our /posts page, we need to create some blog posts. Inside the /posts directory, let’s create some sample blog posts. I will create three markdown files but feel free to create as many as you would like.

markdown-post-1.png

Here are the contents of all three files.

---
title: Post 1
---

# Post 1

This Markdown file creates a page at `your-domain.com/posts/post-1/`

It probably isn't styled much, but Markdown does support:

- **bold** and _italics._
- lists
- [links](https://astro.build)
- and more!
---
title: Post 2
---

# Post 2

This Markdown file creates a page at `your-domain.com/posts/post-2/`

It probably isn't styled much, but Markdown does support:

- **bold** and _italics._
- lists
- [links](https://astro.build)
- and more!
---
title: Post 3
---

# Post 3

This Markdown file creates a page at `your-domain.com/posts/post-3/`

It probably isn't styled much, but Markdown does support:

- **bold** and _italics._
- lists
- [links](https://astro.build)
- and more!

Now, if you open your browser to http://localhost:3000/posts/post-1 you should see the following:

post-1.png

You should be able to see the other posts at /posts/post-2 and /posts/post-3

post-2.png

post-3.png

Now that we have created static routes for each of our blog posts. Let’s update the /posts page to render the title of our posts as a clickable link that will navigate to each post page when clicked.

We need to import all our markdown files into the src/pages/posts/index.astro page components like so:

// src/pages/posts/index.astro
---
const posts = await Astro.glob("./*.md");
---

<h1>The Blog</h1>

We are using the Astro.glob function to import all of our markdown posts at once. We can verify this is working by using console.log() to log out our posts like so:

---
const posts = await Astro.glob("./*.md");
console.log(posts);
---

<h1>The Blog</h1>

You should see the following output in your terminal when you refresh the /posts page.

posts-console-log.png

Now that we know we are getting all of our posts, we can render them like so:

---
const posts = await Astro.glob("./*.md");
console.log(posts);
---

<h1>The Blog</h1>

<ul>
  {
    posts.map((post) => (
      <li>
        <a href={post.url}>{post.frontmatter.title}</a>
      </li>
    ))
  }
</ul>

In our template, we use .map() to iterate over the posts variable and create a clickable link for each post title.

Now the /posts page should look like this:

posts-page.png

Clicking on each title link should take you to the respective post page.

Wrap up

In this lesson, we created a new Astro project and a /posts Astro page component. We then created a few markdown blog posts and rendered them on the posts page. In the next lesson, we will learn how to use MDX for our blog posts.

Previous
How to integrate various UI frameworks, themes, and tools