1
my-astro-blog/
2
├── public/
3
├── src/
4
│ ├── components/
5
│ ├── layouts/
6
│ ├── pages/
7
│ └── content/
8
├── astro.config.mjs
9
└── package.json

1
src/content/blog/hello-world.md

1
  ---
2
  title: "Hello World"
3
  pubDate: 2025-05-16
4
  description: "My first Astro blog post."
5
  author: "Jane Doe" // [!code ++]
6
  tags: ["astro", "blog"]
7
  ---
8

9
  # How to Use Astro to Create a Modern Blog
10

11
  Astro is a modern static site builder that enables you to create fast, content-focused websites with ease. Its unique approach to web development—shipping zero JavaScript by default—makes it an excellent choice for building blogs that are both performant and easy to maintain. In this article, we'll walk through the process of creating a blog with Astro, covering everything from setup to deployment.

1
If you need to install or update Node.js, visit [nodejs.org](https://nodejs.org/).
2

3
### 2. Create a New Astro Project
4

5
Open your terminal and run:
6

7
```bash
8
npm create astro@latest
9
```
10

11
You'll be prompted to name your project and select a template. For a blog, you can choose the "Blog" template or start with the "Minimal" template.
12

13
### 3. Install Dependencies
14

15
Navigate into your project directory and install dependencies:
16

17
```bash
18
cd your-project-name
19
npm install
20
```
21

22
### 4. Start the Development Server
23

24
Run the following command to start the local development server:
25

26
```bash
27
npm run dev
28
```
29

30
Visit `http://localhost:4321` in your browser to see your new Astro site!
31

32

33
## Creating Blog Pages
34

35
Astro uses a file-based routing system. To create a new page, simply add a `.astro` file to the `src/pages` directory.
36

37
For example, to create an "About" page:
38

39
```bash
40
touch src/pages/about.astro
41
```
42

43
Add the following content:
44

45
```astro
46
---
47
title: "About"
48
---
49
<h1>About This Blog</h1>
50
<p>Welcome to my Astro-powered blog!</p>
51
```
52

53

54
## Adding Markdown Support
55

56
Astro makes it easy to write blog posts in Markdown. By default, Markdown files placed in `src/pages` become pages on your site.
57

58
### 1. Create a Blog Post
59

60
Create a new file:
61

62
```bash
63
mkdir -p src/pages/posts
64
touch src/pages/posts/hello-world.md
65
```
66

67
Add the following content:
68

69
```markdown
70
---
71
title: "Hello World"
72
pubDate: 2024-06-01
73
description: "My first post with Astro!"
74
author: "Dominik"
75
---
76

77
# Hello World
78

79
Welcome to my first blog post using Astro! 🚀
80

81
Astro makes it easy to write content in Markdown and publish it as a fast, modern website.
82
```
83

84
### 2. Frontmatter
85

86
The section at the top (between `---`) is called "frontmatter." It lets you define metadata for your post, such as the title, date, and description.
87

88

89
## Listing Blog Posts
90

91
To display a list of your blog posts, you can use Astro's `glob` import to fetch all Markdown files in a directory.
92

93
Create a new file at `src/pages/blog.astro`:
94

95
```astro
96
---
97
import { getCollection } from 'astro:content';
98

99
const posts = await getCollection('posts');
100
---
101

102
<h1>Blog</h1>
103
<ul>
104
  {posts.map(post => (
105
    <li>
106
      <a href={post.url}>{post.data.title}</a> - <small>{post.data.pubDate}</small>
107
    </li>
108
  ))}
109
</ul>
110
```
111

112
> **Note:** If you want to use `getCollection`, you need to set up [Content Collections](https://docs.astro.build/en/guides/content-collections/). For a simple blog, you can use `import.meta.glob`:
113

114
```astro
115
---
116
const postImporters = import.meta.glob('./posts/*.md');
117
const postPromises = Object.entries(postImporters).map(async ([path, resolver]) => {
118
  const post = await resolver();
119
  return {
120
    url: path.replace('./', '/').replace('.md', ''),
121
    ...post.frontmatter,
122
  };
123
});
124
const posts = await Promise.all(postPromises);
125
---
126

127
<h1>Blog</h1>
128
<ul>
129
  {posts.map(post => (
130
    <li>
131
      <a href={post.url}>{post.title}</a> - <small>{post.pubDate}</small>
132
    </li>
133
  ))}
134
</ul>
135
```
136

137

138
## Styling Your Blog
139

140
Astro supports several ways to add styles:
141

142
- **Global CSS:** Place a CSS file in `src/styles` and import it in your `src/layouts` or `src/pages`.
143
- **Scoped Styles:** Add a `<style>` tag to any `.astro` file.
144

145
Example of scoped styles:
146

147
```astro
148
---
149
title: "Styled Page"
150
---
151
<h1>Styled Page</h1>
152
<p>This page has custom styles!</p>
153

154
<style>
155
  h1 {
156
    color: #7c3aed;
157
    font-family: 'Inter', sans-serif;
158
  }
159
  p {
160
    font-size: 1.2rem;
161
  }
162
</style>
163
```
164

165

166
## Deploying Your Blog
167

168
Once you're happy with your blog, it's time to share it with the world!
169

170
### 1. Build Your Site
171

172
Run:
173

174
```bash
175
npm run build
176
```
177

178
This generates a static site in the `dist/` directory.
179

180
### 2. Deploy to a Static Host
181

182
You can deploy your Astro site to platforms like:
183

184
- [Netlify](https://www.netlify.com/)
185
- [Vercel](https://vercel.com/)
186
- [GitHub Pages](https://pages.github.com/)
187
- [Cloudflare Pages](https://pages.cloudflare.com/)
188

189
For example, to deploy to Netlify:
190

191
1. Push your code to GitHub.
192
2. Connect your repository to Netlify.
193
3. Set the build command to `npm run build` and the publish directory to `dist`.
194

195
Astro's [deployment guide](https://docs.astro.build/en/guides/deploy/) has detailed instructions for each platform.
196

197

198
## Conclusion
199

200
Astro is a powerful and flexible tool for building blogs and content-driven websites. Its focus on performance, simplicity, and developer experience makes it a great choice for both beginners and experienced developers.
201

202
**Key Takeaways:**
203

204
- Astro ships zero JavaScript by default, making your blog fast.
205
- Write content in Markdown and use frontmatter for metadata.
206
- Use file-based routing to organize your pages and posts.
207
- Deploy your site easily to any static hosting provider.
208

209
Ready to start your own blog? [Check out the Astro documentation](https://docs.astro.build/) and join the [Astro Discord community](https://astro.build/chat) for more tips and support.
210

211

212
Happy blogging with Astro! 🚀