Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Steps component to builderio.mdx #8067

Merged
merged 1 commit into from
May 2, 2024
Merged

Add Steps component to builderio.mdx #8067

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 23 additions & 1 deletion src/content/docs/en/guides/cms/builderio.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -140,23 +141,27 @@ In the above example, `<builder-component>` tells Builder where to insert the co

#### Setting the new route as the preview URL

<Steps>
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.
</Steps>

:::tip
When you deploy your site, change the preview URL to match your production URL, for example `https://myAwesomeAstroBlog.com/builder-preview`.
:::

#### Testing the preview URL setup

<Steps>
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.
</Steps>

:::tip[Troubleshooting]

Expand All @@ -172,13 +177,19 @@ For more ideas, read [Builder's troubleshooting guide](https://www.builder.io/c/

### Creating a blog post

<Steps>
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.
</Steps>

### Displaying a list of blog posts

Expand Down Expand Up @@ -328,25 +339,37 @@ If your project is using Astro's default static mode, you will need to set up a

##### Netlify

<Steps>
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.
</Steps>

##### Vercel

<Steps>
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.
</Steps>

##### Adding a webhook to Builder

:::tip[Official resource]
See [Builder's guide on adding webhooks](https://www.builder.io/c/docs/webhooks) for more information.
:::

<Steps>
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.
</Steps>

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!

Expand All @@ -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.

Loading