Ship a real website
with Git and GitHub

Today you will not just read about programming tools. You will use them. At the end of this lesson, your own real website will be live on the internet. You will update it from the command line, like a professional programmer. 今天你不只是"读"编程工具，而是真正"用"它们。课程结束时，一个署着你名字的真网站会上线，而且你会像职业程序员一样，用命令行更新它。 วันนี้คุณจะไม่ใช่แค่อ่านเรื่องเครื่องมือของโปรแกรมเมอร์ แต่จะได้ใช้จริง จบบทเรียนนี้ เว็บไซต์จริงของคุณจะออนไลน์ และคุณจะอัปเดตมันจากคอมมานด์ไลน์แบบมืออาชีพ

How to use this page. Learn the words first. Then read two short sections about Git and GitHub. Next, practice every move in the console. The console is a safe simulator — nothing can break there. After that, do the real mission in three parts. 使用方法：先学词汇 → 读两节短文（Git 和 GitHub）→ 在"控制台"模拟器里安全地练习每个操作 → 最后分三步完成真实任务。 วิธีใช้: เรียนคำศัพท์ก่อน → อ่านสองบทสั้น ๆ (Git กับ GitHub) → ฝึกทุกท่าในคอนโซลจำลองอย่างปลอดภัย → แล้วค่อยทำภารกิจจริงสามส่วน

The whole mission in four minutes 🔊 Listen

The words you need 🔊 Listen

▶ Listen and repeat / 跟读练习 / ฝึกฟังแล้วพูดตาม

The page says a word, then gives you a quiet moment to say it back. 页面读一个词，然后留给你时间跟着读。 หน้าเว็บอ่านคำหนึ่งคำ แล้วเว้นช่วงให้คุณพูดตาม

Git — a time machine for your files 🔊 Listen

How do you save schoolwork without Git? Like this: essay.doc, essay_final.doc, essay_final_REAL.doc. It is a mess. And you still cannot see what changed between versions. 想想没有 Git 时你怎么保存作业：essay.doc、essay_final.doc、essay_final_REAL.doc……一团乱，而且你还是看不出版本之间到底改了什么。 เซฟงานโดยไม่มี Git เป็นแบบนี้: essay.doc, essay_final.doc, essay_final_REAL.doc… วุ่นวาย แถมยังมองไม่เห็นว่าแต่ละเวอร์ชันแก้อะไรไปบ้าง

Git fixes this with one idea: the commit. A commit is a snapshot of the whole project. It carries a short message, a time, and your name. The chain of commits is the project's history. Did you break something today? Go back to yesterday's commit. Git 用一个想法解决这个问题：commit（提交）。一次 commit 就是整个项目的快照，带一句说明、时间和你的名字。commit 连成链就是项目的历史。今天改坏了？回到昨天的 commit 就行。 Git แก้ปัญหานี้ด้วยไอเดียเดียว: commit คือสแนปช็อตของทั้งโปรเจกต์ พร้อมข้อความสั้น เวลา และชื่อคุณ คอมมิตต่อกันเป็นสายคือประวัติของโปรเจกต์ วันนี้ทำพัง? กลับไปคอมมิตของเมื่อวานได้เลย

The three rooms on your computer / 电脑上的三个"房间" / สามห้องบนคอมพิวเตอร์ของคุณ

Git moves your work through three places. Understanding them is ninety percent of understanding Git. Git 让你的工作经过三个地方。理解它们，就理解了 Git 的百分之九十。 งานของคุณเดินผ่านสามที่ เข้าใจสามที่นี้ ก็เข้าใจ Git ไปเก้าสิบเปอร์เซ็นต์แล้ว

• Working directory 工作目录 — the real files you see and edit. 你看得见、改得动的真实文件。 ไฟล์จริงที่คุณเห็นและแก้ได้
• Staging area 暂存区 — the "shopping basket". git add puts a change in the basket. Only what is in the basket goes into the next commit. 像"购物篮"。git add 把改动放进篮子。只有篮子里的东西会进入下一次 commit。 เหมือนตะกร้า — git add ใส่การแก้ไขลงตะกร้า เฉพาะของในตะกร้าจะเข้าคอมมิตถัดไป
• Repository 仓库 — the saved history, inside a hidden .git folder. git commit moves the basket here, forever. 保存好的历史，藏在隐藏的 .git 文件夹里。git commit 把篮子里的东西永久存进来。 ประวัติที่บันทึกแล้ว ซ่อนอยู่ในโฟลเดอร์ .git — git commit เก็บของในตะกร้าเข้ามาอย่างถาวร

