Using GitHub as a Content Management System

GitHub can be a surprisingly effective Content Management System (CMS) for your projects. Here's how you can use it:

Why Use GitHub as a CMS?

Simplicity: GitHub provides a straightforward interface for managing your content.
Version Control: GitHub's built-in version control system allows you to track changes and collaborate with your team.
Ecosystem Integration: GitHub integrates with a wide range of tools, making it easy to automate your content management processes.
Cost-Effective: GitHub offers free and paid plans, making it a budget-friendly solution.

How to Use GitHub as a CMS

Create a Repository: Start by creating a new GitHub repository to store your content.
Implement the GithubAPI: Use the provided GithubAPI class to interact with your GitHub repository programmatically:

typescript

class GithubAPI {
  private readonly headers: Record<string, string>;
  private readonly baseUrl: string;
  constructor(
    private readonly configs: {
      token: string;
      repo: string;
      username: string;
      email: string;
    }
  ) {
    this.headers = {
      Accept: 'application/vnd.github.+json',
      Authorization: `Bearer ${this.configs.token}`,
      'X-GitHub-Api-Version': '2022-11-28',
    };
    this.baseUrl = `https://api.github.com/repos/${this.configs.username}/${this.configs.repo}/contents`;
  }

  async getContent(path: string): Promise<{ content: string; sha: string }> {
    const response = await fetch(this.baseUrl + path, {
      headers: this.headers,
    });
    if (!response.ok) {
      throw new Error(
        `GitHub API request failed with status code ${response.status}`
      );
    }
    const data = await response.json();
    return { content: atob(data.content), sha: data.sha };
  }

  async updateContent(
    path: string,
    data: { content: string; commitMessage: string },
    sha?: string
  ): Promise<string> {
    const headers = {
      ...this.headers,
    };
    const body = JSON.stringify({
      message: data.commitMessage || `Trigerred by ${this.configs.username}`,
      sha,
      committer: {
        name: this.configs.username,
        email: this.configs.email,
      },
      content: btoa(data.content),
    });
    const response = await fetch(this.baseUrl + path, {
      method: 'PUT',
      headers,
      body,
    });
    if (!response.ok) {
      throw new Error(
        `GitHub API request failed with status code ${response.status}`
      );
    }
    return await response.json();
  }
}
// ...

Retrieve Content:

typescript

const gh = new GithubAPI({
  repo: 'your-repo',
  email: 'your-email',
  token: 'your-github-token',
  username: 'your-github-username',
});

const res = await gh.getContent('path/to/your-content.md');
console.log(res.content); // Access the content of the file

Update Content:

typescript

const updatedContent = 'This is the updated content.';
const commitMessage = 'Update content';

await gh.updateContent(
  'path/to/your-content.md',
  { content: updatedContent, commitMessage }
);

Example: Blogging with GitHub

Using GitHub as a CMS is particularly useful for blogging. Here's how you can set it up:

Create a new GitHub repository to store your blog posts.
Implement the GithubAPI class and use it to manage your blog content.
Develop a front-end application (e.g., using React or Angular) that retrieves and displays the blog posts from your GitHub repository.

By leveraging GitHub as your CMS, you can take advantage of its version control, collaboration, and ecosystem features, making it a powerful and flexible solution for your blogging needs.

Conclusion

GitHub can be a surprisingly effective CMS for your projects. Its simplicity, version control, and ecosystem integration make it a viable option, especially for small to medium-sized projects. The GithubAPI class provided in this guide can help you get started with using GitHub as a CMS in your own applications.