Make the blog yours and publish a real post

1. Replace the practice identity

Change SITE_TITLE and SITE_DESCRIPTION in src/consts.ts. Replace the homepage introduction and About page with your own words. Keep the description useful to someone encountering the site for the first time.

An About page can answer three questions: who is writing, what they are exploring, and where a reader can find them. You do not need to present yourself as someone who has already resolved every question.

Add only profiles you want publicly associated with the blog. For example, add this HTML fragment inside the About page’s <Page>:

<h2>Elsewhere</h2>
<ul>
  <li><a href="https://github.com/YOUR_USERNAME">Personal GitHub</a></li>
  <li><a href="https://github.com/YOUR_PROJECT_ORGANIZATION">Side projects</a></li>
  <li><a href="https://www.linkedin.com/in/YOUR_PROFILE/">LinkedIn</a></li>
</ul>

Replace the placeholders and open every link. A personal GitHub profile and a project organization are different destinations. Instagram is optional; include it only if connecting that part of your life publicly fits your purpose. A normal same-tab link needs no popup behavior.

2. Add an image carefully

Place a public image you own or have permission to use at public/images/river-walk.webp. Create the directories first. In a post, use:

![A footpath alongside a river beneath autumn trees](/images/river-walk.webp)

Supply meaningful alternative text. Describe the image’s relevant content, rather than writing “image” or repeating the filename. Resize and compress the source so readers do not download a huge camera original. Remove metadata you do not want to expose, such as embedded location information.

Every file in public/ is deployed, even when only a draft links to it. Do not put private draft attachments there. For a richer image workflow, use Astro’s image facilities and the collection’s image() schema in a later lesson or extension. This course’s initial schema does not define heroImage.

3. Write the first real article

Create a new descriptive filename in src/content/blog/, such as why-i-write.md:

---
title: "Why I write"
description: "The questions I want this blog to help me explore."
pubDate: "2026-10-06"
draft: true
tags: [reflection]
---

Start with one concrete thought, experience, or question.

## What I am trying to understand

Write the next paragraph in your own voice.

Use your intended publication date. Preview the direct draft URL locally with pnpm dev. The development archive omits drafts intentionally, so type /blog/why-i-write/ into the address bar.

Read the post on a phone-width viewport. Check headings, spelling, links, image descriptions, and whether the opening tells readers why to continue. If your topic includes other people, decide what details belong in a public essay before publication.

When ready, set draft: false. Keep the date at or before the intended release time. Run:

pnpm verify
git diff
git add src/consts.ts src/pages/index.astro src/pages/about.astro src/content/blog/why-i-write.md
git commit -m "Publish the first personal essay"
git push origin main

If you added an image, stage that exact image file too. Do not assume a new file is committed just because it exists locally.

4. Verify the reader’s experience

Wait for the build for your commit to succeed. Open the domain in a fresh/private browser window: the article should appear on the homepage and archive. Open its direct URL, RSS, and sitemap. Check that your practice draft/future article stays absent.

The tags in this starter are metadata and RSS categories. We have not implemented tag archive pages; do not add navigation links to them until they exist. Similarly, MDX needs its integration and collection pattern changed before .mdx files become posts.

Checkpoint and exercise

You have a real public article, accurate profile links, and an About page written in your own voice. Make one small CSS adjustment based on reading the article rather than decorating the homepage. Keep the change only if it improves the reading experience in both appearance modes.