Introduction

This article builds upon the concept of a static MDX blog created in Next.js, as detailed in the original article Simple Static MDX Blog. We'll focus on adding a new feature: automatically generating and updating a sitemap using GitHub Actions. This approach ensures that new content is promptly indexed by search engines, improving your blog's SEO.

Prerequisites

• A Next.js MDX blog set up as per the guide in the original article.
• Your project hosted on GitHub.

What are GitHub Actions?

GitHub Actions is a continuous integration and continuous deployment (CI/CD) platform that allows you to automate your build, test, and deployment pipelines directly within your GitHub repository. It's integrated into GitHub and does not require an external site to run.

• Workflows: Actions are defined in workflows, which are automated processes that are defined in YAML files and stored in the .github/workflows directory of a repository.
• Events: Workflows can be triggered by various GitHub events, like a push to a branch, a pull request, or on a schedule using cron syntax.
• Jobs and Steps: Each workflow consists of one or more jobs, and each job consists of a series of steps. These steps can execute commands or use community-created actions to perform tasks.

Step 1: Understanding the Sitemap Concept

A sitemap is an XML file listing all the URLs of a website. It's essential for SEO as it helps search engines discover and index your content.

Installing and Configuring next-sitemap

next-sitemap is a package that simplifies the generation of a sitemap for Next.js projects. It automatically generates a sitemap based on the exported pages from your Next.js application.

Installation

1. Install the Package: Run the following command in your Next.js project directory to install next-sitemap:

   bashCopy
   npm install next-sitemap
   

   or if you use Yarn:

   bashCopy
   yarn add next-sitemap
   

2. Create a Configuration File: Create a next-sitemap.js file in the root of your project. This file will contain the configuration for your sitemap.

   javascriptCopy
   module.exports = {
     siteUrl: "https://www.yourdomain.com",
     generateRobotsTxt: true, // (optional)
     // ...other options
   };
   

   Replace 'https://www.yourdomain.com' with your site's actual URL.

3. Update the Scripts in package.json: Add a script to generate the sitemap.

   jsonCopy
   "scripts": {
     "build:sitemap": "next-sitemap"
   }
   

Usage

After setting up the next-sitemap, you can generate the sitemap by running:

bashCopy
npm run build:sitemap

This command will generate a sitemap.xml and, if enabled, a robots.txt in your public directory.

Step 2: Setting Up GitHub Actions

GitHub Actions is a CI/CD platform that automates workflows, including building, testing, and deploying code directly from GitHub repositories.

Integrating next-sitemap with GitHub Actions

In the context of your GitHub Actions workflow, after the Next.js project is built, you would run the build:sitemap script to generate the updated sitemap. The workflow will then commit this new sitemap to your repository, triggering any configured deployments (like on Vercel).

This integration ensures that your sitemap is always up to date with the latest content from your site, improving SEO and the discoverability of your content by search engines.

By following these steps, developers can set up an automated process to manage sitemaps efficiently, enhancing their Next.js projects with improved SEO practices.

1. Create a Workflow File: In your repository, navigate to .github/workflows/ and create a new file named sitemap.yml.

2. Configure the Workflow: Add the following content to sitemap.yml:

   yamlCopy
   name: Generate Sitemap
   
   on:
     schedule:
       - cron: "0 0 * * *" # Run daily at midnight UTC
     workflow_dispatch: # Manual trigger
   
   jobs:
     build:
       runs-on: ubuntu-latest
       permissions:
         contents: write
   
       steps:
         - name: Checkout Repository
           uses: actions/checkout@v2
   
         - name: Set up Node.js
           uses: actions/setup-node@v2
           with:
             node-version: "20"
   
         - name: Install Dependencies
           run: npm install
   
         - name: Build Project
           run: npm run build
   
         - name: Generate Sitemap
           run: npm run build:sitemap
   
         - name: Push Changes
           run: |
             git config --global user.name 'Your Name'
             git config --global user.email 'Your Email'
             git add public/*.xml
             git commit -m "Update sitemap"
             git push
   

Step 4: Testing the Workflow

• Manual Trigger: Use the workflow_dispatch event to manually trigger the workflow and ensure it runs correctly.
• Verify: Check if the sitemap is correctly generated in the public directory and pushed to your repository.

Step 5: Understanding the Impact

This automated process ensures that any new blog posts or changes are quickly reflected in your sitemap, aiding search engines in indexing your site efficiently.

Conclusion

Automating the generation of a sitemap using GitHub Actions is a powerful way to enhance the SEO of your Next.js MDX blog. It ensures that your content is discoverable and indexed promptly, improving your online visibility.

For a more detailed guide and in-depth explanations of each step, refer to the original article on creating a static MDX blog in Next.js.

This tutorial provides a concise yet comprehensive guide on integrating automated sitemap generation into a Next.js MDX blog using GitHub Actions, enhancing the blog's SEO and indexing capabilities.