Requirements#

For this guide, you will need:

• A GitHub account
• A Cloudflare account
• Node.js installed (v18.20.8 or v20.3.0, v22.0.0 or higher)
• git installed

To make sure you have git and node installed, run in a terminal window:

1
git --version
2
node --version

You should see version numbers if they are installed correctly.

Project setup#

Open a terminal window and run the following command to start the Astro setup:

1
npm create astro@latest

Enter a name for the new project (for example ./astro-blog). A new folder will be created for it.

Select the blog template and “Yes” to installing dependencies and initializing a git repository.

If everything worked correctly, you should see the following message:

Run these commands to enter the new project folder and start the development server:

1
cd ./astro-blog
2
npm run dev

Once the setup is complete, it will display a message that your blog is available at http://localhost:4321/ by default.

Visit the URL in your browser to see your blog in action:

The contents of the blog posts are stored in the src/content/blog directory.

The .md files in this directory each contain a blog post, for example:

1
---
2
title: 'First post'
3
description: 'Lorem ipsum dolor sit amet'
4
pubDate: 'Jul 08 2022'
5
heroImage: '../../assets/blog-placeholder-3.jpg'
6
---
7

8
Lorem ipsum dolor sit amet...

The top section contains the post metadata, with the blog content underneath.

When you save and create files, the development server will detect the changes and reload the browser page automatically.

Upload to GitHub#

Once you’re ready to publish your blog, you will need to push it to a GitHub repository.

Create a new repository on GitHub and follow the instructions to push your blog to the repository.

You can set the repository to public or private, either works.

With your GitHub repository created, as you chose “Yes” to initializing a git repository during the Astro setup, all you need to do now is set the remote and push:

1
# replace <URL> with your remote URL from GitHub
2
git remote add origin <URL>
3
git push -u origin HEAD

With your blog stored in a GitHub repository, you can now deploy it to the web.

Deploy to Cloudflare#

To deploy your blog to the web, you need to connect Cloudflare to your new GitHub repository.

Sign in to the Cloudflare dashboard and head to Workers & Pages, then click the “Create application” button.

Choose “Import a repository”, authenticate with GitHub, and select your new GitHub repository.

Enter a project name and click the “Create and deploy” button. Leave the rest of the options at their defaults.

That’s it! After a few moments, Cloudflare will build your blog and deploy it to the web.

To access your public blog, set a domain name in the project settings. If you don’t have your own domain, Cloudflare offers a free workers.dev subdomain route.

Conclusion#

Now that you have linked Cloudflare to your GitHub repository, it will automatically monitor and deploy any changes that you push.

You now have a fully automated workflow for maintaining and deploying your blog.