How do I set up a personal website?

Question

I have bought myself a domain and configured Cloudflare nameservers, but I have no clue what to do next. I have a lot of content written locally that I'd like to host somewhere I control rather than on GitHub Gists, Substack, Medium, or their like. I've seen several very beautifully-styled websites here, and I'd like to emulate them.How and where do I host and serve my markup content? How about security and denial-of-service protection? How about automating updates by linking to a Git repository for styling and content? What about interactive functionality like comments with utteranc.es/giscus, MathJax, and RSS feeds? I realise there's a huge gap in my knowledge.

PaulHoule · Accepted Answer

Try a static site generator that posts files to a public cloud like Azure. See
https://jamstack.org/generators/
I like hugo for being trouble free and crazy fast if you don't need to modify it. It is written in go but is a simple binary unlike Java, Python, Javascript, Ruby and many other languages you don't need to know anything about go and go dependencies to run it. I have a Pelican blog under development and I can't say I love Pelican but I can say I know I can make it do exactly what I want as a Python programmer.

h2odragon · Answer

"where you control" might mean getting a static IP and setting up a server at home.
That can be a Pi running apache and use tools you bash together to convert you markdown into html. "content management system" doesn't have to be all the fancy, especially at first; a makefile may do what you want. "Site Generators" like Pelican and Hugo and many others exist to fill those needs too.
"protection" is something you may want to ignore until you actually need it. How much traffic are you actually expecting, and how many enemies do you have that will want to block it?

not_your_vase · Answer

This is a very broad question, akin to "how do I build a house? I'm a chef btw".
For starters
1. Get either a static IP from your ISP if you don't have one, or find a cheap/free hosting - I'm almost sure that CF has a small free plan.
2. Host a single static .html file for starters. You can find thousands of tutorials on the internet.
And then work your way up, extending it, step by step.

rdist · Answer

I'd say take it in steps. First, get your content someplace.
Second, worry about the other stuff one piece at a time.
Derek Sivers has a good resource for putting things on-line: https://sive.rs/ti
David Heinemeier Hansson would remind us that you can do this out of your home to if so inclined (assuming you have a reasonably static connection): https://world.hey.com/dhh/dare-to-connect-a-server-to-the-in...

Alonal · Answer

1. Write code in VS Code 2. Upload that code to GitHub 3. Create a project in Vercel and use the GitHub repository you set up in step 2

solardev · Answer

TLDR use Astro (pick a theme: https://astro.build/themes/) with Markdown files (https://docs.astro.build/en/guides/markdown-content/), upload it to Vercel or Netlify, and... you're done. They care of everything else on the hosting side. Git push your updates and the new version automatically deploys in a min or two. Screw something up and it's a 1-click rollback.
For all the other functionality you need, there's probably some NPM library out there you can easily add.
Longer version: There are a bazillion web hosts out there with different levels of abstraction. At the lowest levels of abstraction, you have bare-metal servers or close-to-the-metal VMs like EC2. You have the most control, but also the most responsibility, with those. They're great if you're an enterprise seeking the most in-house control, but they are a pain to manage if you don't have full-stack web dev/devops/sysadmin experience.
At the extreme other end, you have something like Wix or Squarespace, that not only hosts your website, but provides their own abstracted WYSIWYG page builder on top of it.
In between, because of "Jamstacks" (Javascript + markup, like React et al), a generation of hosts have sprung up that especially cater to this use case. Among them are Vercel and Netlify, who are two of the most popular and easy to use web hosts for deploying simple sites like that. Although they were initially made for frameworks like Next.js (made by Vercel) or Gatsby (now owned by Netlify), over time, they also added support for lighter-weight systems like Astro (which is much easier to use if you all you want to do is put up a nice-looking blog). They abstract away all the CDN, DNS, HTTPS, VM scaling etc. stuff into a "git push repo, website goes online" workflow. What used to take hours of setup and config and testing now takes mere seconds.
If that's too much abstraction, there are also systems just a little to the lower side, like Cloudflare Pages, AWS Amplify, Firebase Hosting, Google App Engine, and maybe something similar on Azure. But if you don't have a specific reason for needing those, Vercel or Netlify will be much more user-friendly.
-----------
If you really want to go lower and learn to DIY all of this, you're of course welcome to, but that takes much more learning and setup. I'd recommend https://nearlyfreespeech.net/ for hosting a site like that (costs pennies per month), and they take care of all the essential details while still leaving you a real filesystem and shell. Put Cloudflare (the regular CDN/firewall service, not Cloudflare Pages the build service) in front of it for additional caching and protection and you're good to go.