Hành trình tự xây dựng một trang web cá nhân từ con số 0

Tại sao chọn xây dựng trang web cá nhân?

Những bế tắc của mạng xã hội

Nền tảng mạng xã hội ngày nay đã thay đổi mùi vị:

• Facebook tràn ngập nội dung chất lượng thấp do AI tạo ra
• Twitter trở thành nơi tập hợp tiếng ồn thông tin
• Instagram hoàn toàn trở thành bản sao của TikTok
• Tất cả các nền tảng đang điên cuồng thu thập dữ liệu và thời gian của người dùng

Quan trọng hơn, nội dung bạn tạo ra trên các nền tảng này không thực sự thuộc về bạn. Thuật toán quyết định ai có thể nhìn thấy tác phẩm của bạn, và quy tắc của nền tảng có thể thay đổi bất cứ lúc nào.

Khám phá lại Indie Web

Nửa năm trước, tôi tình cờ xem được một video về "Indie Web". Đó là lúc tôi phát hiện ra rằng có cả một cộng đồng những người đang xây dựng trang web cá nhân theo cách riêng của họ - không phụ thuộc vào các nền tảng lớn, hoàn toàn kiểm soát không gian kỹ thuật số của mình.

Điều này khiến tôi nhớ lại những blog cá nhân đầy sáng tạo mà tôi đã duyệt web khi còn nhỏ: mỗi trang web có một thiết kế độc đáo, và chủ sở hữu chia sẻ những nội dung mà họ thực sự yêu thích. Sự tự do sáng tạo thuần khiết đó đã thu hút tôi sâu sắc.

Từ nhập môn đến sụp đổ: Quá trình xây dựng trang web của tôi

Giai đoạn 1: Ôn lại HTML/CSS

Mặc dù trước đây tôi đã học HTML và CSS, nhưng đã hơn một năm không chạm vào code, tôi gần như quên hết. Ban đầu:

• Mỗi thẻ HTML đều phải tra cứu tài liệu
• Bố cục CSS thường xuyên bị sai lệch không mong muốn
• Thậm chí tôi đã phải xóa bỏ hoàn toàn thiết kế trang web phiên bản đầu tiên

Thách thức lớn nhất: Làm thế nào để trang web không trông giống như một "bài tập thực hành của người mới bắt đầu"?

Tôi quyết định quay trở lại cổ điển - mô phỏng phong cách trang web cá nhân đầy màu sắc và phong phú của những năm đầu những năm 2000. Tôi đã sử dụng:

• Công cụ tạo họa tiết nền cổ điển
• Công cụ tạo GIF chữ nhấp nháy
• Nhiều biểu tượng nhỏ, nút bấm và huy hiệu

Giai đoạn 2: Rơi vào vòng lặp "không bao giờ hài lòng"

Khi trang web về cơ bản đã thành hình, những vấn đề mới xuất hiện: càng nhìn càng không hài lòng.

Khi duyệt các trang web cá nhân tuyệt vời khác, tôi luôn cảm thấy tác phẩm của mình giống như "vết vẽ nguệch ngoạc của trẻ con". Đặc biệt khi nhìn thấy những trang web thú vị áp dụng hiệu ứng màn hình CRT, tôi bắt đầu nghi ngờ thiết kế của mình.

Lúc này có hai lựa chọn:

1. Làm lại từ đầu (nhưng đã đầu tư quá nhiều thời gian)
2. Tìm cách tối ưu hóa thiết kế hiện có

Tôi chọn cách thứ hai và đưa ra một quyết định táo bạo - thêm chức năng chuyển đổi chủ đề.

Giai đoạn 3: Sự nổi dậy của JavaScript

Để thực hiện chuyển đổi hai chủ đề (màu sáng + phong cách CRT cổ điển màu tối), tôi buộc phải học lại JavaScript.

Cách triển khai ban đầu rất vụng về:

• Sao chép hai bộ nội dung đầy đủ trên mỗi trang
• Sử dụng các tệp CSS khác nhau để kiểm soát hiển thị/ẩn
• Dẫn đến mã nguồn cực kỳ dư thừa và lộn xộn

Sau đó, tôi phát hiện ra có thể giải quyết bằng tư duy module hóa:

• Chỉ áp dụng lớp chủ đề cho các phần tử cụ thể (như tiêu đề)
• Sử dụng JavaScript để động thay đổi tệp CSS
• Giảm đáng kể mã nguồn trùng lặp

Quá trình này khiến tôi nhớ lại cảm giác vui vẻ khi học React - cảm giác thành tựu không gì sánh được khi bạn tìm ra một giải pháp thanh lịch hơn.

Tính năng và điểm nhấn thiết kế của trang web

Chủ đề: Mộng mơ màu hồng vs. Terminal cổ điển

Chủ đề sáng sử dụng tông màu hồng, sạch sẽ và đầy sức sống; chủ đề tối mô phỏng hiệu ứng màn hình CRT cũ, nền bầu trời đầy sao kết hợp bộ lọc đường quét, tạo ra bầu không khí cyberpunk cổ điển.

