January 3, 2022

How to host site on web3 easily?

my personal site arunthachi.com is hosted on IPFS using Fleek.co

Hugo (source code framework using Go) –> Github (repo) –> Fleek.co (web3 hosting) –> Cloudflare (DNS + Edge service)

Step 1: Create a website using your favorite programming language or framework such as Next.js, Gatsby, Hugo, Wordpress, React, Vue.js. I used Hugo as a single site generator (SSG) framework to build my arunthachi.com site. Hugo uses Go language to generate site code.

Step 2: Source your website code in any source repo such as Github, Bitbucket. I have sourced the arunthachi.com site’s code in Github. You can make the repo private as needed.

Step 3: Create an account with Fleek and sign into to Fleek.

• Create a site name or project name in Fleek
• Within the created site/project name, connect your source repo with Fleek. Basically, you are allowing Fleek to access your repository and pull the website code directly.
• Select the website framework that you used to build your site. Eg. I have built arunthachi.com site using Hugo and I have selected Hugo in this step.
• Choose the hosting type “IPFS” or “Internet Computer“, which powers the distributed web or data storage. The huge benefit I see is that whenever you push the code to your repo (Eg. Github), Fleek generates the new build automatically and publishes the site. Build, deploy and publish of site are taken care by Fleek automatically.
• Publish/deploy the site. Fleek will take care of the build, deploy and publishing process. Fleek also shows deployment logs for more details.
• Once the site is deployed/published successfully, Fleek provides its own url to access your site on the internet, along with options to add your custom domain.

Step 4: To map website to your custom domain, Fleek provides @ (root) and www CNAME values to configure in your custom domain’s DNS management. It will take few seconds to make it available in your custom domain after you configure the DNS. I use Cloudflare for arunthachi.com site’s DNS management and Edge services.

Hoping that this article helps you to host your site on web3. If you have any questions, DM me on twitter @ArunThachi