diff --git a/src/content/docs/en/guides/cms/builderio.mdx b/src/content/docs/en/guides/cms/builderio.mdx index 9fee1778745ba..eef6bb078f866 100644 --- a/src/content/docs/en/guides/cms/builderio.mdx +++ b/src/content/docs/en/guides/cms/builderio.mdx @@ -8,6 +8,7 @@ i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' import { FileTree } from '@astrojs/starlight/components'; +import { Steps } from '@astrojs/starlight/components'; [Builder.io](https://www.builder.io/) is a visual CMS that supports drag-and-drop content editing for building websites. @@ -140,11 +141,13 @@ In the above example, `` tells Builder where to insert the co #### Setting the new route as the preview URL + 1. Copy the full URL of your preview, including the protocol, to your clipboard (e.g. `https://{your host}/builder-preview`). 2. Go to the **Models** tab in your Builder space, pick the model you've created and paste the URL from step 1 into the **Preview URL** field. Make sure the URL is complete and includes the protocol, for example `https://`. 3. Click the **Save** button in the upper right. + :::tip When you deploy your site, change the preview URL to match your production URL, for example `https://myAwesomeAstroBlog.com/builder-preview`. @@ -152,11 +155,13 @@ When you deploy your site, change the preview URL to match your production URL, #### Testing the preview URL setup + 1. Make sure your site is live (e.g. your dev server is running) and the `/builder-preview` route is working. 2. In your Builder space under the **Content** tab, click on **New** to create a new content entry for your `blogpost` model. 3. In the Builder editor that just opened, you should be able to see the `builder-preview.astro` page with a big **Add Block** in the middle. + :::tip[Troubleshooting] @@ -172,13 +177,19 @@ For more ideas, read [Builder's troubleshooting guide](https://www.builder.io/c/ ### Creating a blog post + 1. In Builder's visual editor, create a new content entry with the following values: - **title:** 'First post, woohoo!' - **slug:** 'first-post-woohoo' + 2. Complete your post using the **Add Block** button and add a text field with some post content. + 3. In the text field above the editor, give your entry a name. This is how it will be listed in the Builder app. + 4. When you're ready click the **Publish** button in the upper right corner. + 5. Create as many posts as you like, ensuring that all content entries contain a `title` and a `slug` as well as some post content. + ### Displaying a list of blog posts @@ -328,15 +339,23 @@ If your project is using Astro's default static mode, you will need to set up a ##### Netlify + 1. Go to your site dashboard, then **Site Settings** and click on **Build & deploy**. + 2. Under the **Continuous Deployment** tab, find the **Build hooks** section and click on **Add build hook**. + 3. Provide a name for your webhook and select the branch you want to trigger the build on. Click on **Save** and copy the generated URL. + ##### Vercel + 1. Go to your project dashboard and click on **Settings**. + 2. Under the **Git** tab, find the **Deploy Hooks** section. + 3. Provide a name for your webhook and the branch you want to trigger the build on. Click **Add** and copy the generated URL. + ##### Adding a webhook to Builder @@ -344,9 +363,13 @@ If your project is using Astro's default static mode, you will need to set up a See [Builder's guide on adding webhooks](https://www.builder.io/c/docs/webhooks) for more information. ::: + 1. In your Builder dashboard, go into your **`blogpost`** model. Under **Show More Options**, select **Edit Webhooks** at the bottom. + 2. Add a new webhook by clicking on **Webhook**. Paste the URL generated by your hosting provider into the **Url** field. + 3. Click on **Show Advanced** under the URL field and toggle the option to select **Disable Payload**. With the payload disabled, Builder sends a simpler POST request to your hosting provider, which can be helpful as your site grows. Click **Done** to save this selection. + With this webhook in place, whenever you click the **Publish** button in the Builder editor, your hosting provider rebuilds your site - and Astro fetches the newly published data for you. Nothing to do but lean back and pump out that sweet sweet content! @@ -360,4 +383,3 @@ With this webhook in place, whenever you click the **Publish** button in the Bui ## Community resources - Read [Connecting Builder.io's Visual CMS to Astro](https://www.hamatoyogi.dev/blog/astro-log/connecting-builderio-to-astro) by Yoav Ganbar. -