16 ms·

How to build a personal webpage from scratch

763 points by bosky101 4y ago

snorlaxmorlax 4y ago
A great place to start, a really good resource.
laurieg 4y ago
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.
- barbs 4y ago
  I wanted to ask for a link, then I thought the server on the local ISP might not have the resources to withstand HN traffic, then I thought such a small efficient website wouldn't require many resources!
- cosmodisk 4y ago
  I absolutely hate this ' let's just put it on Facebook'. My wife was planning to go to this boutique kids shoe shop. Checked the opening hours,etc. Went there just to see the shop closed. Calls the owner, and she's all surprised: oh but I did post on Facebook that I'll be open from 2pm..
  - lbriner 4y ago
    I do as well but let's be honest, many people who create sites for money will not necessarily coach the business to keep it simple, since they will earn less money from it. 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.
  - mr_gibbins 4y ago
    Unfortunately, businesses have to go to where the customers are. Many customers now are 100% Facebook-era, particularly true of the young and those older folk late to computing, and it might not occur to them to check https://www.widgetsRus.com https://www.widgetsRus.com before searching for Widgets R Us on Facebook. 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.
    - pbhjpbhj 4y ago
      If we actually got the semantic web that was promised, back in the burgeoning xhtml days, then it seems like Facebook / own website could simply duplicate the latest data from the other page.
      - mawise 4y ago
        There's a nifty tool called Bridgy that helps with this--it's out of the IndieWeb community with their POSSE model: Post on Own Site Syndicate Elsewhere https://brid.gy/ https://brid.gy/
    - mattl 4y ago
      Is there a technical reason you’re only using three letter extensions for HTML files?
      - shadowofneptune 4y ago
        The 8.3 filename structure has a long half-life.
      - zakki 4y ago
  - Bakary 4y ago
    Of all businesses a boutique kids shoe shop is sure to attract the Facebook crowd as it exists today in the West at least
    - cosmodisk 4y ago
      I have no doub it does, but checking a business' Facebook account to see if they are open would probably be the last thing I could come up with.
  - Minor49er 4y ago
    I've had this happen too at Armageddon Shop in Cambridge. When I showed up, the two employees told me to leave because they posted on Facebook that they were closing two hours early due to nobody showing up 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
- Dalewyn 4y ago
  >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. 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.
  - mypalmike 4y ago
    CSS easy? I've been writing code since the 80s, and CSS is one of the most confounding things I've encountered.
    - kilna 4y ago
      Easy things are easy in CSS. Hard things are... possible. Sometimes barely so. Sometimes impossible without JS. BUT, the easy things are generally easy.
      - mypalmike 4y ago
        In job interviews, I've been handed code in various languages from assembly to C to Java and asked to figure out what that code does. It can be an interesting challenge, and while I'm certainly not the fastest to figure it out, I usually can. 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.
    - autoexec 4y ago
      A subset of CSS is very easy. The rest of it is a complete mess.
- marcus_cemes 4y ago
  It takes time to establish discoverability with a website, you either rely on a search engine, word of mouth, business cards, etc. A new small-business website won't magically start generating traffic without some significant effort. 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.
  - executesorder66 4y ago
    True, but a local gym doesn't need global discovery and SEO optimization. They can just put the URL on their business cards, and in a few places at reception. A sticker on their door. 95% of their customers will see it and know where to go.
  - clairity 4y ago
    you can just point the facebook page and google to your website. problem solved.
- BrandoElFollito 4y ago
  When discussing points such as yours, I always bring up https://motherfuckingwebsite.com/ https://motherfuckingwebsite.com/ (which I like very much), http://bettermotherfuckingwebsite.com/ http://bettermotherfuckingwebsite.com/ (which I like less) and https://thebestmotherfucking.website/ https://thebestmotherfucking.website/ (which I like more than the second, but still less than the first). There is also https://perfectmotherfuckingwebsite.com/ https://perfectmotherfuckingwebsite.com/ but I do not remember where it fits chronologically. There are so many, so many sites that would be perfect with just basic HTML and maybe some CSS
  - capableweb 4y ago
    Ironically, all of those (except https://perfectmotherfuckingwebsite.com/ https://perfectmotherfuckingwebsite.com/) try to pull in some kind of Analytics JS, which kind of defeats their point... One of them even pull in jQuery...
    - cxr 4y ago
      2 out of 4 have analytics (not "all of those (except [the last one]"), and none of them use jQuery.
      - capableweb 4y ago
        - https://motherfuckingwebsite.com/ https://motherfuckingwebsite.com/ => GA - http://bettermotherfuckingwebsite.com/ http://bettermotherfuckingwebsite.com/ => GA - https://thebestmotherfucking.website/ https://thebestmotherfucking.website/ => Plausible + jQuery - https://perfectmotherfuckingwebsite.com/ 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.
        Sodman 4y ago
        And the jQuery it pulls isn't even gzipped or otherwise encoded! Although at least it's minified.
- worldsayshi 4y ago
  > HTML is really very accessible to someone with basic computer skills 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.
- barbariangrunge 4y ago
  The problem with coding up a custom website for myself is I end up wanting to customize it to no end. It distracts me from actually writing. Add in a dose of graphic design ideas and very few words go down at all. 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
- kredd 4y ago
  Let’s say you’re a business owner, don’t have many technical skills, and want to change opening hours for a given day (e.g. public holiday). You’ll have to go at least 5 extra steps that require you to achieve that, than just pulling up your phone, going on your facebook page and changing the hours. 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.
  - mattbrewsbytes 4y ago
    Engineers tend to think of things like this to be easy. A typical small restaurant owner is probably also a chef/cook of some kind. Their view of the internet might be internet==facebook and they probably think how to properly flavor something is easy. Contrast that where I have to go look up 5 recipe websites, watch some youtube to really grok it and then will forget after a day or so unless I wrote it down and will end up doing the same thing all over next time I cook that dish.
threatofrain 4y ago
This post mentions various templating frameworks; I really recommend taking a peek at Astro, which is perfect for blogs or personal sites. https://astro.build/ https://astro.build/ It offers a JSX templating language and "adapters" for deployment on various hosts like Cloudflare.
- pahn 4y ago
  I just went through this and am very happy with using 11ty. It‘s simple and produces clean html/css without any framework whatsoever.
  - o_m 4y ago
    11ty is just as much a framework as Astro
- dpwm 4y ago
  Having just recently played with astro, I can confirm it's got some really nice qualities. 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.
systemvoltage 4y ago
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.
- TedDoesntTalk 4y ago
  Unfortunately this also requires a dynamic dns client and server if you have a residential IP address that can change.
  - wallmountedtv 4y ago
    There are free "forever" VPS options from Google, Azure, and Oracle that you can use to deploy non-commercial servers. And together with either a free subdomain provider, or something like freenom to find a free domain registrar, you can have a fully free setup without using "no code" providers. Perfect to learn on without needing to use money.
    - noirscape 4y ago
      I'd rather recommend something like noip's free tier over Freenom btw. 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.
- boyter 4y ago
Heyso 4y ago
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)."
- catach 4y ago
  I don't think a personal webpage falls under any of those categories.
