Really nice, focused write up. Very useful and to the point.

HTML is really very accessible to someone with basic computer skills. It's a shame that a standard business website is now a facebook page.

There is a local gym near me with a static HTML webpage, hosted on local ISP web hosting. It's quick to load, responsive and always up to date. Checking the opening times, address and special events is much easier than on some aggregator site or google maps (which is often out of date). It's also very easy to read on many devices.

This post mentions varying templating frameworks; I really recommend taking a peek at Astro.

It’s cool to see this on HN.

I originally wrote this article for a “microcourse” I ran at the University of St Andrews—aimed at a non-tech background—on building a personal webpage. Especially in mathematics, having a personal site (that you control) to host research and other information is pretty invaluable!

Older personal math sites tend to have a very particular “historic” feel. While I personally have a lot of nostalgia for the look, I also think it’s good to take advantage of some of the newer tools that are available today!

Amazing! Will definitely use this information for my author side.

I have no programming skills and always wanted to have a self hosted website that is quick, small, without any fluff where people can download my stories. Maybe to interact with me and with each other too. End of story.

But when I googled "website programming" it's mostly generic advice for design (everything looks like everything else) and bloated (slow) code.

This is really great!

I wonder if one needs a framework like Hugo, Jekyll, etc. if one only wants to host a personal site without a blog? Is there any advantage compared to starting with one of those bare CSS templates and building a static website that way?

I didn't know about Zola. I guess i just deemed Hugo "good enough" :)

As for hosting, i personally use the free tier of Azure to host mine (https://azure.microsoft.com/en-us/products/app-service/stati...). It doesn't allow for anything "business related", but neither does Github.

It does however provide free SSL certificates, which is/was something that github pages didn't do at the time, but i think they've since changed that.

Keep it mind that you cannot use github as free host for anything.

"GitHub Pages is not intended for or allowed to be used as a free web-hosting service to run your online business, e-commerce site, or any other website that is primarily directed at either facilitating commercial transactions or providing commercial software as a service (SaaS)."

A good (and IMO essential) deployment addition would be to host it on a bare metal machine and run a quick apache/nginx server. It important that people still know how to host their own site, properly from scratch and without big tech.

Stopped reading, needs more react.

Pretty detailed guide! I'd just like to emphasize that nowadays you can literally create and deploy a personal homepage entirely for free. For the individual touch, buy a custom domain for a few bucks, link it and even add a free custom mail (e.g. with Zoho's free tier).

It's remarkable how knowhow and budget requirements have dropped in recent years so that anyone can create something pretty good-looking in no time.

Personally, I use the combination of:

1) Hugo + GitHub + Netlify + Zoho for my personal blog and email (summed up here: https://geo.rocks/post/setup) and 2) Material for MkDocs + GitHub for projects.

May I add that in HTML5 closing <p> <td> <th> <li> <dt> <dd> and other tags like these are optional. You can choose to not close those, and your HTML is as valid as closing those.

If you practice on not closing, you can do without any markdown language. As the HTML itself gets almost as simple as markdown. Plus, better control for advanced features as needed.

I wouldn't use Cloudflare for deployments. They're known for arbitrarily taking over domains they manage and replacing their contents with their own PR pages with no advance warning. They're communicating with customers poorly too.

Good article but confused by:

"Unless you pay, GitHub Pages requires your repository to be public."

How is that a problem with a static website?

Using absolute links is the complete opposite of what you should do. If the page you are linking to lives in the same path, there is no reason not to link to it relatively. It makes the path structure more modular.

My homepage is on Github. Didn't know Cloudflare also provides free hosting. Thanks.

Statis is nice. But what about intra-site search? And form to email? Is there a best practice for this?

For personal sites use classless CSS framework: https://github.com/dbohdan/classless-css

I have used water.css, simple.css and Tufte.css and all of them are great.

Has building a webpage never been easier or never been harder for a newcomer? I honestly can't tell. On the one hand there is an abundance of tools to ease the process, on the other hand even the entry level tooling for a webpage in 2022 is staggering.

Ah, brings back memories of getting HTML 2/3 (no CSS iirc back then) books from the library way back when. Shame the library closed over a decade ago.

90% of the challenge of making my personal webpage is picking the colours. I still hate the green and it drives me nuts. But blue is too comfortable and boring. Maybe an auburn?

Ugh. Is there a place I can share a link and get two minutes of free designer advice?

Throwing out a resource that helped me build my own website to host my resume (and led me to get an Azure Fundamentals cert)-- the Cloud Resume Challenge, which has been seen on HN in the past. (https://cloudresumechallenge.dev/)

Has been a huge help to me since I don't directly work with cloud resources like AWS or Azure in my current IT role.

I would suggest internal css in the head tag for a simple site. otherwise if the html loads too fast you’ll see an unstyled page before it reads in the css file

Great start, but the idea of reliance on Github/Cloudflare is both sad and likely unnecessary. Let's make the web the web again.

My personal approach might be too simplistic for some, but this is what I did for my webpage, though I already had some HTML & CSS experience:

>No website generators, no frameworks, no nothing (not even JavaScript)

>Just design the site on the go through some trial and error using vim, CSS and HTML documentation always at hand

>A single .css file to style the entire website--I even threw in some cool animations, which took a while to get right, admittedly

>Publish it through GitHub Pages in under five minutes

>If I want to upload a new blog post, for instance, I just make a copy of an existing one and manually edit the content, then push it through git after I've edited the blog index accordingly

Reading terms like "static site generator", "content management system", "templates", "analytics" or "deployment" gives me an instant headache, especially since it's so easy to open your favorite text editor and design your own website by hand, so to speak. I've self-hosted eepsites, gemini capsules and many other sites this way and the process wasn't remotely as contrived as some approaches I've seen out there for publishing a personal blog

Recently took on the challenge on learning Hugo, its quick but his learning curve is high (compared against Jekyll and Gatsby), specially because the docs seems to be more curated towards content management and how to deal with markdown limitations rather than web/front-end design, therefore there is no tutorial hell for "how to design your own theme", you have to look at how others solve it to give you and idea and once you get a glimpse on how they do it, you can go fast without using shortcodes, partials and other "weird things hugo have".

Only thing i will change in Hugo is how unopiniated tries to be, it always has at least 3 to 4 ways to the same thing and configurate the same thing with json, toml, yaml, etc...

Big fan of https://docsify.js.org since theres no need to compile your static site. A small amount of js just renders markdown.

Making a personal website is surprisingly hard. This article doesn't even go into meta tags, next-gen image formats, GDPR-compliant analytics, or how to add a newsletter.

I want to see more personal websites in the world. So, I've been building Postcard [1] to make it easy to set up a personal website. Caching, opengraph meta tags, page-speed optimization - it's all built in. I'm working right now on making domain connection the smoothest experience possible.

[1] https://postcard.page

What are the main tools for creating the HTML and CSS files for a simple static site?

I used to use jemdoc for an academic website. But now its documentation website has become a cryptocurrency website

https://jemdoc.jaboc.net/

Python has also transition to python3.

Also where to search for good CSS styles?