Astro is a flexible web framework that allows you to build fast websites to suit your needs.

By default, Astro will build your site using Static Site Generation (SSG). This means the data in your site is loaded at build time so that the end-user gets served static pages that load quickly.

While Astro defaults this way, it also has Server-Side Rendering (SSR) that you can enable if you have more serverful needs in your application.

Along similar lines, Astro utilizes HTML and the browser as a default but when you need more flexibility you can opt into an Astro Island. Islands use React, Vue, Angular, or any frontend JavaScript framework you are used to enhance the user experience in your site.

astro

Learn Astro

 "Build a Full Stack Blog with Astro" is a hands-on course that cuts straight to the chase, offering developers a practical approach to building a fully functional blog website. Throughout this course, you'll get to grips with Astro, a modern web framework designed to help you create fast content websites with a modern development experience.

Here's what you'll be tackling:

- **Styling and Layout**: You'll learn how to style Astro pages, exploring a variety of ways to make your site look good without compromising on performance.
- **Astro Components and Static Assets**: Get comfortable creating reusable components and managing static assets like images.
- **Content Publishing System**: Delve into managing blog content with Astro’s content collections, with type safety included with Zod to keep your data structured and error-free.
- **Dynamic Features**: Implement pagination and dynamic pages to make your content discoverable and your site easy to navigate.
- **SEO Essentials**: Tackle SEO fundamentals with **`astro-seo`**, ensuring your site ranks well and reaches the right audience without the guesswork.
- **React and Vanilla JS**: Enhance your site with interactive components, first using React, then refactoring with Vanilla JS for optimal performance.
- **Backend Integration**: You'll dive into back-end functionality, creating custom API endpoints, and interfacing with a database using Drizzle ORM to manage your content behind the scenes.
- **Dynamic OG image generation**: Every content website needs decent OG images for social sharing. You’ll learn how to dynamically generate the OG images for your pages and blog articles.

By the end of this course, you won't just have a theoretical understanding — you'll have a live, deployable full-stack blog that reflects current best practices in web development. You’ll also gain valuable and easily-transferrable skills for working with databases and containerizing and deploying full-stack web apps. This course is about building something tangible that you can use as a springboard for more complex projects down the line. So, let's learn how to build great content websites!

Build a Full Stack Blog with Astro

A blog isn't worth much if you don't have a place to put your content. In this lesson we'll dive deep into Astros content collections API which is a feature for organizing all of your content and ensuring when you create your content you add the proper data to your front matter.

To do this we'll create a content folder that contains a `config.ts` inside that config we'll use `defineCollection` from `astro:content` to declare what our blog data will look like. From here you can set a `schema` property and use zod to declare the shape of the data you'd like your content to be in. 

When actually creating content, Astro will throw errors if you miss an attribute in your frontmatter that was set in your schema.

Astro also gives you an easy way to grab all the content you have with the `getCollection` function. We'll use this function to add links to our latests blog posts on the home page.

Create Astro Content Collections with Zod for a Typesafe Blog

We'll set up our initial Astro blog using Houston, Astro's official CLI.

After stepping through the CLI options you'll get a tour of the generated files that Astro includes in a new project. You'll see what file structure you are working with and also get an introduction to the `.astro` file type where we will be doing a lot of the work in this course.

Create an Astro Project and Set up the Dev Environment

From laying down the foundation to adding advanced features, this course walks you through creating your own personal blog website with Astro. Explore backend integration, optimization techniques, and deployment strategies.

In this course, you'll create dynamic OG images, RSS, sitemap, and database all while shipping minimal JavaScript for a blazing-fast user experience.

Intro: Build a Full Stack Blog with Astro

RSS feeds are a way for others to consume your content in their own feed without having to go to your website every time you publish a piece. 

Astro gives you a package `@astrojs/rss` that helps you create such a feed. On the Astro side, this will be an API route which we haven't touched on yet in this course but just know this is a route that others can hit to give them data, in this case a feed of all your posts.

Here we'll export a GET function that will return an RSS feed. RSS feeds require a certain shape to their data which is what we will provide the function. We'll give it a title, description, site, and items.

