Mervia AcademyLearn
เวิร์กช็อป Markdown 10xMarkdown 10x Workshop

Markdown 104: สร้าง GitHub READMEMarkdown 104: build a GitHub README

สร้าง README ที่อ่านง่ายตั้งแต่ต้น ลอง preview ใน editor บนหน้านี้ แล้วเปิด draft จริงต่อใน Markdown previewer ของ gardenBuild a clean README from scratch, preview it in the embedded editor, then move real drafts into the full garden Markdown previewer.

The final skill is not memorizing more syntax. It is knowing what a good README needs to do.

A beginner README has one job:

Help a reader understand what this project is, how to try it, and what to trust.

That reader might be a teammate, a future employer, a student, or you six months from now.

The README skeleton

Start with this structure:

# Project Name

One or two sentences explaining what the project does.

## Why it exists

Short context. What problem does it solve?

## Quick start

Commands or steps to run it.

## Features

- Feature one
- Feature two
- Feature three

## Status

What works now, what is still missing, and what should not be trusted yet.

You can add more later, but this is enough for a useful first README.

Write the title and summary

The title should be literal.

Good:

# Markdown Practice Editor

Too vague:

# My Cool Project

The summary should say what the project does in one breath:

A browser-based editor for writing Markdown and previewing GitHub-style README files.

Add quick start commands

If the project is code, the README should tell a reader how to run it.

## Quick start

```bash
pnpm install
pnpm run dev
```

If the project is not code, write the first action instead:

## Quick start

1. Open the template.
2. Replace the example text with your project details.
3. Export the result as Markdown.

Make status honest

A README is more trustworthy when it says what is unfinished.

## Status

- [x] Live preview
- [x] Copy Markdown
- [ ] Save drafts
- [ ] Share public links

> This is a learning project, not a production editor yet.

Honest status helps people use the project correctly.

Practice: edit the README

Use the editor below. It supports GitHub-flavored Markdown features such as tables, task lists, and footnotes.

Try these changes:

  1. Rename the project.
  2. Replace the one-sentence summary.
  3. Add one feature.
  4. Check off one task.
  5. Copy the Markdown.

ทักษะสุดท้ายไม่ใช่การจำ syntax เพิ่มครับ

แต่คือการรู้ว่า README ที่ดีต้องทำหน้าที่อะไร

README สำหรับมือใหม่มีงานหลักหนึ่งอย่าง:

ช่วยให้คนอ่านเข้าใจว่า project นี้คืออะไร ลองใช้ยังไง และควรเชื่อส่วนไหนได้บ้าง

คนอ่านคนนั้นอาจเป็น teammate, นายจ้างในอนาคต, นักเรียน หรือแม้แต่ตัวคุณเองในอีกหกเดือน

โครง README

เริ่มจากโครงนี้:

# Project Name

One or two sentences explaining what the project does.

## Why it exists

Short context. What problem does it solve?

## Quick start

Commands or steps to run it.

## Features

- Feature one
- Feature two
- Feature three

## Status

What works now, what is still missing, and what should not be trusted yet.

จะเพิ่มส่วนอื่นทีหลังก็ได้ แต่แค่นี้เพียงพอสำหรับ README แรกที่มีประโยชน์แล้ว

เขียน title และ summary

title ควรตรงตัว

ดี:

# Markdown Practice Editor

กว้างเกินไป:

# My Cool Project

summary ควรบอกว่า project ทำอะไรในหนึ่งลมหายใจ:

A browser-based editor for writing Markdown and previewing GitHub-style README files.

เพิ่ม quick start

ถ้า project เป็น code README ควรบอกคนอ่านว่ารันยังไง

## Quick start

```bash
pnpm install
pnpm run dev
```

ถ้า project ไม่ใช่ code ให้เขียน action แรกแทน:

## Quick start

1. Open the template.
2. Replace the example text with your project details.
3. Export the result as Markdown.

เขียน status ให้ซื่อสัตย์

README จะน่าเชื่อถือขึ้นเมื่อบอกชัดว่ายังทำอะไรไม่เสร็จ

## Status

- [x] Live preview
- [x] Copy Markdown
- [ ] Save drafts
- [ ] Share public links

> This is a learning project, not a production editor yet.

status ที่ซื่อสัตย์ช่วยให้คนใช้ project ได้ถูกวิธี

แบบฝึก: แก้ README

ใช้ editor ด้านล่างได้เลยครับ ตัว editor รองรับ GitHub-flavored Markdown เช่น table, task list และ footnote