- TuringNYC 4y ago
  >> Keep it mind that you cannot use github as free host for anything. 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.
arutar 4y ago
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!
- tkgally 4y ago
  It looks great! I started my personal static website more than twenty years ago, and I have maintained it ever since with only a text editor and FTP software. When I began, I learned what I needed from books (!). If I were starting now, your site would be the perfect introduction.
  - mattl 4y ago
    Hopefully SFTP nowadays?
    - tkgally 4y ago
      Yes, yes. Though the site is still http, not https. I need to get on that one of these days.
      - bdamm 4y ago
        Yes, for the sake of your visitors. If your site is only http, then middleboxes can use your site load to opportunistically attack the visitor. 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.
    - 2000UltraDeluxe 4y ago
      Most modern web hosts support both SFTP and FTPS. The same applies for FTP clients.
currenciessfe 4y ago
8fingerlouie 4y ago
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/static/?cdn=disable#overview 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.
- imran0 4y ago
  > I didn't know about Zola. I guess i just deemed Hugo "good enough" :) 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.
  - 8fingerlouie 4y ago
    > 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.
3zra 4y ago
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?
- fergie 4y ago
  The big thing missing from vanilla HTML is templating. I dont fully understand why it has never been included in the HTML standard.
  - jbverschoor 4y ago
    Because templating is yet another language to be interpreted. HTML was simple and very effective for its purpose: documents.
  - jen729w 4y ago
    Yes x 1,000,000. This is the only thing that drives me to something like React (other than the fact that I’m not actually a programmer and it’s the only thing I know) to build a site. 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.
    - jbverschoor 4y ago
      If you're able to run react, you should be able to run any templating engine as well.
    - Moru 4y ago
      You used FRAMES ofcourse :-) (Now obsolete though)
      - fergie 4y ago
        You are undeservedly downvoted. I think that there is a strong case for using frames as a templating strategy for static sites that are hosted on say S3 or Github.
Reflecticon 4y ago
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.
- 867-5309 4y ago
  you don't need programming skills to self-host. most hosts offer one-click website options for e.g. wordpress
- jcynix 4y ago
  You might want to look at some "elder self-hosting sites" (i.e pre f*book) like https://www.dreamwidth.org https://www.dreamwidth.org where you could easily set up an internet presence without fluff.
daptaq 4y ago
> For command-line editors, you could consider Neovim or Emacs. A friendly reminder that Emacs is not a "command-line editor".
- zoltar 4y ago
  Of course it is. It's not just that, though.
  - daptaq 4y ago
    Emacs is a visual editor (which also applies to Neovim, btw). Ed is a command line editor. But even if we assume that "command line" means "terminal", then it would still be wrong to describe it as a "command line editor", in the same sense at is wrong to describe a computer as a facebook client.
    - zoltar 4y ago
      You are confusing line editor with command-line editors. If you interpret command-line editor as editing the command line, emacs has eshell. If you interpret it as an editor from a terminal, it's that, too. If you mean "line editor", emacs has batch mode.
      - daptaq 4y ago
        Aren't all "line editors" also "command line editors"? Either way, that is not my point. I just wanted to point out that Emacs shoudln't be boxed into the same category as Vim, because while Vim ist most commonly used in a terminal, Emacs isn't.
- arutar 4y ago
  That's a fair point, more precise phrasing would be "If you prefer a command-line interface, ..." which should be sufficiently vague to make almost everybody happy.
  - 4y ago
beardyw 4y ago
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?
- notRobot 4y ago
  One example: 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.
  - Moru 4y ago
    Just make sure your server does not give a list of files in the directory /files/ if you do that :-)
    - hnbad 4y ago
      If the repo is public, people can just go to the repo and GitHub will happily give them the list of files.
    - notRobot 4y ago
      Haha yep, made that mistake in the past!
    - TurkishPoptart 4y ago
      How do you do that?
      - Moru 4y ago
        It's a very common mistake so there is lots of help for it: You search "disable directory listing" for whatever webserver you use. I mostly use apache: https://duckduckgo.com/?q=apache+disable+directory+listing+htaccess&t=ffab&ia=web https://duckduckgo.com/?q=apache+disable+directory+listing+h...
