Văn bản gốc: "Dạy bạn từng bước xây dựng trang web cá nhân phi tập trung"

Tác giả: Hổ Béo

Đối với những người đam mê Web3 có thói quen đưa ra ý kiến, việc “lưu trữ” nội dung trên mạng xã hội Web2 như Twitter dường như không đủ “chống kiểm duyệt” và thiếu cảm giác độc quyền, độc lập đối với các nhóm giao thức Web3 hoặc các bên tham gia dự án; Nói cách khác, việc phân cấp toàn bộ quy trình từ dịch vụ sản phẩm đến trình bày front-end cũng hấp dẫn hơn về mặt tường thuật. Cho dù bạn có động cơ gì, việc biến trang web chính thức của cá nhân hoặc dự án thành một trang web phi tập trung đều có những lợi thế nhất định về chi phí, tính ẩn danh và bảo vệ quyền riêng tư.

Vì vậy, bài viết này sẽ hướng dẫn bạn từng bước triển khai trang web cá nhân của mình (lấy trang web do Notion tạo ra làm ví dụ) trên IPFS để xây dựng một trang web phi tập trung (Dweb) thực sự chỉ thuộc về bạn.

Bài viết được chia thành ba phần: giới thiệu, thực hành và gợi ý. Đầu tiên tôi sẽ giới thiệu khái niệm và cách trình bày về mạng phi tập trung Dweb, sau đó hướng dẫn từng bước cách thêm trang web danh thiếp cá nhân vào Dweb. Cuối cùng, tôi cũng sẽ tóm tắt những ưu điểm và nhược điểm của giải pháp hiện tại.

Xét về độ dài của bài viết và độ khó khi bắt đầu, ở phần thực hành, tôi sẽ chỉ giới thiệu phương pháp triển khai framework trang web Html đơn giản nhất. Đồng thời, hướng dẫn này chủ yếu dựa vào công cụ Fleek để triển khai. Fleek rất mạnh mẽ và có thể đóng gói nhiều khung trang web khác nhau (chẳng hạn như WordPress, Next.js, v.v.). Những người bạn có nền tảng kỹ thuật nhất định có thể khám phá nó một cách sâu sắc.

Một trang web phi tập trung là gì?

Trang web phi tập trung (Dweb) theo nghĩa đen đề cập đến một trang web được triển khai trên mạng phi tập trung.

Xét từ góc độ các thành phần, Dweb cũng tương tự như các trang web Internet truyền thống, tất cả đều cần có lối vào - tên miền và chủ thể lưu trữ - máy chủ lưu trữ. Trong thế giới Web3, các dự án tiêu biểu tương ứng với 2 “chức năng” này là ENS, IPFS và Arweave (bài này tập trung vào cái trước, cũng là giải pháp được nhiều dự án sử dụng).

ENS (Dịch vụ tên Ethereum) là một hệ thống đặt tên mở, có thể mở rộng và phân tán dựa trên Ethereum; theo thuật ngữ thông thường, đó là hệ thống tên miền blockchain.

Ý tưởng của IPFS là phân phối và lưu trữ dữ liệu trên các nút mà bất kỳ ai trên thế giới đều có thể điều hành; về cơ bản nó là một dịch vụ lưu trữ dữ liệu ngang hàng, chống kiểm duyệt. Ngoài ra, do IPFS phân phối dữ liệu trên các nút và trỏ đến dữ liệu cụ thể nên nó có thể đảm bảo rằng tài nguyên đến từ các nguồn được cập nhật gần đây và trải nghiệm thực tế sẽ nhanh hơn và đáng tin cậy hơn.

Để giải thích thêm về ENS và IPFS, độc giả quan tâm có thể đọc "Một bài viết tìm hiểu về ENS, ứng dụng Ethereum phi tài chính thành công nhất cho đến nay" và "Phân tích chuyên sâu về IPFS: giao thức cơ bản của thế hệ Internet mới ".

Được hỗ trợ bởi cả ENS và IPFS, cơ sở hạ tầng blockchain phân tán có thể lưu trữ nội dung trực tiếp vào các hợp đồng thông minh (vùng chứa).

Trang web đại diện dựa trên ENS+IPFS

Mặc dù không rõ ràng ở cấp độ cảm nhận, nhưng nếu người dùng chú ý đến một số ứng dụng Web3 chính thống, họ có thể tìm thấy từ các tài liệu chính thức của mình rằng các giao thức Web3 hàng đầu như Uniswap và 1inch đã đồng bộ hóa trang web của họ với IPFS.

Địa chỉ liên kết ENS lần lượt là 1inch.eth và uniswapexchange.eth. Đối với trình duyệt Web3 gốc, bạn có thể nhập trực tiếp các địa chỉ trên để truy cập.

1inch: 1inch. đạo đức. liên kết/" _src="https://1inch. đạo đức. link/">https://1inch.eth.link/

uniswap:https://uniswapexchange.eth.link。

