สวัสดีจ้า ruby's duckie ✨ เองละ วันนี้มาฝึกทำ **gemini cli vibe coding x portfolio เท่ๆ x GitHub page deployment **ง่ายๆ นิดเดียวววววทุกคน ที่เหลือยากหมด 555+ เอาละ ต้องบอกก่อนว่าเราพอมีพื้นฐานอ่าน html css และ javascript มาแล้วบ้างง ปักหมุดที่เรียนก่อนเลย เรียนฟรีๆ ได้เลย กับ KongRuksiam Official จากคนไม่มีพื้นบานเลย จนสามารถอ่านแล้วเข้าใจ syntax ของแต่ละอันได้เลย ป้ายยาๆ

Gemini Cli คืออะไร ?

ลองนึกภาพว่า cil ก็เป็นเหมือนเครื่องมือที่ใช้ในการควบคุมและ สื่อสาร กับ computer ของเราโดยที่ไม่ต้องเม้าท์ คล้ายๆกับ cmd , terminal , powershell ที่เรารู้จักกันนั้นแหละ โดยคำสั่งในการใช่ง่านจะคล้ายๆกัน แต่เจ้าตัว gemini cli เนี่ย มันพิเศษตรงไหน ? ก็ตรงที่มันสามารถ run เป็น computer file local ของเราได้เลย หรือเราจะใช้อีกเจ้านึ่งก็ได้ claude cli ซึ่งแล้วแต่ความชอบของแต่ละบุคคล ส่วนตัวรัก google ที่สุดด 55555+ มาเริ่มกัน

1.ก่อนที่เราจะ run gemini CLI ให้เราโหลด nod.js ก่อนเพื่อให้ run time ใน computer ของเราได้เลย 2.ทำการติดตั้ง gemini cli ใน teminal ของเราเลย

npm install -g @google/gemini-cl
  1. เรียกใช้ gemini cli ในเครื่องของเรา ผ่าน teminal กันเลยยย แล้ว login เข้ารหัสของเราได้เลย หากเพื่อนๆ ไม่เจอหน้า login ให้ใช้คำสั่ง /auth login

กรณีที่เราใช้งานครั้งแรก แล้วกด R เพื่อ restart อีกรอบ

ปล. personal account ได้ 1,000 request / วัน สุดยอดดดดดด 🤭

คำสั่ง Gimini CLI พื้นฐานที่เราควรรู้มีอะไรบ้าง ?

Create Ours First Portfolio

ก่อนที่เราจะเริ่มใช้งานให้เราเปิด teminal แล้วทำการสร้าง Working directory ของเราก่อนด้วยคำสั่ง mkdir หลังจากที่เราเรียกใช้ Gemini Cli ในเครื่องเราแล้วให้รู้เลยว่า gemini ที่เราจะเรียกใช้จจะเห็นไฟล์ทุก folder ที่เรา set ใน working directory !!

1. คำสั่งในการสร้าง plans

ง่ายๆ เลย ก็คือให้เจ้า gemini ของเราเนี่ยใช้ gemini tools ตัว Reseearch วิ่งไปหา วิธีการในการแพลนในสิ่งที่เราต้องการ มาดูตัวอย่าง prompt ของเรากันเลย

Reserch "Provide a clear, step-by-step guide on how to deploy a basic static website (HTML, CSS, and JavaScript) to GitHub Pages." Turned.

เป็นการบอกไปตรงเลย "อยากได้ step ในการสร้าง web รวมถึง Deployment ด้วยเลย" ยิ่งคำสั่งเราละเอียดเท่าไรยิ่งดีเลย และนี้คือตัวอย่าง plans ของเราหลังจากที่สั่งไปแล้ว

ซึ่งแต่ละคนอาจจะได้ผลลัพธ์ที่แตกต่างกัน ส่วนอันนี้ของ ruby เองง ✨

1. Prepare Your Repository
   * Create a Repository: If you haven't already, create a new repository on GitHub.
   * Entry Point: Ensure your main HTML file is named index.html and is located in the root directory of your
     repository. GitHub Pages looks for this file by default.
   * Assets: Your CSS and JavaScript files should be linked relatively in your index.html (e.g., ).

  2. Configure GitHub Pages Settings
   1. Navigate to your repository on GitHub.com.
   2. Click on the Settings tab.
   3. In the left sidebar, under the "Code and automation" section, click on Pages.
   4. Under Build and deployment > Source, ensure "Deploy from a branch" is selected.
   5. Under Branch, select the branch you want to deploy from (usually main or master) and select / (root) as
      the folder.
   6. Click Save.

  3. Verify Deployment
   * After saving, GitHub will start a background process (GitHub Actions) to build and deploy your site. 
   * Wait a minute or two, then refresh the Pages settings page. You should see a message saying: "Your site is
     live at..." followed by a URL (typically https://<username>.github.io/<repository-name>/).

  Pro Tips:
   * Custom Domains: You can add a custom domain in the same Pages settings menu.
   * Private Repos: GitHub Pages is free for public repositories. For private repositories, it requires a
     GitHub Pro or Team account.
   * Automated Updates: Every time you git push new changes to your selected branch, GitHub Pages will
     automatically update your live site.

2.สั่งให้ gemini plans ให้เราได้เลย โดยการใช้ Plan Mode

ok, lets plan to build my portfolio website as a data analyst.

เราก็จะได้ plan มาว่าทำอย่างไรบ้าง โดยเจ้า gemini เนี่ยย จะชอบถามมากกว่า minimal ไหม หรือ dark theme ดี ต้องการให้ใส่อะไรบ้าง ถามเยอะแยะไปหมด เราก็ตอบไปตามที่ถามเลยย สนุก เหมือนคุยกับเพื่อนเลยละ 😋