habibur 4y ago
Adding 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 just as valid. 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.
- enriquto 4y ago
  I was going to say this! Moreover, besides self-closing tags, in HTML5 there are many optional tags. For example, you almost never need to write explicit html, head, body, tags. The given minimal example thus can be simplified to something like this: <!DOCTYPE html> <title>Example Webpage</title> <h1>Welcome to my webpage</h1> <p>This is some content! ...and still be correct, 100% conformant html. See google's html style guide for more cool hints towards a minimal markup: https://google.github.io/styleguide/htmlcssguide.html https://google.github.io/styleguide/htmlcssguide.html 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.
  - skyfaller 4y ago
    Another source explaining optional HTML in depth: https://meiert.com/en/blog/optional-html/ https://meiert.com/en/blog/optional-html/
  - tannhaeuser 4y ago
    > Moreover, besides self-closing tags, in HTML5 there are many optional tags. 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> Cf. http://sgmljs.net/blog/blog1701.html http://sgmljs.net/blog/blog1701.html (the TALK slides) explaining the inferences SGML does on the example input in detail
do-me 4y ago
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 https://geo.rocks/post/setup) and 2) Material for MkDocs + GitHub for projects.
deworms 4y ago
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.
- neogodless 4y ago
  Can you provide references to this claim?
  - vehemenz 4y ago
    If you've read the news in the past month, CloudFlare removed its DDoS protection and caching service from KiwiFarms based on series of false reports, essentially taking the site offline.
    - exodust 4y ago
      But didn't cloudfare backtrack on that and state they don't want to be moderators of content because they want to be seen as a utility? They used the example of a phone company who doesn't care/not liable if you say naughty things on the phone. They want to be like the phone company.
      - deworms 4y ago
        No, they didn't they still haven't restored service, and they cut it based on completely fake reports, without any warning or communication. They're not trustworthy.
        collinmanderson 4y ago
        It seems to me like they only do this in very very rare circumstances, maybe 3 times ever? And only when there's the threat of physical harm. 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."
BOOSTERHIDROGEN 4y ago
Why no one pushing this ? this is so much simpler than hugo, jekyll, etc.
- neogodless 4y ago
  I'm confused. This is a personal web site guide that encourages using a site generator like Hugo or Jekyll or Zola. (And it's on the front page of Hacker News, so it seems like it's interesting to many of us.) If you mean, why is no one pushing Zola, this site is obviously encouraging it, so it's inaccurate to assume "no one" is.
sake 4y ago
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.
- kaichanvong 4y ago
  Your being completely ignorant making this statement (about a personal webpage that is built from scratch). It is 100% their choice. How they reach the conclusion to write their links is 100% theirs. "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.
  - rawTruthHurts 4y ago
    Indeed. Why would you teach to do things right when you can teach how to do them wrong?
    - kaichanvong 4y ago
      Like I said. It is assumption of being 1 domain. Could be a personal web pages on 2 different domains. Ahah!
      - bbkane 4y ago
        I feel like the common case, especially for new HTML devs, is to use one website. 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!
        kaichanvong 4y ago
martinskou 4y ago
Statis is nice. But what about intra-site search? And form to email? Is there a best practice for this?
- dredmorbius 4y ago
  I've looked into this somewhat though I've not implemented any solutions. 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-with-lunr/ 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>
m-manu 4y ago
My homepage is on Github. Didn't know Cloudflare also provides free hosting. Thanks.
anyfactor 4y ago
For personal sites use classless CSS framework: https://github.com/dbohdan/classless-css https://github.com/dbohdan/classless-css I have used water.css, simple.css and Tufte.css and all of them are great.
- VMG 4y ago
  The guide is aimed at non-tech people. Using any kind of framework is missing the point.
  - schwartzworld 4y ago
    No classes means that you just write plain html. I think non tech people could deal with adding a single script tag and having everything just work.
    - deleted 4y ago
      [deleted]
  - deleted 4y ago
    [deleted]
- bcjordan 4y ago
  Super cool, love how they can be used for prototypes to cover that gap from "CS professor's plain HTML website with a 1998 copyright notice" to "fiddling with margin and padding values". BareCSS in particular looks so nice I would never have believed it uses no classes or styles! https://github.com/longsien/BareCSS https://github.com/longsien/BareCSS
  - clairity 4y ago
    nice, i’m building a personal css framework that builds on top of a classless base that is similar to bare.css, so i’ll have to go raid it for ideas like how/where it employs grid and flexbox. =) 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.
vonwoodson 4y ago
0/10 for recommending the garbage text editor neovim. Use real vim.
- julianbuse 4y ago
  Poe's law in action: I cannot determine whether this is satire or not.
- executesorder66 4y ago
  What's wrong with neovim?
- nullc 4y ago
  Ed is the standard text editor.
- vehemenz 4y ago
  I assume by "real vim" you mean vim emulation in a serious editor/IDE.
_joel 4y ago
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.
jstummbillig 4y ago
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.
- diceduckmonk 4y ago
  We just checked out Neocities, the revival of Geocities, this week for our blogging purposes. I was taken aback and delighted that they had a drag and drop directory enumerating your CSS and HTML files.
  - greyKnight 4y ago
    They have all animated gifs?
