Mở đầu
Chắc các bạn cũng không còn xa lạ gì với dịch vụ rút gọn liên kết (URL shortener) rồi nhỉ. Thật là tiện để tạo một liên kết ngắn gọn, dễ nhìn dễ viết và gửi cho bạn bè của bạn. Ngặt nỗi bây giờ nhiều người xài nó, nên sẽ thật khó để tùy biến cho đúng ý mình. bit.ly/TapDoanDocAcDoofenshmirtz-MuaNutTuHuy nhìn không ổn lắm, nhỉ? Đã đến lúc để mang đến thương hiệu cá nhân cho chính bạn rồi. Trong bài này, tôi sẽ chỉ bạn cách để làm URL shortener mang riêng tên bạn mà không phải trả nhiều phí.
Tuy quy trình này không quá dễ để thực hiện, nhưng tôi hy vọng rằng bài viết này sẽ giúp các bạn có thể làm được.
Quy trình
Bước 1: Mua tên miền
Để có thể tạo được URL shortener, bạn cần… một tên miền. Mà phải mua tên miền nha, có nhiều trang cung cấp tên miền miễn phí lắm, nhưng tôi không khuyến khích bạn sử dụng chúng đâu. Tên miền miễn phí hay được gắn với những trò lừa đảo trên mạng, nên các dịch vụ trên internet cũng không có nhiều thiện cảm với chúng lắm. Chia sẻ lên mạng xong bị báo cáo, rồi tên miền bị chặn là hơi bị phiền phức luôn á.
Các tên miền có đuôi .top, .win, .link .vip, .one là các lựa chọn tốt vì giá khá rẻ và có nhiều tên miền ngắn hơn. Bạn cũng có thể suy nghĩ tới .xyz, .cam, hay .com tùy sở thích của bạn. Lưu ý rằng, hãy cân nhắc tới giá gia hạn nữa nhé, vì nếu một tên miền mua năm đầu giá $1 mà gia hạn giá $20/năm thì cũng không kinh tế về lâu về dài đâu nhé.
Nói chung thì bạn thích mua ở đâu và mua tên miền nào cũng được, miễn sao bạn đủ tiền để chi trả ngay bây giờ và trong tương lai là được ha.
Bước 2: Đăng ký tài khoản tại GitHub và Netlify
Mở tài khoản ở cả hai trang này nếu bạn chưa có tài khoản. Chúng ta sẽ dùng GitHub để lưu trữ các liên kết của URL shortener, và Netlify để host trang web.
Bạn cũng có thể dùng GitLab và Bitbucket thay cho GitHub. Tuy bên dưới chỉ có hướng dẫn dành cho GitHub, nhưng các bước không khác nhau lắm đâu.
Bước 3: Tạo một repo chứa URL shortener
Nhìn sang bên trái giao diện, bạn sẽ thấy nút Create repository màu xanh. Nhấn vào đó để tạo một repo mới. Bạn cũng có thể nhấn vào dấu cộng ở góc trên bên phải, sau đó chọn New repository.
Chọn tên cho repo của bạn, và nhớ click chọn Private nhé. Bạn không muốn ai đó ngó qua profile của bạn và biết hểt mọi đường dẫn bạn có mà, đúng không? Xong rồi xuống dưới, chọn Create repository để bắt đầu nhé.
Tiếp tục nhấn uploading an existing file.
Tải file mẫu sau đây, sau đó giải nén nó ra. Hãy chọn hết cả 2 file bên trong (đừng kéo thư mục lên nhé), sau đó kéo thả chúng vào GitHub để tải file lên.
Cuối cùng, nhấn Commit changes để hoàn thành việc tải file.
Bước 4: Thêm và sửa các địa chỉ được rút gọn
File _redirects quan trọng nhất đó, nó chính là thứ báo cho trình duyệt biết các liên kết sẽ đi đâu. Về cơ bản thì cấu trúc bên trong của file _redirects như vầy:
# Bắt đầu hàng bằng dấu # để viết bình luận
/ https://nguyenhuudailoc.com
/blog https://nguyenhuudailoc.com/blog
/notrickroll https://www.youtube.com/watch?v=dQw4w9WgXcQ
Mỗi dòng là một quy tắc chuyển hướng, bắt đầu bằng phần đuôi của địa chỉ nhập vào (tenmienrutgon.com/phần đuôi), một vài khoảng trống (có là được, thêm bao nhiêu cho dễ nhìn là tùy bạn), và sau đó là liên kết cần chuyển hướng tới. Đây là những thứ bắt buộc phải có. Bạn cũng có thể thêm các hàng bắt đầu bằng dấu #, và chúng có thể được dùng để phân nhóm, viết ghi chú, hoặc là trang trí cho file.
LƯU Ý
Netlify đọc quy tắc chuyển hướng từ trên xuống dưới. Nếu có hai hoặc nhiều hơn các quy tắc có chung phần đuôi, Netlify sẽ chỉ đọc quy tắc đầu tiên.
Để sửa file _redirects trong trình duyệt, hãy mở GitHub, sau đó nhấn vào ảnh đại diện của bạn ở góc trên bên phải. Chọn Your repositories và chọn repo bạn đã tạo, sau đó nhấn vào file _redirects.
Có hai cách để tiếp tục:
Cách ít phức tạp nhất: Nhấn vào cây bút ở phía bên phải. Sửa file theo ý muốn, sau đó xuống cuối trang và chọn Commit change.
Cách có đủ tính năng nhất: Nhấn dấu chấm (.) để mở một phiên bản rút gọn của Visual Studio Code trong trình duyệt của bạn, sau đó sửa file như bình thường. Bạn sẽ nhìn thấy biểu tượng Source Control ở thanh bên hiện số. Nhấn vào đó hoặc nhấn Ctrl + Shift + G, nhập thông điệp (nhập dấu chấm hay dấu cách cũng được), sau đó nhấn vào hình dấu tick để lưu thay đổi.
Bước 5: Thiết lập tên miền ở Netlify
Đăng nhập lại vào Netlify nếu cần. Sau đó nhấn vào tab Domains, chọn Add or register domain.
Nhập tên miền của bạn và chọn Verify. Sau đó nhấn Add domain.
Tại màn hình tiếp theo, nhấn Continue.
Netlify sẽ cho bạn 4 name servers để bạn cập nhật. Copy tất cả chúng, rồi nhấn Done.
Sau khi có name servers, hãy mở trang đăng ký tên miền của bạn, sau đó vào phần quản lý. Tìm cài đặt cho phép bạn thay đổi name servers/DNS name servers/DNS servers (nó hay nằm trong mục Quản lý), sau đó thay các name server đã có bằng 4 name servers của Netlify và lưu thay đổi.
Nếu bạn vẫn không biết cách, hãy thử lên mạng và tìm “cách thay đổi name server [nơi bạn đăng ký tên miền]” hoặc hỏi nhân viên chăm sóc khách hàng của bạn.
Thường thì mấy thay đổi này sẽ chỉ mất vài giây đến vài phút để cập nhật, nhưng sẽ có trường hợp mà bạn phải chờ một ngày mới xong. Hãy thử kiểm tra tên miền của bạn xem name server đã trỏ chính xác chưa nhé.
Bước 6: Liên kết với GitHub
Trở về tab Team overview, và chọn New site from Git. Sau đó bạn nhấn vào GitHub để thực hiện xác thực.
Nhấn Authorize Netlify để cấp quyền cho Netlify truy cập vào tài khoản GitHub của bạn.
Nhấn Install để cài đặt ứng dụng Netlify vào tài khoản GitHub của bạn.
Chọn repo mà bạn đã tạo ở GitHub. Sau đó chọn Deploy site.
Tiếp tục nhấn vào Domain settings, sau đó chọn Add custom domain.
Nhập tên miền của bạn (bạn có thể nhập alias mong muốn ở bước này, chẳng hạn l.nhdl.xyz), sau đó chọn Verify. Nhấn nút Add domain để hoàn thành.
Cuộn xuống mục HTTPS, bấm vào Verify DNS configuration. Chờ một lát, rồi chọn Provision certificate. Tiếp tục chọn Provision certificate trong hộp thoại hiện ra.
Nếu Netlify không thể cấp chứng chỉ https cho bạn, hãy tải lại trang và thử lại. Nếu vẫn tiếp tục gặp lỗi, hãy liên hệ security@letsencrypt.org hoặc unblock-request@letsencrypt.org (viết tiếng Anh nhé) để yêu cầu hỗ trợ.
Bây giờ, hãy thử truy cập một liên kết rút gọn mà bạn đã tạo xem mọi thứ đã hoạt động ổn định chưa nhé. Từ giờ trở đi, mỗi khi bạn commit bên GitHub, Netlify sẽ tự động cập nhật cho bạn luôn.
Bước 7: Tùy biến trang báo lỗi
Trong 2 file ở file mẫu bên trên, file 404.html là trang báo lỗi khi người dùng nhập một địa chỉ không tồn tại. Nhớ mở file lên và sửa email thành email của bạn nhé!
Ngoài ra, bạn cũng có thể thay file này bằng bất kì mẫu trang 404 nào mà bạn thích. Còn nếu thích tùy biến file của tôi nhiều hơn, hãy thử đọc thêm chút xíu về HTML tags nhé. Tag <a> và <p> là những tag cơ bản mà bạn cần. Ngoài ra, hãy thử thay đổi các yếu tố color cho đúng ý bạn. Thay đổi xong rồi, hãy thử dán toàn bộ code vào đây xem nó đã chuẩn chưa trước khi commit nhé.
Để lại bình luận