7 ms·
I've been maintaining my personal website as plain HTML for five years now. I must say, I quite like this method. There's no substitute for practice when it com
by uncheckederror 2y ago
I've been maintaining my personal website as plain HTML for five years now. I must say, I quite like this method. There's no substitute for practice when it comes to maintaining your skills at editing HTML and CSS.
Yes, you must copy and paste content and not having layout page is annoying at times. But the overhead of just doing it yourself is surprisingly small in terms of the time commitment.
Typically, I'll draft a post in MS Word then open the git repo for my site, hosted on github pages, duplicate and rename the template.html page that includes the CSS, footer, and header for my site and then copy my content into it. When I'm happy with everything, I'll make my commit and then a minute later it's live at my custom domain. Seeing that it takes only 11KBs and 26ms to load my landing page strangely delightful.
- culi 2y ago> Yes, you must copy and paste content Many people who maintain their own sites in vanilla web technologies tend to create reusable functions to handle this for them. It can generate headers and the like dynamically so you don't have to change it on every single page. Though that does kill the "no javascript required" aspect a lot of people like Of course you could simply add a build step to your pure HTML site instead!
- 8organicbits 2y agoI've adopted the idea that a blog post is archived when it's published; I don't want to tinker with it again. Old pages may have an old style, but that's OK, it's an archive. Copy/paste works great for this. The only reason I use a blog engine now (Hugo) is for RSS. I kept messing up or forgetting manual RSS edits.
- promiseofbeans 2y agoI really love this! I've seen it in action a couple times in the wild, and it's super cool seeing how the site's design has evolved over time. It also has the benefit of forcing you to keep your URIs stable. Cool URIs don't change: https://www.w3.org/Provider/Style/URI.html https://www.w3.org/Provider/Style/URI.html
- mixmastamyk 2y agoI recently learned the object tag can do what I wished for in the 90s... work as an include tag: <object data="footer.html"></object> Turn your back for twenty-five years, and be amazed at what they've come up with! ;-) Should reduce a lot of boilerplate that would get out of sync on my next project, without need for templating.
- liontwist 2y agoUnfortunately that will require the client to make additional web requests to load the page, effectively doubling latency at a minimum.
- mixmastamyk 2y agoSounds like premature optimization for a simple page. If the objects are sized their regions should be fillable afterward without need to resize and be cached for subsequent access.
- liontwist 2y agoThe other solutions are even easier and don’t double latency. > be cached for subsequent access. So now you need to setup cache control?
- mixmastamyk 2y agoNope and nope.
- liontwist 2y agoGood explanation. I’ll stick with cat.
- deleted 2y ago[deleted]
- spoonfeeder006 2y agoIsn't using React with a static site generator framework basically the same thing but better?
- datavirtue 2y agoYes, if you want to throw up in your mouth.
- deleted 2y ago[deleted]
- realusername 2y agoIn theory yes, in practice good luck maintaining that if you are just a solo blogger. I doubt your blog would last a single month without some breaking change of some sort in one of the packages.
- spoonfeeder006 2y agoyou mean npm packages? why would you need to update those anyhow?
- realusername 2y agoBecause at some point it will cease to work? It needs upgrades like any other project. Every upgrade in the JS world is very painful.
- spoonfeeder006 2y agoWhy will they stop working eventually? Assuming they are all self contained and you don't upgrade even node js for that project Edit: Oh right, OS upgrades could do it. Or network keys changing etc...
- spoonfeeder006 2y agoYeah I guess React + SSG isn't the best choice. Nano JSX might be better https://nanojsx.io/ https://nanojsx.io/
- lelanthran 2y ago> It can generate headers and the like dynamically so you don't have to change it on every single pa Yeah, I noped out of that and use a client-side include (webcomponent) so that my html can have `<include-remote remote-src='....'>` instead. Sure, it requires JS to be enabled for the webcomponent to work, but I'm fine with that. See https://www.lelanthran.com https://www.lelanthran.com for an example. [EDIT: Dammit, my blog doesn't use that webcomponent anymore! Here's an actual production usage of it: https://demo.skillful-training.com/project/webroot/ https://demo.skillful-training.com/project/webroot/ (use usernames (one..ten)@example.com and password '1' if you want to see more usage of it)]
- culi 2y agoyeah clearly there's a lot of ways to solve this issue if javascript is enabled. But there's a big overlap between the folks who wanna use vanilla web technologies and the folks who want their site to run without javascript
- arkh 2y agoOr, let me be cheeky: you could add some `<php include('header.html')?>` in your html.
- liontwist 2y ago> Yes, you must copy and paste content Manual work is almost never a good solution. Try this: for PAGE in *.page do cat header.html "$PAGE" footer.html > “$PAGE.html” done
- adamzochowski 2y agoWhy not use server side includes? Most web servers support it, and it dates back to one of the early features of webservers. <!--# set var="pagetitle" value="Main page" --> <!--# include file="00__header.html" --> ... main content here <!--# include file="00__footer.html" -->
- liontwist 2y agoBecause that requires a server with the proper config and this is an HTML file. So it works in every environment, like locally on your machine, or GitHub pages.
- 8n4vidtmkvmk 2y ago`cat` supports multiple files, no? The whole point is that it concatenates. Why use 3 commands?
- AdieuToLogic 2y ago
- begueradj 2y agoHow do you do for syntax highlighting ?
- deleted 2y ago[deleted]
- tannhaeuser 2y ago> copy and paste content and not having layout page is annoying at times HTML was envisioned as an SGML application/vocabulary, and SGML has those power features, such as type-checked shared fragments/text macros (entities, possibly with parameters), safe third-party content transclusion, markup stream processing and filtering for generating a table of content for page or site navigation, content screening for removal/rejection of undesired script in user content, expansion of custom Wiki syntax such as markdown into HTML, producing "views" for RSS or search result pages in pipelines, etc. etc. See [1] for a basic tutorial. [1]: https://sgmljs.net/docs/producing-html-tutorial/producing-html-tutorial.html https://sgmljs.net/docs/producing-html-tutorial/producing-ht...
- kreetx 2y agoI didn't expect this to be serious and am surprised on that the tutorial actually delivers. Way back when I was learning HTML and it was said that it was built with SGML, then this relation remained a total mystery to me.
- TeMPOraL 2y ago> I didn't expect this to be serious and am surprised on that the tutorial actually delivers. Same here. I believed that SGML was like Lisp of markup languages, except that it went completely extinct. Good to see it's still usable, I feel like I want to try it out now (instead of making a third generation of my static site generator from scratch).
- dmsnell 2y agoI’ve become quite a fan of writing in SGML personally, because much of what you note is spot-on. Some of the points seem a bit of a stretch though. Any type-checking inside of SGML is more akin to unused-variable checking. When you say that macros/entities may contain parameters, I think you are referring to recursive entity expansion, which does let you parameterize macros (but only once, and not dynamically within the text). For instance, you can set a `¤tYear` entity and refer to that in `copywrite "¤tYear/¤tDay`, but that can only happen in the DTD at the start of the document. It’s not the case that you could, for instance, create an entity to generate a Github repo link and use it like `&repoName = "diff-match-patch"; &githubLink`. This feature was used in limited form to conditionally include sections of markup since SGML contains an `IGNORE` “marked section”. <!ENTITY % private-render "IGNORE"> ... <![%private-render[ <side-note> I’m on the fence about including this bit. It’s not up to the editorial standards. </side-note> ]]> SGML also fights hard against stream processing, even more so than XML (and XML pundits regret not deprecating certain SGML features like entities which obstruct stream processing). Because of things like this, it’s not possible to parse a document without having the entire thing from the start, and because of things like tag omission (which is part of its syntax “MINIMIZATION” features), it’s often not possible to parse a document without having _everything up to the end_. Would love to hear what you are referring to with “safe” third-party transclusion and also what features are available for removal or rejection of undesired script in user content. Apart from these I find it a pleasure to use because SGML makes it easy for _humans_ to write structured content (contrast with XML which makes it easy for software to parse). SGML is incredibly hard to parse because in order to accommodate human factors _and actually get people to write structured content_ it leans heavily on computers and software doing the hard work of parsing. It’s missing some nice features such as namespacing. That is, it’s not possible to have two elements of the same name in the same document with different attributes, content, or meanings. If you want to have a flight record and also a list of beers in a flight, they have to be differentiated otherwise they will fail to parse. <flight-list> <flight-record><flight-meta pnr=XYZ123 AAL number=123> </flight-list> <beer-list> <beer-flight> <beer Pilsner amount=3oz>Ultra Pils 2023 <beer IPA>Dual IPA <beer Porter>Chocolate milk stout </beer-list> DSSSL was supposed to be the transforms into RSS, page views, and other styles or visualizations. With XML arose XSL/XSLT which seemed to gain much more traction than DSSSL ever did. My impression is that declarative transforms are best suited for simpler transforms, particularly those without complicated processing or rearranging of content. Since `osgmls` and the other few SGML parsers are happy to produce an equivalent XML document for the SGML input, it’s easy to transform an SGML document using XSL, and I do this in combination with a `Makefile` to create my own HTML pages (fair warning: HTML _is not XML_ and there are pitfalls in attempting to produce HTML from an XML tool like XSL). For more complicated work I make quick transformers with WordPress’ HTML API to process the XML output (I know, XML also isn’t HTML, but it parses reliably for me since I don’t produce anything that an HTML parser couldn’t parse). Having an imperative-style processor feels more natural to me, and one written in a programming language that lets me use normal programming conveniences. I think getting the transformer right was never fully realized with the declarative languages, which are similar to Angular and other systems with complicated DSLs inside string attribute values. I’d love to see the web pick up where SGML left off and get rid of some of the legacy concessions (SGML was written before UTF-8 and its flexibility with input encodings shows it — not in a good way either) as well as adopt some modern enhancements. I wrote about some of this on my personal blog, sorry for the plug. https://fluffyandflakey.blog/2024/10/11/ugml-a-proposal-to-update-sgml/ https://fluffyandflakey.blog/2024/10/11/ugml-a-proposal-to-u... Edit: formatting
- ycombinatrix 2y agouse esbuild to get rid of copy-pasting
- EvanAnderson 2y ago> Yes, you must copy and paste content and not having layout page is annoying at times. But the overhead of just doing it yourself is surprisingly small in terms of the time commitment. This calls out for server side includes[0]. I so loved server side includes back in the late 90s. You still work in plain HTML and CSS, boilerplate can be centralized and not repeated, and clients receive the entire page in a single request. [0] https://en.wikipedia.org/wiki/Server_Side_Includes https://en.wikipedia.org/wiki/Server_Side_Includes
- wink 2y ago> But the overhead of just doing it yourself is surprisingly small in terms of the time commitment. Holy cow. The sole reason I learned SSI and then PHP in 1998 was because I was sick of this after like 2 weeks. This person has more patience in their pinky than I have ever had.
- 0xEF 2y agoThis is my workflow for my site, too, just replacing MS Word with Obsidian since it syncs over all my devices allowing me to write/edit my future content wherever I am at, then upload later. I tried things like bashblog for awhile, but it has some quirks like sometimes placing posts out of order when building the index page. That and I have zero use for the built in analytics options or things like Discus comments, so it seemed like I was really only using about 30% of what it was meant to do. Here's a link to that for anyone interested. It's quite tweakable. https://github.com/cfenollosa/bashblog https://github.com/cfenollosa/bashblog
- throwaway04623 2y ago> Yes, you must copy and paste content and not having layout page is annoying at time I think this was one of the most common usages of PHP in the beginning, at least for those who basically wrote static HTML/CSS and needed a header/footer. It was probably a gateway into more advanced dynamic pages, eventually ending up using databases and other advanced functionality. <?php include('header.inc'); ?> <p>Here's a list of my favourite movies</p> <ul> <li>...</li> </ul> <?php include('footer.inc'); ?> It would be great if HTML had a similar capability. People have asked for it for over 30 years, so it's unlikely that it will be implemented now.
- dspillett 2y ago> > Yes, you must copy and paste content and not having layout page is annoying at time > I think this was one of the most common usages of PHP in the beginning, > <?php include('header.inc'); ?> And other tools beforehand: basic CGI or even more basic server-side includes (https://en.wikipedia.org/wiki/Server_Side_Includes https://en.wikipedia.org/wiki/Server_Side_Includes) To reduce CPU and IO load on the server (or just in circumstances where SSI was not enabled on the server they had available) some would pre-process the SSI directives (obviously this doesn't work for dynamic results such as the output from many #exec examples), so all that is being served is simple static files ‑ a precursor to more complex modern static site builders. > It would be great if HTML had a similar capability. People have asked for it for over 30 years, so it's unlikely that it will be implemented now. That doesn't really fit with the intentions of HTML, and could impose a bunch of extra network latency overhead compared to using SSI instead, leading to either complete rendering delays or jumpy pages as included content is merged in in steps, though I have seen it implemented multiple ways using a bit of JS (some significantly more janky than others).
- mixmastamyk 2y agoSee my reply about the object tag. Suffers from lack of press I guess.
- thu 2y ago> you must copy and paste content I've started the Slab templating language[0] to be able to define reusable HTML fragments. It means using a dedicated tool but hopefully not needing to resort to a real programming language. 0: https://slab-lang.org/ https://slab-lang.org/