7 Cách deploy website tĩnh lên Internet

Trong quá trình học code web, sau khi hoàn thành một sản phẩm website nào đó, đôi khi bạn muốn đưa nó lên internet để khoe nó với bạn bè hoặc đưa nó cho mọi người góp ý (chứ không ai văng cả source code rồi biểu họ tự chạy cả 😂).

Bài viết hôm nay, mình sẽ giới thiệu đến mọi người một vài cách để deploy website tĩnh lên trên internet với Github pages, Firebase, Vercel, … Thật sự không quá khó đâu nhé.

Let’s get started !

Deploy website là gì ?

Trước tiên, chúng ta hãy tìm hiểu việc deploy một website là gì đã nhé.

Khi còn trong quá trình develop, chúng ta có thể thấy website của mình đang chạy trên http://localhost:port. Khi bạn truy cập vào đường dẫn này thì máy tính sẽ đọc và trả về cho trình duyệt các file html, css, js.

Tuy nhiên, khi bạn vào đường dẫn này trên một thiết bị khác thì nó sẽ không thể truy cập được. Vì máy tính (server) của chúng ta không cho phép thiết bị khác đọc file trong máy.

Tóm lại, để deploy website lên thì chúng ta cần một em server cho phép các thiết bị khác truy cập vào IP của nó để lấy dữ liệu web. Từ đó, có rất nhiều cách để làm việc này. Mọi người có thể thuê một bé VPS bên ngoài, tự build một server hoặc thuê một dịch vụ cloud có sẵn mọi thứ.

Trong bài viết này, mình chỉ hướng dẫn mọi người sẽ sử dụng các dịch vụ server cấu hình sẵn để đưa code của một website tĩnh (html, css, js) lên thôi nhé. Còn các website động mình sẽ có bài viết sau 😘

Chuẩn bị một website

Vì chỉ đơn giản là một website tĩnh nên mình chỉ cần chuẩn bị các file html, css, js thôi. Bạn nào dùng ReactJS hay FE library nào đó thì cũng chỉ cần build nó ra thành các file tĩnh này nhé.

1. GitHub Pages

GitHub ngoài việc lưu trữ các Repository ra thì GitHub còn cung cấp cho chúng ta dịch vụ là GitHub Pages, cho phép chúng ta có thể dùng làm host cho một website tĩnh.

Bước 1: Tạo Github Repository

Tạo một Github Repository, bạn nào chưa có tài khoản GitHub thì đăng ký tại đây nhé. Chú ý: URL website sau khi deploy thành công sẽ có dạng https://[username].github.io/[repository-name]. Còn nếu bạn đã có domain riêng rồi thì có thể không cần quan tâm vì chúng ta có thể trỏ domain lại sau.

Bước 2: Commit và Push code lên GitHub

Đẩy tất cả code của bạn lên Github nhé. Ở bước này chú ý file index.html nên ở thư mục root của repository (còn nếu đặt ở thư mục khác thì ở bạn chú ý bước 3 nhé).

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/[github-username]/[repository-name].git
git push -u origin master

Bước 3: Bật GihHub Pages

Truy cập vào Github Repository của bạn > Settings > Pages.

Phần Soure bạn chọn branch chứa code deploy, lúc nãy mình push lên master nên mình sẽ chọn master.

Phần chọn thư mục, nếu file index.html của bạn nằm ở root của repository thì giữ lựa chọn root. Còn không thì bạn chọn thư mục chứa file đó nhé.

Sau đó bấm Save lại là xong.

Giờ bạn có thể truy cập URL: https://[username].github.io/[repository-name] để vào trang webste nhé. Có một sau một lúc thì bạn mới có thể truy cập được, đừng lo nhé 😗

Ghi chú:

• Triển khai nhanh, tiện lợi vì kết nối thẳng với GitHub Repository.
• Tốc độ website cũng khá nhanh.
• Dễ dàng deploy demo.
• Giới hạn dung lượng upload là 1GB, băng thông 100GB/tháng, … đọc thêm ở đây
• Chỉ thích hợp với website tĩnh, đơn giản.

2. Firebase

Firebase là một nền tảng do Google phát triển, nó giúp chúng ta tạo một môi trường để chạy một ứng dụng nhanh chóng và hiệu quả. Firebase có rất nhiều tính năng như Authentication, Realtime Database, Functions, Hosting, …

Chúng ta sẽ dùng chức năng Hosting của Firebase để deploy website nhé.

