{"id":343,"date":"2022-02-14T08:51:45","date_gmt":"2022-02-14T08:51:45","guid":{"rendered":"https:\/\/metaschool.so\/articles\/?p=343"},"modified":"2025-01-23T09:18:59","modified_gmt":"2025-01-23T09:18:59","slug":"how-to-build-decentralized-website-ethereum-blockchain","status":"publish","type":"post","link":"https:\/\/metaschool.so\/articles\/how-to-build-decentralized-website-ethereum-blockchain\/","title":{"rendered":"How to Build a Decentralized Website on Ethereum Blockchain"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_56_1 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/metaschool.so\/articles\/how-to-build-decentralized-website-ethereum-blockchain\/#How_to_build_a_decentralized_website_step-by-step\" title=\"How to build a decentralized website, step-by-step\">How to build a decentralized website, step-by-step<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/metaschool.so\/articles\/how-to-build-decentralized-website-ethereum-blockchain\/#1_A_wallet_with_Ethereum\" title=\"1. A wallet with Ethereum\">1. A wallet with Ethereum<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/metaschool.so\/articles\/how-to-build-decentralized-website-ethereum-blockchain\/#2_Buy_an_ENS_domain_name\" title=\"2. Buy an ENS domain name\">2. Buy an ENS domain name<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/metaschool.so\/articles\/how-to-build-decentralized-website-ethereum-blockchain\/#3_Write_code_for_your_website\" title=\"3. Write code for your website\">3. Write code for your website<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/metaschool.so\/articles\/how-to-build-decentralized-website-ethereum-blockchain\/#4_Set_yourself_up_on_Fleek\" title=\"4. Set yourself up on Fleek&nbsp;\">4. Set yourself up on Fleek&nbsp;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/metaschool.so\/articles\/how-to-build-decentralized-website-ethereum-blockchain\/#5_Connect_your_ENS_domain\" title=\"5. Connect your ENS domain\">5. Connect your ENS domain<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/metaschool.so\/articles\/how-to-build-decentralized-website-ethereum-blockchain\/#Conclusion_Exciting_but_expensive\" title=\"Conclusion: Exciting but expensive\">Conclusion: Exciting but expensive<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n<p><em>A super easy tutorial on how to build a decentralized website on the <a href=\"https:\/\/metaschool.so\/courses\/how-does-ethereum-work-a-deepdive?ref=Article&amp;utm_source=Blog_Organic\" target=\"_blank\" rel=\"noreferrer noopener\">Ethereum blockchain<\/a>, paired with quick explanations of <a href=\"https:\/\/metaschool.so\/articles\/what-is-web3-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">Web3<\/a> and blockchain technology. <\/em><\/p>\n\n\n\n<p><a href=\"https:\/\/metaschool.so\/articles\/what-is-blockchain-guide\/\">Blockchain technology<\/a> has brought about several possibilities and changes in how we view and use the web. It works as an <a href=\"https:\/\/metaschool.so\/articles\/immutable-blockchain\/\" target=\"_blank\" rel=\"noreferrer noopener\">immutable<\/a> (synonyms:<em> fixed, unchangeable, unshakeable<\/em>) record of transactions that do not require to rely on any external authority like banks, governments, large corporations to validate the authenticity and integrity of data.<\/p>\n\n\n\n<p>Developers are already using this technology to advance the web and creating what we can refer to as Web3 or the decentralized web. <a href=\"https:\/\/metaschool.so\/articles\/what-is-web3-guide\/\">Web3<\/a> is a more open web. It is NOT controlled by large corporations which have previously benefited by using and selling things like our data, information and content. And so this is what leads to many of us calling it a &#8216;decentralized&#8217; web.<\/p>\n\n\n\n<p>In this quick guide, I&#8217;m going to cover the main aspects of building a&nbsp;<em>truly<\/em>&nbsp;decentralized website on blockchain. If you&#8217;re interested in web3, you&#8217;ll find this helpful. Let&#8217;s get into it!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-build-a-decentralized-website-step-by-step\"><span class=\"ez-toc-section\" id=\"How_to_build_a_decentralized_website_step-by-step\"><\/span>How to build a decentralized website, step-by-step<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-a-wallet-with-ethereum\"><span class=\"ez-toc-section\" id=\"1_A_wallet_with_Ethereum\"><\/span>1. A wallet with Ethereum<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>To do anything on the decentralized website, you need a wallet like\u00a0Coinbase Wallet\u00a0or\u00a0<a href=\"https:\/\/metaschool.so\/courses\/understand-and-setup-metamask-account?ref=Articles&amp;utm_source=Blog_Organic\" target=\"_blank\" rel=\"noreferrer noopener\">MetaMask<\/a>, and some <a href=\"https:\/\/metaschool.so\/blockchains\/ethereum?ref=Article&amp;utm_source=Blog_Organic\">Ethereum<\/a>. If you don&#8217;t have a digital wallet set up yet, you will greatly benefit with this beginner guide on setting up a MetaMask wallet.<\/p>\n\n\n\n<p>You must note, anything you do on the decentralized web involves a transaction, and gas fees (transaction fees). I used Coinbase Wallet and bought Ethereum using GBP.<\/p>\n\n\n\n<p><i class=\"fas fa-arrow-right\"><\/i> <strong>Interested in RPCs? Press the following button to check out a list of over 200+ RPC networks to add your MetaMask wallet.<\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button aligncenter\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/metaschool.so\/rpc?ref=Article&amp;utm_source=Blog_Organic\" target=\"_blank\" rel=\"noreferrer noopener\">Explore 200+ RPC networks<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-buy-an-ens-domain-name\"><span class=\"ez-toc-section\" id=\"2_Buy_an_ENS_domain_name\"><\/span>2. Buy an ENS domain name<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>An ENS domain is your property on the decentralized web. Whether it&#8217;s a business, brand, service you want to start &#8211; one of the first things we&#8217;ve all done in Web2 has been to search for and purchase a domain.<\/p>\n\n\n\n<p>In the latest version of the internet, i.e. Web3, our <a href=\"https:\/\/metaschool.so\/blockchains?ref=Article&amp;utm_source=Blog_Organic\" target=\"_blank\" rel=\"noreferrer noopener\">blockchain<\/a> domain is basically your <a href=\"https:\/\/metaschool.so\/courses\/learn-everything-about-nfts-in-an-hour?ref=Articles&amp;utm_source=Blog_Organic\" target=\"_blank\" rel=\"noreferrer noopener\">NFT<\/a> and it means that it belongs to you and is unique. As long as you hold this NFT, you are the owner, which means there won&#8217;t be renewal fees as is the case with traditional domains. <\/p>\n\n\n\n<p>In a nutshell, it is like a domain name&nbsp;<em>and<\/em>&nbsp;your bank details (so people can send you crypto). I bought my ENS domain name (ntkris.eth) for $73.08 ($26.10 domain + $46.97 gas fees). <\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffc Here&#8217;s in detail how to buy an <a href=\"https:\/\/metaschool.so\/articles\/how-to-get-an-ens-domain\/\" target=\"_blank\" rel=\"noreferrer noopener\">ENS domain<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-write-code-for-your-website\"><span class=\"ez-toc-section\" id=\"3_Write_code_for_your_website\"><\/span>3. Write code for your website<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>I wrote basic code for my website using React, TailwindCSS and NextJS, and pushed the code to a GitHub repo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-set-yourself-up-on-fleek\"><span class=\"ez-toc-section\" id=\"4_Set_yourself_up_on_Fleek\"><\/span>4. Set yourself up on Fleek&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><a href=\"https:\/\/fleek.co\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Fleek<\/a>&nbsp;helps you deploy decentralized websites to IFPS. It helps you build websites and apps on the new Open Web: permissionless, trustless, censorship resistant, and free of centralized gatekeepers<\/p>\n\n\n\n<p>Now what you have to do is connect your GitHub account, select your repository and Fleek does the rest. Your decentralized website will be accessible on a link provided by Fleek.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-connect-your-ens-domain\"><span class=\"ez-toc-section\" id=\"5_Connect_your_ENS_domain\"><\/span>5. Connect your ENS domain<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>To connect your ENS domain name to Fleek you need to process a transaction on the blockchain.<\/p>\n\n\n\n<p>The transaction is free but you need to pay gas fees. I paid $22. Once done, you can access your ENS domain (ntkris.eth) using the browser on a wallet, or by adding .link to the end (<a href=\"http:\/\/ntkris.eth.link\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">ntkris.eth.link<\/a>). <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"conclusion-exciting-but-expensive\"><span class=\"ez-toc-section\" id=\"Conclusion_Exciting_but_expensive\"><\/span>Conclusion: Exciting but expensive<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The decentralized web is exciting because it cannot be censored. At the moment it&#8217;s also expensive. But I&#8217;m optimistic about this technology and believe the cost will come down.<\/p>\n\n\n\n<p>And folks, here&#8217;s how to build a decentralized website on the Ethereum Blockchain. Do you think this helped you out? Share it with a friend! <\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":352,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"[\"title\",\"meta\",\"thumbnail\",\"content\",\"tags\",\"comments\"]","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[14,17],"tags":[30,23,31,29],"class_list":["post-343","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web3","category-blockchain","tag-decentralized-web","tag-ens-domains","tag-ethereum-blockchain","tag-web3"],"_links":{"self":[{"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts\/343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/comments?post=343"}],"version-history":[{"count":19,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts\/343\/revisions"}],"predecessor-version":[{"id":12011,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/posts\/343\/revisions\/12011"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/media\/352"}],"wp:attachment":[{"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/media?parent=343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/categories?post=343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/metaschool.so\/articles\/wp-json\/wp\/v2\/tags?post=343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}