Nút chuyển đổi được thiết kế với hiệu ứng xem trước khi di chuột - khi di chuột qua, bạn có thể mơ hồ nhìn thấy hình dáng của chủ đề kia, một chi tiết nhỏ mà tôi đặc biệt hài lòng.

Khu vực blog: Tái hiện màn hình nền Windows 98

Khu vực blog là tác phẩm mà tôi tự hào nhất. Sử dụng framework 98.css, nó tái hiện hoàn chỉnh môi trường màn hình nền Windows 98:

• Cửa sổ có thể thu nhỏ/đóng
• Menu Bắt đầu có thể tương tác
• Thành phần máy nghe nhạc CD có thể phát nhạc
• Thanh tác vụ hiển thị "ứng dụng" đã mở

Tất cả logic cửa sổ đều do tôi tự viết bằng JavaScript thuần túy. Khi nhấp vào nút thu nhỏ, cửa sổ thực sự sẽ thu nhỏ xuống thanh tác vụ; khi nhấp vào đóng, biểu tượng sẽ biến mất nhưng có thể mở lại từ màn hình nền.

Các thành phần tương tác hữu ích

Ngoài hiệu ứng hình ảnh, tôi còn bổ sung nhiều chức năng hữu ích:

• Bộ đếm khách truy cập: Ghi lại số lượt truy cập trang web
• Cập nhật trạng thái: Hiển thị tôi đang làm gì theo thời gian thực
• Thành phần trò chuyện thời gian thực: Khách truy cập có thể để lại tin nhắn tương tác
• Thú cưng điện tử (Tamagotchi): Khách truy cập có thể cho ăn và nuôi dưỡng
• Liên kết Web Ring: Khám phá các trang web độc lập thú vị khác

Những chức năng này khiến trang web không còn là một minh chứng tĩnh, mà là một không gian tương tác sống động.

Từ NeoCities đến NecoWeb: Chọn nền tảng lưu trữ phù hợp

Tại sao di chuyển?

Ban đầu, tôi chọn NeoCities để lưu trữ trang web - nó là nền tảng Indie Web nổi tiếng nhất. Nhưng sau đó tôi phát hiện ra một vài vấn đề:

• Mặc định cho phép AI thu thập nội dung trang web để huấn luyện mô hình
• Không hỗ trợ script bên ngoài, hạn chế mở rộng chức năng
• Các tính năng dành cho thành viên trả phí không có tỷ lệ hiệu quả trên chi phí cao

Ưu điểm của NecoWeb

NecoWeb, mặc dù mới hơn và cộng đồng nhỏ hơn, nhưng có những ưu điểm rõ ràng:

• Cấm rõ ràng trình thu thập AI thu thập nội dung người dùng
• Hỗ trợ script bên ngoài và chức năng linh hoạt hơn
• Giá thành viên hợp lý hơn, quyền lợi thiết thực hơn

Đối với những người sáng tạo đề cao quyền sở hữu nội dung và tự do sáng tạo, NecoWeb là một lựa chọn tốt hơn. Điều này đặc biệt quan trọng nếu bạn lo ngại tác phẩm của mình bị AI sử dụng miễn phí.

💡 Lời nhắc MasLogin: Nếu bạn cần quản lý an toàn nhiều tài khoản trang web (ví dụ: chạy nhiều trang web độc lập cùng lúc), bạn có thể sử dụng trình duyệt chống phát hiện MasLogin. Nó có thể tạo môi trường trình duyệt riêng biệt cho từng tài khoản, tránh bị nền tảng phát hiện liên kết, đảm bảo an toàn cho việc vận hành đa tài khoản của bạn.

Tối ưu hóa liên tục: Con đường hoàn thiện không bao giờ kết thúc

Thích ứng trên thiết bị di động

Mặc dù trang web cá nhân chủ yếu hướng đến người dùng máy tính để bàn, tôi vẫn thiết kế đáp ứng cơ bản, đảm bảo người dùng điện thoại di động cũng có thể truy cập nội dung bình thường.

Tái cấu trúc module hóa

Để thuận tiện cho việc bảo trì sau này, tôi đã chuyển đổi các yếu tố lặp lại như thanh bên, tiêu đề, chân trang thành các module có thể tái sử dụng. Bây giờ, chỉ cần sửa một chỗ, toàn bộ trang web sẽ cập nhật đồng bộ - hiệu quả tăng lên đáng kể.

Tối ưu hóa và làm sạch mã nguồn

Nhìn lại mã nguồn ban đầu, tôi phát hiện ra nhiều cách viết dư thừa và không chuẩn. Mặc dù chức năng vẫn hoạt động, nhưng với tư cách là một dự án học tập, tôi quyết định từng bước tái cấu trúc những "nợ kỹ thuật" này.

Quan trọng: Đừng vì mã nguồn không hoàn hảo mà từ bỏ việc xuất bản. Hãy cho tác phẩm lên mạng trước, rồi từ từ trau chuốt - đó mới là quá trình sáng tạo thực tế.

Bài học từ kinh nghiệm này là gì?

Yêu lại lập trình