นี่คือแพลนของเราเองงที่ gemini ออกแบบให้ สุดยอดไปเลยไหมมม ง่ายเหมือนปอกกล้วยย 🔥 🔥 

 Plan: Data Analyst Portfolio Website (Simple Static - Modern Dark/Tech)

  This plan outlines the creation of a high-impact, single-page portfolio website tailored for a Data Analyst
  using pure HTML, CSS, and JavaScript.

  Objective
  Build a professional, visually stunning one-page portfolio that highlights data projects, technical skills,
  and professional experience without the overhead of a framework.

  Key Files & Context
   - index.html: Main structure and content entry point.
   - style.css: Theme definitions (Dark/Tech palette) and layout.
   - script.js: Interactivity, smooth scrolling, and scroll-reveal animations.
   - assets/: Directory for images, icons, and PDFs (resume).

  Implementation Steps

  Phase 1: Foundation & Theming
   1. Initialize Project: Create the directory structure and basic files.
   2. Define Global Styles: 
       - Set up style.css with CSS variables for a deep navy (#0a192f) background and neon cyan (#64ffda)
         accents.
       - Implement a clean typography system using Google Fonts (e.g., 'Inter' and 'JetBrains Mono').

  Phase 2: Content Structure (HTML)
   1. Navigation: Minimalist header with links to About, Skills, Projects, and Contact.
   2. Hero Section: 
       - "Name | Data Analyst | Turning raw data into insights."
       - Add a clear Call to Action (CTA) button to "View Projects".
   3. Skills Section:
       - Use a flexbox/grid layout to display skill cards (SQL, Python, Tableau, Machine Learning).
   4. Project Gallery:
       - Create a responsive grid of project cards.
       - Each card includes: Image placeholder, Title, Description, Tech Tags, and GitHub link.

  Phase 3: Interactivity (JS & CSS)
   1. Smooth Scrolling: Implement smooth scroll behavior for navigation links.
   2. Scroll Reveal: Use the Intersection Observer API in script.js to trigger fade-in animations as the user
      scrolls.
   3. Responsive Design: Use Media Queries in style.css to ensure a perfect mobile experience.

  Phase 4: Deployment
   1. GitHub Pages Setup: 
       - Push the code to a GitHub repository.
       - Enable GitHub Pages in Settings > Pages (selecting the main branch and root folder).

  Verification & Testing
   - Visual Audit: Check all colors and fonts against the "Modern Dark/Tech" theme.
   - Link Check: Ensure all project and social links open in new tabs (target="_blank").
   - Performance: Optimize image sizes and minify CSS/JS if needed for speed.
   - Responsiveness: Test on mobile, tablet, and desktop viewports.

อย่าลืมทำการ save plan เก็บไว้ แล้วจากนั้น ถ้าเรา OK แล้วก็สั่งให้ run ได้เลยยยย ลุยยย หลังจากที่เสร็จสิ้นแล้วให้เราลอง code . เพื่อปิด vscode ดู เป็น program สามัญประจำบ้านเลย แนะนำต้องมีติดเครื่อง ! จากนั้นทำการ cmd + O ดูว่า web เราเป็นยังไงง 🤔

Web version แรกจะยังไม่มีอะไร เราสามารถกำหนด specs ให้ได้ เช่น ชื่อ Name , About me, Technical Skills etc., โดยที่เราสามารถไปแก้ไขที่ไฟล์ index.html ของเราได้เลยยยย ซึ่งถ้าหากเพื่อนๆ ยังไม่มีความรู้เรื่อง code สามารถเรียนเพิ่มเติมได้ที่นี้เลยยย Mini AI School ของ @Toy Datarockie นี้แหละ ฟรีๆๆๆ 💯 💯 💯 ✨

3.Deployment ขึ้น Github เท่ ๆ ไว้อวด HR

ก่อนที่เราจะ deploy web ของเราเนี่ย เราต้องมี account ของ github ก่อน

เราสามารถ push ไฟล์ของเราขึ้น github เองได้ หรือจะให้ gemini สั่งให้ push ขึ้นไปก็ได้ ด้วยการสั่งแบบภาษาธรรมชาติเลย

Lets git remote to [HTTPS link].git and git add. git commit and push all file.

แล้วเราจะทำการ Deploy ขึ้น Web ตามขั้นตอนดังนี้

  1. ไปที่ Repository ใน GitHub ของเรา
  2. Click Settings > Pages.
  3. Under Build and deployment > Branch:
    • Select main.
    • Change the folder from /(root) to /docs.
  4. Click Save.

จากนั้นรอประมาณ 1-2 นาทีก็เสร็จเรียบร้อยยยยยยยย ทุกคนสุดยอดไปเลยย 🚀 สามารถดูของ Ruby ได้เลยยในเว็บนี้ !! Ruby's Duckie Portfolio Test

ขอ set เป็นค่าที่ยังไม่ได้ปรับแต่งเพิ่มเติมอะไรนะ พอดีมี web หลักอยู่แล้ว อิอิ 555+ เพื่อนๆคนไหนอยากดูเว็บของเราเองสามารถไปตามได้ที่ Ruby's Duckie

เป็นยังไงกันบ้างงงง สนุกไหม ทำได้บ้างไหมมม เพื่อนๆสามารถแชร์ลิงค์มาอวดกันบ้างน๊าาาาาา วันนี้ขอตัวก่อนเช่นเคยยยยย เจอกันใหม่บายยย