Hướng dẫn deploy một static page sử dụng Reactjs lên github page
This post hasn't been updated for 4 years
Github page là gì ?
GitHub Pages là dịch vụ được tạo bởi GitHub cho phép xuất bản trang web hoặc ứng dụng web bằng cách lưu trữ nó trong kho GitHub miễn phí. Bạn có thể lưu trữ một trang web đầy đủ và các trang dự án không giới hạn, có thể được coi là “trang” trên website. Code trang web được lưu trong kho lưu trữ GitHub chỉ định, sau đó GitHub sẽ xuất bản để có thể xem trên mọi máy tính hoặc máy tính bảng. Đối với trang web tĩnh hoặc ứng dụng web nhỏ, có một số kế hoạch lưu trữ miễn phí bạn có thể khởi động và hoạt động trực tuyến ngay lập tức. Thường chúng yêu cầu ít thiết lập hơn máy chủ trả phí.
GitHub Pages là một trong những giải pháp miễn phí như vậy, ở bài viết này mình sẽ đề cập đến việc deploy một static page sử dụng Reactjs lên github page
Hướng dẫn sử dụng:
Để sử dụng được công cụ github page thì chắc chắn bạn phải có một tài khoản github.
Khi đã có tài khoản github chúng ta tiến hành tạo một repo để lưu trữ source code Sau khi tạo xong repo, chúng ta tiến hành clone về máy local, như vậy là xong việc chuẩn bị
Bây giờ đến phần code, để tạo một project reactjs chúng ta sử dụng câu lệnh
cd /path/to/repo
create-react-app .
sau khi đã chạy xong, sử dụng câu lệnh sau để kiểm tra xem project đã hoạt động chưa
yarn start
Tiếp theo chúng ta cài đặt package gh-pages
để complie code và phục vụ cho việc deploy
yarn add gh-pages --save-dev
Sau đó chúng ta vào file package.json
config như sau
{
"homepage": "http://iamPhong.github.io/mycv",
"name": "mycv",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"gh-pages": "^2.2.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.0"
},
"scripts": {
"predeploy": "yarn run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Ở đây chúng ta add thêm một property là homepage: http://iamPhong.github.io/mycv
với url được định dạng như sau:
http://{username}.github.io/{repo-name}
, username
là user đang nhập github, repo-name
là tên repo vừa tạo, ở đây của mình là mycv
.
Tham số cần chú ý tiếp theo là:
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
Đây chính là config sử dụng package gh-page
để deploy lên github. Sau khi đã config xong chúng ta thực hiện đẩy code lên github
git add .
git commit -m "Your awesome message"
git push origin master
Cuối cùng thực hiện deploy bằng câu lệnh
yarn run deploy
Khi đã deploy xong chúng ta vào setting của repo hiện tại trên github sẽ thấy phần cài đặt sau:
Có thể thấy github page của chúng ta được public ở url: https://{username}.github.io/{repo-name}
, và source code của trang static page này là nhánh gh-pages
.
Vậy thực sự thì package gh-pages
đã làm gì?. Chúng ta tiến hành checkout sang nhánh gh-pages
Ở đây ta thấy tất cả code ở nhánh master sẽ được complie hết lại thành các file và folder để github page có thể hiểu được, do đó sau này chỉ cần merged code vào master và tiến hành deploy bằng câu lệnh yarn run
thì branch gh-pages
sẽ được update lại.
Vậy là giờ đây chúng ta có thể làm việc với reactjs một cách bình thường, nhiệm vụ deploy đã có pakage gh-pages
lo )
Kết luận:
Vậy là mình đã giới thiệu xong cho các bạn cách deploy một ứng dụng web static bằng reactjs lên github pages. Các bạn có thể thỏa thích sáng tạo với github page và reactjs mà không cần lo lắng về chi phí.
Ở đây mình cũng đã viết một trang cv bằng reactjs và typescript trên github page tại đây
Một vài screenshot
Nhìn có vẻ nguy hiểm nhỉ =))
Vì mới tập tành reactjs nên code còn rất lởm khởm, nếu thấy hứng thú thì các bạn có thể clone source code của mình tại https://github.com/iamPhong/mycv và modify lại cho phù hợp nhé
Chúc các bạn một ngày mới làm việc hiệu quả và tràn trề năng lượng
Tham khảo:
https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f
All Rights Reserved