Hosting

Hosting your media library

You can host your media library on any file server you choose. To create a deployable folder, run the following command from your project folder:

npm run build

This command creates a folder named dist. It contains static HTML, CSS, JavaScript, and assets. Upload it to your file server.

If you do not have a hosting preference, we recommend GitLab and Cloudflare Pages.

Set up hosting on GitLab and Cloudflare Pages

Cloudflare Pages delivers your website to your audience. It takes care of building your website on Cloudflare’s servers, caching, distributing your page around the globe (using Cloudflare’s CDN), and more.

Using GitLab makes collaboration easier. Cloudflare can also use GitLab to read your source code and automatically update your site when there are new commits.

Note

We prefer GitLab because it integrates well with the Administration User Interface.

Note

Cloudflare recommends transitioning from Cloudflare Pages to Cloudflare Workers. We are waiting for more stability before updating our guidance. Feel free to use Workers today; setup is similar to the current Pages steps.

Both GitLab and Cloudflare Pages offer generous free tiers:

• Cloudflare Pages: The free plan supports unlimited requests and up to 20,000 static files.
• GitLab: The free plan includes collaboration for up to 5 users within a group.

Set up GitLab

1. Create a GitLab Account: If you don’t have one, sign up at GitLab. Do not create an enterprise account.
2. Create a new group: For easier permission control, when working together with others, create a private group.
3. Create a new project: In your new GitLab group, create a new blank private project without a README. This is the Git repository where you will upload your project folder.
4. Push the repository to GitLab: Push your project folder to the newly created GitLab project by running the following commands from your project folder.

   git remote add origin https://gitlab.com/your-group/your-project.git
   git push --set-upstream origin --all

   Replace your-group and your-project with your actual values.

Set up Cloudflare Pages

1. Create a Cloudflare Account: Sign up at Cloudflare if you don’t have an account.
2. Create a Cloudflare application: In the Cloudflare menu, open Compute (Workers).
3. Select a Pages application: Choose to create a Pages application.
4. Import from Git: Choose the option to connect to a Git repository to start importing your project.
5. Grant Access to GitLab Project: Choose GitLab and add your account. Begin the setup for your project.
6. Configure Pages Settings: Set up the build and deployment settings for your Cloudflare Pages project. After choosing the Astro framework preset, you are ready to deploy.
7. View your site: Cloudflare Pages provides you with a .pages.dev domain to view your site online.

Tip

When working with Git branches, Cloudflare automatically creates preview deployments. In GitLab, it adds a pipeline with a link to the preview deployment on your merge request overview.

Configure a Cloudflare domain

You can use Cloudflare Domains to purchase a domain registration.

To configure a custom domain:

1. Purchase a domain from Cloudflare Domains.
2. Follow the instructions in the Cloudflare dashboard to link your new domain to your Cloudflare Pages project.