TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Rewriting my website in plain HTML and CSS

198 点作者 arnath4 个月前

62 条评论

uncheckederror4 个月前
I&#x27;ve been maintaining my personal website as plain HTML for five years now. I must say, I quite like this method. There&#x27;s no substitute for practice when it comes to maintaining your skills at editing HTML and CSS.<p>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.<p>Typically, I&#x27;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&#x27;m happy with everything, I&#x27;ll make my commit and then a minute later it&#x27;s live at my custom domain. Seeing that it takes only 11KBs and 26ms to load my landing page strangely delightful.
评论 #42707603 未加载
评论 #42708569 未加载
评论 #42705885 未加载
评论 #42709185 未加载
评论 #42706527 未加载
评论 #42709040 未加载
评论 #42709761 未加载
评论 #42707379 未加载
评论 #42707268 未加载
评论 #42708251 未加载
insonable4 个月前
There&#x27;s a lot you can do with just plain html these days if you just need a clean site. Here&#x27;s an example from my recipe site (<a href="https:&#x2F;&#x2F;xilic.com&#x2F;recipia&#x2F;sauces&#x2F;pesto_traditional.html" rel="nofollow">https:&#x2F;&#x2F;xilic.com&#x2F;recipia&#x2F;sauces&#x2F;pesto_traditional.html</a>), mostly for my personal use or sharing with friends, with only html&#x2F;css. It has expandable boxes, a menu system, etc. A simple script converts a directory structure of .csv files to these recipe cards with a template, and this way you can edit the sources in a spreadsheet and then the publish script just takes whatever is new and re-does the whole lot of html as necessary. Just like we used to do with Apache Forest!
评论 #42708426 未加载
评论 #42706336 未加载
评论 #42711786 未加载
评论 #42713153 未加载
azangru4 个月前
Did he reinvent a static-site generator? Markdown, pandoc, makefile... Sounds like a job for hugo&#x2F;eleventy&#x2F;jekyll&#x2F;whatever.
评论 #42706177 未加载
评论 #42705889 未加载
评论 #42706000 未加载
评论 #42707985 未加载
评论 #42709031 未加载
评论 #42710249 未加载
评论 #42709130 未加载
评论 #42706425 未加载
SuboptimalEng4 个月前
I started a portfolio website with Netlify (iirc), then I moved to Vue + Gridsome (on GitHub pages), then Next.js with Tailwind CSS, and was about to move to Vite.js over winter break.<p>That&#x27;s 4 stacks over the course of 5-6 years. Not worth it.<p>Decided to do the sensible thing and use GitHub&#x27;s README functionality. I prefer this approach and wish more folks in the tech community adopted it: <a href="https:&#x2F;&#x2F;github.com&#x2F;SuboptimalEng">https:&#x2F;&#x2F;github.com&#x2F;SuboptimalEng</a>
评论 #42706429 未加载
评论 #42705967 未加载
评论 #42705790 未加载
评论 #42706863 未加载
catapart4 个月前
Good on ya! HTML+JS is plenty performant for a blog and I&#x27;m always happy to see more people eschewing frameworks when they&#x27;re not necessary.<p>I&#x27;ve been writing a progressive web app that is, itself, a &quot;web component&quot; (custom element), built entirely with custom elements, so I feel like I&#x27;ve got a pretty good idea of how you can tackle that header reuse bullet point. Happy to give pointers if you&#x27;re interested in that at all.<p>Anyway, great job on simplifying things! I hope it gets easier from here!
评论 #42710601 未加载
HackerThemAll4 个月前
The website of one of the most influential IT person, who won the court battle against U.S. Government, allowing for widespread cryptography, professor Daniel J. Bernstein, is and always has been plain HTML mostly with no CSS.<p><a href="https:&#x2F;&#x2F;cr.yp.to&#x2F;" rel="nofollow">https:&#x2F;&#x2F;cr.yp.to&#x2F;</a><p>It&#x27;s served using his own HTTP server - publicfile, and the DNS domain is served using his own DNS server - djbdns. E-mail is handled using his own SMTP server - qmail. He invented the Maildir e-mail format, de facto standard in all e-mail products. All e-mail mailing lists for his products are handled by his own mailing list server - ezmlm. All of this is managed using his replacements to &#x2F;etc&#x2F;rc or &#x2F;etc&#x2F;init.d or systemd - daemontools.<p>He invented ChaCha and Salsa stream ciphers, now in widespread use, as well as elliptic curves, especially the famous Curve25519, and the Poly1305 MAC.<p>He also invented TCP SYN cookies.<p>Pretty impressive, no?
评论 #42717708 未加载
jsheard4 个月前
I&#x27;m surprised to not see Astro mentioned, its whole schtick is providing very similar DX to frameworks like SvelteKit except in a way that&#x27;s geared towards generating plain HTML&#x2F;CSS with zero JS by default. You get things like components with scoped styles but they are compiled down to nothing. It&#x27;s really a breath of fresh air.
评论 #42705819 未加载
评论 #42705745 未加载
评论 #42709630 未加载
评论 #42705826 未加载
planetjones4 个月前
Hugo worked for me. And as part of the GitHub pipeline that builds the site and deploys it I can grab some ‘dynamic’ content (from a Notion DB) and render it. Subsequently I added Zapier so that when the Notion DB changes it triggers the pipeline to update my website. The only thing I pay for is the web hosting with dreamhost.<p><a href="https:&#x2F;&#x2F;www.planetjones.net&#x2F;blog&#x2F;03-05-2023&#x2F;relaunching-my-personal-website-as-planetjones-dot-net.html" rel="nofollow">https:&#x2F;&#x2F;www.planetjones.net&#x2F;blog&#x2F;03-05-2023&#x2F;relaunching-my-p...</a>
erremerre4 个月前
I have found someone who uses the anchor suffix to solve the problem:<p><a href="https:&#x2F;&#x2F;john-doe.neocities.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;john-doe.neocities.org&#x2F;</a><p>I am not html expert, so I have no idea how complicate or what implications would that have.
评论 #42709175 未加载
评论 #42729702 未加载
评论 #42708489 未加载
lapcat4 个月前
I write my website and blog directly and entirely in HTML using BBEdit. For me, this is just much easier than any other method. I don&#x27;t have to rely on any external system.
评论 #42706204 未加载
评论 #42707820 未加载
wvenable4 个月前
I also decided to develop my personal website in plain HTML. I looked into a bunch of static site generators and found that direction to be too complicated and slow for me.<p>I still wanted the ability to have a common headers and footers and unique sections without repeating myself in every file. So I created a very small PHP application (just 5 files) and each page or blog post is a single PHP file in a directory. These PHP files have a small bit of metadata code at the top but are otherwise just plain HTML files. In each directory is layout file that wraps the content and these nest up the directory structure. So my site has a common header and footer and each section has their own subheader.<p>With the ability to publish by git push to the server, writing a blog post is as easy as creating a new file, git commit, and git push.
评论 #42706936 未加载
numpy-thagoras4 个月前
Hugo is also nice for this, and allows for markdown, embedding Mathjax or LaTeX, etc. Your minimal approach mirrors some of what I&#x27;ve seen in Hugo or Astro, and I&#x27;m all for it. I wish we had truly minimalist SSGs, I think the idea has a lot of purchase.
bob10294 个月前
With regard to templating approaches, my favorite by a very wide margin is to simply use string interpolation in the base language.<p>You create a common template type with methods like:<p><pre><code> LayoutHtml(Session? Session, string title, string innerHtml, ...) =&gt; $@&quot; &lt;html&gt; (common elements) {innerHtml} (common elements) &lt;&#x2F;html&gt;&quot;; </code></pre> Which is then fed html partial snippets generated however you see fit. The use of methods to abstract partials in a hierarchical fashion like this can manage complex layouts well. You can recurse and compose this structure as much as needed (i.e., partials inside partials).
评论 #42708983 未加载
gwynforthewyn4 个月前
I decided to do write from scratch for my own site, and found that a real burden was maintaining lists of pages: there was no framework helping me out, and every time I added a new page I had to remember to go update my list of blog posts in the 2 or 3 pages I could access it from.<p>To solve that and other issues, like adding an rss feed and letting pages specify their own publish date, I did what anyone would do: write a custom web server. It&#x27;s up at <a href="https:&#x2F;&#x2F;github.com&#x2F;playtechnique&#x2F;andrew&#x2F;">https:&#x2F;&#x2F;github.com&#x2F;playtechnique&#x2F;andrew&#x2F;</a>, if anyone wants to give it a whirl.
评论 #42706099 未加载
epolanski4 个月前
When I used to do interviews to frontend developers I often had them write a form with validation...in plain HTML and a sprinkle of js for some of the final validation touches.<p>Was kinda surprised at how many senior leetcode blackbelts didn&#x27;t know HTML had built in validation :)<p>JS was required for some of the more complex validation logic and mounting few dom nodes (and again, surprisingly, many didn&#x27;t know how to create an element and mount it!).<p>On the other hand I got to learn lots of nice tricks to complete some of the features (elements had to appear with conditional logic) with CSS only which was nice.
评论 #42706081 未加载
评论 #42709344 未加载
i_love_retros4 个月前
Why on earth would you use something like sveltekit in the first place for such a simple website?<p>I know people will say for the learning experience but learning what? How to basically &quot;hello, world&quot; in sveltekit?
评论 #42707042 未加载
masswerk4 个月前
What I like to do:<p>- have HTML files for the individual pages&#x2F;posts (I like the freedom that custom HTML provides)<p>- have a script file consisting just of a single array of meta data blocks for the individual posts (headline, description, preview image(s), date, tags, additional assets to load, like additional CSS or JS, if required, restricted visibility, etc. – most of this is optional) and content for the preview<p>- a server-side template script that generates the chrome around an individual page view and a paginated list view from the feed data (this allows for things like pagination, cross-links, filters per tag, we can generate multiple views), and we can also generate a RRS feed from the feed-index. Moreover, as there is also no external input other than fragments from the request URI, which can be laundered easily (e.g., by discarding all non alpha-numeric characters) and checked for resolving to existing file paths in given constraints, this should be also considerably secure. (This is actually a rather short script.)<p>- a server config (`.htaccess` or similar) that parses parts of the request URL to parameters to be used by the template script.<p>(So, adding a post is as simple as adding a new HTML file, copying an entry in the feed file and modifying it accordingly for the new page. And it can be done all in a text editor. The only thing missing may be a full-text search, as there is no DB involved and no representation of the content as normalized plain text. On the other hand, this also keeps the server load low.)
enmyj4 个月前
Lots of people saying they did something similar, so I&#x27;ll add that I also did something similar for learning &#x2F; fun(?) with the added wrinkle that it runs on a raspberry pi at my house. I used golang&#x27;s Fiber to serve the html&#x2F;css. Fiber comes with some built-in templating as well to help with the layout. <a href="https:&#x2F;&#x2F;www.ianmyjer.com&#x2F;content&#x2F;homelab.md" rel="nofollow">https:&#x2F;&#x2F;www.ianmyjer.com&#x2F;content&#x2F;homelab.md</a>
pittma4 个月前
I have a pretty elaborate Hakyll site with custom routers and all kinds of junk (<a href="https:&#x2F;&#x2F;dpitt.me" rel="nofollow">https:&#x2F;&#x2F;dpitt.me</a>), but it&#x27;s an <i>old</i> site that started as Django, then I built it from scratch with Sinatra, and then was Jekyll for years. There really is something special about a well-organized static site. For all the rewrites of this old thing, I can&#x27;t imagine moving away from static site generation.
BeetleB4 个月前
As others have said, you are reinventing the Static Site Generator. I would strongly urge you to look into those.<p>If you know Python well enough, my recommendation is Pelican.[1] You can author your posts in Markdown. You specify the desired HTML&#x2F;CSS. It will then do all the boring work for you. Then just upload the static files to a webserver.<p>[1] <a href="https:&#x2F;&#x2F;getpelican.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;getpelican.com&#x2F;</a>
vladkens4 个月前
Hi. The blog looks good. A few things to make it better:<p>1) You can use watchexec <a href="https:&#x2F;&#x2F;watchexec.github.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;watchexec.github.io&#x2F;</a> to live reload during development. 2) Also, please add a clickable image preview (you can use this lib for example <a href="https:&#x2F;&#x2F;github.com&#x2F;francoischalifour&#x2F;medium-zoom">https:&#x2F;&#x2F;github.com&#x2F;francoischalifour&#x2F;medium-zoom</a>) 3) No commenting feature, luckily I found your post here on HN. But it would be better to have comment blocks, like from <a href="https:&#x2F;&#x2F;giscus.app&#x2F;" rel="nofollow">https:&#x2F;&#x2F;giscus.app&#x2F;</a> or just a link where readers can comment. 4) No RSS feed. I&#x27;d like to subscribe to your updates, but there is no such option right now. RSS is one of the points why site generators are used for static blogs (e.g. Hugo, Zola, Astro, etc.)
bArray4 个月前
&gt; My project tree got a lot simpler and the only Javascript on the site now is to highlight code.<p>You can do away with the JS with something like Pandoc Highlight Filter: <a href="https:&#x2F;&#x2F;gitlab.com&#x2F;danbarry16&#x2F;pandoc-highlight-filter" rel="nofollow">https:&#x2F;&#x2F;gitlab.com&#x2F;danbarry16&#x2F;pandoc-highlight-filter</a><p>Just take the Python file, make it executable and add it to the filter arguments. It&#x27;s very basic, but all done during build time. It was originally started to build out HTML documentation for a system that was very particular about what types of files could be used.<p>It can also do other stuff like build your site with Python blocks that are run: <a href="https:&#x2F;&#x2F;gitlab.com&#x2F;danbarry16&#x2F;pandoc-highlight-filter&#x2F;-&#x2F;blob&#x2F;master&#x2F;test&#x2F;python_executor.md?ref_type=heads" rel="nofollow">https:&#x2F;&#x2F;gitlab.com&#x2F;danbarry16&#x2F;pandoc-highlight-filter&#x2F;-&#x2F;blob...</a>
fjfaase4 个月前
In 1995, I started with a personal website based on HTML. Since then, I have added a little bit of CSS to the home page, but all the other files are in plain HTML. For that reason it looks very old school, but that is okay with me.<p>I have been adding some JavaScript through the years. Some for generating content, some for graphics and animations. I also have written a C program for checking the HTML and all the internal links and the use of tags. The program places all updated files into a folder ready for upload with FTP.<p>To edit the HTML, I use an editor (based on Crystal Edit) that also can navigate HTML files: when pressing F5 on a link, it opens the file in the editor (or in the default browser when it is an external link), and if there a tag in the link, positions the cursor at that line.<p>See for more details: <a href="https:&#x2F;&#x2F;www.iwriteiam.nl&#x2F;SiteMain.html" rel="nofollow">https:&#x2F;&#x2F;www.iwriteiam.nl&#x2F;SiteMain.html</a>
mirkodrummer4 个月前
Nice job! If only HTML had a serious templating system(no the template tag isn’t enough) that could be used without JavaScript, we won’t need any 3rd party system for assembling static sites. For example a mechanism for including partials with the &lt;link&gt; tag and refer them inside a &lt;template&gt; or directly into current html
评论 #42705754 未加载
评论 #42705757 未加载
评论 #42705850 未加载
评论 #42705820 未加载
评论 #42706251 未加载
评论 #42705851 未加载
superkuh4 个月前
Plain HTML and CSS personal site experience can be vastly improved by using server side includes. Your webserver&#x27;s SSI module is likely just the right amount of templating power so you don&#x27;t have to re-write the same HTML in $x spots with a minimal attack surface and maintenance burden. SSI hasn&#x27;t changed in 20 years and the nginx module at least hasn&#x27;t even ever had a cve.<p><pre><code> &lt;!--# include file=&quot;&#x2F;menu.html&quot; --&gt; ... &lt;!--# include file=&quot;&#x2F;footer.html&quot; --&gt; </code></pre> This type of ssi templating is extremely useful for static HTML sites using .html (and other) files on filesystems. I&#x27;ve been using it since hosting my website on my 56k modem in 1999 with Xitami server on Win98. Now I do it hosting from my cable modem in 2025 with nginx on linux.
评论 #42707584 未加载
bschwindHN4 个月前
A few years ago, me and a coworker redid our company&#x27;s website in straight-up HTML, JS, and CSS without a framework. It was quite refreshing but it certainly took longer to complete it all. It had 3D models and some scroll-based masking on videos and such.<p>It has sadly been replaced by a website made in Framer due to time constraints, but the old version is on the Wayback Machine:<p><a href="https:&#x2F;&#x2F;web.archive.org&#x2F;web&#x2F;20211008131609&#x2F;https:&#x2F;&#x2F;tonari.no&#x2F;" rel="nofollow">https:&#x2F;&#x2F;web.archive.org&#x2F;web&#x2F;20211008131609&#x2F;https:&#x2F;&#x2F;tonari.no...</a><p>Unfortunately it kinda turned into a flickery mess, not sure if that&#x27;s an old bug of ours or something failing to load properly from the archive. Oh well!
paulmooreparks4 个月前
I took a similar approach, but I still have a dynamic site generator that reads my HTML content and outputs it to a template. I write all of my pages as stand-alone HTML, and each page can render on its own without any of the template being present. For example:<p><a href="https:&#x2F;&#x2F;parkscomputing.com&#x2F;page&#x2F;conways-game-of-life" rel="nofollow">https:&#x2F;&#x2F;parkscomputing.com&#x2F;page&#x2F;conways-game-of-life</a><p>Is supported underneath by the raw HTML:<p><a href="https:&#x2F;&#x2F;parkscomputing.com&#x2F;content&#x2F;conways-game-of-life.html" rel="nofollow">https:&#x2F;&#x2F;parkscomputing.com&#x2F;content&#x2F;conways-game-of-life.html</a><p>The menu and main page are controlled by a JSON configuration.<p>The site is slow right now because I&#x27;m being stingy on the Azure storage performance.
blmayer4 个月前
Glad to hear you migrated to plain HTML and CSS, I think this creates a healthier environment: it removes bloat and is more efficient.<p>My question is how do you update your feed, sitemap and other stuff?<p>I&#x27;ve been doing it by shell scripts, I&#x27;m not 100% satisfied, I also create gemini pages from HTML, which changes content a lot.<p>Another question: how do you handle comments to your posts?<p>Because my blog is a static site, so there is no processing on the server end, and I don&#x27;t want third parties to handle this. What I&#x27;ve done is adding a handler to my mail server, so it writes the mail sent to articles to the right place. And the HTML uses an &lt;object&gt; to load them. I don&#x27;t like it either, but works. Any suggestions for this things?<p>Thanks!
评论 #42712964 未加载
eviks4 个月前
Before<p>&gt; Why? It took me hours of Googling<p>After<p>&gt; How? I spent some time looking around for guides or a “canonical” way of doing this and found that there isn’t really one.<p>Sounds like no benefit in reducing the costs to achieve a less functional site (see next steps, which would require more googling)
mbo4 个月前
&gt; It took me hours of Googling and trying out different options to come up with this awful piece of code that worked to load the contents of a file and give them to my page [CODE]<p>Do I have Stockholm syndrome or is the code here completely fine?
评论 #42706564 未加载
masfoobar4 个月前
I am falling back to &#x27;plain and simple&#x27; in the world of web applications (or a website)<p>While I am a programmer, I will continue to write code that injects html text with another... like a layout having a title and body html, etc.<p>I certianly limit my client-side codebase. Most of my javascript code is really focused on GUI&#x2F;UI, even if I have to use a specific library. I dont bother with React or the like.<p>I will use htmx if I want to do partial updates. Other pages might be a tad more complicated if fetching data from SQL. However, I also have pages that are SIMPLY HTML+CSS!!<p>As I say - plain and simple.
XCSme4 个月前
I also created something similar in PHP + Apache rewrites.<p>I already had a PHP website, and I wanted to add a simple blog system to it, but most suggestions were complex systems that required installation.<p>I created a .htaccess file and some PHP files to load and display markdown files from the &#x2F;posts folder.<p>It doesn&#x27;t require installation (just copy-paste the files and you have a blog), and no database (posts are simply the markdown files).<p><a href="https:&#x2F;&#x2F;github.com&#x2F;Cristy94&#x2F;markdown-blog">https:&#x2F;&#x2F;github.com&#x2F;Cristy94&#x2F;markdown-blog</a>
8n4vidtmkvmk4 个月前
I think PhpStorm&#x2F;WebStorm has LiveReload built into it. It&#x27;s been years since I&#x27;ve used it since I don&#x27;t usually write plain HTML&#x2F;CSS. But it was just a button click away IIRC. You shouldn&#x27;t need to restart any servers no matter what you do anyway, just press F5. Still not hard.<p>I use PHP+Twig on my simple websites just so I don&#x27;t have to copy-paste the header&#x2F;footer&#x2F;nav. It&#x27;s still incredibly simple, very close to HTML+CSS and no build times. You can FTP upload your files if you want it works.
AstroJetson4 个月前
I cheat with my site.<p>I write the site in markdown in an html file.<p>I then include the link for Markdeep (<a href="https:&#x2F;&#x2F;casual-effects.com&#x2F;markdeep&#x2F;" rel="nofollow">https:&#x2F;&#x2F;casual-effects.com&#x2F;markdeep&#x2F;</a>)<p>Page goes to user, markdeep does all the processing and I&#x27;m good to go. The minifed java script file is about 300kb, the size of an image.
afarah14 个月前
I do mostly the same, .md and pandoc, but also mo for templating:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;tests-always-included&#x2F;mo">https:&#x2F;&#x2F;github.com&#x2F;tests-always-included&#x2F;mo</a>.<p>Took just a few minutes to setup. E.g. <a href="https:&#x2F;&#x2F;afarah.info&#x2F;public&#x2F;blog&#x2F;awsv3&#x2F;index.html" rel="nofollow">https:&#x2F;&#x2F;afarah.info&#x2F;public&#x2F;blog&#x2F;awsv3&#x2F;index.html</a>.<p>Writing in Markdown with {{mustache}} templates for DRY is very satisfying, a simple bash script renders it. Looks good on my phone even.
riidom4 个月前
I did kinda the same thing. Not being a backend dev didn&#x27;t stop me using some PHP, basically as template language. It has a few downsides as well, but overall I am happy with it.
misiek084 个月前
Funny how things like ESI&#x2F;SSI would make such pages very easy to prepare and serve, but we switched to whole V8 engine to render HTML from almost-HTML syntax :)
cmdtab4 个月前
Recently redesigned my site [1] and used nextjs app router (moved from page router).<p>The new paradigm of adding “use server”, “use cache”, and “use client” felt too magical by default.<p>Server actions are easy to forget adding validation and proper access control on. You need an external library to avoid the common pit falls.<p>I’ve been contemplating whether to move to something simple. The complexity creep is real.<p>1] <a href="https:&#x2F;&#x2F;saksham.work" rel="nofollow">https:&#x2F;&#x2F;saksham.work</a>
评论 #42708887 未加载
评论 #42705971 未加载
jasonjmcghee4 个月前
To contribute to the authors open questions at the bottom: for reusability, use web components [1] and for hot reload use a file watcher with a websocket, or just lean on your ide if possible (e.g. jetbrains).<p>[1]: <a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;Web_components" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;Web_compone...</a>
bilekas4 个月前
&gt; More code duplication. SvelteKit has a component system so I could make my navigation bar as a component and reuse it.<p>I&#x27;m no front-end developer by any means, but arent native web components a thing now ?<p><a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;Web_components" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;Web_compone...</a>
joshdavham4 个月前
&gt; spending too much time on Hacker News gave me the misconception that writing a website using plain HTML and CSS would be a relatively well-paved path in 2025. I spent some time looking around for guides or a “canonical” way of doing this and found that there isn’t really one.<p>I had this exact same surprise last year! For whatever reason, there really isn&#x27;t any sort of standard way of creating a vanilla site in 2025!
ykonstant4 个月前
That is exactly the setup I use for my website, but I need javascript for mathjax to compile latex. Some people told me I should do it &quot;server-side&quot;, which I presume means precompile latex and serve the equations as inline images(?) but I haven&#x27;t figured out how to do it. <i>looks around</i>
mediumsmart4 个月前
I write on index.html and when the month is done it turns into month.html linked below the content on the current index.html - anything more complex is a Jekyll project sans plugins and without sass or JavaScript. <i>but I have the emacs</i>
dep_b4 个月前
I&#x27;m using PHP includes and don&#x27;t think I have any JS besides Matomo tracking. I just read that I can use &lt;object&gt; for those includes now, so I can drop another layer of complexity.<p>The only thing I have is a blog post navigator, that shows you all blog posts besides the current one.
noisy_boy4 个月前
What resource is good for gaining a deep and comprehensive knowledge of html for someone already familiar with html, like, having-written-Angular&#x2F;JavaScript&#x2F;jQuery-level familiar? Consider CSS to be out of scope of this question as it is a different beast on its own.
TheSisb24 个月前
Love this. Building a website this way really teaches you why we started having all the complexities in web frameworks today. For certain simple websites like this one, the tradeoffs are worth it. I rebuilt our company website this way too. (Sescollc.com)
Over2Chars4 个月前
<i>pandoc</i> for the win. I use to convert my md resume into doc&#x2F;pdf whatever.
andrewflnr4 个月前
Writing your own static site generator is good for you. I&#x27;m using raw Jinja2 templates and a tiny python script to do my shared header&#x2F;styles etc. Outside of that it&#x27;s all shell scripts and raw HTML&#x2F;CSS.
yakkomajuri4 个月前
You might find Teeny (<a href="https:&#x2F;&#x2F;github.com&#x2F;yakkomajuri&#x2F;teeny">https:&#x2F;&#x2F;github.com&#x2F;yakkomajuri&#x2F;teeny</a>) interesting for this.<p>Something I built to have my own site in static HTML and CSS.
tolerance4 个月前
The best thing about this post to me was the screenshot of the directory organization. It’s the little things like this that making thinking “how to start” a matter of “where could I start”.
t3122274 个月前
hello,<p>as always: imho.<p>ad &quot;duplicated (html) code&quot; in static webpages:<p>back in the 1990ties when a lot of people wrote html by hand, there was a thing called &quot;server side includes&quot; ...<p>* <a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Server_Side_Includes" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Server_Side_Includes</a><p>or just use some &quot;ubiquitous&quot; script-language like php for this simple task of orchestrating&#x2F;including snippets&#x2F;components of code etc. :)<p>just my 0.02€
0x38B4 个月前
The CSS for this site (root.css) is beautifully simple! The colors, spacing, and fonts are very comfy - this is exactly the look I&#x27;d want for my blog.
vaibhavkul4 个月前
&gt; the only Javascript on the site now is to highlight code<p>Couldn&#x27;t the code highlighting be also handled statically during the build process?
chazeon4 个月前
There is a tool called entr, it kill and restart command when any file changes are detected, you could check it out.
fractorial4 个月前
FWIW I just import a canned CSS theme (Terminal CSS), MathJax, and the roll the rest in raw HTML;<p>it’s simple and maintainable.
gcv4 个月前
Hey, Query [1] creator here. The article raised some exciting challenges. With Query, we solve booth downsides mentioned in it. To keep things simple, we use EventSource for live reloading [2] and JSX Server-Side Rendering [3] for those who want component reuse in the server. It&#x27;s just JSX with some helpful extras. I&#x27;m happy to elaborate on the technical decisions if anyone&#x27;s curious.<p>A couple of days ago, I wrote an article about it: <a href="https:&#x2F;&#x2F;dev.to&#x2F;gc-victor&#x2F;building-static-html-pages-with-jsx-server-side-rendering-5cbi" rel="nofollow">https:&#x2F;&#x2F;dev.to&#x2F;gc-victor&#x2F;building-static-html-pages-with-jsx...</a><p>[1] <a href="https:&#x2F;&#x2F;qery.io" rel="nofollow">https:&#x2F;&#x2F;qery.io</a><p>[2] <a href="https:&#x2F;&#x2F;github.com&#x2F;gc-victor&#x2F;query&#x2F;tree&#x2F;main&#x2F;examples&#x2F;minimal&#x2F;src&#x2F;pages&#x2F;hot-reload">https:&#x2F;&#x2F;github.com&#x2F;gc-victor&#x2F;query&#x2F;tree&#x2F;main&#x2F;examples&#x2F;minima...</a><p>[3] <a href="https:&#x2F;&#x2F;qery.io&#x2F;docs&#x2F;modules&#x2F;function.html#jsx-server-side" rel="nofollow">https:&#x2F;&#x2F;qery.io&#x2F;docs&#x2F;modules&#x2F;function.html#jsx-server-side</a>
begueradj4 个月前
How is code syntax highlighting achieved in this context ?
评论 #42708889 未加载
beka-tom4 个月前
Pandoc really looks like a nice tool
pfych4 个月前
This is exactly how I generate my site[^1]. Except I use a simple Node script to handle hosting a tiny HTTP server.<p>Node calls pandoc, which converts my markdown into HTML, ESBuild to convert the few JS snippets I run on my site (which I write in TS), and SASS to convert my scss stylesheet into a bundled CSS sheet.<p>It&#x27;s super lightweight and I like that I can bend it to do whatever weird shit I want my site to have without relying on a 3rd party static site generator.<p>[^1]: <a href="https:&#x2F;&#x2F;pfy.ch" rel="nofollow">https:&#x2F;&#x2F;pfy.ch</a>
wonger_4 个月前
Here&#x27;s some of my tips for a handwritten HTML site, since the author wished more tips existed:<p>- consider using an HTML boilerplate template like this one if you don&#x27;t know where to start: <a href="https:&#x2F;&#x2F;www.matuzo.at&#x2F;blog&#x2F;html-boilerplate&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.matuzo.at&#x2F;blog&#x2F;html-boilerplate&#x2F;</a><p>- consider using a CSS template, or a CSS reset, if you don&#x27;t know where to start with styling. Pico CSS is a good drop-in: <a href="https:&#x2F;&#x2F;picocss.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;picocss.com&#x2F;</a>. Frontend devs always blog about their CSS resets, like this one: <a href="https:&#x2F;&#x2F;piccalil.li&#x2F;blog&#x2F;a-more-modern-css-reset&#x2F;" rel="nofollow">https:&#x2F;&#x2F;piccalil.li&#x2F;blog&#x2F;a-more-modern-css-reset&#x2F;</a>. But if you&#x27;re someone inclined to write their own HTML, then you&#x27;ll probably also want to write your own CSS. This takes time to learn. Especially learning how to design the page without looking crappy<p>- I copy my last page as a template whenever writing a new page<p>- I don&#x27;t worry about code duplication. If I need to refactor duplicated content, I use search and replace across files in vim (like <a href="https:&#x2F;&#x2F;nithinbekal.com&#x2F;posts&#x2F;vim-search-replace&#x2F;" rel="nofollow">https:&#x2F;&#x2F;nithinbekal.com&#x2F;posts&#x2F;vim-search-replace&#x2F;</a>). Hopefully your editor&#x2F;IDE has something similar, and hopefully you&#x27;re comfortable with regexes<p>- markdown + pandoc + scripting is a common solution. Technically it&#x27;s not handwriting HTML at this point -- it&#x27;s hacking together your own static site generator instead of using an existing framework -- but no biggie<p>- frontend people have made a lot of live reload tools over time. Here&#x27;s a couple: <a href="https:&#x2F;&#x2F;nitoyon.github.io&#x2F;livereloadx&#x2F;" rel="nofollow">https:&#x2F;&#x2F;nitoyon.github.io&#x2F;livereloadx&#x2F;</a> and <a href="https:&#x2F;&#x2F;github.com&#x2F;tapio&#x2F;live-server">https:&#x2F;&#x2F;github.com&#x2F;tapio&#x2F;live-server</a>. Personally, I&#x27;ve cobbled together something with entr&#x2F;caddy&#x2F;websockets&#x2F;userscripts. I&#x27;ve had problems with `python -m http.server` freezing up occasionally, but YMMV<p>- About RSS: you can generate your own feed if you already started your own generator script. Personally, I let this tool generate a feed for me in a GitHub Action: <a href="https:&#x2F;&#x2F;feed-me-up-scotty.vincenttunru.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;feed-me-up-scotty.vincenttunru.com&#x2F;</a>, but the feed quality is meh<p>- Expect to do a lot of fiddling. You&#x27;ll reinvent things. You&#x27;ll lack common features for a while. Embrace this as minimalism. You&#x27;ll begin to appreciate the tasks that frameworks automate (image optimization, compression, meta tags, validation, etc)<p>- You&#x27;ll face growing pains after you cross certain thresholds of page counts. Personally, I&#x27;d rather be grug-brained and edit more HTML than figure out some new framework. This is fine for a personal website with a straightforward structure
评论 #42713112 未加载
bpiroman4 个月前
we need more of this. Thanks for sharing!!
revskill4 个月前
text is not json.