The items we'll grab from a call to `getCollection` and each will have a title, description, publication date, link, and content. For the content, we are rendering the full post as html. To do this safely we will need to packages: `markdown-it`, and `sanitize-html`. `markdown-it` will take our markdown and produce html and `sanitize-html` will strip out any unnecessary HTML.



Generate an RSS Feed for an Astro Blog with @astrojs/rss

Astro provides a sitemap integration to make it easy for you to set up your websites sitemap. 

Sitemaps are important for allowing search engines to efficiently crawl and index the pages of your website. 

To add the sitemap integration you just need to run `npx astro add sitemap` and add the integration to the integrations array in the config.

From there you can configure your sitemap how you'd expect. You can filter out any pages you don't want in there, add custom pages, adjust the change frequency, modify date, and priority.

You can also serialize your urls (e.g. remove the trailing slash) and add localization properties.

Generate a Sitemap in Astro with the sitemap Integration

Layouts are the way to create a consistent user experience across different pages within our application.

By default, Astro ships with a `<Layout>` component that wraps the pages that are generated using the CLI. We'll look at what is already in our page layouts and add a nav and footer to them as well. We'll see that the layout has a `<slot />` element which is very similar to Reacts `children` which is where the html of nested pages will get placed when you use that layout.

Layout's are not automatically applied to pages in an application so we will also see what it looks like to add a layout to the about page that we created before. 


Create and Apply a Layout to Astro Pages

Astro uses file-based routing to generate routes within the project that you are working on. That means every folder and file you create under `/pages` will result in a route that reflects that file.  

Here you can see how different pages will map to different routes in astro:
```
./src/pages/index.astro  -> /
./src/pages/about.astro  -> /about
./src/pages/index.astro  -> /blog
./src/pages/hello.astro  -> /blog/hello
```

Create Static Pages in Astro Using File Based Routing

Now it's time to actually render the contents of our blog. To do this we need to leverage Astro's dynamic pages API because the pages that are rendered depend on what we add to our blog folder.

To do this we'll create a `[slug].astro` file that will handle rendering the pages. Because all pages are statically generated at build time we will tell Astro to build our pages exporting a `getStaticPaths` function from this file. 

We will utilize `getCollection` again to grab all the posts in our blog.

In `getStaticPaths` we need to return an object that has two properties: 

- params
- props

Params will be the dynamic portion of the page, in this case the slug of the post. Props will be the data that is passed to that dynamic page, we'll use post.

Each post comes with a `render` function so we can destructure the `Content` from the post that we will use in the template of the page.

## Challenge

You learned how to render content onto a dynamic blog post page but it doesn't look very good. This is because there are no styles applied to your content. Your challenge is to style the blog post content to look like the screen shot down below.

You can do this by utilizing Tailwinds typography package and use it's prose class or apply your styles with your own CSS. One thing to note is that `Content` lives in a different scope than the page so any styles you add here will need to be marked as global for Astro to pick them up.

![blog page](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1698183730/course-resources/build-a-full-stack-blog-with-astro/lesson-challenges/07-render-blog-page.png)

Additionally, blogs typically have an index page of all the blog posts they contain. Add a proper blog index page and utilize the code that we wrote on the home page in the index page. This would be a great time to extract that code into an Astro component to reuse.

![blog index](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1698183729/course-resources/build-a-full-stack-blog-with-astro/lesson-challenges/07-render-blog-page-blog-index.png)

Render an Astro Blog Post Page with getStaticPaths


**Note:** I'm setting the page's type by directly assigning it
(`const page: Page<CollectionEntry<'blog'>> = ...`)

That won't work in recent versions of Astro because if we don't define `type Props`, Astro.props will be a record of type `Record<string, unknown>` and we can't cast an `unknown` to the `Page` type.

