Nhiều nhà phát triển có một trang web cá nhân hoặc muốn có một trang web. Mặc dù có rất nhiều lựa chọn tuyệt vời để xây dựng một trang web đẹp mắt mà không cần bất kỳ kỹ năng mã hóa nào, nhưng chúng tôi là nhà phát triển phần mềm, vì vậy chúng tôi muốn thể hiện kỹ năng của mình và xây dựng thứ gì đó từ đầu. Viết mã trang web là một việc và bạn có thể hoàn thành công việc đó sau 1-2 ngày. Nhưng khi trang web của bạn hoạt động, bạn cần duy trì trang web để đảm bảo trang web luôn sẵn có, cập nhật và an toàn. Do đó, trong phần sau đây, chúng ta sẽ xem xét cách xây dựng và duy trì một trang web cá nhân với nỗ lực tối thiểu trong 10 bước đơn giản. Bởi vì, mặc dù chúng ta có thể thích viết mã, nhưng chúng ta cũng thích dành thời gian rời xa máy tính. 🌳🤸🍝 Tôi sẽ sử dụng trang web mà tôi vừa xây dựng lại trong React làm ví dụ. Bạn có thể tìm thấy mã nguồn trong của tôi. kho lưu trữ GitHub Các mẹo và thủ thuật sau đây giả sử một trang web tĩnh, siêu đơn giản chỉ bao gồm một phần giao diện người dùng. Tuy nhiên, bạn có thể dễ dàng mở rộng các khái niệm này sang các dự án phức tạp hơn bao gồm phụ trợ, cơ sở dữ liệu hoặc các phần cơ sở hạ tầng khác. Chúng tôi sẽ không đi vào chi tiết cho bất kỳ công nghệ nào được đề cập, mà sẽ đưa ra một cái nhìn tổng quan ở cấp độ cao để giữ cho nó không thể biết về công nghệ. 1. Thiết lập kho lưu trữ Chọn một nền tảng phát triển như GitHub hoặc GitLab và thiết lập một kho lưu trữ mới, trống. Đảm bảo bao gồm giấy phép và thêm README để cộng đồng biết họ có thể làm gì với mã của bạn. 2. Chọn một Khung công tác JS Chọn một khung hoặc thư viện JavaScript như React, Vue hoặc Svelte để sử dụng cho việc xây dựng trang web của bạn. Hoặc không, và sử dụng Vanilla HTML và JavaScript nếu đó là thứ bạn muốn thử. Khi chọn framework nào, điều quan trọng nhất là nó phải là thứ bạn thích làm việc cùng. Đây là trang web và bạn có thể sử dụng bất kỳ công cụ nào bạn thích. Bạn có thể chọn thứ gì đó mà bạn đã biết và thích, hoặc thử thứ gì đó hoàn toàn mới mà bạn tò mò. của bạn Tôi đã xây dựng trang chủ cá nhân đầu tiên của mình trong Vue.js. Khoảng một năm sau, tôi đã xây dựng lại nó trong React vì tôi muốn có thêm trải nghiệm React thực tế và thử một số thư viện React. Sử dụng các công cụ xây dựng của khung JS của bạn để tạo một số mã soạn sẵn và nhận một ví dụ kiểu Hello World đơn giản được cung cấp trên máy chủ cục bộ. 3. Chọn Thư viện thành phần giao diện người dùng Bước này là tùy chọn, nhưng vì chúng ta đang nói về việc giữ nỗ lực ở mức tối thiểu ở đây, tôi khuyên bạn nên đưa thư viện thành phần giao diện người dùng như UI UI hoặc Bootstrap vào dự án của mình. Tôi đã chọn Chakra UI cho trang web của mình. Các thư viện này đi kèm với một tập hợp các thành phần giao diện người dùng cũng như các tiện ích để bố trí và tạo kiểu, đồng thời cho phép bạn xây dựng siêu nhanh. Đảm bảo chọn thư viện thành phần có tài liệu đầy đủ mà bạn thấy hấp dẫn về mặt hình ảnh, bao gồm nhiều thành phần và có thể tùy chỉnh dễ dàng. Để tùy chỉnh giao diện của thư viện trên trang web của bạn, bạn có thể thử với các phông chữ và cách phối màu. 🎨 4. Xây dựng thứ gì đó siêu đơn giản Hãy suy nghĩ về những phần thông tin bạn muốn hiển thị trên trang chủ của mình, sau đó chỉ cần tiếp tục và xây dựng thứ gì đó bằng cách sử dụng các thành phần từ thư viện thành phần giao diện người dùng của bạn. Đừng suy nghĩ quá nhiều về nó. Mục tiêu chính bây giờ là làm cho một cái gì đó hoạt động nhanh chóng, và như Voltaire đã biết, sự hoàn hảo là kẻ thù của điều tốt. Nếu bạn có nhiều điều để nói và nhiều ý tưởng để hiển thị trên trang web của mình, thì điều đó thật tuyệt vời! Hãy tiếp tục và xây dựng, nhưng trước tiên hãy lập kế hoạch về cách tổ chức nội dung của bạn - nghĩ về định tuyến, các chế độ xem khác nhau, các phần, bố cục, điều hướng, v.v. Nhưng nếu bạn giống tôi, tại thời điểm này, bạn có thể tự hỏi mình nên đặt gì trên trang chủ của mình và tại sao bạn nên xây dựng một trang chủ vì AI SẼ QUAN TÂM?! 😳 Cảm xúc của bạn hoàn toàn hợp lệ, nhưng để tôi nói cho bạn biết, bạn không cần sự cho phép của bất kỳ ai hoặc nội dung ưa thích để có sự hiện diện trực tuyến. Giữ cho nó cực kỳ đơn giản và chỉ chia sẻ một số điều về bản thân mà bạn cảm thấy thoải mái khi chia sẻ với khách truy cập (có thể là bất kỳ ai có quyền truy cập internet - hãy ghi nhớ điều đó). Đối với trang web của mình, tôi giữ nó khá tối giản với một bức ảnh và dòng giới thiệu về bản thân, danh sách kho công nghệ của tôi, một số thứ tôi thích và một vài đề xuất về sách. 📚 Tôi cũng bao gồm các liên kết đến LinkedIn và GitHub của mình. Khi xây dựng giao diện người dùng cho trang web của bạn, hãy đảm bảo rằng nó thân thiện với thiết bị di động. Hầu hết các thư viện thành phần giao diện người dùng bao gồm một hệ thống lưới cho thiết kế đáp ứng, do đó, bạn có thể dễ dàng làm cho trang web của mình phản hồi nhanh ngay từ đầu. Kiểm tra nó trên các thiết bị và kích thước màn hình khác nhau để đảm bảo rằng tất cả các tương tác cũng hoạt động tốt trên thiết bị di động. 5. Thêm điều gì đó thú vị Ở Bước 4, chúng tôi đã xây dựng một thứ siêu đơn giản, nhưng đơn giản không có nghĩa là nhàm chán. Vì vậy, bây giờ, hãy tương tác. 🚀 Cố gắng nghĩ ra một số cách dễ dàng để làm cho việc truy cập vào trang web của bạn vui vẻ và thú vị hơn. Điều đó có thể bao gồm những thứ như hoạt ảnh, tương tác của người dùng hoặc thay đổi bảng màu. Tuy nhiên, đừng phát minh lại bánh xe. Nếu bạn có ý tưởng về những việc cần làm, rất có thể đã có gói npm thực hiện chính xác điều đó. Tôi đã sử dụng hoạt ảnh cuộn cho thanh điều hướng, một nút để chuyển đổi giữa chế độ tối và sáng với hiệu ứng chuyển tiếp đẹp mắt và nút biểu tượng bắt đầu bữa tiệc hoa giấy bất ngờ bằng cách sử dụng . phản ứng-confetti Và thế là xong, bạn đã xây dựng cho mình một trang web! 🥳 Tiếp theo hãy xem cách triển khai và bảo trì nó. 6. Triển khai Có nhiều tùy chọn về cách triển khai trang web của bạn lên internet hoàn toàn miễn phí, chẳng hạn như Trang Netlify, Vercel hoặc GitHub. Các bước chính xác sẽ tùy thuộc vào nhà cung cấp mà bạn chọn, vì vậy hãy làm theo hướng dẫn cho đến khi trang web của bạn hoạt động dưới một số URL. Tôi đã sử dụng Netlify và thấy việc thiết lập nó cực kỳ dễ dàng. Là một bước tùy chọn, bạn có thể quyết định mua một tên miền tùy chỉnh và kết nối tên miền đó với DNS của nhà cung cấp để thay thế URL tùy ý mà bạn có. Bạn không cần phải làm điều đó, nhưng tôi thấy một tên miền tùy chỉnh là một điểm nhấn thú vị và việc mua một miền không nên tốn quá 10 đô la/năm. Khi đặt trang web của bạn hoạt động, bạn cũng có thể phải kiểm tra các yêu cầu pháp lý của quốc gia mình. Tùy thuộc vào nơi bạn sống hoặc lưu trữ trang web của bạn và loại dữ liệu bạn thu thập từ khách truy cập, bạn có thể phải đưa vào những thứ như thông báo pháp lý hoặc chính sách quyền riêng tư. 7. Thiết lập CI/CD Bây giờ trang web của bạn đang hoạt động trên internet, bạn muốn đảm bảo rằng bạn không vô tình phá vỡ nó bằng các cam kết trong tương lai. Bạn cũng muốn tự động triển khai phiên bản mới nhất của nhánh của mình. main Nền tảng phát triển của bạn có thể đã được tích hợp sẵn các công cụ CI/CD, chẳng hạn như GitHub Actions hoặc GitLab CI/CD. Tôi đang sử dụng Tác vụ GitHub vì kho lưu trữ của tôi tồn tại trên GitHub. Đối với Tích hợp liên tục, bạn có thể thiết lập một số kiểm tra tự động cho mọi Yêu cầu kéo và mọi hợp nhất với nhánh . Điều đó có thể bao gồm các kiểm tra như linting&formatting hoặc kiểm tra đơn vị. main Ngoài ra còn có nhiều mẫu có sẵn, ví dụ: tôi sử dụng Hành động GitHub dựng sẵn để khám phá các lỗ hổng với CodeQL. Đối với Triển khai liên tục, bạn có thể thiết lập tập lệnh triển khai của riêng mình chạy trên mỗi lần đẩy lên sau khi hoàn tất tất cả các kiểm tra. Nhưng tùy thuộc vào nhà cung cấp dịch vụ lưu trữ mà bạn đã chọn ở Bước 6, bạn có thể không phải làm gì cả. main Ví dụ, Netlify tích hợp độc đáo với GitHub để nhánh được triển khai tự động. main 8. Sử dụng Dependabot để luôn cập nhật các phụ thuộc của bạn Chúng tôi đã xây dựng một trang web, chúng tôi đặt nó hoạt động và bây giờ tất cả những gì chúng tôi muốn làm là thư giãn. Nhưng hệ sinh thái JS phát triển nhanh chóng và các lỗ hổng của nó cũng vậy. Chúng tôi muốn đảm bảo rằng các phụ thuộc của chúng tôi được cập nhật để giữ an toàn cho ứng dụng của chúng tôi, nhưng việc quản lý phụ thuộc npm có thể gây khó khăn và chúng tôi chắc chắn không muốn kiểm tra các bản cập nhật mỗi ngày. May mắn thay, có một công cụ nhỏ tuyệt vời tên là Dependabot có thể giải quyết tất cả những việc đó cho chúng ta. 🤖 Dependabot là một công cụ do GitHub tạo ra để cập nhật phần phụ thuộc tự động. Hiện tại cũng có phiên bản dành cho GitLab. Tất cả những gì bạn phải làm là thêm một tệp tin và GitHub sẽ tự động tạo các Yêu cầu kéo khi có phiên bản mới của các gói bạn sử dụng. Bạn có thể định cấu hình Dependabot trong tệp YAML, chẳng hạn như đặt Người được chỉ định cho PR và số lượng PR mở tối đa. dependabot.yml Vì chúng tôi đã thiết lập một số kiểm tra tự động cho PR ở Bước 7, những kiểm tra này sẽ chạy với mọi PR của Dependabot và chúng tôi có thể chắc chắn rằng phiên bản mới sẽ không phá vỡ trang web của chúng tôi. Trong cài đặt bảo mật kho lưu trữ, bạn cũng có thể định cấu hình phụ thuộc để cảnh báo cho bạn về bất kỳ lỗ hổng nào trong phụ thuộc của bạn. 9. Kiểm tra các vấn đề về khả năng truy cập Khả năng truy cập là một chủ đề kỳ lạ - nó cực kỳ quan trọng, nhưng thường bị bỏ quên, mặc dù có rất nhiều kết quả thấp khi nói đến việc cải thiện khả năng truy cập của trang web. Nếu bạn sử dụng khung công tác JS và thư viện thành phần giao diện người dùng, thì điểm khả năng tiếp cận của bạn sẽ không quá tệ. Có lẽ nó vẫn có thể được cải thiện, đặc biệt nếu bạn bao gồm các phông chữ hoặc bảng màu tùy chỉnh. Bạn có thể chạy một công cụ như Ngọn hải đăng trong Công cụ dành cho nhà phát triển Chrome để khám phá các cải tiến tiềm năng. Lighthouse sẽ tạo báo cáo cho bạn và đề xuất các thay đổi để cải thiện khả năng truy cập. Những đề xuất này thường dễ triển khai, chẳng hạn như tăng kích thước phông chữ, thay đổi độ tương phản giữa văn bản và nền hoặc sắp xếp lại thứ tự các thành phần HTML trong DOM. Lighthouse cũng có thể tạo các báo cáo về hiệu suất, các phương pháp hay nhất và SEO. 🆒 10. Chạy một công việc định kỳ để Ping trang web của bạn Sau khi tôi đưa trang web của mình vào hoạt động, tôi cảm thấy thôi thúc phải kiểm tra ít nhất một lần một ngày xem nó có còn ở đó không. 🕵️♀️ Lúc đầu, tôi rất vui mỗi khi thấy trang web của mình vẫn còn, nhưng sau đó nó nhanh chóng trở nên nhàm chán. Để đảm bảo rằng bạn nhận được thông báo tự động nếu trang web của bạn ngừng hoạt động vì bất kỳ lý do gì, bạn có thể thiết lập một công việc định kỳ chỉ đơn giản là ping URL của trang web của bạn theo định kỳ. Nếu dự án của bạn bao gồm phần phụ trợ và DB, bạn cũng có thể thiết lập một số thử nghiệm khói cơ bản để thực thi, chẳng hạn như một số yêu cầu trên API của bạn. GET Trong trường hợp của tôi, tôi chỉ thiết lập một Hành động GitHub khác chạy mỗi ngày một lần và ping trang của tôi. Tăng tần suất khi bạn thấy phù hợp với trang chủ của mình và loại lưu lượng truy cập mà bạn đang mong đợi. Phần kết luận Và chúng tôi đã hoàn thành! Ít nhất cho tới hiện tại. Đối với tôi, trang web của tôi phục vụ trước hết như một sân chơi để thử các công nghệ mà tôi tò mò, vì vậy thỉnh thoảng tôi muốn sửa đổi nó. Tôi khuyến khích bạn thường xuyên xem lại mã trang web của mình và tận hưởng nó. 💃 Tôi hy vọng hướng dẫn này đã cho bạn ý tưởng về việc xây dựng và duy trì trang chủ cá nhân có thể dễ dàng như thế nào. Bạn có thể có thể xây dựng một cái gì đó đơn giản trong 1-2 ngày (nếu bạn giống tôi, hãy thêm hai ngày nữa để có bố cục CSS phù hợp 🙄). Việc triển khai trang web của bạn và thêm một số tính năng tự động hóa để giúp việc bảo trì trở nên dễ dàng có thể được thực hiện trong vòng chưa đầy 2 giờ. Mong được xem tất cả các trang web tuyệt vời mà bạn sẽ xây dựng! 🤩
