6 ms·

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 buildi

by 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.
    - mattl 4y ago
      I don’t know if I’ve ever seen FTPS in the wild.
i_feel_great 4y ago
Very helpful. Maybe a mention of using https://validator.w3.org/ https://validator.w3.org/ would also be helpful to check that all the html is correct and complete.
- jcynix 4y ago
  Yes, validation is a good suggestion. And there's http://jigsaw.w3.org/css-validator/ http://jigsaw.w3.org/css-validator/ too, both can be linked to from inside a web page via http://validator.w3.org/check/referer http://validator.w3.org/check/referer and http://jigsaw.w3.org/css-validator/check/referer http://jigsaw.w3.org/css-validator/check/referer to ease repeated testing.
- EricHolden12 4y ago
  Oh man, this takes me back. 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.
  - mro_name 4y ago
    I am lazy and run html-tidy.org.
- skyfaller 4y ago
  There's also a ... newer version? at https://validator.w3.org/nu/ https://validator.w3.org/nu/ I'm not 100% sure what the difference is, but you can see the source code at https://github.com/validator/validator https://github.com/validator/validator and report any issues.
- MatthiasPortzel 4y ago
  I would put “check for spec valid HTML” far down the TODO-list. I’m a perfectionist, so I would run the validator at some point, but I find it’s basically never helpful for identifying usability issues with a website. For a non-technical person setting up a personal site, does it really matter?
  - 4y ago
vinay_ys 4y ago
Gitlab gives you private repositories with pages.
rob74 4y ago
One nitpick: right at the beginning it mentions "JavaScript allows dynamic behaviour", and then explains at length what static and dynamic pages are, but doesn't refer back to JavaScript and what kind of dynamic behaviour it provides for websites that are "server-side static". I imagine that if someone who has really zero prior knowledge would read this, that might leave them confused...
- mattbrewsbytes 4y ago
  It also might save them from ever writing any Javasript!
sandreas 4y ago
I love to see that the effort of preparing a microcourse is publicly available. And also the fact, that you don't "promote" a single static site generator, but also wrap this into a HTML course. 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/ https://pilabor.com/blog/2021/05/building-a-blog-with-hugo/
eevilspock 4y ago
> The syntax href="../" specifies that we are referring to a file in the directory containing the current file. ".." navigates to the parent directory of the directory containing the current file. "." refers to the directory containing the current file.
bitwize 4y ago
It is cool to see this on HN! I keep thinking, don't people who use the internet with any frequency already know this? But that was a quarter century ago, that knowledge may have been long forgotten among internet-using normies, and it needs to be documented and remembered.
deleted 4y ago
[deleted]

by arutar 4y ago

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.
  - mattl 4y ago
    I don’t know if I’ve ever seen FTPS in the wild.

i_feel_great 4y ago

Very helpful. Maybe a mention of using https://validator.w3.org/ https://validator.w3.org/ would also be helpful to check that all the html is correct and complete.

jcynix 4y ago
Yes, validation is a good suggestion. And there's http://jigsaw.w3.org/css-validator/ http://jigsaw.w3.org/css-validator/ too, both can be linked to from inside a web page via http://validator.w3.org/check/referer http://validator.w3.org/check/referer and http://jigsaw.w3.org/css-validator/check/referer http://jigsaw.w3.org/css-validator/check/referer to ease repeated testing.
EricHolden12 4y ago
Oh man, this takes me back. 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.
- mro_name 4y ago
  I am lazy and run html-tidy.org.
skyfaller 4y ago
There's also a ... newer version? at https://validator.w3.org/nu/ https://validator.w3.org/nu/ I'm not 100% sure what the difference is, but you can see the source code at https://github.com/validator/validator https://github.com/validator/validator and report any issues.
MatthiasPortzel 4y ago
I would put “check for spec valid HTML” far down the TODO-list. I’m a perfectionist, so I would run the validator at some point, but I find it’s basically never helpful for identifying usability issues with a website. For a non-technical person setting up a personal site, does it really matter?
- 4y ago

vinay_ys 4y ago

Gitlab gives you private repositories with pages.

rob74 4y ago

One nitpick: right at the beginning it mentions "JavaScript allows dynamic behaviour", and then explains at length what static and dynamic pages are, but doesn't refer back to JavaScript and what kind of dynamic behaviour it provides for websites that are "server-side static". I imagine that if someone who has really zero prior knowledge would read this, that might leave them confused...

mattbrewsbytes 4y ago
It also might save them from ever writing any Javasript!

sandreas 4y ago

I love to see that the effort of preparing a microcourse is publicly available. And also the fact, that you don't "promote" a single static site generator, but also wrap this into a HTML course. 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/ https://pilabor.com/blog/2021/05/building-a-blog-with-hugo/

eevilspock 4y ago

> The syntax href="../" specifies that we are referring to a file in the directory containing the current file. ".." navigates to the parent directory of the directory containing the current file. "." refers to the directory containing the current file.

bitwize 4y ago

It is cool to see this on HN! I keep thinking, don't people who use the internet with any frequency already know this? But that was a quarter century ago, that knowledge may have been long forgotten among internet-using normies, and it needs to be documented and remembered.

deleted 4y ago

[deleted]