Your Own Website: Testing Free Website Hosts

I'm uploading a version of this page. That link is to the version hosted on my own server. Does it look different from the others? The same? We'll find out!

My test website is very simple, just an index.html and css file, and is about 8kb total.

Replies and Comments


⬅ Back to Testing Free Website Hosts

Vercel

shannonkay.vercel.app and vercel.shannonkay.com hosted by Vercel

Vercel is a host for web apps and other projects with a $0/month Hobby tier. Vercel is good for people who have created their websites and have files ready to upload. The custom domain support makes it especially good if you have a domain name. It's similar to Netlify.

Uploading your website

  • I started by going to vercel.com. I clicked on the Deploy Now button.
  • There are a few featured actions, like importing a git repository or clone a template, but I focused on this relatively small text; You can also drag and drop your project, or choose a file or a folder.
  • I grabbed my html and CSS files and dragged them onto the page.
  • The next page says Your first deploy is just a sign-up away.
  • I'm choosing to Continue with email, but there are other login options like Google, Apple, and GitHub.
  • I typed in my email address and logged in with the code they sent to my email.
  • On the Choose a Plan page, I have a choice between Pro("commercial projects") and Hobby("personal projects"). I chose Hobby, filled in my name for Team Name, and clicked Continue.
  • The New Project page shows the files that I drag and dropped to upload.
  • Under Vercel Team, I selected the team named Shannon Kay, which is what I had entered for the Team Name in the previous step. I entered shannonkay for the Project Name.
  • Click Deploy button.
  • Congratulations! You just deployed a new project to Shannon Kay
  • Below the message, it says no screenshot is available, but clicking on it does open a web page that looks as I expected at shannonkay.vercel.app.
  • We could call it done right there. I've got my page hosted.

Adding a custom domain or subdomain

  • Scrolling down, there's a Next Steps heading with an Add Domain option.
  • I clicked Add Domain, and Vercel suggest setting up 2FA with an authenticator app. That's probably a good idea since I didn't even set up a password and just got a code in my email. Set up 2FA or skip it. That's up to you.
  • Ok, now I'm at a dashboard with a Domains page selected. shannonkay.vercel.app is listed.
  • There's a search box at the top, and I clicked the add existing button next to it.
  • I'm at an Add Domains pop-up. It says Add one or more domains to this project and choose one destination for all of them. Domains connected to an environment are aliased to the most recent deployment in that environment.
  • I typed in a subdomain to use, in my case, vercel.shannonkay.com
  • Under Connect to an Environment, I selected Production.
  • Click Add Domain
  • Now I'm back at the Domains page again. Now vercel.shannonkay.com is also listed.
  • I clicked on the red Verification Needed under vercel.shannonkay.com, which showed me the information I needed to create the DNS records with my domain registrar.
  • I created a CNAME record with
    • Host: vercel.shannonkay.com
    • Target: The Value given by Vercel
  • On the Vercel Domains page, the domain verified after trying the Refresh button a couple times.
  • I can now visit my test page at vercel.shannonkay.com and shannonkay.vercel.app

Conclusion

  • How do you update your website in the same manner that you uploaded the files in the first place? It's not obvious, but it's easy. In the dashboard, click on Projects and click on your project's name. It should bring up a Production Deployment Overview page. You'll see things like Source: Vercel Drop.
  • Drag your updated files on top of that page. You should see it become the drag and drop file uploader as you do this. Click the Deploy button to deploy the new upload as the updated version of your project.
  • Vercel is a good choice for people who have created their websites and have files ready to upload. The custom domain support makes it especially good if you have a domain name. It's similar to Netlify.

⬅ Back to Testing Free Website Hosts


Make Your Own Website - A beginner's guide to making a hand-crafted personal or hobby website with HTML and CSS.

Helpful guides at Pixel Shannon

Reply

Reply by email | 32-bit Cafe thread | Reply on Mastodon | Reply on Bluesky