Hướng dẫn chuyển app tạo bởi aistudio thành web cá nhân đơn giản miễn phí

Video này hướng dẫn các bạn hoàn toàn có thể chuyển ứng dụng (app) tạo bởi aistudio thành web cá nhân dễ dàng với github

Tóm tắt cách làm như sau:

Bước 1. Tạo tài khoản Github đơn giản chỉ cần đăng nhập bằng Google

Bước 2: Kết nối aistudio với Github

Bước 3. Lưu trữ API key

Bước 4. Tạo base, tạo workflow trong action

Code cho file main.yml (hoặc deploy.yml) như sau:

name: Deploy to GitHub Pages

on:
  push:
    branches: ["main", "master"] # Chạy khi có code mới đẩy lên nhánh main hoặc master
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: "20"
          
      - name: Install dependencies
        run: npm install
        
      - name: Build
        run: npm run build
        env:
          # Dòng này sẽ lấy API Key từ Bước 1 bạn đã cài để đưa vào web
          GEMINI_API_KEY: ${{ secrets.GEMINI_API_KEY }}
          
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Bước 5. Cài đặt (Setting) page, nếu chưa thấy hoạt động thì có thể vào Action để run workfolow một lần duy nhất (sau này tự chạy)

Nếu có lỗi trang trắng thì có thể vào trang index.html để thêm script sau

<script type="module" src="/index.tsx"></script>

LƯU Ý: Web tạo được trên Github dạng publish (vì miễn phí mà) vì vậy các code người khác có thể tham khảo được của mình nhé

Nếu video hữu ích, hãy cho video một like nhé

hoặc có thể bấm nút Donate ủng hộ tác giả

Chúc bạn thành công