## Introduction This article is a tutorial on how to build a blog post preview feature using Astro and Strapi, a web framework for content sites. We will show you how to achieve this from a technical standpoint. For this, we will use the new [Drafts & Publish](https://docs-next.strapi.io/user-docs/content-manager/saving-and-publishing-content) feature that was released in Strapi 5, visit Strapi docs for more information. Furthermore, we'll make use of Astro's static generation functionality to build a blog that meets the highest performance standards so you can climb the SEO rankings. ## What we are Building We will build a blog post preview feature. This makes it possible to keep new blog posts private before you choose to publish them. Before you publish new posts, you can make them available as a draft. Draft posts won't show up on the home page and are only accessible to those who know the link. So what are the benefits of this? You can use this to present upcoming blog posts to your fellow team members to receive immediate feedback. We will leverage the new Strapi 5 [Strapi Document Service API](https://docs.strapi.io/dev-docs/api/document-service) and its new functions `publish()`, `unpublish()`, and `discardDraft()` functions to allow changing visibility of blog posts directly through the Astro frontend. This will be a password-protected feature only available to authorized users. So let's get started! ## Introducing the Tech Stack: Astro, Strapi, and Tailwind [Astro](https://astro.build/) is a web framework for content-driven websites, which makes it ideal for the blog we're building. It will render the blog posts and has special support for internationalization and static generation. Styling will be done with [Tailwind CSS](https://tailwindcss.com/). Finally, the content will live in the powerful Strapi CMS. ## Requirements All you need for this project is to have at least **Node.js version 18** installed on your computer and accessible from the terminal. Enter the following command into your terminal to check: ```bash $ node --version v20.11.0 ``` If you don't have Node.js installed, head [here](https://nodejs.org/en/download/package-manager) to install it. ## Setting up Strapi First, we'll need to set up [Strapi](https://strapi.io). Run the command below in your terminal to set up a new Strapi project: ```bash npx create-strapi@latest drafts-and-publish-blog ``` In the prompt, choose the following answers: ```bash ? Please log in or sign up. Skip ? Do you want to use Typescript ? No ? Use the default database (sqlite) ? Yes ``` Once the setup is complete, change into the project folder and start Strapi: ```bash cd ./drafts-and-publish-blog npm run develop ``` You will now be taken to a sign-up page in the browser. Fill out the form. ![welcome to strapi.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/welcome_to_strapi_44b52072ab.png) After signing up, you will be taken to the Strapi Dashboard. In the next step, we will create the collection for the blog posts with a draft or published state. ![strapi admin dashboard.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/strapi_admin_dashboard_2f8944f9ee.png) ## Create Strapi Post Collection ### Create a new Collection Type Let's create our collection. In the sidebar, click on **Content-Type Builder** and then **Create new collection type**. ![create a new collection.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/create_a_new_collection_f92cfb79a7.png) Call the collection type **Post**. Do **not** press **Continue** just yet, as we will need to modify the advanced settings. ![create post collection.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/create_post_collection_1cc5a3160b.png) Navigate to the **Advanced Settings** and make sure the **Draft & publish** checkbox is selected. We'll use that flag to differentiate between Draft and Published Posts. ![enable draft and publish.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/enable_draft_and_publish_bcec075779.png) ### Create Fields for Post Collection Now, we need to define the fields our posts should have. Add the following fields: - `title`: Text, Short Text, Required field - `content`: Rich Text (Markdown), Required field, do **not** use Rich Text (Blocks) - `header`: Media (image only), Single Media, Optional field - `slug`: UID, attached to `title` ![Create collection fields.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Create_collection_fields_22e25364f5.png) Once you're done, click the **Save** button. We now have the collection we need to start writing content. Let's go ahead and create two posts: one that is in the Draft state and one that is already Published. ### Create Entries Click on **Content Manager**, **Post**, and then **Create new entry**. ![create entries.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/create_entries_9671a31e00.png) You can write whatever you want here. We will be using [Lorem Ipsum](https://www.lipsum.com/). **Create Draft Entry** ![create draft entry.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/create_draft_entry_e9f46ebbc0.png) Click **Save**, but do not publish the post yet. We will use this one as a draft. You can add another post that you can publish immediately. **Create Published Entry** ![Create Published Entry.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Create_Published_Entry_3c04e0d243.png) Once you're ready, click **Save** and **Publish** to publish the post. If you want, you can go ahead and create another post so that we have more than one post to show on the website. ![published entries.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/published_entries_bc8f9d3d34.png) ## Making Posts Publicly Accessible We now have posts in a defined collection, but no way to access them from Astro. To change this, we need to ensure they can be accessed through the Strapi API. For this, navigate to ***Settings > Users & Permissions Plugin > Roles***. ![Making Posts Publicly Accessible.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Making_Posts_Publicly_Accessible_38dbf9cb36.png) In this section, select the **Public** role to grant `find` and `findOne` permissions to the **Post** collection. ![enable permission.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/enable_permission_611cdf4391.png) Ensure that no other permissions are granted to the **Public** role, as this would allow anyone to modify or delete your content. Once done, press **Save**. Now you'll be able to access your posts through the Strapi API at `http://localhost:1337/api/posts`. Try it out to make sure everything has worked. This is the API we will consume on our frontend to render the posts. With this, we're ready to set up the Astro for our blog. Be aware that you will only see Published posts here. We will deal with accessing Drafts later. ## Getting Started with Astro ### Bootstrappping Astro Project First, we'll need to set up Astro. Run the command below in your terminal to set up a new Astro site: ```bash npm create astro@latest astro-blog ``` Select the following choices in the installation sequence: ```bash astro Launch sequence initiated. ◼ dir Using astro-blog as project directory tmpl How would you like to start your new project? Include sample files ts Do you plan to write TypeScript? No ◼ No worries! TypeScript is supported in Astro by default, but you are free to continue writing JavaScript instead. deps Install dependencies? Yes git Initialize a new git repository? No ◼ Sounds good! You can always run git init manually. ✔ Project initialized! ■ Template copied ■ Dependencies installed next Liftoff confirmed. Explore your project! Enter your project directory using cd ./astro-blog Run npm run dev to start the dev server. CTRL+C to stop. Add frameworks like react or tailwind using astro add. Stuck? Join us at https://astro.build/chat ╭─────╮ Houston: │ ◠ ◡ ◠ Good luck out there, astronaut! 🚀 ╰─────╯ ``` ### Adding Tailwind CSS Now that we have installed Astro, change to the `astro-blog` directory. Then, we want to add **Tailwind CSS** to style our blog. For this, first run this command in your terminal and say **Yes** to all choices: ```bash npx astro add tailwind ``` This has automatically set up Tailwind CSS in Astro for us. However, we also need the Tailwind Typography plugin so that we can style the prose in the posts. So once again, open your terminal and run: ```bash npm install -D @tailwindcss/typography ``` Modify your `tailwind.config.mjs` file so that it imports the Typography plugin: ```js /** @type {import('tailwindcss').Config} */ export default { content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], theme: { extend: {}, }, plugins: [require("@tailwindcss/typography")], }; ``` Also, head over to the `astro.config.mjs` and to enable Server-Side Rendering with `output: "server"`. This allows us to change the visibility of a post whenever we want, without re-building the whole site. ```js import { defineConfig } from "astro/config"; import tailwind from "@astrojs/tailwind"; // https://astro.build/config export default defineConfig({ output: "server", integrations: [tailwind()], }); ``` Now start the application using `npm run dev` and visit http://localhost:4321/ to see the Astro site. ![welcome to astro.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/welcome_to_astro_01fd9f77ec.png) ## Building the App UI Layout Our blog will consist of two pages: * `/blog`, which will show all blog posts. * `/blog/[slug]`, which will display a single blog post. Let's get started with building this common layout. Create a new file at `/src/layouts/BlogLayout.astro` with the following content: ```js --- import Layout from "./Layout.astro"; interface Props { title: string; } const { title } = Astro.props; ---

Astro Blog

``` See how we import the already existing layout from `/src/layouts/Layout.astro`. While you're at it, open this file and remove the `

No results