How to host a website for free: step by step

What do you need?

• A website: a folder with HTML, CSS and JavaScript files, or a project you build with npm run build (React, Vue, Vite, Astro and so on).
• A free account on zeno-innovations.com.
• No credit card, no server and no domain name. You get a free address like your-name.zeno-innovations.com.

Step 1: get your website ready

Put all your website's files in one folder. The home page has to be called index.html (lowercase) and sit in the main folder, not in a subfolder. That's the page visitors see when they open your address.

my-website/
├── index.html
├── about.html
├── style.css
└── images/
    └── logo.png

Use relative paths in your HTML, like images/logo.png, not paths on your own computer like C:\Users\.... Those don't work online.

Working with React, Vue, Vite or Astro? Then you don't need to build anything yourself. Hand over the project folder with package.json: the platform runs npm run build and puts the dist, build or out folder online.

Step 2: create a free account

Go to zeno-innovations.com/dashboard and sign up. You can use your email address or sign up in one click with GitHub, Google or Discord. The free Hobby plan is active straight away.

Step 3: create a new project

In the dashboard, click New project and choose Website. Give your project a name, for example my-portfolio. That name becomes your address: https://my-portfolio.zeno-innovations.com. So pick something short and recognisable, in lowercase with hyphens instead of spaces.

Step 4: add your code

You have three options. Pick whichever suits you best:

A. Upload (the easiest)

Drag your files, your whole folder or a .zip file into the upload box. Folders like node_modules and .git are skipped automatically.

B. Connect GitHub (handy if you change things often)

If your code is on GitHub, connect the repository. Want every git push to go live automatically? Copy the Deploy hook URL from your project's settings and paste it into GitHub under Settings → Webhooks, with content type application/json.

C. The terminal (for developers)

Install the Zeno CLI, type zeno login and then, in your website's folder, zeno --prod. That's all.

npm install -g https://zeno-innovations.com/dashboard/zeno-cli.tgz
zeno login
cd my-website
zeno --prod

Step 5: deploy and check

Click Deploy. You'll see the build steps scroll by live. After a few seconds your website is online at https://your-name.zeno-innovations.com. Open the address on your computer and on your phone, and click through all the pages to check that images and links work.

Updating your website

Changed something? Upload the new version, push to GitHub or type zeno --prod again. Your old version stays online until the new one is ready, so your site is never unreachable. Every version gets its own preview link, and if something goes wrong anyway, you bring back the previous version with one click.

Common mistakes

• You see a 404 page. There's no index.html in the main folder. Maybe your home page is called home.html or Index.html, or it's in a subfolder. Rename it to index.html and put it at the top of your folder.
• Images don't load. Check upper and lower case: online, Logo.png is not the same as logo.png. And use relative paths.
• Your React app shows a blank page after refreshing. Turn on single-page app mode in your project's settings, so every address ends up at your app.
• You want your own error page. Put a 404.html in the main folder; it's used automatically.

What's next?

In the dashboard you can see how many visitors your site gets, from which countries and on which devices, without cookies. Want more, like a server, an API or a Discord bot? Then upgrade to Pro. And if you'd rather have someone build the website for you, have a look at website development.