Hosting static HTML pages on Vercel

Photo by NASA on Unsplash

Hosting static HTML pages on Vercel

A tutorial on how to host your static HTML website on Vercel

Table of contents

No heading

No headings in the article.

A few days ago one of my friends came to me and asked me if it was possible to host a static HTML page on Vercel.

I looked into it, and after looking at how the Vercel hosting worked, I found it is "basically" a Node.JS host.

I started setting up a Node.JS project to host HTML with Express

Therefore I made a GitHub repo template that you can use to host your own page on Vercel.

Checkout the GitHub repo here: https://github.com/KindCoder-no/vercel-html-hosting-template

Here is a walkthrough on how to set up the GitHub repo with Vercel.

Start by cloning the repo (or use it as a template)

image

Go to vercel.com and log in with your GitHub account

Create a new project and import it from GitHub

image

image

Select your GitHub repo and press import

image

Under project settings, you need to customize your build settings

Build command: npm run start

Install command: npm install

image

After you have set up build setting press deploy and Vercel should deploy the project by itself

If you have setup everything correctly you should see a page looking somewhat like this:

image

You should get a domain from vercel. Mine became: vercel-html-hosting-template.vercel.app

After your Vercel deployment is setup you can add your HTML, CSS and javascript files to the public folder on GitHub. And Vercel should deploy the changes automatically

Did you find this article valuable?

Support KindCoder's Blog by becoming a sponsor. Any amount is appreciated!