Để biết thêm các trang web được triển khai bằng công nghệ ENS+IPFS, Almonit đã tổ chức các trang web Dweb như sau: https://almonit.eth.link/#/discover/.

Cách triển khai

Trong bài viết này, chúng tôi chủ yếu sử dụng giải pháp do công cụ Fleek cung cấp. Ưu điểm của giải pháp này là triển khai đơn giản và hỗ trợ nhiều web framework, ngoài việc hỗ trợ các trang Html, nó còn hỗ trợ các web framework bằng nhiều ngôn ngữ. chẳng hạn như Next.js, Hugo.js và Wordpress.

Bài viết này tập trung vào một trong nhiều chức năng đơn giản nhất được Fleek hỗ trợ - giải pháp triển khai khung trang Html và đưa ra lời giải thích từng bước. Tôi hy vọng rằng những người mới bắt đầu có thể bắt đầu nhanh chóng sau khi đọc nó; đóng vai trò thu hút những ý tưởng mới.

Mình vừa đề cập là các bạn cần chuẩn bị một trang web Html nên concept này sẽ được sử dụng để tạo ra file trang web Html này. Lý do chính là concept này dễ vận hành và có chức năng xuất html riêng nên các bạn có thể sử dụng nó. một trình tạo trang web Html trực quan.

Vì công cụ Fleek sử dụng sử dụng tính năng đồng bộ hóa tự động với Github nên bạn cũng cần chuẩn bị tài khoản Github và Repo (thư viện) tương ứng.

Bản thân việc triển khai vào mạng IPFS không yêu cầu tên miền Việc tải lên mạng sẽ tạo ra một hàm băm, tương tự như địa chỉ IP trong Web2, vì vậy cần chuẩn bị sẵn ENS để ánh xạ hàm băm IPFS này.

Tóm lại, hãy chuẩn bị trước ba điều:

Một tài khoản github; một tên miền ENS, ví tương ứng và một lượng nhỏ ETH dưới dạng gas; một tài khoản khái niệm và tạo một trang hồ sơ cá nhân. 1. Xuất Html từ Notion

1.1 Thiết kế profile theo ý tưởng, Demo như hình bên dưới.

1.2 Xuất trang mà chúng tôi đã chuẩn bị từ chức năng xuất khái niệm Do khả năng hỗ trợ các trang web tĩnh của IPFS còn hạn chế nên hiện tại chúng tôi chỉ có thể chọn xuất một trang. (Người chơi nâng cao cũng có thể triển khai các trang đa cấp - trang con).

1.3 Sau khi có được tệp nén đã xuất, nó sẽ tự động được tải xuống cục bộ. Sau khi giải nén cục bộ, bạn sẽ nhận được một thư mục và tệp Html như hình bên dưới. Đổi tên tệp có đuôi "xxx.html" thành "index.html".

2. Tải lên Github

2.1 Truy cập trang chủ GitHub, đăng nhập (nếu chưa có tài khoản, bạn cần đăng ký tài khoản), nhập trang sau và nhấp vào "Mới" để tạo Repo mới.

2.2 Nên sử dụng thư viện Riêng tư (quyền riêng tư) cho Repo mới tạo này. Điều này ngăn không cho bất kỳ ai khác ngoài công cụ Fleek và người tạo truy cập vào tệp gốc.

2.3 Tiếp theo, bạn cần sử dụng ứng dụng khách Github (nếu không có ứng dụng khách Github trên máy tính của bạn, bạn cần tải xuống và cài đặt một ứng dụng khách). Sau khi đăng nhập vào ứng dụng khách Github, hãy quay lại trang web Github bạn vừa tạo và nhấp vào "Thiết lập trên máy tính để bàn" trong hộp màu xanh lam (mở ứng dụng khách trên máy tính để bàn).

2.4 Sau khi cài đặt máy khách để bàn, lời nhắc sau sẽ xuất hiện.

2.5 Đi tới máy khách để bàn, làm theo lời nhắc để đặt thư mục cục bộ và ghi lại đường dẫn của thư mục cục bộ. Sao chép tệp chúng tôi đã tải xuống ở bước đầu tiên "Xuất dữ liệu từ Notion" vào thư mục cục bộ.

2.5 Sau khi sao chép xong, lời nhắc sau sẽ xuất hiện khi bạn quay lại máy khách. Điền vào một số mô tả và nhấp vào cam kết.

2.6 Nhấp vào nguồn gốc đẩy để đẩy tài liệu lên Github Repo.

3. Tạo dự án mới bằng Fleek

"Fleek là bộ công cụ bao gồm mọi thứ bạn cần để xây dựng liền mạch các trang web và ứng dụng hiện đại trên mạng mở và các giao thức của nó."

Nói một cách đơn giản, Fleek là một công cụ có thể dễ dàng triển khai các trang web cá nhân lên các mạng phi tập trung.

3.1 Bạn cần đăng ký khi vào Fleek lần đầu tiên. Nên sử dụng ví Etheretrum Little Fox để đăng ký và đăng nhập trực tiếp bằng một cú nhấp chuột, sẽ thuận tiện hơn (bạn cũng có thể sử dụng Github hoặc Email để đăng ký).

