fles / myblog Goto Github PK

In this article, I will show how to create your own developer-focused blog that lets you publish your own posts by creating an issue on GitHub. You don't have to sign up for anything or even log in. Just create an issue and that's your first post.

Since it's backed by GitHub issues, anybody with a GitHub account can add a comment or reaction to your post and you'll get a notification through the GitHub notification system that you're already familiar with.

If you ever want to move your content to a different platform, you can export all of your data in full fidelity as markdown or HTML.

How it works

Issues are fetched from GitHub using OneGraph's persisted GraphQL queries. Persisted queries are an underutilized GraphQL feature with many benefits over plain queries. The benefit that makes them well-suited for our use-case is that we can attach metadata to the query.

GitHub doesn't allow unauthenticated queries, so we attach a default auth to the query when we persist it. We also tell OneGraph to only allow requests for issues from the digitalblog repo and to cache the results of the query for 5 minutes so that we don't blow through our rate limit. You can read more about persisted queries in the OneGraph docs.

We use the wildcard domains support from Vercel and next.js to determine the author from the subdomain. The first part of the subdomain tells us which GitHub user's issues to fetch.

Features

• Comments and reactions backed by GitHub.
• Full markdown support.
• Beautiful code highlighting with support for 90 languages and 20 themes.
• Fully-featured RSS feed, with the proper meta tags for auto-discovery.
• Open Graph tags so that your posts look great when you share them on social media.
• SEO friendly, with a sitemap properly linked from the robots.txt so that search engines will find you.

How to create a blog

Prerequests:

• Github account connected to Vercel
• Vercel account connected to OneGraph and GitHub
• OneGraph account connected to GitHub account

1. To host your content yourself or on your own domain, there's a Vercel button for that.

2. Open OneGraph to create a new app (or rename the existing one).

3. Generate 2 tokens on OneGraph:
   a) Auth Services > Server-side > Personal token > Create personal Token
   b) Persisted Queries > Your API Tokens for Persisting Queries > Create Token

4. Setup project environment variables (Vercel)

Environment Variable	Description
OG_GITHUB_TOKEN	A server-side access token created on OneGraph, used as the default auth for the persisted queries that will fetch the issues. To create a new one, go the "Server-side Auth" tab in the OneGraph dashboard for your app, click the "Create Token" button, and add GitHub to the services. Keep this token safe, because it has access to your GitHub data.
OG_DASHBOARD_ACCESS_TOKEN	An API token that allows you to create persisted queries on OneGraph. Go to the "Persisted queries" tab on the OneGraph dashboard, scroll down, and click "Create token". This will create a scoped token for your app that can create persisted queries on your behalf.
NEXT_PUBLIC_ONEGRAPH_APP_ID	The id of your OneGraph app. You can get this from the OneGraph dashboard
NEXT_PUBLIC_TITLE	The title of your site

After that, Vercel will deploy your blog (you can find the link on your Vercel dashboard).