There is a fourth room, but it is not on your computer: the remote — the copy of your repository on GitHub. git push sends your commits up to it; git pull brings other people's commits down. 还有第四个房间，但不在你电脑上：remote（远程仓库） — 你的仓库在 GitHub 上的那份拷贝。git push 把你的 commit 送上去，git pull 把别人的 commit 拉下来。 ยังมีห้องที่สี่ แต่ไม่อยู่บนเครื่องคุณ: remote — สำเนา repo ของคุณบน GitHub ใช้ git push ส่งคอมมิตขึ้นไป และ git pull ดึงคอมมิตของคนอื่นลงมา

Good commit messages / 好的提交说明 / ข้อความคอมมิตที่ดี

A commit message tells your teammates — and future you — what changed, in one short line. Start with a verb. commit 说明用一行短句告诉队友（和未来的你）改了什么。用动词开头。 ข้อความคอมมิตบอกเพื่อนร่วมทีม (และตัวคุณในอนาคต) ในหนึ่งบรรทัดว่าแก้อะไร ขึ้นต้นด้วยกริยา

✅ Add about page with photo
✅ Fix broken link on homepage
❌ stuff
❌ asdfasdf
❌ final final FINAL v2 (real)

GitHub — where the world shares code 🔊 Listen

The names look alike, and that is the number one beginner confusion. They are two different things that work together. 这两个名字很像 — 这是新手最容易混的地方。它们是两个不同的东西，配合使用。 สองชื่อนี้คล้ายกันมาก — มือใหม่สับสนบ่อยที่สุด จริง ๆ แล้วเป็นคนละอย่างที่ทำงานร่วมกัน

A simple picture: Git is like "Track Changes" in a document editor. But it watches a whole folder, and it is much stronger. GitHub is like a cloud drive for those folders. It is also a social network — people check each other's changes before they are accepted. 打个比方：Git 像文档软件里的"修订记录"，但管的是整个文件夹，而且强得多。GitHub 像放这些文件夹的网盘 — 再加一个社交网络，大家在改动被接受之前互相审核。 เปรียบง่าย ๆ: Git เหมือน Track Changes ในโปรแกรมเอกสาร แต่ดูทั้งโฟลเดอร์และแรงกว่ามาก GitHub เหมือนคลาวด์ไดรฟ์ของโฟลเดอร์พวกนั้น บวกโซเชียลที่คนรีวิวงานกันก่อนรับเข้า

Why a pull request, even alone? / 一个人也要用 PR？ / อยู่คนเดียวก็ใช้ PR?

On a team, nobody pushes straight to main. You work on a branch. Then you open a pull request. It says: "Here are my changes. Please review them, then merge." In this lesson you will do the same thing in your own repository. You will be both the author and the reviewer. It feels very formal. But real jobs expect exactly this habit. 在团队里，没有人直接往 main 推代码。大家在分支上工作，然后提 Pull Request："这是我的改动 — 请审核，然后合并。"这节课你会在自己的仓库里做同样的事：你既是作者又是审核人。看起来有点正式，但这正是真实工作要求的习惯。 ในทีม ไม่มีใคร push ตรงเข้า main ทุกคนทำงานบนบรานช์ แล้วเปิด Pull Request: นี่คือการแก้ของฉัน ช่วยรีวิวแล้วค่อย merge — ในบทเรียนนี้คุณจะทำแบบเดียวกันใน repo ของตัวเอง เป็นทั้งผู้เขียนและผู้รีวิว ดูเป็นทางการ แต่งานจริงคาดหวังนิสัยแบบนี้เลย

From moon code to a hundred million coders 🔊 Listen