3.2 Sau khi đăng ký và đăng nhập, bạn sẽ đến trang chủ của dự án. Tiếp theo, bạn cần tạo một dự án trang web.

3.3 Chúng tôi chọn Github Repo vừa tạo ở bước thứ hai và chuyển sang bước tiếp theo.

3.4 Chúng tôi chọn IPFS trong tùy chọn Dịch vụ lưu trữ và chọn Cointinue để chuyển sang bước tiếp theo.

3.5 Chọn trang web bạn vừa tạo và vào trang cấu hình chi tiết.

3.6 Bây giờ trang web đã được triển khai trên IPFS, công cụ Fleek đã liên kết một cách chu đáo một tên miền được ánh xạ, như trong hình.

3.7 Tiếp theo, liên kết tên miền ENS, chọn "Cài đặt" và tìm "ENS".

3.8 Cuộn xuống “Thêm ENS”.

3.9 Nhập tên miền ENS.

3.10 Nhập giao diện sau và nhấp vào địa chỉ ENS bạn vừa nhập lại. Và chọn "Đặt hàm băm nội dung", rồi cuối cùng trả phí gas để hoàn tất việc ràng buộc.

3.11 Lúc này, chúng ta thấy tên miền ENS trước đây có màu xám đã chuyển sang màu xanh lam và việc liên kết thành công.

3.12 Đối với các trình duyệt hỗ trợ các tên miền phi tập trung, chẳng hạn như ứng dụng di động Brave, Little Fox Wallet, v.v., bạn có thể nhập trực tiếp ENS như yyzfish.eth mà tôi đặt ở đây để truy cập trực tiếp vào Dweb đã triển khai. Đối với các trình duyệt Web2, ENS cũng có khả năng tương thích. giải pháp, bạn có thể truy cập trực tiếp vào https://yyzfish.eth.link/.

Một số suy nghĩ trong quá trình xây dựng website

Sau khi trải qua quá trình này, tôi nhận ra một số ưu điểm và nhược điểm của các trang web phi tập trung so với các trang web truyền thống.

Lợi thế

Chi phí thấp và ổn định

Các trang web Web2 truyền thống cần được triển khai trên máy chủ, không chỉ yêu cầu bảo trì mà chi phí còn tăng theo số lượng người dùng. Tuy nhiên, qua quá trình triển khai lên Web3 trong bài viết này, không khó nhận thấy chi phí đó. Việc triển khai lên IFPS cực kỳ rẻ (hiện miễn phí). Và bất kể số lượng người dùng, chi phí sẽ không thay đổi.

Tường thuật Web3 đầy đủ hơn

Trong những ngày đầu, rất khó để triển khai một dự án hoàn chỉnh (front-end + hợp đồng thông minh) trên một mạng như Ethereum cùng lúc do lượng gas trên chuỗi cao. Giờ đây, với sự cải tiến của giao thức mạng IPFS, trang tương tác giao diện người dùng khổng lồ cũng có mạng phi tập trung chuyên dụng của riêng mình. Điều này về mặt tường thuật nhất quán với ý tưởng về “sự phân cấp” thực sự. Hiện tại, các giao thức DeFi hàng đầu như Uniswap và 1inch đã được triển khai trên các mạng phi tập trung. Trong tương lai, việc triển khai hoàn chỉnh trên các mạng phi tập trung có thể trở thành một tính năng tiêu chuẩn của các dự án Web3.

cá nhân mát mẻ

Tên miền ENS rất phổ biến trên mạng xã hội (chẳng hạn như Twitter). Nhiều KOL có biệt danh là xxx.eth. Trên cơ sở này, họ đã mở rộng blog của mình sang mạng IPFS và sử dụng tên miền ENS làm cổng vào. là một điều tuyệt vời cho những người đam mê tiền điện tử.

Ẩn danh và bảo vệ quyền riêng tư

Vì Dweb đã xem xét đầy đủ sự kết hợp giữa "phân quyền" và "quyền riêng tư" trong giai đoạn thiết kế ban đầu, nên nó thực sự có phần giống với mạng Tor và có các đặc điểm là không thể theo dõi và ẩn danh.

không đủ

Khả năng tương thích với Web2 vẫn cần được cải thiện

Mặc dù công cụ này đã hỗ trợ nhiều framework chính thống nhưng không phải tất cả chúng đều được hỗ trợ. Các framework web động như PHP vẫn chưa được hỗ trợ. Khả năng tương thích tổng thể cần phải được cải thiện.

Không thân thiện với người dùng trong nước

Do số lượng nút IPFS hiện tại còn lâu mới đạt được số lượng dự kiến ​​trong sách trắng (lộ trình), nên có một số trở ngại nhất định đối với khả năng truy cập trong nước của Dweb.

Tôi hy vọng sẽ thấy được nhiều giải pháp hoàn thiện hơn và sự lặp lại công nghệ trong tương lai.