ដាក់អ្វីៗទាំងអស់បញ្ចូលគ្នា

មាតិកា

1. គោលដៅ៖ Website ដែលដំណើរការលើអ៊ីនធឺណិត
2. បើក GitHub Pages
3. បញ្ចេញ Feature មួយ ពីដើមដល់ចប់
4. មើលវាដំណើរការផ្ទាល់
5. បន្ថែម៖ Website នៅអាសយដ្ឋានផ្ទាល់ខ្លួនរបស់អ្នក
6. សង្ខេបឡើងវិញ
7. Git Cheat Sheet
8. អ្វីដែលស៊េរីនេះមិនបាននិយាយដល់
9. ទៅណាបន្ទាប់

1. គោលដៅ៖ Website ដែលដំណើរការលើអ៊ីនធឺណិត

my-site មានទំព័រដើម ទំព័រ about ទំព័រ contact មួយ README មួយ និង history ពិតប្រាកដមួយដែលបានកសាងឡើងតាមរយៈដប់ជំពូក។ នៅក្នុងជំពូកនេះ អ្នកនឹងដាក់វាលើអ៊ីនធឺណិត ដោយឥតគិតថ្លៃ នៅអាសយដ្ឋានមួយដូចជា៖

https://dara-sok.github.io/my-site/

បន្ទាប់មក អ្នកនឹងធ្វើការកែលម្អមួយទៀតដោយប្រើអ្វីៗទាំងអស់ដែលអ្នកបានរៀន — issue, branch, commit, push, pull request, merge — ហើយមើល website ផ្ទាល់ធ្វើបច្ចុប្បន្នភាពដោយខ្លួនឯង។

2. បើក GitHub Pages

GitHub Pages ប្រែក្លាយ repository មួយទៅជា website។ វាឥតគិតថ្លៃសម្រាប់ repository សាធារណៈ (public) ហើយវាដំណើរការជាមួយ HTML file ធម្មតាៗដូចរបស់អ្នក។

នៅក្នុង repository my-site របស់អ្នកនៅលើ GitHub៖

1. បើក Settings → Pages (នៅក្នុង sidebar ខាងឆ្វេង ក្រោម Code and automation)។
2. នៅក្រោម Build and deployment កំណត់ Source ទៅ Deploy from a branch។
3. នៅក្រោម Branch ជ្រើសរើស main និង / (root) បន្ទាប់មកចុច Save។

GitHub ចាប់ផ្តើម build website របស់អ្នក។ បើក tab Actions ដើម្បីមើល៖ job មួយឈ្មោះ pages build and deployment ដំណើរការ ហើយប្រែជាពណ៌បៃតងបន្ទាប់ពីប្រហែលមួយនាទី។ ត្រឡប់ទៅ Settings → Pages វិញ ហើយអាសយដ្ឋាននៃ website ផ្ទាល់របស់អ្នកលេចឡើងនៅខាងលើ។ បើកវា។

នោះគឺជា index.html របស់អ្នក នៅលើអ៊ីនធឺណិត។ Link ទៅទំព័រ about និង contact ក៏ដំណើរការដែរ។ នេះហើយជាមូលហេតុដែលទំព័រដើមតែងតែមានឈ្មោះថា index.html៖ វាជា file ដែល web server បង្ហាញ នៅពេលនរណាម្នាក់ចូលមើល folder មួយដោយមិនបញ្ជាក់ឈ្មោះ file។

ចាប់ពីពេលនេះតទៅ រាល់ពេលដែល main ផ្លាស់ប្តូរនៅលើ GitHub website ធ្វើបច្ចុប្បន្នភាពដោយខ្លួនឯង។ ការ merge pull request គឺជាការបោះពុម្ពផ្សាយ។

3. បញ្ចេញ Feature មួយ ពីដើមដល់ចប់

ឥឡូវនេះ website គ្រាន់តែជាអក្សរខ្មៅលើផ្ទៃសប៉ុណ្ណោះ។ តោះបន្ថែម style ខ្លះ — ហើយធ្វើវាតាមរបៀបដែលក្រុមមួយធ្វើ។