To fix this, we need to define `type Props` and set the page type in it, instead of casting the `page` constant to it. [See the code here.](https://github.com/nikolovlazar/egghead-personal-blog-astro/blob/lesson-10/src/pages/blog/%5Bpage%5D.astro#L22-L24)

---

When you have tens or hundreds of posts in your blog it can be a good user experience to paginate posts so they can be browsed.

Astro gives us an API to implement pagination easily. To do this we will convert our index page to a dynamic page by renaming to `[page].astro`. 

Now that you have a dynamic page, you'll need to export a `getStaticPaths` function that will define what pages are rendered. When we utilize the `GetStaticPaths` type on this function you'll notice that Astro gives us a `paginate` function we can use. 

We'll return a call to `paginate` from `getStaticPaths` and set the blog posts and page size we want to paginate on. This will return a page to us from `Astro.props.page` that will have all the necessary controls for building pagination like next and previous urls as well as the current pages data. 

To see all the data available to you on the page you can pull in the `Page` generic type from Astro and pass in `Page<CollectionEntry<'blog'>>`. From here we'll use this data to render the proper amount posts with conditionally rendered pagination control down below.

Implement Pagination in a Dynamic Astro Index Page with getStaticPaths and paginate

There are two ways that Astro gives us to serve static content to our users. The first unoptimized way is to just put your assets in the public folder of your application. This will make your assets publicly available. If you had `asset.png` stored in your public folder you would access in your code with `/asset.png`.

When you use the public folder, however, you don't get any optimization and Astro will just serve what is in there no matter what. If you'd like to optimize your assets Astro gives you an `assets` folder that you can use inside `src`. Moving your asset there in tandem with the `Image` component from `astro:assets` will give you an optimized webp version of the image you want to load. You'll also be able to control the width/height and quality that is loaded.

## Challenge

It's time for you to test what you know so far. You've learned about Astro pages, components, styling, and static images. 

Use your knowledge to modify the home and about pages to look like the screenshots below. 

If you get stuck you can check the code linked on the lesson page. 

![astro home page screenshot](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1698182477/course-resources/build-a-full-stack-blog-with-astro/lesson-challenges/05-render-images-home.png)

![astro about page screenshot](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1698182477/course-resources/build-a-full-stack-blog-with-astro/lesson-challenges/05-render-images-about.png)

Render Images to Pages with Astros Static Serving and Static Assets

It's time to get your hands dirty by creating your first Astro component. 

This component will be relatively simple but very handy. You are creating a `Link` component that will take an `href` as well as an `isExternal` boolean telling the component whether or not it's an external link.

All components in Astro follow a similar pattern, you'll create a `Props` interface of all the props you want to pass the component. This will tell Astro what props your component expects and throw errors if it doesn't get those. Then you'll actually destructor those props from `Astro.props`

Finally we'll create some html and conditionally apply `nofollow noopener norefferer external` rel properties. 

You'll also see how `<slot />`s work to accept children that are passed to the component. 

Create an Astro Component for Links

Every site that is serious about increasing traffic needs to consider how it is handling SEO.

In Astro, you can set your meta tags manually but Astro gives you a easy-to-use `<SEO />` component that will set meta tags for you as you give it properties.

In this lesson we'll add the `astro-seo` package and set titles and descriptions on our different landing pages as well as set a default if we forget to do that.

Implement SEO in an Astro Website with astro-seo

You'll learn the various styling approaches available to you in Astro. 

By default, all styles are scoped to the file you are in so you won't need to worry too much about specificity and clashing styles in your Astro projects. We'll explore a page that is using general selectors like `h1` to style the header of that page. You can force a style in the global scope by the `is:global` directive or the `:global()` function on a specific selector.

Next, you'll learn about conditional styles and how to set JavaScript variables to pass to your styles for more dynamic controls. You can specify `class:list={[{red: isRed}]}` on an element which will conditionally apply the `red` class based on the `isRed` variable you have set in your JavaScript. 

Likewise, you can pass variables down to your `<style>` tags by adding the `define:vars` directive to the tag. This works great for setting variables for more flexibility in your styles.

Other styling options are available, you can import stylesheets or add tailwind to your Astro project. 

Style Astro Pages with Many Different Options

Now that we have our database set up, we need to use it!

On our blog post page, we have a likes button waiting for us to implement the likes feature. On page load, we'll make a fetch call to a `/api/likes/[slug].ts` GET end point to return the number of likes for the page. 

Similarly, when someone clicks the like button we want to send a POST request to that same endpoint.

On the server side we will set up `GET` and `POST` handlers to implement this functionality. In those functions we'll use Drizzle to return the likes for that blog post and in the case of a `POST` we'll create a record if it doesn't exist or increment a like if it does and return.

Astro API endpoints utilize browser `Response` API so you'll get a chance to handle returning different status's based on the data present.

Create Astro API Endpoints to Get and Update Database Records using Drizzle ORM

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

By default Astro is building our site as statically generated (SSG). Because we want to add some runtime features to our blog and interface with a database in the future we need to convert it to be server-side rendered (SSR). 

Astro has integrations for this, because we know we want to deploy to Fly.io via docker we'll use the Node.js integration and set the output to 'hybrid'. Hybrid, as opposed to 'server', will still statically generate the pages of our blog that are static but give us the option of SSR when we need it.

In this lesson we'll refactor our build to using docker and deploy to Fly.io

Dockerize a Server-side Rendered (SSR) Astro Blog and Deploy to Fly.io

One of the beauties of Astro is that you don't need to use a JavaScript UI library. Astro lets you us plain JavaScript when you want to. 

It's a good idea to get into the habit of starting with vanilla JS when you have a simple use-case like adding a like button. This will mean less JavaScript on the page for your user than if you were to implement this in React. 

We'll refactor our React like button and turn it into vanilla JS with the result for the user. Another added benefit of this approach is you'll get more familiar with the native browser API which will pay dividends for you in the future.

Refactor a React Astro Island to Vanilla JS to Ship Less JavaScript

Everything up to this point Astro builds statically which means there is no JavaScript loaded on any of our pages. It's all loaded during build time and served as static files on the web

When we do want to add some interactivity into our site we can use Astro Islands to leverage JavaScript on our pages.

Astro islands are interactive components that Astro treats differently than the rest. Instead of just executing them during build time and saving the output, Astro will also hydrate the components at a specific point and ship the JavaScript needed for the component to be interactive. 

To use a UI framework, we need to add its integration, so we did `npx astro add react` to add the react integration.

Then we will create an ordinary react component, just as we would in a react page, and import it and place it in a page. To mark that component as an island, we use a `client` directive. The client load directive hydrates the component during the initial page load.

The `client` directive has several different loading strategies you can use based on your usecase:

- `client:load`
- `client:idle`
- `client:visible`
- `client:media`
- `client:only`



Add Interactive React Components to a Static Astro Page with Astro Islands

Congratulations! You now know how to build static sites with Astro. You have everything you need to be productive and build projects all over the internet. 

The next section we are going to get into advanced features that you can build with Astro. Depending on your use-case, you might not need some of the features but I wanted to put these together for you so you know what exists and how to approach these features with Astro. 

We'll be learning how to:
- inject interactivity into a static site with Astro Island Architecture
- Dockerize our site
- using GitHub Actions to build our custom site
- connect to a database with DrizzleORM
- dynamically generate og-images based on the page you are on

Milestone Recap: Build a Full Stack Blog with Astro

Og images are important for any blog or website. They are the share image that is shown when you include a url to your site on social media.

Astro makes it easy to include og images within its SEO package but making these images dynamic takes a little more set up.

In this lesson we'll set up an Astro API route returns a link to a dynamic image utilizing `satori` and `@resvg/resvg-js` to do so.

The was we set it up, we'll create different templates that the API endpoint will accept and each template can render different end points so you could have a default template, one for your blog posts, and possibly another for your about page.

During this process, you'll learn how to pass data from the client to the server through URL Search Params which will power the dynamic portion of the image generation

Implement Dynamic OG Image Generation with Astro API Routes and Satori

Because our site is pretty standard with no big features that require a database, we'll be deploying to Vercel. Vercel makes it easy to pull in the code from GitHub and has an Astro framework preset so we can deploy with one click.

Topics

Instructors

Content Type

Astro