Bước 1: Bạn cần có một tài khoản Google để sử dụng nhé. Sau đó truy cập và đăng nhập Firebase.

Bước 2: Tạo một project mới.

Sau khi đăng nhập, bạn chọn Go to Console > Create a project để tạo project mới.

Chú ý: Bạn cũng có thể đổi project id bằng cách bấm vào bút chì nhé. project id này sẽ là domain truy câp của chúng ta sau này.

Bước 3: Bật/tắt tính năng Google Analytics

Tính năng Google Analytics giúp bạn thu nhập dữ liệu, thống kê cho website của bạn sau này. Nếu không cần bạn có thể tắt nó đi để tạo project nhanh hơn nhé.

Bước 4: Chọn Hosting bên thanh menu sau đó chọn Get started

Bước 5: Cài đặt firebase-tools

Mở terminal hoặc cmd của bạn lên, sau đó chạy lệnh sau để cài đặt Firebase CLI

npm install -g firebase-tools

Bước 6: Kết nối firebase của bạn vừa cài với tài khoản Google

firebase login

Bước 7: Init firebase cho project

Di chuyển đến thư mục chứa source code của bạn, mở terminal và chạy lệnh sau:

firebase init

Chọn các option như sau nhé :

1. Are you ready to proceed? (Y/n): Y
2. Which Firebase CLI features do you want to set up for this folder? Hosting (dùng phím space để chọn)
3. Use an existing project
4. Chọn project id mà bạn tạo ở bước 2
5. What do you want to use as your public directory? (public): Enter
6. Configure as a single-page app (Nếu dùng SPA thì bạn chọn Y còn không thì chọn N): N
7. Set up automatic builds and deploys with GitHub? N

Bước 8: Bạn sẽ thấy firebase sẽ tạo cho bạn một folder public, bạn copy tất cả source code của mình vào đó, thay file index.html của nó bằng file index.html của bạn.

Bước 9: Chạy lệnh sau để tiến hành deploy

firebase deploy

Bước 10: Quay lại Firebase Console > Hosting ta sẽ thấy đường dẫn đến website mà bạn vừa deploy.

Ghi chú:

• Sau lần đầu deploy, mỗi lần cập nhật xong bạn chỉ cần chạy lệnh firebase deploy là nó sẽ tự deploy lại cho bạn.
• Website chạy rất nhanh.
• Dễ dàng deploy, custom domain.
• Tận dụng được rất nhiều tính năng hay ho của Firebase.
• Dễ dàng thống kê, thu thập dữ liệu qua Google Analytics.
• Một vài giới hạn của Firebase

3. Vercel

Vercel là một nền tảng serverless cực kỳ mạnh mẽ, nó giúp việc deploy ứng dụng frontend trở nên dễ dàng hơn bao giờ hết. Mình được biết đến Vercel khi sử dụng deploy ứng dụng Next.js.

Bước 1: Tạo một tài khoản Github và một repository và push source code như ở phần Github Pages nhé.

Bước 2 Đặng nhập vào Vercel. Bạn nào chưa có tài khoản thì đăng ký tại đây nhé, dùng tài khoản Github đã tạo ở B1 nhé.

Bước 2: Nhấn vào Create a New Project để tạo 1 project mới. Sau đó chọn repository trên github mà bạn cần deploy. Ở đây của mình là demo-deploy, sau đó chọn import.

Bước 3: Kéo xuống phần Configure Project > Deploy. Vậy là xong 😁 Quay lại Dashboard để lấy URL truy cập thôi.

Ghi chú:

• Deploy rất dễ dàng, nhanh chóng.
• Tốc độ tải trang nhanh.
• Thích hợp để deploy nhanh ứng dụng Reactjs, Nextjs, Nuxt.js, …
• Một vài giới hạn của gói Hobby

4. Surge.sh

Surge.sh là một dịch vụ giúp chúng ta deploy một trang web tĩnh để demo một cách nhanh chóng nhất.

Bước 1: Mở ternimal và cài surge.sh vào global qua lệnh sau:

npm i -g surge

Bước 2: Di chuyển đi thư mục chứa source code của bạn, sau đó chạy lệnh surge để deploy nhé. Nếu bạn dùng ReactJS hay thư việc JS khác thì chỉ cần build ra các file html, css, js trước, rồi di chuyển vào thư mục build đó, chạy lệnh surge.

Bước 3: Lựa chọn email và domain name.

Xong bây giờ bạn có thể truy cập website của bạn tại đường link [name].surge.sh.

Ghi chú:

• Surge.sh giúp bạn deploy cực kỳ dễ và nhanh chóng.
• Nó chỉ phù hợp cho việc demo nhanh và website cỡ nhỏ.

5. Netlify

Netlify là một công ty điện toán đám mây của Mỹ, nó cung cấp các dịch vụ lưu trữ, serverless cho các loại website.

Đầu tiên, đăng nhập vào Netlify tại đây. Nếu chưa có tài khoản bạn có thể dùng Github để đăng nhập luôn cho tiện.

Cách 1: Kéo thả cả thư mục vào

Đơn giản bạn chỉ cần nắm kéo thư mục chứa source code đã build ra các file html, css, js vào phần Sites ở phía trên là xong.

Bạn có thể custom lại domain bằng việc chọn vào Domain settings.

Cách 2: Connect với git

Bước 1: Chọn New site from Git

Bước 2: Chọn cách connect với git, ở đây project của mình đang ở GitHub Repository nên mình sẽ chọn Github.

Bước 3: Chọn repository chứa source code của bạn

Bước 4: Chọn branch và thư mục chứa file index.html để deploy, sau đó bấm Deploy Site. Xong

Cách 3: Dùng Netlify CLI

Với cách này chúng ta sẽ dùng CLI như Firebase vậy. Bạn đọc thêm ở đây nhé.

6. Heroku

Nếu bạn từng deploy các ứng dụng Nodejs thì chắc đã quá quen với Heroku. Nó là một nền tảng đám mây cung cấp các dịch vụ PAAS vô cùng tiện lợi để chúng ta deploy các ứng dụng Nodejs, Ruby, PHP, … vô cùng nhanh chóng.

Chú ý: Nếu trong git của bạn chỉ có các file html, css, js thì bạn cần tạo 1 file index.php với nội dung như sau và đặt cùng thư mục với index.html. Việc này giúp Heroku xác định app bạn đang chạy công nghệ gì để build.

<?php header( 'Location: /index.html' ) ;  ?>

Bước 1: Đăng nhập vào Heroku. Bạn nào chưa có tài khoản thì đăng ký ở đây nhé

Bước 2: Bấm New để tạo một project mới > đặt tên cho project.

Bước 3: Lúc này có 2 cách để deploy, 1 là dùng connect với repo của Github, 2 là dùng Heroku CLI. Mình sẽ hướng dẫn mọi người connect với github, còn Heroku CLI thì Heroku đã hướng dẫn chi tiết rồi, bạn làm theo nó là được nhé.

Bạn chọn vào phần Github (Connect to Github). Sau đó kết nối với github của bạn. Tiếp đến chọn repository chứa source code cần deploy. Sau đó bấm connect.

Chọn branch cần deploy. Nếu bạn muốn Heroku tự động deploy lại sau mỗi lần bạn có commit mới lên branch đã chọn thì nhấn vào Enable Automatic Deploys . Sau đó bấm vào Deploy Branch là xong.

7. Ngrok

Ngrok con đường nhanh nhất để đưa ứng dụng chúng ta lên internet.

Bước 1: Tải Ngrok về máy tại đây

Bước 2: Giải nén file vừa tải ra (nếu nó nén).

Bước 3: Chạy project của bạn lên dưới localhost như bình thường. Ví dụ ở đây mình chạy ở http://localhost:5500

Bước 4: Mở terminal của bạn, di chuyển đến nơi chứa file ngrok ở B2.

Bước 5: Chạy lệnh nrgok http port. Với port là port của ứng dụng bạn chạy ở B3. VD của mình là nrgok http 5500

Bước 6: Xong. Bạn sẽ thấy một đường dẫn có dạng http://[id].ngrok.io chính là website của chúng ta.

Tạm kết

Deploy website lên Internet thật dễ đúng không nào mọi người. Chúng ta vẫn còn rất nhiều cách khác để làm điều này như thuê VPS, tự build một server, đưa lên cloud như Amazon, Azure hoặc kiếm một hosting bất kỳ rồi đẩy code lên, …Nhưng nếu chỉ dừng ở việc demo thì mình nghĩ các cách trên đã quá đủ rồi nhỉ 😁

Mọi người có góp ý hay có cách nào hay ho thì comment bên dưới nhé. Rất cảm ơn mọi người đã đọc bài viết này 😘

Bạn có thể đọc thêm:

• Cách tối ưu Visual Studio Code hiệu quả
• Phá đảo HackerRank
• 3 Cách xây dựng giao diện Darkmode cho website