1. Issue។ នៅលើ GitHub បើក issue ថ្មីមួយ៖ Add basic styling to all pages។ កត់ចំណាំលេខរបស់វា (ឧទាហរណ៍ #4)។

2. Branch។ នៅលើកុំព្យូទ័ររបស់អ្នក ចាប់ផ្តើមពី main ចុងក្រោយបំផុត៖

cd ~/my-site
git switch main
git pull
git switch -c add-styles

3. Commit។ បង្កើត style.css៖

body {
  font-family: system-ui, sans-serif;
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1rem;
  line-height: 1.6;
  color: #1f2937;
}

h1 {
  color: #2563eb;
}

a {
  color: #2563eb;
}

git add style.css
git commit -m "Add stylesheet"

បន្ទាប់មកភ្ជាប់វាពី ទំព័រទាំងបី — បន្ថែមបន្ទាត់នេះនៅខាងក្នុង <head> នៅក្នុង index.html, about.html និង contact.html៖

    <link rel="stylesheet" href="style.css">

បើក index.html នៅក្នុង browser របស់អ្នក ដើម្បីពិនិត្យថាវាមើលទៅត្រឹមត្រូវ បន្ទាប់មក៖

git diff
git commit -am "Use stylesheet on every page"

Commit តូចៗពីរ ដែលនីមួយៗនិយាយអំពីរឿងតែមួយ។

4. Push។

git push -u origin add-styles

5. Pull request។ នៅលើ GitHub ចុច Compare & pull request។ ដាក់ចំណងជើងច្បាស់លាស់មួយ និង description មួយដែលបញ្ចប់ដោយ Closes #4។ ពិនិត្យ Files changed៖ file ថ្មីមួយ និងទំព័របីដែលនីមួយៗមានបន្ទាត់ថ្មីមួយ។

6. Review។ អាន diff ផ្ទាល់ខ្លួនរបស់អ្នកដោយយកចិត្តទុកដាក់ ហាក់ដូចជាសមាជិកក្រុមម្នាក់ជាអ្នកសរសេរវា។ បើអ្នកឃើញអ្វីមួយ កែវានៅលើកុំព្យូទ័ររបស់អ្នក commit ហើយ push — PR នឹងធ្វើបច្ចុប្បន្នភាព។

7. Merge។ ចុច Merge pull request → Confirm merge បន្ទាប់មក Delete branch។

8. សម្អាត។

git switch main
git pull
git branch -d add-styles
git fetch --prune

4. មើលវាដំណើរការផ្ទាល់

បើក tab Actions ម្តងទៀត៖ job pages build and deployment ថ្មីមួយបានចាប់ផ្តើមភ្លាមៗនៅពេលអ្នក merge។ នៅពេលវាប្រែជាពណ៌បៃតង សូម reload website ផ្ទាល់របស់អ្នក (អ្នកប្រហែលជាត្រូវធ្វើ hard refresh — Ctrl + Shift + R ឬ Cmd + Shift + R លើ Mac — ព្រោះ browser រក្សាទុកទំព័រក្នុង cache)។ Style ថ្មីដំណើរការផ្ទាល់ហើយ។

មើលអ្វីដែលទើបតែកើតឡើង៖ អ្នកបានសរសេរការផ្លាស់ប្តូរមួយ វាត្រូវបាន review នៅក្នុង pull request មួយ ការ merge វាបានបោះពុម្ពផ្សាយវាដោយស្វ័យប្រវត្តិ ហើយ issue បានបិទដោយខ្លួនឯង។ រង្វង់នោះ — issue → branch → PR → merge → deployed — គឺជារបៀបដែល software ភាគច្រើននៅលើពិភពលោកត្រូវបានបញ្ចេញ។ អ្នកទើបតែបានធ្វើវា។

បន្ថែម link ទៅ website ផ្ទាល់របស់អ្នកទៅក្នុងប្រអប់ About របស់ repository (រូបស្ពឺ (gear icon) នៅខាងស្តាំនៃទំព័រមុខរបស់ repository) និងទៅក្នុង README.md របស់អ្នក ដើម្បីឲ្យអ្នកចូលមើលអាចរកវាឃើញ។

5. បន្ថែម៖ Website នៅអាសយដ្ឋានផ្ទាល់ខ្លួនរបស់អ្នក

Project site ស្ថិតនៅ <username>.github.io/<repository>/។ GitHub ក៏ផ្តល់ឲ្យ account នីមួយៗនូវ user site មួយនៅអាសយដ្ឋានខ្លីជាងនេះ https://<username>.github.io/។ ដើម្បីទទួលបានវា បង្កើត repository មួយដែលមានឈ្មោះ ពិតប្រាកដ <username>.github.io — ឧទាហរណ៍ dara-sok.github.io — push index.html មួយទៅ branch main របស់វា ហើយបើក Pages តាមរបៀបដដែល។

អ្នកអភិវឌ្ឍន៍ជាច្រើនប្រើវាជាទំព័រដើម portfolio របស់ពួកគេ ដោយភ្ជាប់ link ទៅកាន់ project site របស់ពួកគេ។ អ្នកថែមទាំងអាចភ្ជាប់ domain ដែលអ្នកជាម្ចាស់ផងដែរ នៅក្រោម Settings → Pages → Custom domain។

6. សង្ខេបឡើងវិញ

7. Git Cheat Sheet

ការរៀបចំ (ម្តងក្នុងកុំព្យូទ័រមួយ)

git config --global user.name "Your Name"
git config --global user.email "you@example.com"
git config --global init.defaultBranch main
git config --global pull.rebase false
gh auth login

ចាប់ផ្តើម project មួយ

git init                     # turn this folder into a repository
git clone <url>              # download an existing repository

រង្វង់ការងារប្រចាំថ្ងៃ

git status                   # what's changed? (run it constantly)
git diff                     # unstaged changes
git diff --staged            # what the next commit will contain
git add <file>               # stage a file (git add . for everything)
git commit -m "Message"      # take the snapshot

History

git log --oneline            # compact history
git log --oneline --graph --all
git show <hash>              # one commit and its diff
git blame <file>             # who last changed each line

Undo

git restore <file>                  # discard uncommitted changes
git restore --staged <file>         # unstage
git commit --amend                  # fix the last commit (not pushed)
git revert <hash>                   # safely undo a commit (pushed is fine)
git reset HEAD~1                    # undo last commit, keep changes (not pushed)
git restore --source=<hash> <file>  # a file as it was in an old commit
git reflog                          # find "lost" commits

Branch

git branch                   # list branches
git switch -c <name>         # create a branch and switch to it
git switch <name>            # switch to an existing branch
git merge <name>             # merge <name> into the current branch
git merge --abort            # cancel a merge with conflicts
git branch -d <name>         # delete a merged branch

Remote

git remote add origin <url>  # connect to GitHub
git push -u origin <branch>  # first push of a branch
git push                     # send commits
git fetch                    # download, don't change my files
git pull                     # fetch + merge
git fetch --prune            # forget branches deleted on GitHub

បន្ថែម៖ ទុកការងារមួយឡែកមួយភ្លែត

git stash                    # tuck away uncommitted changes
git stash pop                # bring them back

git stash មានប្រយោជន៍នៅពេលអ្នកត្រូវការប្តូរ branch ប៉ុន្តែមិនទាន់ត្រៀមខ្លួន commit។ អ្នកនឹងរៀនវាបានយ៉ាងឆាប់រហ័ស ព្រោះឥឡូវអ្នកស្គាល់អ្វីៗផ្សេងទៀតរួចហើយ។

8. អ្វីដែលស៊េរីនេះមិនបាននិយាយដល់

ស៊េរីនេះបានគ្របដណ្តប់អ្វីដែលអ្នកត្រូវការសម្រាប់ការងារប្រចាំថ្ងៃ។ មានរឿងមួយចំនួនទៀតដែលអ្នកនឹងជួបប្រទះនៅពេលអ្នកទៅមុខបន្ថែមទៀត៖

• git rebase — វិធីមួយទៀតដើម្បីបញ្ចូល branch ចូលគ្នា ដែលសរសេរ history ឡើងវិញឲ្យទៅជាបន្ទាត់ត្រង់មួយ។ មានឥទ្ធិពលខ្លាំង ហើយងាយប្រើខុស។ រៀនវានៅពេលការ merge ក្លាយជារឿងធម្មតាសម្រាប់អ្នក។
• git cherry-pick — ចម្លង commit មួយពី branch មួយផ្សេងទៀត។
• Tag — ឈ្មោះអចិន្ត្រៃយ៍សម្រាប់ commit សំខាន់ៗ ដូចជា v1.0.0។
• SSH key — វិធីមួយទៀតដើម្បី sign in ទៅ GitHub ហើយជាវិធីដែលអ្នកនឹង sign in ទៅ server។
• GitHub Actions — រត់ test ឬ deployment ដោយស្វ័យប្រវត្តិរាល់ពេល push ឬ pull request។ GitHub Pages បានប្រើវាសម្រាប់អ្នករួចហើយ។ ជំពូកបន្ថែមរបស់ Docker CLI Tutorial បង្ហាញ deployment workflow មួយ។

9. ទៅណាបន្ទាប់

ឥឡូវនេះ Git គឺជាផ្នែកមួយនៃអ្វីៗទាំងអស់ដែលអ្នកសាងសង់។ នេះជារបៀបដែលវាភ្ជាប់ទៅនឹងផ្នែកដទៃទៀតនៃ ផែនទីការសិក្សា «ចាប់ផ្តើមនៅទីនេះ»៖

• មូលដ្ឋានគ្រឹះ HTML និង CSS — ធ្វើឲ្យ my-site ស្អាតមែនទែន។ រាល់ការកែលម្អគឺជា branch មួយ និង pull request មួយ ហើយរាល់ការ merge ដំណើរការផ្ទាល់ភ្លាម។
• របៀបដែលគេហទំព័រដំណើរការ — អ្វីដែលកើតឡើងចាប់ពីពេលនរណាម្នាក់វាយអាសយដ្ឋាន GitHub Pages របស់អ្នក រហូតដល់ពេលគេឃើញ website របស់អ្នក។
• មូលដ្ឋានគ្រឹះ JavaScript និង TypeScript — បន្ថែមអន្តរកម្ម (interactivity) ទៅ website ហើយចាប់ផ្តើមសាងសង់ project ពិតៗដើម្បីដាក់លើ GitHub profile របស់អ្នក។
• មូលដ្ឋានគ្រឹះ Command Line ម្តងទៀត — script new-project.sh នៅក្នុងជំពូកចុងក្រោយរបស់វា គឺជារបស់ដ៏ល្អឥតខ្ចោះសម្រាប់ដាក់ក្នុង repository ផ្ទាល់ខ្លួនរបស់វា ឬពង្រីកវាឲ្យរត់ git init ជំនួសអ្នក។
• Docker CLI Tutorial និង NestJS Crash Course — source code របស់ពួកវានៅលើ GitHub។ Clone វា រត់វា ហើយអាន history របស់វា។

ទម្លាប់ពីរចាប់ពីពេលនេះតទៅ៖ ដាក់គ្រប់ project ទៅក្នុង Git មិនថាតូចប៉ុណ្ណាក៏ដោយ ហើយ push ការងាររបស់អ្នកទៅ GitHub ជាកន្លែងដែលនិយោជក និង collaborator នាពេលអនាគតអាចមើលឃើញ។ GitHub profile ដែលពោរពេញដោយ commit ពិតៗ គឺជា portfolio ដ៏ល្អបំផុតមួយដែលអ្នកអភិវឌ្ឍន៍ម្នាក់អាចមាន។