If you have been following blog posts on this site, you may know that I pre-render HTML pages and serve them as static content.

Recently, I came up with a use case for adding announcements to my blogging site. These announcements could inform readers about upcoming features, interesting ideas I'm working on, or other updates. At first, it seemed simple—I just needed to create a React component and add some text to it, similar to the following component:

const Announcement = () => (
  <div className="announcement">This is an announcement.</div>
);

But one thing that I don't like about this approach is – that the announcement becomes part of the generated static HTML. Every time I need to update the announcement, I must modify the codebase and redeploy the entire site.

So, let's solve this problem! We have all heard of Next.js client-side components, and GitHub provides a fantastic feature called Gist. Gists are free to use and support a wide range of content formats. By combining these two, we can create a dynamic and efficient announcement feature.

Here are the steps –

1. Lets make announcement as a client side components that fetches data from a specified Gist and displays it dynamically. Something like this –

"use client";
import React from "react";
import { NewReleasesOutlined } from "@mui/icons-material";
import useSWR from "swr";
import axios from "axios";

const fetcher = (url) => axios.get(url).then((res) => res.data);

const AnnouncementFromGist = ({ gistId }) => {
  const { data, error, isLoading } = useSWR(
    `https://api.github.com/gists/${gistId}`,
    fetcher
  );

  return (
    <>
      {!error && !isLoading && data && (
        <div className="flex gap-7 bg-secondary-700 px-5 py-8 flex-col md:flex-row">
          <span className="font-bold text-xl min-w-max flex gap-1 items-center justify-center">
            <NewReleasesOutlined />
            Announcement
          </span>
          <div
            className="text-base external-link"
            dangerouslySetInnerHTML={{
              __html: Object.values(data.files).map((file) => file.content),
            }}
          ></div>
        </div>
      )}
    </>
  );
};

export default AnnouncementFromGist;

2. Create a public Gist on GitHub, add the announcement content, and note down the Gist ID (which can be found in the URL).
3. Pass the Gist ID to the component, and voilà—it will render the announcement on the client side.

Now, updating the announcement is as simple as modifying the Gist content—no need to redeploy the entire site!

Have a look at the up and running announcement here.

This is just one possible solution. We could enhance the component to display multiple announcements by reading multiple Gist files. Alternatively, instead of using Gist, we could fetch data from a publicly hosted file on Google Drive or take it a step further by displaying tweets dynamically. The possibilities are endless—we just need to find the approach that excites us the most!

Cover Photo by Mikhail Nilov.