An Overview of What We’ll Build

Learn about the website that we’ll build in this course.

We'll cover the following

In this course, we’ll build a static blog from scratch, where we’ll be able to manage posts through markdown files. By the end of this course, we’ll have the following fully functional website ready at our disposal.

Post on the left. Contact page on the right.
Post on the left. Contact page on the right.

Blog pages

The website will consist of four different routes. We’ll have a home page displaying all available posts, individual pages for each post, a contact page, and an RSS feed.

Home

We’ll explore the implementation of several key features. For the home page, we’ll code the following functionalities:

  • Featured latest post

  • Grid of posts ordered by publish date

  • General FAQ component to answer common questions about the site

  • Recommended section that can be configured to display a list of posts

  • The “About the Author” section to establish expertise

By learning how to implement these functionalities, we’ll acquire the knowledge to easily tackle any future functionality we might want to add.

Post

We’ll also create a post page, a dynamic page where we can read more about individual posts and see dynamically generated related posts as recommendations. For this type of page, we’ll code the following functionalities:

  • Generated content from markdown

  • Dynamically generated recommendations

Contact

Lastly, we’ll have a contact page that leverages existing functionality. To practice using scripts in Astro, we’ll create a contact form that validates and logs input values to the console, which can be used for API calls in a real-world application.

RSS

In addition to the three pages mentioned above, we’ll have a /rss.xml route that will act as an RSSIt stands for really simple syndication. feed. We’ll look into how to create the RSS feed in Astro, how to customize it to our own needs, and also why it’s preferable for SEO.

Working blog application

To get a better understanding of how the entire site will function with all the implemented features, you can try it out now using the code widget below:

For the sake of simplicity and to maintain focus on the key concepts at this stage of the course,
we've chosen the files. However, we understand the importance of seeing the complete application
in action. To facilitate this, by clicking the "Run" button below, you'll be able to view and
interact with the full application. This will give you a clearer understanding of how all the pieces
fit together at the end of the course.
Personal blog application

Note: For simplicity, we have not shown the code for the complete application yet.