How to deploy a Vite.js static site to Fleek.co

Getting Started

In the process of deploying to Fleek, I wasn’t able to find good guidance on deploying a Vite.js static site using Fleek. I was trying to deploy the repository below, which contains both Solidity contract and a demo site to interact with the contract on the frontend.

Setting up Fleek

Head over to Fleek and log in, I used GitHub for auth, because it was already connected. Alternatively, you can log in with an Ethereum wallet of your choice or an email.

Choose Hosting on the left sidebar, and then click Add New Site.

Next, navigate to the repository you’d like to use for the site.

Now choose the Continuous Deployment: Hosting Platform for your site, either IPFS or Internet Computer (Mainnet). Hit Continue.

Okay, here’s where I got stuck. Deploy settings:

Deploy settings for jcstein/gm-portal
Repository: jcstein/gm-portal
Branch: main

Basic Build Settings
Framework: Other
Docker Image Name: node:lts
Build command: yarn && yarn build
Publish directory: dist
Base Directory: frontend/

Note: I’m using a repo that contains both a frontend and contracts, so my base directory is frontend/

Click Deploy and your site should build shortly!

Adding a custom domain

If you’re feeling creative and want to link the site to a custom domain, you can go to namecheap.com or another similar provider and get the domain you’d like to use.

Then head to Settings > Domain Management > Domains and click Add Custom Domain. Enter your domain and follow the guidance on how to set your DNS records.

Setting up an ENS

If you’d like to attach an ENS like buildmarket.eth to your IPFS app, you can also do this on Fleek!

Head to Settings > Domain Management > ENS and click Add ENS. You’ll be asked to confirm that the wallet that owns the address is you. Do so and proceed with setup!

Once you’ve setup your ENS, you can access your site in an IPFS-enabled browser by navigating to https://buildmarket.eth or in a standard browser using eth.limo, https://buildmarket.eth.limo

Setting up HNS

You can also setup a Handshake domain with their decentralized DNS. Head to Settings > Domain Management > HNS and click Add HNS. I didn’t go through this myself, but I’m sure you can figure it out 🫡

Subscribe to joshcs.eth ⚡️
Receive the latest updates directly to your inbox.
Mint this entry as an NFT to add it to your collection.
Verification
This entry has been permanently stored onchain and signed by its creator.