Why Automate Your Static Website Deployment?#

Static websites consisting of HTML, CSS, and JavaScript files served directly to browsers—offer great performance and security compared to dynamic sites. However, without automation, you’re stuck manually building and uploading files every time you make a change.

An automated workflow eliminates these repetitive tasks, allowing you to:

• Focus on content rather than deployment logistics
• Deploy changes instantly with version control integration
• Implement proper testing and preview environments
• Benefit from global CDN distribution automatically
• Manage domains and SSL certificates effortlessly

Let’s explore how GitHub, Vercel, Cloudflare and Astrojs work together to create this seamless experience.

Understanding the Tools in Our Stack#

The Complete Workflow Visualization#

Before diving into the setup, let’s visualize the entire automated workflow with a Mermaid diagram:

This diagram illustrates how code flows from development through GitHub’s version control system, triggers Vercel’s automated deployments, and connects with Cloudflare for domain and security management.

Setting Up Your GitHub Repository with an astrojs skeleton#

• Create an Astrojs project using pnpm :

pnpm create astro@latest

This command will initiate the Astro setup wizard, which will guide you through several options, such as choosing a starter template. You can select a minimal template for a basic setup or explore other templates like blog or portfolio depending on your project’s needs. Alternatively, you can use the --template flag to specify a template directly.

After specifying the project name and selecting your desired options, the Astro CLI will create the project directory and install the necessary dependencies using pnpm. Once the process is complete, navigate into your newly created project directory using the cd command :

cd your-project-name

During the project initialization, pnpm will create a pnpm-lock.yaml file. This file ensures that the exact versions of your project’s dependencies are installed every time, providing consistency across different environments. Unlike npm and yarn, pnpm structures the node_modules directory using symlinks, which contributes to its efficiency in disk space usage . To start the Astro development server and preview your website locally, run the following command :

pnpm dev

This command will typically start the development server at http://localhost:4321/. Open this URL in your browser to see your new Astro website in action. As you make changes to your project files in the src directory, Astro will automatically update the preview in your browser, providing a seamless development experience.

Astro basics

A typical Astro project structure includes a src directory where your website’s code resides, with src/pages being the primary location for creating website pages. The astro.config.mjs file in the project root is used for configuring various aspects of your Astro project, such as integrations and build settings.

With your Astro project set up using pnpm, you are now ready to proceed with automating the deployment process, but first let’s initiate a git repository :

• Go to GitHub and click “New repository”
• Name your repository (ideally matching your domain name)
• Add a description and set visibility (public or private)
• Initialize with a README file
• Click “Create repository”

• In a fresh terminal, Stage, commit and push to GitHub :

• git clone yourURL the new repository with url (if public), if not use your ssh public key and update it on your profile.

• Stage all your files with :

git add .

• Commit the changes with :

git commit -m "Initial commit of Astro project"

• and push to the remote repository on github :

git remote add origin
git push -u origin main

Use Visual Studio Code

Link your github identity and open your repository folder to vscode are strongly advised, you will benefits of the github mutiple sorfware implementation et push changes easier and faster.

Configuring Vercel for Automated Deployments#

Vercel’s integration with GitHub creates a seamless deployment pipeline. Let’s set it up:

Setting Up Cloudflare for DNS and TLS Management#

While Vercel provides its own domain and SSL management, using Cloudflare gives you additional security features and control:

Adding Your Custom Domain to Vercel#

Now, connect your Cloudflare-managed domain to your Vercel project:

1. In Vercel dashboard, select your project
2. Go to “Settings” > “Domains”
3. Enter your domain name :

4. Click “Add Domain”
5. Vercel will verify the DNS configuration

If your DNS is configured correctly in Cloudflare, Vercel will verify the domain successfully. If not, Vercel will provide instructions to fix the configuration.

Automating Dependency Updates with Dependabot#

Dependabot is a powerful tool that automatically updates dependencies in your project through pull requests (PRs). Here’s how you can set it up :

• Navigate to your repository’s settings on GitHub.

• Under the “Security” section, enable Dependabot alerts, security updates, and version updates.

• Add a dependabot.yml file in the .github folder at the root of your repository:

version: 2
updates:
  - package-ecosystem: "npm"
    directory: "/"
    schedule:
      interval: "daily"
    groups:
      patch-updates:
        patterns:
          - "*"
        update-types:
          - "patch"
      minor-updates:
        patterns:
          - "*"
        update-types:
          - "minor"
    pull-request-branch-name:
      separator: "-"
    ignore:
      - dependency-name: "*"
        update-types: ["version-update:semver-major"]

This setup ensures that dependency updates are reviewed and create a pull request with vercel preview, keeping your project secure and up-to-date without modifying files yourself and have a live and automated preview of the website with the modifications by dependabot :

Preview of a commit in vercel, you have a domain name provided for free vercel.app and special subdomains assigned to each commits, that way you can have preview of the project at specific time/commit as well as rollbacks :

You can merge or resolve conflict directly at the bottom of the pull request.

Benefits of This Automated Workflow#

This setup offers numerous advantages :

Troubleshooting Common Issues#

Conclusion#

By combining tools like GitHub, Vercel, Cloudflare, Astrojs, pnpm, and Dependabot, you can create a seamless automated workflow that simplifies the development and deployment of static websites while ensuring optimal performance and security.

This approach not only saves time but also allows you to focus on building great content without worrying about infrastructure or manual deployments! With Dependabot integrated into the workflow, keeping dependencies secure and up-to-date becomes effortless—ensuring your project remains robust against vulnerabilities while maintaining excellent performance standards.