Look at the photos above. It is nineteen sixty-nine. Margaret Hamilton led the MIT team that wrote the software for the Apollo moon landing. She stands next to the printed listings of that code — a paper stack as tall as she is. That stack was the repository. The other photo shows how one program was stored: a box of punched cards. Drop the box, and your program was in the wrong order. 看上面的照片。那是 1969 年。Margaret Hamilton 带领 MIT 团队写出了阿波罗登月的软件。她身边就是那些代码的打印稿——摞起来和她一样高。那摞纸就是当时的仓库。另一张照片是一个程序的储存方式：一盒打孔卡。盒子掉在地上，程序就乱了。 ดูรูปด้านบน นั่นคือปี 1969 Margaret Hamilton นำทีม MIT เขียนซอฟต์แวร์พายานอพอลโลลงจอดบนดวงจันทร์ เธอยืนข้างกองกระดาษพิมพ์โค้ดที่สูงเท่าตัวเธอ กองกระดาษนั้นคือคลังของยุคนั้น อีกรูปคือวิธีเก็บโปรแกรมหนึ่งตัว: กล่องบัตรเจาะรู ทำกล่องหล่น โปรแกรมก็สลับลำดับหมด

For the next thirty years, programmers built better and better version tools — SCCS, RCS, CVS, Subversion. Each one helped. But they all kept the history on one central computer. If that computer stopped, everyone's work stopped. 接下来的三十年，程序员做出了一代代版本工具——SCCS、RCS、CVS、Subversion。一代比一代好，但历史都存在一台中央电脑上。那台电脑一停，所有人就得停工。 สามสิบปีต่อมา โปรแกรมเมอร์สร้างเครื่องมือเวอร์ชันที่ดีขึ้นเรื่อย ๆ — SCCS, RCS, CVS, Subversion แต่ทุกตัวเก็บประวัติไว้ที่คอมพิวเตอร์กลางเครื่องเดียว เครื่องนั้นหยุด งานทุกคนก็หยุด

In two thousand five, the Linux team suddenly lost the tool they used to share code. Linus Torvalds — the same person who created Linux — wrote a replacement in about ten days. He called it Git. It was fast, it worked offline, and every developer kept a full copy of the history. Within a few years, Git had won. 2005 年，Linux 团队突然失去了他们分享代码的工具。Linus Torvalds——就是创造 Linux 的那个人——用大约十天写出了替代品，取名 Git。它快、能离线用、每个开发者手里都有完整的历史。几年之内，Git 就赢了。 ปี 2005 ทีม Linux เสียเครื่องมือแชร์โค้ดที่ใช้อยู่กะทันหัน Linus Torvalds คนเดียวกับที่สร้าง Linux เขียนตัวแทนขึ้นในราวสิบวัน ตั้งชื่อว่า Git มันเร็ว ใช้ออฟไลน์ได้ และนักพัฒนาทุกคนถือประวัติครบชุด ไม่กี่ปี Git ก็ชนะขาด

GitHub opened in two thousand eight and made Git social: a web page for every repository, a button for every pull request. Microsoft bought it in twenty eighteen for seven and a half billion dollars. Today GitHub reports more than one hundred million developers. Most open-source software lives there. Employers read GitHub profiles like CVs. And AI coding tools learned much of what they know from its public code. The map below is from twenty fourteen — the world was already coding together. GitHub 于 2008 年上线，把 Git 变成了社交网络：每个仓库一个网页，每个合并请求一个按钮。2018 年微软以 75 亿美元收购了它。今天 GitHub 报告有超过一亿开发者。大多数开源软件都放在上面。招聘方像看简历一样看 GitHub 主页。AI 编程工具学到的东西，很多来自它的公开代码。下面的地图来自 2014 年——那时全世界就已经在一起写代码了。 GitHub เปิดตัวปี 2008 ทำให้ Git กลายเป็นโซเชียล: ทุก repo มีหน้าเว็บ ทุก pull request มีปุ่ม ปี 2018 Microsoft ซื้อไปในราคา 7.5 พันล้านดอลลาร์ วันนี้ GitHub รายงานว่ามีนักพัฒนากว่าหนึ่งร้อยล้านคน โอเพนซอร์สส่วนใหญ่อยู่ที่นั่น บริษัทอ่านโปรไฟล์ GitHub เหมือนอ่านเรซูเม่ และเครื่องมือ AI เขียนโค้ดก็เรียนรู้จากโค้ดสาธารณะบนนั้น แผนที่ด้านล่างมาจากปี 2014 — โลกเขียนโค้ดด้วยกันมานานแล้ว

Practice here first — nothing can break 🔊 Listen

