Gm, in this tutorial we are going to be deploying a website to IPFS to create a decentralized frontend. To do this I’ll be using Fleek which has a free tier and which suits our needs.
We will start by getting our site on Github. We can either build it locally or Fleek can run build scripts. My recommendation would be to build locally and put the build folder in the Github repository.
I’m going to be using a plain HTML/JS/CSS site which is currently hosted on Github Pages at https://EthereumHacker.com and the source code is at: Github Repo (note the website is in the docs/ directory).
Now if we go to https://fleek.co we can create a free account by connecting Metamask or Github.
Once connected we can click “Add New Site” and then choose which Github repository we want to pull code from.
In the next step we can choose between deploying to IPFS (inter-planetary file system) or ICP (Internet Computer).
And then we have some build settings and options
Because I’ve already built the files locally I just need to enter the base directory which is docs/ and click deploy site.
It’ll think about things for a few minutes and then give you a link to the IPFS site. Note that it will take 2-3 minutes for the IPFS network to migrate the site.
If you then go to “Hosting” on the left hand menu you’ll and select the build you just created.
Then you should get a link to “Verify on IPFS” which will lead you to something like this:
https://fleek.ipfs.io/ipfs/QmSu5SuFHFyVLtKTbTpsfwa7dk7iHVmJCsTAQ1hi4NRSQd/
You can then take the hash at the end of that URL and put it on other IPFS gateways such as: https://ipfs.io/ipfs/QmSu5SuFHFyVLtKTbTpsfwa7dk7iHVmJCsTAQ1hi4NRSQd/
There are additional options in the settings tab for linking an ENS name, migrating to Filecoin and blocking OFAC countries (which is a bit weird considering the point of decentralized backends is censorship resistance).
I hope you’ve enjoyed this tutorial and it’s inspired you to create your own decentralized applications. If you want to learn more about blockchain development, digital assets and emerging technology in decentralized finance then get the free newsletter at https://bachini.substack.com
