Hello World!

09 Jul 2019

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 #

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

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

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

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

Test #

• [x] Support code snippet 👨‍💻

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

• [x] Include image uploaded via GitHub 🎆