- eurasiantiger 4y ago
  It used to be really easy back when Netscape Navigator (and Communicator) still included a WYSIWYG HTML editor and ISPs provided users with some megabytes of hosting accessible with simple FTP.
  - moooo99 4y ago
    > ISPs provided users with some megabytes of hosting accessible with simple FTP. 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!
    - notRobot 4y ago
      That's so cool! What ISP, if you don't mind me asking, and have you discovered any long-forgotten sites that still live on their servers?
      - moooo99 4y ago
nullandvoid 4y ago
Can vouch for cloudflare pages for frontend for an easy static frontend deployment experience. Manages HTTPS, configuring deployment on pushes to repo, connecting to custom domain etc all with a few clicks.
- duxup 4y ago
  Same. My personal page was on heroku. I realized it had vanished and very quickly I put together a page, GitHub repository connected to cloudflare, connected an unused google domain, redirected my old domain (I wanted to use the new domain). No fuss. Whole process felt very "clean".
buggythebug 4y ago
Tuckerism 4y ago
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/ 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.
kobe_bryant 4y ago
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
ajsnigrutin 4y ago
Where's the "This page is under construction" banner, and the visitor counter? (yes, I might be getting old)
- digitalsushi 4y ago
  So last week HN said "hey, go read The Pragmatic Programmer if you havent", and, I finished chapter one up a night or two ago. 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.
Waterluvian 4y 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?
- bombcar 4y ago
  Yes. Post it here and tell everyone it’s perfect and it’ll be destroyed in minutes. (There are websites that have color palettes available for selection iirc)
  - deleted 4y ago
    [deleted]
  - bugfix-66 4y ago
    “Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away." Destroy it: https://BUGFIX-66.com 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?
    - sandreas 4y ago
      It's not about perfection, it's about beauty: 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)
      - bugfix-66 4y ago
        Agreed, but commenter said "Call it perfect and HN will destroy it".
        sandreas 4y ago
        Agreed :-)
Funes- 4y ago
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
- pineconebutt 4y ago
- carlineng 4y ago
  I really like the John Doe template. Everything is in one HTML file and one CSS file: https://github.com/cadars/john-doe/ https://github.com/cadars/john-doe/ 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.”
  - Funes- 4y ago
    I had a feeling that this could be made, and even thought about attempting it myself, but wouldn't this make every visitor load everything on the site at once, even if they don't want to? Or is it only loaded if it is actually displayed? Perhaps browsers have become more efficient at this and do it right off the bat now, but I think it wasn't the case a bunch of years back.
ca98am79 4y ago
If you wish to make a personal webpage from scratch, you must first invent the universe.
- exodust 4y ago
  If I want to make a fruit salad from scratch the fruit and bowl can already exist.
  - dredmorbius 4y ago
    This might help contextualise ca98am79's comment: <https://yewtu.be/watch?v=BkHCO8f2TWs 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 https://en.wikipedia.org/wiki/Cosmos:_A_Personal_Voyage>)
    - exodust 4y ago
      Likewise, the statement in the clip neglects the baseline starting point of the object. 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.
jrm4 4y ago
Great start, but the idea of reliance on Github/Cloudflare is both sad and likely unnecessary. Let's make the web the web again.
- jibbers 4y ago
  What do you recommend instead?
  - masswerk 4y ago
    Less than 5 USD/EUR per month should buy you traditional web hosting ("webspace"), a domain, personal e-mail addresses and probably even database access. There are plenty of providers to choose from.
    - exodust 4y ago
      Yes agreed, and then you can go with a local web host - local to your country or city. And let's face it, cpanel or equivalent is fun to mess around with. Much more fun than github, zola and cloudfare pages! 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.
      - masswerk 4y ago
        Also, if you're planning to boast to HN, consider a provider without any bandwidth or data caps. :-) (With a bit of luck, this comes at no extra cost.)
  - jrm4 4y ago
    See above comments on "paying a small company for hosting." 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.
swayvil 4y ago
I didn't read the article because it's too long, but here's how I do my dirt-simple page. 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. http://fleen.org http://fleen.org
SadWebDeveloper 4y ago
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...
- gonzo41 4y ago
  I picked hugo for a project because of some fever dream I was having about golang whilst learning that language. I still suck at both. And I probably don't use either enough to get good at the moment. 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.
anonu 4y ago
Big fan of https://docsify.js.org https://docsify.js.org since theres no need to compile your static site. A small amount of js just renders markdown.
remram 4y ago
What's the benefit of using Cloudflare over GitHub Pages, if you're still using GitHub to host the repo?
- threatofrain 4y ago
  Cloudflare has a lot of other services in case your website is slightly fancy.
  - remram 4y ago
    I agree Workers are a great feature, but what benefit are you thinking about for "static webpage deployment"?
    - threatofrain 4y ago
      I'm using Cloudflare's CDN + image optimization, email services, and workers for private API access. I get 0.2s for TTI. A static website just means that your assets are pre-built.
  - tpreetham 4y ago
    From my experience, the page loads became much faster after migrating to cloudflare page from github pages.
philip1209 4y ago
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 https://postcard.page
- jagged-chisel 4y ago
  Can I self-host after building with this tool?
  - philip1209 4y ago
    No, it's a hosted product. It has dynamic components, like a mailing list, blog posts, RSS feed, dynamic OG images per-site and per-post, and more. If you want to self-host, check out this Next.js project from Tailwind Labs: https://tailwindui.com/templates/spotlight https://tailwindui.com/templates/spotlight
- manuelmoreale 4y ago
  I mean, you don’t really need meta tags, next gen image formats, gdpr analytics or a newsletter to have a personal website. I have a personal site that works just fine and I don’t have any of the things you listed. As for hard, I guess it can be incredibly easy or hard depending on how you want to look at the problem.
