Thuta Learning
ရှာဖွေရန်
ProjectsDevOps & Toolsbeginner

Project: Portfolio Website — Part 1 (Setup)

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

  • Project: Portfolio Website — Part 1 (Setup) ကို လက်တွေ့ project ထဲမှာ အသုံးချတတ်မယ်
  • ကိုယ်တိုင် code ရေးပြီး run ကြည့်တတ်မယ်
  • Project တစ်ခုလုံးကို အဆင့်လိုက် ဆောက်တတ်မယ်

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

ဒီအပိုင်းမှာ Git ရဲ့ core workflow ကို real project တစ်ခုနဲ့ ပြန်လည် review လုပ်ကြမယ်။ portfolio-site ဆိုတဲ့ folder အသစ်ကနေစပြီး၊ git init နဲ့ local repository တစ်ခု ဖန်တီးပါမယ်။ ပြီးရင် Git ရဲ့ three states (Working Directory, Staging Area, Repository) ကို လက်တွေ့ file တွေနဲ့ ကျင့်သုံးပြီး၊ commit history စတင်တည်ဆောက်ပါမယ်။ ဒီ project ကို Part 2 နဲ့ Part 3 မှာ branch, merge, remote စတာတွေနဲ့ ဆက်တိုးချဲ့သွားမှာ ဖြစ်တဲ့အတွက် ဒီ foundation ကို သေချာလုပ်ထားဖို့ အရေးကြီးပါတယ်။

လက်တွေ့ ဆောက်ကြည့်မယ်

ပထမဆုံး portfolio-site ဆိုတဲ့ folder အသစ်ဖန်တီးပြီး git init လုပ်ပါ။ ပြီးရင် index.html (name, short bio ပါတဲ့ simple HTML page) နဲ့ README.md (project ရဲ့ ဖော်ပြချက်) ဖိုင်နှစ်ခု ဖန်တီးပါ။ node_modules/ နဲ့ .DS_Store ကို ignore ဖို့ .gitignore file တစ်ခုလည်း ထည့်ပါ။ git status ဖြင့် untracked files တွေကို စစ်ကြည့်ပြီး git add . နဲ့ stage လုပ်ပါ။ နောက်ဆုံးမှာ 'Initial commit: project structure' ဆိုတဲ့ message နဲ့ commit လုပ်ပြီး git log ဖြင့် history ကို ကြည့်ပါ။

Code နမူနာ

bash
# Step 1: project folder ဖန်တီးပြီး Git repository initialize လုပ်ပါ
mkdir portfolio-site
cd portfolio-site
git init

# Step 2: files များ ဖန်တီးပါ
echo "# My Portfolio Website" > README.md
echo "<html><body><h1>Hello, I'm a developer</h1></body></html>" > index.html

# Step 3: .gitignore file ဖန်တီးပါ
printf "node_modules/\n.DS_Store\n*.log\n" > .gitignore

# Step 4: status စစ်ပြီး stage လုပ်ပါ
git status
git add .

# Step 5: commit လုပ်ပါ
git commit -m "Initial commit: project structure"

# Step 6: history ကြည့်ပါ
git log --oneline
You should see
git log --oneline command run ပြီးနောက် 'Initial commit: project structure' ဆိုတဲ့ commit တစ်ခု history မှာ ပေါ်လာမည်။

၅ မိနစ် စမ်းကြည့်

index.html ထဲမှာ paragraph tag တစ်ခု ထပ်ထည့်ပြီး၊ git status → git add → git commit workflow ကို ထပ်ကျင့်ကြည့်ပါ (5 မိနစ်).

သတိလေးတစ်ချက်

commit message တိုင်းကို clear ဖြစ်အောင် ရေးပါ — နောက်ပိုင်း history ကြည့်တဲ့အခါ 'Initial commit: project structure' လို message က 'update' ဆိုတာထက် ဘာလုပ်ခဲ့လဲဆိုတာ ပိုမြင်သာစေပါတယ်။

ဒီနေရာမှာ လူအများမှားတတ်တယ်

  • git init မလုပ်ခင် files တွေကို အရင်ဖန်တီးပြီး .git folder ရှိ/မရှိ မစစ်ဘဲ commit ကြိုးစားခြင်း
  • .gitignore file ကို git add . မလုပ်ခင်မှာ ဖန်တီးဖို့ မေ့သွားလို့ node_modules ကဲ့သို့ files တွေ track ဖြစ်သွားခြင်း

အခု ကိုယ်တိုင် စမ်းကြည့်

index.html ထဲမှာ paragraph tag တစ်ခု ထပ်ထည့်ပြီး၊ git status → git add → git commit workflow ကို ထပ်ကျင့်ကြည့်ပါ (5 မိနစ်).

You'll know it worked when: git log --oneline command run ပြီးနောက် 'Initial commit: project structure' ဆိုတဲ့ commit တစ်ခု history မှာ ပေါ်လာမည်။

Project: Portfolio Website — Part 1 (Setup) | Thuta Learning