Get your site live 🔊 Listen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Website</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my website. I built it myself.</p>
  <p>这是我的网站，我自己做的。</p>
  <p>นี่คือเว็บไซต์ของฉัน ฉันทำเอง</p>
</body>
</html>

Update it like a professional 🔊 Listen

# check it works
# 检查装好没
# เช็กว่าติดตั้งสำเร็จ
git --version

# once per computer — use your GitHub email!
# 每台电脑一次 — 邮箱要和 GitHub 一致！
# ตั้งครั้งเดียวต่อเครื่อง — ใช้อีเมลเดียวกับบัญชี GitHub!
git config --global user.name "Your Name"
git config --global user.email "you@example.com"

# download your repo — replace username with yours
# 把仓库下载下来 — 换成你的用户名
# ดาวน์โหลด repo ของคุณ — เปลี่ยน username เป็นของคุณเอง
git clone https://github.com/username/username.github.io.git
cd username.github.io
ls

# 1 · which room is the change in?
# 1 · 改动在哪个房间？
# 1 · การแก้ไขอยู่ห้องไหน?
git status

# 2 · working dir → staging
# 2 · 工作目录 → 暂存区
# 2 · โฟลเดอร์ทำงาน → พื้นที่พัก
git add index.html

# 3 · staging → repository, with a message
# 3 · 暂存区 → 仓库，带上说明
# 3 · พื้นที่พัก → คลัง พร้อมข้อความ
git commit -m "Update homepage with my introduction"

# 4 · repository → GitHub
# 4 · 仓库 → GitHub
# 4 · คลัง → GitHub
git push

Your first pull request 🔊 Listen

# make a new branch AND move onto it
# 新建分支并切换过去
# สร้างบรานช์ใหม่และย้ายไปที่นั่นทันที
git switch -c add-about

# prove it
# 确认一下
# พิสูจน์ดู
git branch

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>About Me</title>
</head>
<body>
  <h1>About Me</h1>
  <p>My name is ____. I am learning Git, and this page arrived by pull request.</p>
  <p>我叫 ____。我在学 Git — 这个页面是通过 Pull Request 上线的。</p>
  <p>ฉันชื่อ ____ กำลังเรียน Git — หน้านี้มาถึงโดย Pull Request</p>
  <a href="index.html">← Back home</a>
</body>
</html>

<a href="about.html">About me · 关于我 · เกี่ยวกับฉัน</a>

git status
git add .
git commit -m "Add about page and link from homepage"

# -u connects your branch to GitHub the first time
# 第一次推送用 -u 把分支和 GitHub 连起来
# ครั้งแรกใช้ -u เพื่อผูกบรานช์ของคุณกับ GitHub
git push -u origin add-about

# back on your computer: return to main and pull the merge down
# 回到电脑：切回 main，把合并结果拉下来
# กลับมาที่เครื่องคุณ: สลับไป main แล้วดึงผลการ merge ลงมา
git switch main
git pull

Check yourself 🔊 Listen

Where to go next / 接下来去哪 / ไปไหนต่อ

• Make the site yours: real CSS, photos, more pages — every change is another branch → PR rep. 把网站做成你自己的：加 CSS、照片、更多页面 — 每次改动都是一次"分支 → PR"的练习。 ทำเว็บให้เป็นของคุณ: ใส่ CSS รูปภาพ หน้าเพิ่ม — ทุกการแก้คือการซ้อม บรานช์ → PR อีกหนึ่งรอบ
• Deeper GitHub concepts (forks, issues, conflicts): GitHub — 程序员的协作平台. 更深入的 GitHub 概念（fork、issues、冲突）看这一课。 แนวคิด GitHub ที่ลึกขึ้น (fork, issues, conflict) ดูบทเรียนนี้
• Custom domain for about ten dollars a year: 免费建网站, Path C. 想要自己的域名（约 10 美元一年）：看"免费建网站"的路径 C。 อยากได้โดเมนของตัวเอง (ราวปีละสิบดอลลาร์) ดู Path C ของบทเรียนสร้างเว็บฟรี
• Better HTML for those new pages: 网页基础. 想把新页面写得更好：看"网页基础"。 อยากเขียนหน้าเว็บให้เก่งขึ้น ดูบทเรียนพื้นฐานเว็บ