How To Make A Site Like This
Some understanding of or willingness to learn Markdown and the basics of website hosting is necessary to do this.
The only cost to do this is that of the domain name you want (and you could even forgo that too if you just want to use the url that vercel gives you as a default) - the three services needed to do this (Cloudflare, Github, and Vercel) all have free tiers that the vast majority of these types of sites will stay well within.
Get a domain name on Cloudflare
Make an account on Cloudflare, go to the Websites tab, click Add a Site, click "register a new domain", search for the domain you'd like, and buy it!
Set up the code
Use this template to make your own repository with the template code.
Then, edit vocs.config.ts
and the files in docs/pages/
to customize the site to your needs.
You can also update the favicon.ico
file in the public/
folder if you'd like the image that shows up on the tab to be different.
Host the site on Vercel
Make an account on Vercel (ideally with your Github account to make connecting the two as easy as possible), click Add New, and then click the Project option.
Connect your Github repo with Vercel by following Vercel's steps to "Import Git Repository" (this will ask for permissions to the repository so that Vercel can host the code in it).
Once this is done, you can see the hosted site at the link that Vercel provides you, and you can also make a commit to your GitHub repo to see how Vercel automatically updates the site every time the code is updated!
Connect your domain name
Go to the project on Vercel, click Settings, and then click the Domains tab on the left. Enter the domain name you bought on Cloudflare, click Add, and it will show up in the domains that Vercel is hosting to.
At this point it will show an error because you haven't updated the DNS records on Cloudflare for your domain yet, so go to your domain on Cloudflare, click the DNS tab on the left, and follow the instructions Vercel gives you on which records you should set and with what values.
Once you have set the DNS records in Cloudflare, Vercel will be auto-refreshing every couple of seconds to see if they have been updated. It shouldn't take longer than 10 minutes for Vercel to be able to see the newly updated records, if it is taking longer for that for Vercel to successfully check them, check and make sure they're set correctly in Cloudflare.
Once Vercel says that it has successfully checked the domain name and is hosting to it, you're good to go! You can go to your domain name in your browser and it should show the site!
A common issue people run into at this point is, if Vercel is showing that it is hosting to the domain name correctly, but when you try to go to the domain name in your browser it gives you a TOO_MANY_REDIRECTS
error, go to the domain on Cloudflare, click the SSL/TLS tab on the left, and update the SSL/TLS encryption mode setting to "Full (strict)". This should resolve the TOO_MANY_REDIRECTS
error and your site should be successfully visible when you visit your domain!