aborsy 4y ago
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/ https://jemdoc.jaboc.net/ Python has also transition to python3. Also where to search for good CSS styles?
lxe 4y ago
I wonder what happened to "upload the files via ftp and be done with it" deployment process? Setting up cloudflare, github, github pages, amazon, etc is just too in-the-trenches.
ckhung 4y ago
great article. very details guide. thanks. back to simple is really great. internet things go wrong way for complication for many years.

763 points by bosky101 4y ago

A great place to start, a really good resource.

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.

barbs 4y ago
I wanted to ask for a link, then I thought the server on the local ISP might not have the resources to withstand HN traffic, then I thought such a small efficient website wouldn't require many resources!
cosmodisk 4y ago
I absolutely hate this ' let's just put it on Facebook'. My wife was planning to go to this boutique kids shoe shop. Checked the opening hours,etc. Went there just to see the shop closed. Calls the owner, and she's all surprised: oh but I did post on Facebook that I'll be open from 2pm..
- lbriner 4y ago
  I do as well but let's be honest, many people who create sites for money will not necessarily coach the business to keep it simple, since they will earn less money from it. 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.
- mr_gibbins 4y ago
  Unfortunately, businesses have to go to where the customers are. Many customers now are 100% Facebook-era, particularly true of the young and those older folk late to computing, and it might not occur to them to check https://www.widgetsRus.com https://www.widgetsRus.com before searching for Widgets R Us on Facebook. 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.
  - pbhjpbhj 4y ago
    If we actually got the semantic web that was promised, back in the burgeoning xhtml days, then it seems like Facebook / own website could simply duplicate the latest data from the other page.
    - mawise 4y ago
      There's a nifty tool called Bridgy that helps with this--it's out of the IndieWeb community with their POSSE model: Post on Own Site Syndicate Elsewhere https://brid.gy/ https://brid.gy/
  - mattl 4y ago
    Is there a technical reason you’re only using three letter extensions for HTML files?
    - shadowofneptune 4y ago
      The 8.3 filename structure has a long half-life.
    - zakki 4y ago
- Bakary 4y ago
  Of all businesses a boutique kids shoe shop is sure to attract the Facebook crowd as it exists today in the West at least
  - cosmodisk 4y ago
    I have no doub it does, but checking a business' Facebook account to see if they are open would probably be the last thing I could come up with.
- Minor49er 4y ago
  I've had this happen too at Armageddon Shop in Cambridge. When I showed up, the two employees told me to leave because they posted on Facebook that they were closing two hours early due to nobody showing up 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
Dalewyn 4y ago
>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. 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.
- mypalmike 4y ago
  CSS easy? I've been writing code since the 80s, and CSS is one of the most confounding things I've encountered.
  - kilna 4y ago
    Easy things are easy in CSS. Hard things are... possible. Sometimes barely so. Sometimes impossible without JS. BUT, the easy things are generally easy.
    - mypalmike 4y ago
      In job interviews, I've been handed code in various languages from assembly to C to Java and asked to figure out what that code does. It can be an interesting challenge, and while I'm certainly not the fastest to figure it out, I usually can. 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.
  - autoexec 4y ago
    A subset of CSS is very easy. The rest of it is a complete mess.
marcus_cemes 4y ago
It takes time to establish discoverability with a website, you either rely on a search engine, word of mouth, business cards, etc. A new small-business website won't magically start generating traffic without some significant effort. 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.
- executesorder66 4y ago
  True, but a local gym doesn't need global discovery and SEO optimization. They can just put the URL on their business cards, and in a few places at reception. A sticker on their door. 95% of their customers will see it and know where to go.
- clairity 4y ago
  you can just point the facebook page and google to your website. problem solved.
BrandoElFollito 4y ago
When discussing points such as yours, I always bring up https://motherfuckingwebsite.com/ https://motherfuckingwebsite.com/ (which I like very much), http://bettermotherfuckingwebsite.com/ http://bettermotherfuckingwebsite.com/ (which I like less) and https://thebestmotherfucking.website/ https://thebestmotherfucking.website/ (which I like more than the second, but still less than the first). There is also https://perfectmotherfuckingwebsite.com/ https://perfectmotherfuckingwebsite.com/ but I do not remember where it fits chronologically. There are so many, so many sites that would be perfect with just basic HTML and maybe some CSS
- capableweb 4y ago
  Ironically, all of those (except https://perfectmotherfuckingwebsite.com/ https://perfectmotherfuckingwebsite.com/) try to pull in some kind of Analytics JS, which kind of defeats their point... One of them even pull in jQuery...
  - cxr 4y ago
    2 out of 4 have analytics (not "all of those (except [the last one]"), and none of them use jQuery.
    - capableweb 4y ago
      - https://motherfuckingwebsite.com/ https://motherfuckingwebsite.com/ => GA - http://bettermotherfuckingwebsite.com/ http://bettermotherfuckingwebsite.com/ => GA - https://thebestmotherfucking.website/ https://thebestmotherfucking.website/ => Plausible + jQuery - https://perfectmotherfuckingwebsite.com/ 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.
      - Sodman 4y ago
        And the jQuery it pulls isn't even gzipped or otherwise encoded! Although at least it's minified.
worldsayshi 4y ago
> HTML is really very accessible to someone with basic computer skills 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.
barbariangrunge 4y ago
The problem with coding up a custom website for myself is I end up wanting to customize it to no end. It distracts me from actually writing. Add in a dose of graphic design ideas and very few words go down at all. 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
kredd 4y ago
Let’s say you’re a business owner, don’t have many technical skills, and want to change opening hours for a given day (e.g. public holiday). You’ll have to go at least 5 extra steps that require you to achieve that, than just pulling up your phone, going on your facebook page and changing the hours. 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.
- mattbrewsbytes 4y ago
  Engineers tend to think of things like this to be easy. A typical small restaurant owner is probably also a chef/cook of some kind. Their view of the internet might be internet==facebook and they probably think how to properly flavor something is easy. Contrast that where I have to go look up 5 recipe websites, watch some youtube to really grok it and then will forget after a day or so unless I wrote it down and will end up doing the same thing all over next time I cook that dish.

threatofrain 4y ago

This post mentions various templating frameworks; I really recommend taking a peek at Astro, which is perfect for blogs or personal sites. https://astro.build/ https://astro.build/ It offers a JSX templating language and "adapters" for deployment on various hosts like Cloudflare.

pahn 4y ago
I just went through this and am very happy with using 11ty. It‘s simple and produces clean html/css without any framework whatsoever.
- o_m 4y ago
  11ty is just as much a framework as Astro
dpwm 4y ago
Having just recently played with astro, I can confirm it's got some really nice qualities. 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.

systemvoltage 4y ago

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.

TedDoesntTalk 4y ago
Unfortunately this also requires a dynamic dns client and server if you have a residential IP address that can change.
- wallmountedtv 4y ago
  There are free "forever" VPS options from Google, Azure, and Oracle that you can use to deploy non-commercial servers. And together with either a free subdomain provider, or something like freenom to find a free domain registrar, you can have a fully free setup without using "no code" providers. Perfect to learn on without needing to use money.
  - noirscape 4y ago
    I'd rather recommend something like noip's free tier over Freenom btw. 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.
boyter 4y ago

Heyso 4y ago

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)."

catach 4y ago
I don't think a personal webpage falls under any of those categories.
TuringNYC 4y ago
>> Keep it mind that you cannot use github as free host for anything. 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.

arutar 4y ago

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!

tkgally 4y ago
It looks great! I started my personal static website more than twenty years ago, and I have maintained it ever since with only a text editor and FTP software. When I began, I learned what I needed from books (!). If I were starting now, your site would be the perfect introduction.
- mattl 4y ago
  Hopefully SFTP nowadays?
  - tkgally 4y ago
    Yes, yes. Though the site is still http, not https. I need to get on that one of these days.
    - bdamm 4y ago
      Yes, for the sake of your visitors. If your site is only http, then middleboxes can use your site load to opportunistically attack the visitor. 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.
  - 2000UltraDeluxe 4y ago
    Most modern web hosts support both SFTP and FTPS. The same applies for FTP clients.

currenciessfe 4y ago

8fingerlouie 4y ago

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/static/?cdn=disable#overview 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.

imran0 4y ago
> I didn't know about Zola. I guess i just deemed Hugo "good enough" :) 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.
- 8fingerlouie 4y ago
  > 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.

3zra 4y ago

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?

fergie 4y ago
The big thing missing from vanilla HTML is templating. I dont fully understand why it has never been included in the HTML standard.
- jbverschoor 4y ago
  Because templating is yet another language to be interpreted. HTML was simple and very effective for its purpose: documents.
- jen729w 4y ago
  Yes x 1,000,000. This is the only thing that drives me to something like React (other than the fact that I’m not actually a programmer and it’s the only thing I know) to build a site. 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.
  - jbverschoor 4y ago
    If you're able to run react, you should be able to run any templating engine as well.
  - Moru 4y ago
    You used FRAMES ofcourse :-) (Now obsolete though)
    - fergie 4y ago
      You are undeservedly downvoted. I think that there is a strong case for using frames as a templating strategy for static sites that are hosted on say S3 or Github.

Reflecticon 4y ago

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.

867-5309 4y ago
you don't need programming skills to self-host. most hosts offer one-click website options for e.g. wordpress
jcynix 4y ago
You might want to look at some "elder self-hosting sites" (i.e pre f*book) like https://www.dreamwidth.org https://www.dreamwidth.org where you could easily set up an internet presence without fluff.

daptaq 4y ago

> For command-line editors, you could consider Neovim or Emacs. A friendly reminder that Emacs is not a "command-line editor".

zoltar 4y ago
Of course it is. It's not just that, though.
- daptaq 4y ago
  Emacs is a visual editor (which also applies to Neovim, btw). Ed is a command line editor. But even if we assume that "command line" means "terminal", then it would still be wrong to describe it as a "command line editor", in the same sense at is wrong to describe a computer as a facebook client.
  - zoltar 4y ago
    You are confusing line editor with command-line editors. If you interpret command-line editor as editing the command line, emacs has eshell. If you interpret it as an editor from a terminal, it's that, too. If you mean "line editor", emacs has batch mode.
    - daptaq 4y ago
      Aren't all "line editors" also "command line editors"? Either way, that is not my point. I just wanted to point out that Emacs shoudln't be boxed into the same category as Vim, because while Vim ist most commonly used in a terminal, Emacs isn't.
arutar 4y ago
That's a fair point, more precise phrasing would be "If you prefer a command-line interface, ..." which should be sufficiently vague to make almost everybody happy.
- 4y ago

beardyw 4y ago

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?

notRobot 4y ago
One example: 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.
- Moru 4y ago
  Just make sure your server does not give a list of files in the directory /files/ if you do that :-)
  - hnbad 4y ago
    If the repo is public, people can just go to the repo and GitHub will happily give them the list of files.
  - notRobot 4y ago
    Haha yep, made that mistake in the past!
  - TurkishPoptart 4y ago
    How do you do that?
    - Moru 4y ago
      It's a very common mistake so there is lots of help for it: You search "disable directory listing" for whatever webserver you use. I mostly use apache: https://duckduckgo.com/?q=apache+disable+directory+listing+htaccess&t=ffab&ia=web https://duckduckgo.com/?q=apache+disable+directory+listing+h...

habibur 4y ago

Adding 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 just as valid. 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.

enriquto 4y ago
I was going to say this! Moreover, besides self-closing tags, in HTML5 there are many optional tags. For example, you almost never need to write explicit html, head, body, tags. The given minimal example thus can be simplified to something like this: <!DOCTYPE html> <title>Example Webpage</title> <h1>Welcome to my webpage</h1> <p>This is some content! ...and still be correct, 100% conformant html. See google's html style guide for more cool hints towards a minimal markup: https://google.github.io/styleguide/htmlcssguide.html https://google.github.io/styleguide/htmlcssguide.html 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.
- skyfaller 4y ago
  Another source explaining optional HTML in depth: https://meiert.com/en/blog/optional-html/ https://meiert.com/en/blog/optional-html/
- tannhaeuser 4y ago
  > Moreover, besides self-closing tags, in HTML5 there are many optional tags. 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> Cf. http://sgmljs.net/blog/blog1701.html http://sgmljs.net/blog/blog1701.html (the TALK slides) explaining the inferences SGML does on the example input in detail

do-me 4y ago

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 https://geo.rocks/post/setup) and 2) Material for MkDocs + GitHub for projects.

deworms 4y ago

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.

neogodless 4y ago
Can you provide references to this claim?
- vehemenz 4y ago
  If you've read the news in the past month, CloudFlare removed its DDoS protection and caching service from KiwiFarms based on series of false reports, essentially taking the site offline.
  - exodust 4y ago
    But didn't cloudfare backtrack on that and state they don't want to be moderators of content because they want to be seen as a utility? They used the example of a phone company who doesn't care/not liable if you say naughty things on the phone. They want to be like the phone company.
    - deworms 4y ago
      No, they didn't they still haven't restored service, and they cut it based on completely fake reports, without any warning or communication. They're not trustworthy.
      - collinmanderson 4y ago
        It seems to me like they only do this in very very rare circumstances, maybe 3 times ever? And only when there's the threat of physical harm. 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."

BOOSTERHIDROGEN 4y ago

Why no one pushing this ? this is so much simpler than hugo, jekyll, etc.

neogodless 4y ago
I'm confused. This is a personal web site guide that encourages using a site generator like Hugo or Jekyll or Zola. (And it's on the front page of Hacker News, so it seems like it's interesting to many of us.) If you mean, why is no one pushing Zola, this site is obviously encouraging it, so it's inaccurate to assume "no one" is.

sake 4y ago

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.

kaichanvong 4y ago
Your being completely ignorant making this statement (about a personal webpage that is built from scratch). It is 100% their choice. How they reach the conclusion to write their links is 100% theirs. "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.
- rawTruthHurts 4y ago
  Indeed. Why would you teach to do things right when you can teach how to do them wrong?
  - kaichanvong 4y ago
    Like I said. It is assumption of being 1 domain. Could be a personal web pages on 2 different domains. Ahah!
    - bbkane 4y ago
      I feel like the common case, especially for new HTML devs, is to use one website. 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!
      - kaichanvong 4y ago

martinskou 4y ago

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

dredmorbius 4y ago
I've looked into this somewhat though I've not implemented any solutions. 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-with-lunr/ 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>

m-manu 4y ago

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

anyfactor 4y ago

For personal sites use classless CSS framework: https://github.com/dbohdan/classless-css https://github.com/dbohdan/classless-css I have used water.css, simple.css and Tufte.css and all of them are great.

VMG 4y ago
The guide is aimed at non-tech people. Using any kind of framework is missing the point.
- schwartzworld 4y ago
  No classes means that you just write plain html. I think non tech people could deal with adding a single script tag and having everything just work.
  - deleted 4y ago
    [deleted]
- deleted 4y ago
  [deleted]
bcjordan 4y ago
Super cool, love how they can be used for prototypes to cover that gap from "CS professor's plain HTML website with a 1998 copyright notice" to "fiddling with margin and padding values". BareCSS in particular looks so nice I would never have believed it uses no classes or styles! https://github.com/longsien/BareCSS https://github.com/longsien/BareCSS
- clairity 4y ago
  nice, i’m building a personal css framework that builds on top of a classless base that is similar to bare.css, so i’ll have to go raid it for ideas like how/where it employs grid and flexbox. =) 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.

vonwoodson 4y ago

0/10 for recommending the garbage text editor neovim. Use real vim.

julianbuse 4y ago
Poe's law in action: I cannot determine whether this is satire or not.
executesorder66 4y ago
What's wrong with neovim?
nullc 4y ago
Ed is the standard text editor.
vehemenz 4y ago
I assume by "real vim" you mean vim emulation in a serious editor/IDE.

_joel 4y ago

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.

jstummbillig 4y ago

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.

diceduckmonk 4y ago
We just checked out Neocities, the revival of Geocities, this week for our blogging purposes. I was taken aback and delighted that they had a drag and drop directory enumerating your CSS and HTML files.
- greyKnight 4y ago
  They have all animated gifs?
eurasiantiger 4y ago
It used to be really easy back when Netscape Navigator (and Communicator) still included a WYSIWYG HTML editor and ISPs provided users with some megabytes of hosting accessible with simple FTP.
- moooo99 4y ago
  > ISPs provided users with some megabytes of hosting accessible with simple FTP. 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!
  - notRobot 4y ago
    That's so cool! What ISP, if you don't mind me asking, and have you discovered any long-forgotten sites that still live on their servers?
    - moooo99 4y ago

nullandvoid 4y ago

Can vouch for cloudflare pages for frontend for an easy static frontend deployment experience. Manages HTTPS, configuring deployment on pushes to repo, connecting to custom domain etc all with a few clicks.

duxup 4y ago
Same. My personal page was on heroku. I realized it had vanished and very quickly I put together a page, GitHub repository connected to cloudflare, connected an unused google domain, redirected my old domain (I wanted to use the new domain). No fuss. Whole process felt very "clean".

buggythebug 4y ago

Tuckerism 4y ago

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/ 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.

kobe_bryant 4y ago

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

ajsnigrutin 4y ago

Where's the "This page is under construction" banner, and the visitor counter? (yes, I might be getting old)

digitalsushi 4y ago
So last week HN said "hey, go read The Pragmatic Programmer if you havent", and, I finished chapter one up a night or two ago. 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.

Waterluvian 4y 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?

bombcar 4y ago
Yes. Post it here and tell everyone it’s perfect and it’ll be destroyed in minutes. (There are websites that have color palettes available for selection iirc)
- deleted 4y ago
  [deleted]
- bugfix-66 4y ago
  “Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away." Destroy it: https://BUGFIX-66.com 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?
  - sandreas 4y ago
    It's not about perfection, it's about beauty: 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)
    - bugfix-66 4y ago
      Agreed, but commenter said "Call it perfect and HN will destroy it".
      - sandreas 4y ago
        Agreed :-)

Funes- 4y ago

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

pineconebutt 4y ago
carlineng 4y ago
I really like the John Doe template. Everything is in one HTML file and one CSS file: https://github.com/cadars/john-doe/ https://github.com/cadars/john-doe/ 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.”
- Funes- 4y ago
  I had a feeling that this could be made, and even thought about attempting it myself, but wouldn't this make every visitor load everything on the site at once, even if they don't want to? Or is it only loaded if it is actually displayed? Perhaps browsers have become more efficient at this and do it right off the bat now, but I think it wasn't the case a bunch of years back.

ca98am79 4y ago

If you wish to make a personal webpage from scratch, you must first invent the universe.

exodust 4y ago
If I want to make a fruit salad from scratch the fruit and bowl can already exist.
- dredmorbius 4y ago
  This might help contextualise ca98am79's comment: <https://yewtu.be/watch?v=BkHCO8f2TWs 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 https://en.wikipedia.org/wiki/Cosmos:_A_Personal_Voyage>)
  - exodust 4y ago
    Likewise, the statement in the clip neglects the baseline starting point of the object. 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.

jrm4 4y ago

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

jibbers 4y ago
What do you recommend instead?
- masswerk 4y ago
  Less than 5 USD/EUR per month should buy you traditional web hosting ("webspace"), a domain, personal e-mail addresses and probably even database access. There are plenty of providers to choose from.
  - exodust 4y ago
    Yes agreed, and then you can go with a local web host - local to your country or city. And let's face it, cpanel or equivalent is fun to mess around with. Much more fun than github, zola and cloudfare pages! 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.
    - masswerk 4y ago
      Also, if you're planning to boast to HN, consider a provider without any bandwidth or data caps. :-) (With a bit of luck, this comes at no extra cost.)
- jrm4 4y ago
  See above comments on "paying a small company for hosting." 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.

swayvil 4y ago

I didn't read the article because it's too long, but here's how I do my dirt-simple page. 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. http://fleen.org http://fleen.org

SadWebDeveloper 4y ago

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...

gonzo41 4y ago
I picked hugo for a project because of some fever dream I was having about golang whilst learning that language. I still suck at both. And I probably don't use either enough to get good at the moment. 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.

anonu 4y ago

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

remram 4y ago

What's the benefit of using Cloudflare over GitHub Pages, if you're still using GitHub to host the repo?

threatofrain 4y ago
Cloudflare has a lot of other services in case your website is slightly fancy.
- remram 4y ago
  I agree Workers are a great feature, but what benefit are you thinking about for "static webpage deployment"?
  - threatofrain 4y ago
    I'm using Cloudflare's CDN + image optimization, email services, and workers for private API access. I get 0.2s for TTI. A static website just means that your assets are pre-built.
- tpreetham 4y ago
  From my experience, the page loads became much faster after migrating to cloudflare page from github pages.

philip1209 4y ago

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 https://postcard.page

jagged-chisel 4y ago
Can I self-host after building with this tool?
- philip1209 4y ago
  No, it's a hosted product. It has dynamic components, like a mailing list, blog posts, RSS feed, dynamic OG images per-site and per-post, and more. If you want to self-host, check out this Next.js project from Tailwind Labs: https://tailwindui.com/templates/spotlight https://tailwindui.com/templates/spotlight
manuelmoreale 4y ago
I mean, you don’t really need meta tags, next gen image formats, gdpr analytics or a newsletter to have a personal website. I have a personal site that works just fine and I don’t have any of the things you listed. As for hard, I guess it can be incredibly easy or hard depending on how you want to look at the problem.

aborsy 4y ago

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/ https://jemdoc.jaboc.net/ Python has also transition to python3. Also where to search for good CSS styles?

lxe 4y ago

I wonder what happened to "upload the files via ftp and be done with it" deployment process? Setting up cloudflare, github, github pages, amazon, etc is just too in-the-trenches.

ckhung 4y ago

great article. very details guide. thanks. back to simple is really great. internet things go wrong way for complication for many years.