Tôi đã từng nghĩ dự án này sẽ khiến tôi chán ghét việc lập trình, nhưng ngược lại. Giải quyết các vấn đề thực tế, nhìn thấy kết quả hiển thị ngay lập tức là quá trình khơi dậy niềm đam mê học hỏi hơn bất kỳ hướng dẫn nào.

Tôi thậm chí còn bắt đầu học Python, đơn giản vì tôi thích thú với việc lập trình.

Chấp nhận sự sáng tạo không hoàn hảo

Trong thời đại công cụ AI tràn lan, lợi thế lớn nhất của người sáng tạo là sự chân thực và độc đáo, không phải sự hoàn hảo. Mã nguồn trang web của tôi có lộn xộn không? Có. Thiết kế có chuyên nghiệp không? Không hẳn. Nhưng nó là 100% do tôi tự làm, mang theo thẩm mỹ, suy nghĩ và lộ trình học tập của tôi.

Sự không hoàn hảo này, đúng là giá trị quý giá nhất.

Quyền sở hữu không gian kỹ thuật số

Trên trang web của riêng mình, bạn không cần phải lo lắng về:

• Liệu thuật toán có đề xuất nội dung của bạn không
• Quy tắc nền tảng đột ngột thay đổi
• Tài khoản bị khóa vô cớ
• Dữ liệu bị sử dụng để huấn luyện AI

Cảm giác kiểm soát hoàn toàn này, là điều mà bất kỳ nền tảng mạng xã hội nào cũng không thể mang lại.

Lời khuyên thực tế cho bạn muốn bắt đầu

Bắt đầu từ những điều đơn giản

• Đừng cố gắng theo đuổi thiết kế hoàn hảo ngay từ đầu
• Xây dựng khung cơ bản trước, rồi dần dần trau chuốt
• Học cách sử dụng công cụ dành cho nhà phát triển để kiểm tra vấn đề

Tận dụng các nguồn lực sẵn có

Các tài nguyên được đề xuất:

• Trình tạo bố cục của Sadgrl: Nhanh chóng tạo bố cục phong cách cổ điển
• 98.css: Các thành phần phong cách Windows 98
• NeoCities / NecoWeb: Nền tảng lưu trữ miễn phí
• Các trang web tài nguyên phong cách cổ điển

Tham gia cộng đồng

Cộng đồng Indie Web rất thân thiện, mọi người sẵn sàng chia sẻ kinh nghiệm và tài nguyên. Duyệt web của người khác không chỉ mang lại cảm hứng, mà còn có thể học hỏi kỹ thuật bằng cách "xem mã nguồn".

Kiên nhẫn và giữ vững đam mê

Xây dựng trang web là một cuộc chạy marathon, không phải chạy nước rút. Trang web của tôi đã mất vài tháng để hoàn thành từ khi bắt đầu đến khi cơ bản thành hình. Trong quá trình đó, có vô số lần muốn bỏ cuộc, nhưng mỗi lần vượt qua một thử thách kỹ thuật, tôi lại được tiếp thêm động lực.

---

Câu hỏi thường gặp

Hoàn toàn không biết lập trình có thể xây dựng trang web cá nhân không?

Có! Mặc dù có một đường cong học tập nhất định, nhưng HTML/CSS là ngôn ngữ lập trình dễ bắt đầu nhất. Có rất nhiều hướng dẫn miễn phí trực tuyến, giống như FreeCodeCamp cung cấp các khóa học có hệ thống. Ngay cả khi chỉ học 30 phút mỗi ngày, bạn cũng có thể nắm vững kiến thức cơ bản trong vòng một tháng.

NeoCities và NecoWeb, cái nào phù hợp hơn cho người mới bắt đầu?

NeoCities có cộng đồng lớn hơn và nhiều tài nguyên hơn, phù hợp với người mới bắt đầu muốn nhanh chóng làm quen và nhận phản hồi. NecoWeb chú trọng hơn đến bảo vệ quyền riêng tư và sự tự do chức năng, phù hợp với những người có kiến thức cơ bản và đề cao quyền sở hữu nội dung. Cả hai đều cung cấp gói miễn phí, bạn có thể thử NeoCities trước rồi mới cân nhắc di chuyển.

Trang web cá nhân tốn bao nhiêu chi phí?

Phiên bản cơ bản hoàn toàn miễn phí: NeoCities/NecoWeb cung cấp lưu trữ miễn phí, không cần mua tên miền và máy chủ. Nếu muốn tên miền tùy chỉnh (ví dụ: yourname.com), chi phí khoảng 10-15 USD mỗi năm. Các tính năng dành cho thành viên trả phí (ví dụ: dung lượng lưu trữ lớn hơn) thường khoảng 5 USD mỗi tháng.

Làm thế nào để bảo vệ trang web cá nhân khỏi bị AI thu thập?

Bạn có thể thực hiện các biện pháp sau:

• Cấm trình thu thập truy cập trong tệp robots.txt
• Sử dụng các nền tảng như NecoWeb mặc định chặn trình thu thập AI
• Thêm tuyên bố bản quyền "Cấm huấn luyện AI"

Mặc dù không thể ngăn chặn 100%, nhưng có thể giảm đáng kể rủi ro bị thu thập.