Build a small Markdown publishing system
https://patrickz.ai/learn/markdown-publishing/

OUTCOME
Publish two readable posts with a dependable index and safe rendering.

STACK
JavaScript · Markdown · GitHub Pages

TRY PATRICK'S VERSION
Browse the PerfectBlog build: https://perfectz.github.io/PerfectBlog/

YOU NEED
A coding agent, basic Markdown and a static hosting preview.

1. Set your boundary
Define title, slug, summary and category before writing a renderer. Use a maintained Markdown parser with an explicit policy for raw HTML.

2. Create the folder
Create index.html, styles.css and a posts folder.

3. Write two posts
Write one Markdown post with simple metadata (title, slug, summary and category), then a second one.

4. List them in the index
Add each post’s path to posts/index.json.

5. Render safely
Fetch the post and render it with a maintained Markdown parser. Turn raw HTML off and block javascript: links.

6. Handle unknown slugs
When a slug is not in posts/index.json, show a clear not-found message with a link back to the post list.

7. Publish the folder
Publish the folder with a GitHub Actions Pages workflow.

LATER (NOT TODAY)
- Category filter: Once both posts pass the checks, add a category filter.

PROMPT
Help me build a no-build Markdown blog in plain JavaScript in a new practice folder. First version only: two posts with title, slug, summary and category frontmatter, a posts/index.json list, safe rendering and a not-found view. No category filter or extra frontmatter fields yet. List the setup commands before changing any files. Then work in six checkpoints and, after each, tell me how to check it:
1. index.html, styles.css and a posts folder.
2. Two Markdown posts with that frontmatter.
3. Both paths listed in posts/index.json.
4. Rendering with [a maintained Markdown parser you name and explain], raw HTML off and javascript: links rejected.
5. A not-found message for unknown slugs, linking back to the list.
6. A GitHub Actions Pages workflow that publishes the folder.
Add a test post with a <script> tag and a javascript: link to confirm neither runs. My blog topic: [one sentence].

FOLLOW-UP PROMPT
Review this Markdown blog for unsafe rendering. Check the parser’s raw HTML setting, how links are filtered, what an unknown or malformed slug shows, and whether a post with a <script> tag or a javascript: link can run anything. List each gap and a test that proves the fix.

EXAMPLE / EXPERIMENT
Create two posts, navigate to each directly and test an unknown slug. Include code characters and a long heading to check rendering and overflow. Add one test post with a <script> tag and a javascript: link and confirm neither runs.

CHECK YOUR RESULT
[ ] Both posts have stable direct URLs.
[ ] Unknown slugs display a useful not-found page.
[ ] Untrusted Markdown cannot inject executable HTML.

IF IT FAILS
A hand-written Markdown converter is a teaching experiment, not a safe general-purpose parser. For static trusted authoring, pre-rendering pages can simplify the runtime.

MY RESULT / NEXT CHANGE