ลองแก้ตามนี้:

  1. เปลี่ยนชื่อ project
  2. เปลี่ยน summary หนึ่งประโยค
  3. เพิ่ม feature หนึ่งข้อ
  4. ติ๊ก task หนึ่งข้อให้เสร็จ
  5. คัดลอก Markdown

ลองเขียนเองTry it here

พื้นที่ฝึก MarkdownMarkdown practice

แก้ข้อความด้านซ้าย แล้วดู README ที่ถูก render ทางขวาEdit on the left and watch the rendered README on the right.

เปิดตัวเต็มOpen full preview
ตัวอย่างผลลัพธ์Preview

Awesome Project

A short README for a small tool that helps teams write clearer notes.

What it does

  • Converts messy notes into a structured summary
  • Exports Markdown for GitHub, Notion, or docs
  • Keeps decisions visible

Quick start

pnpm install
pnpm run dev

Checklist

  • Add project summary
  • Document setup
  • Add screenshots

Features

FeatureStatus
Live previewDone
Copy buttonDone
Share linkNext

Keep the README useful before it becomes complete.

Learn more in the full previewer.

Tiny details matter.1

Footnotes

  1. A footnote is useful when extra context should not interrupt the main README.

Move real drafts to the full previewer

The embedded editor is intentionally small. It is for practice inside the lesson.

When you want to work on a real README:

  1. Copy your Markdown from this lesson.
  2. Open the full garden Markdown previewer.
  3. Paste the draft there.
  4. Preview the README at a larger size.
  5. Copy the final Markdown into README.md in your project.

Export and share

For GitHub, the export step is simple: the Markdown text is the source of truth.

Common sharing paths:

  • commit the text as README.md
  • paste it into a GitHub issue or pull request
  • paste it into Notion, Slack, or a docs page that supports Markdown
  • keep a local .md file for drafting

Before sharing, scan for:

  • private tokens, API keys, emails, or internal URLs
  • commands that could delete files
  • screenshots that reveal private data
  • vague status claims like "production ready" when it is not

Final checklist

You now know enough Markdown to write useful READMEs.

  • headings and paragraphs
  • bold and italic
  • lists and checklists
  • blockquotes and code blocks
  • links, images, tables, and footnotes
  • README structure

The next step is repetition. Every time you start a small project, write the README earlier than feels necessary. It will clarify the project while you build it.

ย้าย draft จริงไปที่ previewer ตัวเต็ม

editor ในบทเรียนนี้ตั้งใจให้เล็กและเบา ใช้สำหรับฝึกระหว่างอ่านบทเรียน

ถ้าจะทำ README จริง:

  1. คัดลอก Markdown จากบทเรียนนี้
  2. เปิด garden Markdown previewer ตัวเต็ม
  3. วาง draft ลงไป
  4. preview README ในพื้นที่ใหญ่กว่า
  5. คัดลอก Markdown สุดท้ายไปใส่ README.md ใน project

Export และ share

สำหรับ GitHub ขั้นตอน export ง่ายมาก เพราะข้อความ Markdown คือ source of truth อยู่แล้ว

วิธี share ที่เจอบ่อย:

  • commit เป็นไฟล์ README.md
  • paste ลง GitHub issue หรือ pull request
  • paste ลง Notion, Slack หรือ docs page ที่รองรับ Markdown
  • เก็บเป็นไฟล์ .md ในเครื่องสำหรับ draft

ก่อน share ให้ไล่เช็ก:

  • private token, API key, email หรือ internal URL
  • command ที่อาจลบไฟล์
  • screenshot ที่เผยข้อมูลส่วนตัว
  • claim กว้างๆ เช่น "production ready" ทั้งที่ยังไม่พร้อม

Checklist สุดท้าย

ตอนนี้คุณรู้ Markdown มากพอสำหรับเขียน README ที่ใช้งานได้จริงแล้ว

  • heading และ paragraph
  • bold และ italic
  • list และ checklist
  • blockquote และ code block
  • link, image, table และ footnote
  • โครง README

ขั้นต่อไปคือทำซ้ำครับ ทุกครั้งที่เริ่ม project เล็กๆ ให้เขียน README เร็วกว่าที่คิดว่าจำเป็น มันจะช่วยทำให้ project ชัดขึ้นระหว่างที่คุณสร้างมัน

เข้าสู่ระบบเพื่อบันทึกความคืบหน้าSign in to track your progress

เข้าสู่ระบบSign in