Maffin Blog

Landing page: https://maffin.io

Blog: https://blog.maffin.io

Our demo: https://demo.maffin.io

---

This repo contains the source code that hosts https://blog.maffin.io

• Uses github issues to host content.
• 🌳 Uses Next.js static build to list all the issues and create dynamic routes.
• 🌍 Deployed in Github pages

🏖️ Summary

Our blog posts are written as github issues in markdown syntax. This already gives us loads of useful features like author, labels, dates and even comments!

We use octokit to download the issues' metadata and content. The content is then transformed using remark and rehype and the resulting HTML is injected to our components written in React and styled in Tailwindcss.

Do you want more details? Follow our two posts we wrote about how we implemented it:

• 🧰 Using github issues as a CMS for your blog
• 🕸️ Static server rendering with Next.js

💻 Developing

If you want to customise, follow this steps:

• Clone the repo.
• Inside the folder, run yarn to install dependencies.
• Once done, run yarn dev and you can access the blog at http://localhost:3000/.

If you want to see the magic of server rendering, check it with yarn build. It will result with something like:

Route (app)                                    Size     First Load JS
┌ ○ /                                          180 B          91.3 kB
├ ○ /_not-found                                885 B          85.2 kB
├ ● /posts/[slug]                              195 B          91.3 kB
├   ├ /posts/gapi-authentication-nextjs
├   ├ /posts/static-server-rendering-nextjs
├   └ /posts/github-issues-as-nextjs-blog-cms
├ ○ /tags                                      180 B          91.3 kB
└ ● /tags/[tag]                                181 B          91.3 kB
    ├ /tags/next.js
    ├ /tags/engineering
    └ /tags/octokit
+ First Load JS shared by all                  84.3 kB
  ├ chunks/69-c7efea4b65083e7f.js              29 kB
  ├ chunks/fd9d1056-cc48c28d170fddc2.js        53.4 kB
  └ other shared chunks (total)                1.91 kB

Note that you will be downloading the issues from this current repo. You probably want to update

maffin-blog/src/app/api/getPosts.ts

Lines 42 to 50 in 09fd034

	const issues = (await octokit.rest.issues.listForRepo({
	owner: 'maffin-io',
	repo: 'maffin-blog',
	creator: 'argaen',
	labels,
	headers: {
	accept: 'application/vnd.github+json',
	},
	})).data.filter(issue => !issue.pull_request && !issue.title.includes('[draft]'));

with the data from your repo.

Helping out

If you find this useful, please remember to leave a star and/or share! 😸