How to build a personal webpage from scratch
rutar.org
rutar.org
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!
Of course, the probability that a visitor would not visit any other non-TLS site that day is low, but that probability is getting lower with every passing day.
Maybe a mention of using https://validator.w3.org/ would also be helpful to check that all the html is correct and complete.
i remember learning CSS/XHTML and getting your website to pass the validator so you could proudly show the badge on your website was a big deal.
I'm not 100% sure what the difference is, but you can see the source code at https://github.com/validator/validator and report any issues.
HTML validity and rapid feedback is just as important as the rapid feedback of unit-tests, a type-checker or a even a linter: it shows you mistakes when you make them, rather than later, when you'll merely run into their effects.
I once did a kind of "tutorial" for hugo[1], because I think it's documentation is hard to follow for beginners, but I should have thought to give some details about the "from scratch" technologies...
Great work, thanks.
[1]: https://pilabor.com/blog/2021/05/building-a-blog-with-hugo/
".." navigates to the parent directory of the directory containing the current file.
"." refers to the directory containing the current file.
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.
By the time you add a CMS (to help the business not screw up the markup), some design help and all the features that the business thinks are easy because "it is just a form", and you are paying several thousand dollars, way more than many small business think is worth it.
The other alternative, I guess, is something like Shopify but many people I have talked to struggle to see why paying a monthly subscription is money well-spent to get something always up to date and fresh. They'll pay a shop assistant pittance which is still more than they would need to pay for Shopping-as-a-service and get less value.
Updating a 'personal' site is also a PITA IF you don't know what you are doing or don't have a streamlined process, e.g. for me I'd just amend the .htm page to say I'm shut from 2pm and FTP it up, 2 minutes, but someone non-savvy will always prefer to post a new message on FB saying 'hey, shutting at 2pm today', takes even less time and less cognitive load.
I'm not saying this is a good thing, by the way. But it's understandable.
EDIT: Not to mention, updating a site on the move is difficult. Pull latest version of site (Github), amend .htm (some notepad app?), then an FTP client on the phone, log in, find, push the file, close, check. Versus opening the FB app and doing some typing.
What does that have to do with personal site vs Facebook? If Github is a problem, don't use Github if you regularly need to update and for some reason you can't do it using the web editor. I mean, WordPress is kind of a big deal.
There's nothing wrong with Facebook if you like a kind of ugly website that randomly pops up crap to prevent people from viewing your site. If you're concerned about people that only use Facebook and no other sites, you can duplicate material on Facebook.
I don't even use Facebook, and if I did, I wouldn't check every place I wanted to go on it before I went there
It really is a shame. HTML and CSS are among the easiest ways of experiencing for yourself the power and possibilities of ordering a computer to do things for you.
Give me a bunch of CSS and ask me what it will do... even with the docs in front of me, I am almost certain to get much of it wrong. And I suspect even experienced front end devs (I've never done front end professionally) would struggle with such a challenge.
Using a platform like Facebook or Google Maps makes it easier to for other people to find your page when they want to look for it.
There are so many, so many sites that would be perfect with just basic HTML and maybe some CSS
One of them even pull in jQuery...
- http://bettermotherfuckingwebsite.com/ => GA
- https://thebestmotherfucking.website/ => Plausible + jQuery
- https://perfectmotherfuckingwebsite.com/ => No JS included
So 3/4 have analytics, + one with jQuery.
Tested by looking at requests made in the network inspector of the browser developer tools.
You're right. My adblocker blocked it, so I didn't spot it. What I said about jQuery, however, is still true.
> - https://thebestmotherfucking.website/ => Plausible + jQuery
Wrong—this one doesn't use jQuery, and none of the others do, either.
> https://thebestmotherfucking.website/js/jquery-3.5.1.min.js
But the response to that request is not an actual copy of jQuery, which it seems when you just look at the URL, but the following body instead:
/* NO, really, NOBODY NEEDS TO INCLUDE A FUCKING FRAMEWORK TO MAKE A COOL WEBSITE. */
console.log("Don't worry, no jQuery was used in this website.");
var $ = function () { $.fancyRainbow = $; $.html = $; return $ }
While I think this is a bit of a stretch I think the really inaccessible part of it is knowing how to host and deploy it.
I just finished replacing my custom site with a ghost site using a theme that is barely customizable at all. Hopefully, this will make it easier to avoid fiddling with it.
The new site is more generic unfortunately, but on the plus side, I already have almost 20k words queued up for future posts
I think we are collectively over estimating average public’s willingness to go extra steps to achieve almost the same results that most of the public already expects.
>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
From the readme: “This setup is databaseless, javascriptless, and buildshit-free, so you can edit your website with a text editor and upload it somewhere like a normal person.”
https://github.com/cadars/john-doe/blob/4f5a3eafecbdffa9d34f...
P. S. It seems that Safari isn't compatible with the attribute by default, but it can be enabled through its settings.
Only until you want to automate some of the tasks you do manually and, after a night of hacking, end up with a "static site generator", or, if you want something more dynamic, a "content management system". But at that point, you'll probably still not want to look into existing solutions because learning all the necessary details of product $x is often more time consuming than a straightforward implementation that solves exactly your and not someone else's problems.
please refer to the repo if interested.
https://github.com/casualwriter/casual-markdown-page https://github.com/casualwriter/casual-markdown-blog https://github.com/casualwriter/casual-markdown-cv
Ugh. Is there a place I can share a link and get two minutes of free designer advice?
(There are websites that have color palettes available for selection iirc)
Destroy it: https://BUGFIX-66.com
Single CPU Linode cloud instance ($5 per month), single Go executable generating/caching/serving the simplest/cleanest HTML... could it be simpler or cheaper and still work?
Beauty is the sum of the parts in arrangement, which eliminates the need to add, remove or change anything.
Johann Carl Loth
(translated from german, maybe some sense is lost)
Even at a time when the physical costs of production were far, far more significant than today's, people thought it was important to give a text block some air (https://en.wikipedia.org/wiki/Canons_of_page_construction) so this isn't a frivolous innovation. IMO doesn't have to be a big shift or complicate things; body { margin-left: 2vw; } here would do a lot. Hell, you could toss it as an inline declaration on the body element itself if you're morally opposed to style tags.
body {
line-height: 1.6em;
}I’m not the biggest fan of the design but I don’t mind it. I want minimal. I just hate the colour. Maybe the font needs to be smaller too.
https://incoherency.co.uk/blog/stories/nightdrive.html
But go with your choices, it can take time over a few sessions. Notice colours in the real world and notice ones you like.
Can someone help me find it?
There is Genetic Algorithm that can mutate styles of the current templates (that you liked) and generate endless designs till you find the one you like the most.
So:
- serif title to be more distinct and formal
- a calm blue (do you have the hex?)
- no borders
I'm thinking something isn't quite complete with the "latest posts" now that it's without a border. Maybe they need to be a bit more "condensed" so they don't bleed into eachother visually as much.
I'm going to experiment with your ideas!
Edit: I'm also deeply curious how someone looks at a page and decides things like "the title should be serif." In retrospect it looks so good but I have no clue how people get there. Just a good eye? Experience? Is it some sort of design rule/convention?
> I'm thinking something isn't quite complete with the "latest posts" now that it's without a border.
No doubt you could improve it further. The borders felt like too much chrome. You could also experiment with a subtly different background color for the cards... not sure if it would work. Or more padding, etc. Basically, the idea is there are many way to achieve visual "separateness".
> I'm also deeply curious how someone looks at a page and decides things like "the title should be serif."
The proper mixing of serif / sans-serif is a standard technique. If you look at pretty much any web page that looks really well-designed to you, they'll have a "font palette" just like a color palatte. Often it will be just two fonts but sometimes more, and it's typically a mix of serif and sans.
I am not a professional designer... I've just picked up a bit over the years.
I learned a few weeks ago that my ISP still does this. It’s a bit hidden in the depths of the customer portal, but it is there!
I feel this. My mom has been complaining to me lately that her email makes her reset her password every time she logs in. She's still using an ISP email account from a company that got merged into AT&T years ago, but she doesn't want to change it because it's the email everyone has. I looked into forwarding it to another email, but of course they charge a monthly subscription for that feature.
I was taken aback and delighted that they had a drag and drop directory enumerating your CSS and HTML files.
It's a hellscape if you want to DIY it end to end though, which OP's article covers very well. What he doesn't spend any time on is how long it takes to get a proper "Hello, World!" at yourdomain.com without you being warned about using an insecure website.
At a minimum in most cases you need: * a server, configured to serve your hello world and present your identity * domain name * DNS records pointed to your domain * SSL cert of some kind, probably issued by lets encrypt for something like this (creating a certificate authority is a project in itself) * reverse proxy if you are interested in serving over http+https
Each of these can be done rather quickly once you are familiar or blindly following a guide, but reasoning about what each part is doing is very time consuming.
Interestingly, both.
It’s very easy to make a basic website that more or less works.
It’s very hard to make a website that does anything well.
Mistakes that people make on very basic, static websites:
- Images not optimized, so page speeds are very slow. Bad for Google rankings (incl. Google Business Profile / Google My Business). Sometimes these images break the design, and this can look very unprofessional.
- Responsive design is either non-existent or super janky.
- Content is not presented with a focus on how the users will most likely want to interact with the available information. This includes simple things like phone number, address, and/or hours near the top of the page for B&M businesses. It also includes more complex things like clear page/site organization and navigation.
Many people who make these sites know that they are bad, but they aren’t willing to pay the thousands it would take (at least in the US) to get someone to do a simple 5-page brochure site right (assuming that they don’t get scammed).
The gap between easy-to-make junk and tougher-to-make jewels is currently quite large both in terms of skill required as well as potential cost.
It's also easier from a CSS perspective too, since flexbox and grid have taken all the stress away from designing traditional 3 column layouts, and making them work on multiple device sizes. No more floating divs for you this time!
But there's a difference between what's possible and what's expected, and I think that's where the confusion lies. If you want to make a 'web app' in the style of Google Maps or Gmail or Airbnb or Netflix or whatever else, then yeah you're gonna need to go down the long, somewhat confusing road of JavaScript frameworks and NPM and what not. And there are user expectations that a popular site will probably have many of the complex features that such frameworks enable, as well as a 'fancier' visual design than the sites of the 90s and early 00s.
So the skill floor has stayed the same, but the ceiling has risen tenfold, and that's where the complexity can come in.
But now, you do. At the basic level very little has changed to make any of these things automagically free. For example css has advanced a lot, but you actively have to know and use it to make things work, where as in the 90s you mostly did not have to do anything and nobody (neither search engines nor users) would care.
So I would argue the real world skill floor has risen by a lot, in a mix of increased user expectations and and google expectations. On the other hand there's a wave of (SaaS) tools to flatten it. I am not sure what that nets to.
If you want to build Facebook, that's another kettle of fish.
"there is no reason not to link to it relatively." You have clearly been so isolated in your thinking, you are incorrect. Again, it is their link to share.
And when they get more experienced, they'll probably want to migrate that site to a new host (for example my site was bbkane.github.io before I moved it to bbkane.com), which will break absolute links to the first (now down) domain. Yes, best practice is to set up a redirect from old to new anyway, but that's the kind of thing someone doing this for the first time doesn't think about.
So there's definitely a case for beginners using relative links. And it's less repetitive to type!
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.
If you practice not closing, you can do without any markdown language. As the HTML itself gets almost as simple as markdown. Plus, gives you advanced control not found in markdown.
<!DOCTYPE html>
<title>Example Webpage</title>
<h1>Welcome to my webpage</h1>
<p>This is some content!
I agree with your remark regarding the redundancy of markdown. It makes almost no difference to write markdown or html5 by hand. If people knew this, it would seem they would replace their "markdown engines" with cat (to put the header to each page), or simply with nothing at all.
Those are (rooted in) SGML elements having start-element tag omission allowed, whereas HTML's "self-closing tags" (in HTML5 parlance) correspond to elements having end-element tag omission allowed. In your example, SGML infers the missing tags for html, head, body, and p to arrive at the canonical form:
<html>
<head>
<title>Example Webpage</title>
</head>
<body>
<h1>Welcome to my webpage</h1>
<p>This is some content!</p>
</body>
</html>
I have used water.css, simple.css and Tufte.css and all of them are great.
ps - looks like they use some non-standard html elements and attributes to be completely classless. that's ok, but not generally what i'd want, though i'm quite tempted by the non-standard 'grid' tag.
"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)."
I found Github to be great for a static personal page. I found it notoriously buggy once attaching a domain. I've yet to find a good run-down of how to consistently host static sites with domains + ssl on Github.
It offers a JSX templating language and "adapters" for deployment on various hosts like Cloudflare.
Things I liked about Astro:
- It can use front-end js frameworks like Svelte and Vue as components (and it can load the JavaScript only once these components appear).
- familiar JSX, scoped CSS and single-file components for astro components.
- Some nice plugins for responsive image optimizations.
- nice touches like hot module reloading. It's nothing new, but it does just seem to work.
I also believe there are optional SSR elements to astro now, but I have not played with these.
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...
Hugo has sharp edges and interestingly the thing I have noticed is that I would expect that Hugo should be getting to an almost finished sort of state with the project. Yet there seems to be a lot more stuff being added and just so much flexibility. Maybe I picked the wrong tool, but I agree with all of you're points about the non-opinionated nature being a disbenefit.
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.
Perfect to learn on without needing to use money.
They're an incredibly skeezy company and if memory serves me right actually are one of the extremely few ccTLD registrars to get fined for mistreating customers (which is extremely uncommon, ccTLD registrars have kinda free range to do whatever they want generally speaking).
In a more direct sense, they stole several domains from me about a decade ago by marking my account as abusive and then tried to resell those domains for ~6.24 euros to anyone else as a "premium" domain name (which I figured out when I made an alternate account) once they got some slight amounts of traffic. Very scummy.
It's a free provider so these aren't unexpected shenanigans, but I'd still advise anyone looking for a registrar to not use Freenom. Go for a dynamic DNS provider instead if you're starting out, there's quite a few with free plans. If you're willing to throw a few bones for a proper domain name, I'd recommend Porkbun myself but there's other options too.
Vs. the technical aptitude, knowledge, and ongoing time commitment of running their own bare-metal servers, for a minimal-traffic personal web page? That's more like insisting that everyone must learn to sew, and make their own clothing.
Since I use Hugo to build personal sites, running `hugo server` locally produces a local version of my website that I can view in my browser at localhost:1313/ and which auto-reloads with every change. Hugo builds incremental changes almost instantly.
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 dont fully understand why it has never been included in the HTML standard.
I know HTML! I know CSS! But how do I make a template sidebar, say, without a framework. It’s possible, sure. But a PITA. React just makes it easy, which is like using a baseball bat to kill a fly.
(Now obsolete though)
For example, my RSS feed is processed with XSL to provide a friendly landing page:
https://interconnected.org/home/feed
(view source, second line)
Disclaimer: just a self hoster, who experimented with dreamwidth.org some years ago, and no fan of todays dominant "social" media sites.
I use http://zim-wiki.org + a customized template.
http://jrm4.com is it.
even for resume https://github.com/casualwriter/casual-markdown-cv
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.
Zola is basically a stripped down Hugo. I don't see any reason choose it over hugo other than it's obligatory "written in rust" advantage.
I completely fail to see how implementation language would be an advantage to a static site generator, especially the security advantages that Rust is often recommended for. Memory safety is great if you're exposing a program, but here i'm just exposing the results of the static site generator, and none of Rusts features will be evident there.
The only advantage from my point of view would be site generation speed, which goes for both Go and Rust over Python/Ruby.
If the aim is to satisfy non-technical website builders, then the HTML files can be simply SFTP'd up to the web host. Badabing badaboom.
(With a bit of luck, this comes at no extra cost.)
I've been using hostdime for the last 15+ years for this. Of equal, if not greater, benefit has been "being able to pay someone for email." Everything works smoothly. And more importantly, you can call and talk to someone if they, or you, or in my case my father screws up something drastically.*
*Somehow, and I don't know how, one day he deleted ALL, including business sensitive, of his email. ALL OF IT. I was certain we were screwed, until the company said -- well, this is drastic and you'll have to pay for it, but we could roll your entire server back a day before it happened.
Uh oh, how much?
Fifteen bucks.
(That plus the then $5 a month, now about 20 or so, is some of the best money I've ever spent. Have no clue what gmail people would do if this happened.
To be more in line with the first half of the article, I would have expected the author walk through registering a domain name, pointing it at your computer's IP address (or your VPS), getting an SSL certificate, configuring web server software on that computer, and so on.
A friendly reminder that Emacs is not a "command-line editor".
If you mean "line editor", emacs has batch mode.
"Unless you pay, GitHub Pages requires your repository to be public."
How is that a problem with a static website?
All files/pages will be publicly discoverable. I regularly chuck stuff on a webserver to share files (like /files/dat-283992.txt) that's only meant to be accessed by people I share the URL with, but that's not possible when the repo is public.
Additionally, your Jekyll config files will also be public, which I guess some people might not want, for whatever reason.
https://duckduckgo.com/?q=apache+disable+directory+listing+h...
Have you heard about encryption?
It's no different than sharing a link to a file in your Google Drive accessible only to people with the URL.
Encryption doesn't play the role you seem to think it plays here.
Yes, aka encrypt it.
> Or I could give it a unique undiscoverable URL.
…which is not possible if the repository is public.
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.
If you want to self-host, check out this Next.js project from Tailwind Labs: https://tailwindui.com/templates/spotlight
As for hard, I guess it can be incredibly easy or hard depending on how you want to look at the problem.
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.
A css. A markdown to html converter. An index file (1 in each directory). A dozen lines of code in that index file. The rest is markdown and images for content. Use the directory tree to organize your stuff. Voila! Works great.
I used to use jemdoc for an academic website. But now its documentation website has become a cryptocurrency website
Python has also transition to python3.
Also where to search for good CSS styles?
No fuss. Whole process felt very "clean".
(yes, I might be getting old)
It said, paraphrasing, "A single broken window in a neighborhood is often the catalyst that begins the transition from a nice neighborhood into a bad neighborhood. Everyone starts looking at that busted window and figuring everything's busted. Everyone starts to treat everything like it's busted and that's that, it's ruined". Ok, heavily paraphased.
Putting a little notice up, "Hey, we see this! And we know it's gotta get fixed, so here's a plastic sign with a recent date on it so you know we're around and working on it" is better than just leaving the mess. And an "under construction" sign on a website is meant to be this treatment.
I think the book is old enough that we hadn't invented the default-cynic who would immediately look for a 22 year old timestamp on the construction.gif and invalidate the entire concept with counterexample.
I believe the concept is sound, even if in practice it's often abused.
There are some standalone site-search tools including lunr.js, among others (lunr is what I remember finding when I researched this a few years ago, there are now several other options).
E.g., <https://victoria.dev/blog/add-search-to-hugo-static-sites-wi...>
Email forms can be implemented entirely as HTML forms, though you might want to include some anti-spam / anti-abuse options. Another option is a simple mailto link:
<a href="mailto:inbox@example.com">Email us!</a><https://yewtu.be/watch?v=BkHCO8f2TWs>
(Clip is from the 1979 edition of Cosmos, Ep. 9. <https://en.wikipedia.org/wiki/Cosmos:_A_Personal_Voyage>)
I know it's comedy science, but "pie" is already a thing, as are apples. So "apple pie from scratch" refers to AFTER the apple and pie have been invented, not before.
At least it's somewhat positive they "sort of" backtracked? To be clear, I'm in favour of these providers acting like utilities and staying out of content disputes.
It's rare enough that the CEO publishes a blog post every time they do it.
"This is a hard case and we would caution anyone from seeing it as setting precedent."
back to simple is really great. internet things go wrong way for complication for many years.
If you mean, why is no one pushing Zola, this site is obviously encouraging it, so it's inaccurate to assume "no one" is.
Use real vim.