Moving to a GitHub CMS

[swyxio]

---

category: essay
subtitle: Why I chose to use GitHub Issues as a CMS (and you should too!)
tags: github cms

Here are my requirements for blogging platforms:

• Should be easy and fast to update - no long or flaky build process
• Should store images easily - as simple as a paste from my clipboard - anything else is unnecessary friction
• Should be easily editable from mobile
• (optional) should support comment system and different layout formats
• (optional) wysiwyg markdown based editing - no funky blocks with lots of lockin

After thinking through local markdown, GraphCMS, Notion, Strapi, Directus, and so on, I've finally settled on using GitHub as a CMS.

I've long admired the OneGraph approach to blogging:

• https://github.com/OneGraph/onegraph-blog
• https://github.com/OneGraph/onegraph-changelog/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed+label%3APublish

However their use of Relay is a bit too high overhead for me. So I built my own using just the GitHub REST API.

The primary problem with GH's API is that it rate limits at 5000 requests an hour, which is dicey for a high traffic blog. So either you prerender at build, or you cache on request (we can also cache on build). Netlify's On Demand Builders are a partial solution to this - partial because content updates will not be respected. I think this is an acceptable tradeoff for all the other functionality github as a cms offers.

The PR for doing this is available here: #9

Edit: users may also want to explore using Utterances for authed comments https://github.com/utterance/utterances

Edit 2: I answered some FAQs here #50

[swyxio]

this is a test comment

[swyxio]

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti fugiat quod non ipsum perspiciatis voluptatum pariatur explicabo enim, suscipit sapiente, quo perferendis amet sint voluptates. Quibusdam ullam voluptatibus expedita repudiandae quos tenetur, modi eligendi eos. Sit cum unde dolor assumenda error, suscipit earum, corrupti molestias vero quae incidunt enim aspernatur magni inventore reprehenderit esse rerum quas, at itaque? Autem repellendus cupiditate natus vero inventore sit!

let foo = 123

Excepturi expedita optio in! Sapiente rerum fuga dignissimos odit iure laboriosam earum non dolores obcaecati repellendus ipsum minus enim eum et, totam facere? Doloribus autem sed magni nobis aspernatur nulla officiis impedit nostrum obcaecati assumenda!

[sahilsharma011]

How long does it take for new reactions to come on the netlify rendered blog?
Also testing out editing comments and checking out the rendering.

[sahilsharma011]

So I can't see my comment edits on the rendered blog because I think that is due to the edge caching you mentioned on netlify?
But before opening up the netlify site, I added some reactions to your comments and even those were not visible for me when I visited the site for the first time.

[swyxio]

yeah because i cache the api response for 1min-1hr.

i think if you retry on incognito it will work

i have not implemented reactions on comments yet… pr welcome for that one haha

[swyxio]

test comments for testing markdown rendering in comments. its buggy right now, i think bc of the sanitization

Snarkdown

Snarkdown is easy to use!

Here's an important anchor link.

Two newlines creates a line break.

Or, end a line with two spaces.
Just like that!

Code & Poetry

You can also indent
blocks to display
code or poetry.

Indented code/poetry blocks  
can be hard-wrapped.

Or, wrap your code in three backticks:

function codeBlocks() {
    return 'Can be inser
}

Block Quotes

You can insert quotes by
preceeding each line with >.

Blockquotes can also contain line
breaks.

Lists

• Unordered

• Lists

• Of mixed type

1. Ordered
2. Lists
3. Numbers are ignored

[lawrencecchen]

noice.

[swyxio]

i fixed the buggy snarkdown rendering with the string replace recommended here developit/snarkdown#69

[avblackwell]

This is really cool!

[Klerpson]

wow is amazing

[RyKilleen]

Curious to see if it supports syntax highlighting for a given language

function veryCool() {
   console.log('awesome approach!')
}

[swyxio]

haha no, because this is all rendered clientside and i didnt want to add extra js weight, but you should be able to add highlight.js easily

[pi43r]

<script>alert('this should not happen');</script>

Hello World!

[miedzikd]

<script> import FeatureCard from '$lib/../components/FeatureCard.svelte'; </script>

Hello

It will be awesome if this can work ;)

[pi43r]

<script> import FeatureCard from '$lib/../components/FeatureCard.svelte'; </script>

Hello

It will be awesome if this can work ;)

It would be a major security flaw if this would work ;)