pioug/blog

Static blog hosted on GitHub Pages, deployed via GitHub Actions, edited on GitHub Issues, build with 11ty

blog's Issues

Hello World!

Proof of concept

The main idea is creating a static blog with 11ty, hosted on GitHub Pages, deployed via GitHub Action, editable with GitHub Issues. See the repository https://github.com/pioug/blog.

Workflow

1. Create (or edit) an issue in the GitHub repository.
2. GitHub Actions receives an issues event.
3. A workflow fetches all issues in the repository using the GraphQL API of GitHub then uses Eleventy to compile the Markdown files using the body of the issues. The front matter is built from the title, tags and creation date of the issues.
4. Another workflow git-commits and git-pushes the build folder to the GitHub Pages branch.
5. GitHub Pages assets are automatically refreshed.

Why

• Reuse the label system to manage the post tags (easy to assign, rename on GitHub).
• Articles are updated automatically as soon as I finish editing the corresponding issues.
• Image upload is simple as copy-pasting an image on GitHub
• No web server, no file bucket, no CDN to manage.
• The articles are editable in the browser.
• Bonus: No vendor lock-in? I feel like I could easily change the Docker/scripting part (used by GH Actions) or the hosting (S3 + CF) or the static site generator or without too much trouble. I can always return to markdown files if GitHub issues are a bad idea.
• Bonus: Giving editing permissions could be as simple as giving adding a collaborator to the repository.

How

• Start from https://github.com/11ty/eleventy-base-blog 🐣

• Pull issues via the GraphQL API 💥 https://github.com/pioug/blog/blob/master/gulpfile.js#L9

• Deploy static assets in workflows 👨‍🚀 https://github.com/pioug/blog/blob/master/.github/main.workflow

• Run updates via GitHub Actions 🤖 https://github.com/JamesIves/github-pages-deploy-action

Test

• Support code snippet 👨‍💻

console.log("Verify nice markdown support");

• Include image uploaded via GitHub 🎆

it seems the GraphQL API is not work

rewrite the gulpfile.js

headers: {
      Authorization: `Bearer ${GH_API_TOKEN}`,
      "User-Agent": "ArtUsr"
    },
    asJSON: true
  });

And

 query ($number_of_issues: Int!) {
      repository(owner:"ArtUsr", name:"blog")

Before this modify , i have already enable issues and Store GitHub access token as Secrets.
My repository https://github.com/ArtUsr/1st

How to deploy this blog system

thx your nice work

Migrate GitHub Actions from HCL to YAML syntax

Testing the new YAML syntax 💨