Giới thiệu
Trong bài viết này, chúng ta sẽ cùng nhau khám phá cách triển khai các dự án web bằng Angular, Svelte và Vue lên Github Pages. Github Pages là một dịch vụ miễn phí và tiện lợi cho việc lưu trữ và chia sẻ các trang web tĩnh. Đặc biệt, chúng ta sẽ sử dụng Github Actions để tự động hóa quy trình triển khai, giúp tiết kiệm thời gian và công sức.
Lợi ích của việc sử dụng Github Pages
- Miễn phí: Đây là một trong những lựa chọn lý tưởng cho các dự án cá nhân hoặc nhỏ.
- Dễ dàng sử dụng: Với một vài bước cấu hình đơn giản, bạn có thể triển khai ứng dụng của mình chỉ trong vài phút.
- Tự động hóa với Github Actions: Giúp bạn dễ dàng cập nhật và triển khai lại ứng dụng mỗi khi có thay đổi.
Các bước triển khai
1. Triển khai ứng dụng Vue 3
Thiết lập cấu hình
Đầu tiên, chúng ta cần cấu hình file vite.config.ts để thiết lập đường dẫn cơ sở cho ứng dụng của mình:
javascript
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
export default defineConfig({
base: '/vue-github-profile/',
plugins: [vue(), vueDevTools()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
})Xây dựng ứng dụng
Chạy lệnh sau để xây dựng ứng dụng:
bash
npm run buildSau khi xây dựng xong, bạn có thể chạy lệnh sau để xem trước ứng dụng:
bash
npm run previewTriển khai bằng Github Actions
Tiếp theo, chúng ta sẽ tạo file .github/workflows/main.yml để cấu hình quá trình triển khai:
yaml
name: Deploy to GitHub Pages
on:
push:
branches:
- main
workflow_dispatch:
permissions:
id-token: write
contents: read
pages: write
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '22'
- name: Install dependencies
run: npm install
- name: Build site
env:
VITE_GITHUB_TOKEN: ${{ secrets.VITE_GITHUB_TOKEN }}
run: npm run build
- name: Add .nojekyll file
run: touch dist/.nojekyll
- name: Add 404.html file
run: cp dist/index.html dist/404.html
- name: Configure GitHub Pages
uses: actions/configure-pages@v3
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: ./dist
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4Sau khi cấu hình xong, hãy commit file này vào nhánh chính để tự động hóa quá trình triển khai.
2. Triển khai ứng dụng SvelteKit
Cài đặt phụ thuộc
bash
npm i --save-dev @sveltejs/adapter-staticCấu hình Svelte
Mở file svelte.config.ts và thêm cấu hình cho adapter:
javascript
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
const config = {
preprocess: vitePreprocess(),
kit: {
adapter: adapter({
fallback: '404.html'
}),
paths: {
base: '/svelte-github-profile'
}
}
};
export default config;Triển khai bằng Github Actions
Tương tự như Vue, bạn tạo file .github/workflows/main.yml với nội dung như sau:
yaml
name: Deploy to GitHub Pages
on:
push:
branches:
- main
workflow_dispatch:
permissions:
id-token: write
contents: read
pages: write
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '22'
- name: Install dependencies
run: npm install
- name: Build site
run: npm run build
- name: Configure GitHub Pages
uses: actions/configure-pages@v3
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: ./build
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v43. Triển khai ứng dụng Angular
Cập nhật cấu hình angular.json
Thêm thuộc tính outputPath:
json
"outputPath": {
"base": "dist",
"browser": ""
}Triển khai bằng Github Actions
Tương tự như hai ứng dụng trước, bạn cần tạo file .github/workflows/main.yml với cấu hình tương tự:
yaml
name: Deploy to GitHub Pages
on:
push:
branches:
- main
workflow_dispatch:
permissions:
id-token: write
contents: read
pages: write
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '22'
- name: Install dependencies
run: npm install
- name: Build site
run: npm run build -- --base-href=https://railsstudent.github.io/angular-github-profile/
- name: Add .nojekyll file
run: touch dist/.nojekyll
- name: Add 404.html file
run: cp dist/index.html dist/404.html
- name: Configure GitHub Pages
uses: actions/configure-pages@v3
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: ./dist
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4Thực tiễn tốt nhất
- Luôn kiểm tra thông tin bảo mật: Tránh lưu trữ các khóa bí mật trong mã nguồn.
- Sử dụng tên nhánh phù hợp: Đảm bảo nhánh chính được cấu hình đúng cho quá trình triển khai.
- Theo dõi trạng thái triển khai: Kiểm tra thường xuyên để đảm bảo quá trình triển khai diễn ra suôn sẻ.
Câu hỏi thường gặp
Github Pages có miễn phí không?
- Có, Github Pages là dịch vụ miễn phí cho việc lưu trữ các trang web tĩnh.
Làm thế nào để tự động hóa quá trình triển khai?
- Sử dụng Github Actions để tự động hóa quá trình xây dựng và triển khai ứng dụng của bạn.
Tôi có thể triển khai ứng dụng nào lên Github Pages?
- Bạn có thể triển khai các ứng dụng web tĩnh được xây dựng bằng Angular, Svelte, Vue hoặc bất kỳ framework nào hỗ trợ xây dựng trang tĩnh.
Kết luận
Với hướng dẫn chi tiết này, hy vọng bạn sẽ có thể triển khai ứng dụng của mình lên Github Pages một cách dễ dàng và hiệu quả. Hãy thử nghiệm và chia sẻ thành quả của bạn với cộng đồng!
Đừng quên theo dõi các tài liệu tham khảo bên dưới để tìm hiểu thêm.
