Welcome to my new blog about learning Astro! Here, I will share my learning journey as I build a new website.
What I’ve accomplished
-
Installing Astro: First, I created a new Astro project and set up my online accounts.
-
Making Pages: I then learned how to make pages by creating new
.astro
files and placing them in thesrc/pages/
folder. -
Making Blog Posts: This is my first blog post! I now have Astro pages and Markdown posts!
What’s next
I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.
<article class="border w-96">
<img class="w-80 mx-auto h-auto mb-2 m-1" src={post.frontmatter.image?.url} />
<a class="text-lg font-normal" href={post.url} >{post.frontmatter.title}</a>
<div class="text-slate-300">{post.frontmatter.description}</div>
<div class="text-slate-300">
{new Date(post.frontmatter.pubDate).toDateString()}
</div>
</article>
If you have headers in the markdown files, you can directly link them in the file.
Markdown Header:
this will generate an implicit id #the-header (replace internal spaces with hyphens and make lowercase).
To navigate to this id, you can create the link like this: