Get Started Astro Tutorial — 11. Deploying to Netlify

00:00 / 00:00

1x

0.25x 0.5x 0.75x 1x 1.25x 1.5x 1.75x 2x

• 1. Creating the project in Content Island
• 2. Defining the data model
• 3. Adding data
• 4. Creating the Astro project
• 5. Creating the folder structure
• 6. Connecting Content Island with Astro
• 7. Building the About page
• 8. Page with list of posts
• 9. Displaying a post
• 10. Automatic Deployment with Astro and Content Island using GitHub Actions
• 11. Deploying to Netlify
• 12. Auto-deploy with GitHub Webhooks + Content Island

11. Deploying to Netlify

Netlify is a hosting and automation platform that allows developers to deploy static web applications easily and quickly.

Additionally, Netlify offers a free plan that includes:

• Static website hosting.
• SSL certificate.
• Continuous integration.
• Branch and pull request deployments.

In this example, we’ll see how to deploy the “Get Started Astro” project by Content Island on Netlify.

Step 1: Create a Repository

The first thing we need to deploy this project is a GitHub repository:

• Log into your GitHub account and create a new repository.
• Give it a name, e.g., get-started-deploy-netlify.
• You can choose to make it public or private—either is fine, since we’ll later give Netlify access to it.
• Click the create button without adding any files.

Copy the URL of the newly created repository and clone it to your local machine in an empty folder using the following command:

git clone <repository URL> .

Note the period at the end—it tells Git not to create an extra folder with the repository name.

Now, with the Astro project cloned, simply copy the contents of the blog-site folder into this new folder and push it to the repository using these commands:

git add .
git commit -m "Initial commit"
git push

You should now see the project uploaded to your GitHub repository.

Step 2: Configure Deployment

To configure deployment on Netlify, you need to have an account on the platform.

Once logged in, on the homepage, click the Add new site button and select Import an existing project.

Select GitHub as the deployment source since that’s where our project is hosted.

If this is your first time, you’ll need to grant Netlify access to your GitHub account.

You can choose to allow access to all repositories or only specific ones. In this case, select the repository you just created.

Once configured, you’ll be able to select the repository to deploy, and the configuration options will appear.

Choose the name that Netlify will use as your app's subdomain:

If necessary, you can change the build settings, but in this case, the default settings will work fine.

Now let’s add a new environment variable. Remember, when the project is built, it connects to your Content Island project to retrieve the data for each Post.

So, we need to configure the CONTENT_ISLAND_SECRET_TOKEN environment variable, using the value provided by Content Island in the General tab.

Then click Deploy.

And that’s it! Your project with Content Island and Astro is now successfully deployed on Netlify.

Step 3: Configure webhook in Content Island

Now, to ensure that every time we make a change to our Content Island content, the project is redeployed on Netlify, we need to configure a webhook in our project.

Once logged into our account and after selecting our project, go to the Webhook tab.

Click on Add new Webhook and select Netlify from the dropdown.

First, it will ask for a name for the webhook (for example, we can use the name we gave to the project in Netlify get-started-deploy-netlify).

And for the webhook URL, we need to go to the project settings in Netlify, in the Project configuration > Build & deploy section and scroll down to the Build hooks section:

Here, click on Add build hook, give it a name (for example Content Island Webhook) and select the main branch so it deploys every time the webhook is triggered.

Finally, copy the URL that Netlify provides and paste it in the webhook URL field in Content Island and save the changes.

And that's it! Now, every time we make a change to our Content Island content, the webhook will be triggered and our project will be redeployed on Netlify.