Deploy VueJS project lên Github.io trong 5 phút

Github.IO là nơi chúng ta có thể hosting các project free trực tiếp từ các repository trên github.com. Ở Github.io các bạn có thể hosting các trang web như profile cá nhân, landing page, hay các trang giới thiệu sản phẩm/project,...

Hôm nay mình sẽ hướng dẫn các bạn cách deploy VueJS project lên github.io, nhờ đó các bạn có thể hosting project VueJS của mình một cách nhanh chóng và hoàn toàn miễn phí.

Đầu tiên các bạn cần phải cài vue-cli nhé. nếu bạn chưa có thì có thể chạy command sau:

npm install -g @vue/cli

Sau đó chúng ta sẽ cùng tạo một project mới bằng vue-cli nhé:

vue init webpack git-deploy-template
cd git-deploy-template

Để deploy project lên github.io chúng ta cần phải cài package push-dir bằng command sau:

npm install --save-dev push-dir

Sau khi cài đặt xong package này, chúng ta cần add thêm một đoạn script vào file package.json, các bạn mở package.json, và thêm đoạn code sau vào mục scripts nhé:

Sau đó chúng ta chạy command sau:

npm run build

Nó tự động sinh ra cho chúng ta thư mục dist ở trong project của chúng ta, nếu sau khi chỉnh sửa nội dung thấy báo lỗi Eslint.... thì các bạn vào file package.json tìm đến build trong phần scripts và xoá đi ENABLE_ESLINT=true nhé. Nội dung trong folder dist trông sẽ như sau:

Bây giờ chúng ta cần tạo một repository để upload project của chúng ta lên github. Các bạn đăng nhập vào github của mình. Tạo một repository mới, đặt tên tuỳ ý. Sau đó các bạn vào Setting của repository vừa tạo, kéo xuống dưới phần Github Pages các bạn bật chức năng này lên, chọn master branch sau đó bấm Save

Chú ý

Nếu bây giớ chúng ta upload luôn project lên thì khi chúng ta truy vào vào project sẽ không thấy gì cả, mở console sẽ thấy báo lỗi không tìm thấy resources. Lý do bởi vì các đường dẫn ở các thẻ <link> hay <script> không đúng, do webpack sẽ import tất cả các resources vào trang ngay sau dấu /, điều này có nghĩa là khi bạn truy cập trang, nó sẽ cố gắng giải quyết nội dung từ <your username>.github.io/ thay vì <your username>.github.io/project-name/.

Vì vậy chúng ta cần phải config lại một chút nhé. Các bạn mở file /config/index.js, tìm đến mục build, sử lại assetsPublicPath như sau:

assetsPublicPath: '<tên repository trên github>',

Sau đó chúng ta cần chạy lại command npm run build để build lại project. Các bạn có thể kiểm tra bằng cách vào /dist/index.html xem ở các thẻ <link> hay <script> sẽ thấy có tiền tố ở các đường dẫn là tên của repository của các bạn.

Bây giờ chúng ta quay về thư mục project VueJS, mở terminal/powerShell ở folder dist sau đó làm các bước sau để upload lên github:

git init
git add .
git commit -m "first commit"
git remote add origin <link repository github của các bạn>
git remote -v
git push -u origin master --force

Sau đó chúng ta vào lại phần Setting của repository trên github và lại kéo xuống phần Github Pages xem thử sẽ thấy thông báo như sau:

Các bạn click vào link ở dòng Your site is published .... và BOOM các bạn sẽ thấy project của mình đã được hosting thành công. Nhớ là Github.io sử dụng Browser Cache nên những lần sau khi các bạn chỉnh sửa lại project và commit lên thì lúc truy vào trang project của các bạn thì có thể nội dung không thay đổi, cần phải clear cache bằng các bấm Crtl + f5 (window) hoặc Cmd + R hoặc cho chắc ăn thì ở trang github.io của các bạn, click chuột phải > inspect > application > clear storage > clear site data, sau đó load lại thì nội dung sẽ được cập nhật nhé(hình dưới).

Đến đây thì mình đã kết thúc bài post của mình rồi, hi vọng các bạn đã biết cách có thể deploy project sử dụng VueJS lên Github.io từ đó có thể tạo ra các sản phẩm của riêng mình như sau đó upload lên hosting free.

Nhớ là Github.io mới chỉ hỗ trợ HTML, CSS, JS viết code php đẩy lên là không chạy đâu nhé, hi vọng tương lai sẽ có

Cám ơn các bạn đã theo dõi ^^