28 ms·

Tiny websites are great

348 points by stokesyio 6y ago

randtrain34 6y ago
Yeah, following the same principles with https://dumbprojectideas.com/ https://dumbprojectideas.com/
- mrweasel 6y ago
  Hmm, "A marketplace for golfers" I'm not sure that is an actual bad idea.
pashabitz 6y ago
Everything on this website is mine! ... Uses Google Firebase to host.
sdan 6y ago
This is exactly why I was so excited that so many people found https://news.ycombinator.com/item?id=23220081 https://news.ycombinator.com/item?id=23220081 interesting. I do HTML from scratch and Flask w/HTML templates at most. Adding a couple of CSS files is all I'm looking towards, not a bunch of weird React code (which imo looks ugly).
thomas 6y ago
They are great but they are very bad for seo, so they are vastly underutilized.
- lvturner 6y ago
  Why are they bad for SEO? The author seemed to be talking more about CSS and JS rather than content - does not using bootstrap or ReactJS mark you down on search results?
  - jachee 6y ago
    IMHO, SEO is just shorthand for SnakEOil. If gaming search engines is your Brad-and-butter, is your idea really that novel?
    - ta17711771 6y ago
      It's not about gaming them anymore. It's about structuring pages and content in such a way that Google et al believe works best for the reader. Due to Google-side analytics, it's also about bounce-rates. This leads to both more in lengthy pages with depth, as well as lengthy pages of bullshit.
- jarofgreen 6y ago
  I can't think of any reason why they would be. SEO things to do on your own site are all about content, markup - nothing about a tiny site is a problem here. In fact, speed of website is (was?) a important SEO factor - so by definition tiny websites start with a massive plus.
- nicbou 6y ago
  Why would they be? They are extremely fast, and over 90% of the page is the main content. There is very little noise, so Google can parse them easily.
jrimbault 6y ago
https://jrimbault.io/citation_needed/ https://jrimbault.io/citation_needed/ I made that _tiny_ website for evenings with friends. It works great. You enter a few names, hit the save button, you get a list with scores and a +1 button for each players. When you refresh the page the scores are reset. The most important feature is the _ding_. The ding makes it fun. It's ridiculously small, but it brings lots of fun.
- bArray 6y ago
  I really wish I thought of this, nice job :)
- turtlebits 6y ago
  You have a bug where adding a player doesn't work the first time (from https://jrimbault.io/citation_needed/ https://jrimbault.io/citation_needed/) as it redirects to https://jrimbault.io/citation_needed/?# https://jrimbault.io/citation_needed/?# and clears the player list. Then it works.
  - jrimbault 6y ago
    yep, didn't care about it :) It's tiny, it's fun, it's enough. Keyword : enough. Yes I could add a preventDefault, but I don't care. Really, I only entered the names of my friends once, it has been in my localStorage since, and it's only really meant to be used by me. Fixed it.
    - gjs278 6y ago
      it’s tiny is not an answer to such a trivial bug
- verve_rat 6y ago
  I might use this. Nice. However, needs a mystery biscuits button.
  - jrimbault 6y ago
blueridge 6y ago
Yeah! I am with you on this. I've used nothing but HTML/CSS for all of my side projects for years. I manually create, update, and publish each page. Hell, I still drag and drop via FTP. It is indeed very fun. Here's a screenshot of my latest project, nothing fancy, just starting to tinker with Tufte CSS and typography (Lyon Text and Concourse): https://cln.sh/BzBD https://cln.sh/BzBD
- ezequiel-garzon 6y ago
  Looks great! Why not a link to the actual website?
  - blueridge 6y ago
    Thanks! There's nothing to show yet. No domain, no essays, no pages. Just an early work-in-progress.
trog 6y ago
Tiny websites are great! It's interesting to note that the website content itself for this article is 5,045 bytes (HTML + CSS), but the analytics code (firebase-analytics.js) is 26,458 bytes, and firebase-app.js (whatever this is?) is 19,865 bytes. Not a criticism; analytics is important & maybe the app JS is too. Just think it's worth bearing in mind that it's really easy to blow out your website's total delivery impact to users by several times with third party includes.
- anderspitman 6y ago
  GoatCounter's[0] analytics script is 2.21KB. [0]: https://www.goatcounter.com/ https://www.goatcounter.com/
- recursive 6y ago
  > analytics is important A lot of times they're not. If you don't have a product, and you're not trying to sell anything, consider the possibility that you just don't need it.
  - hagy 6y ago
    Even for small personal projects, analytics can give you a lot of insights into what your viewers like. Things like session duration and bounce rate, broken down by page, can tell what content people enjoy and what contents needs some work. Also useful to know what fraction of your users are recurring versus new users to tell whether people actually return to your site or if they just check it out once. Lastly, the refer stats can help you figure out what other sites and communities are interested in your project so that you can further engage with them.
    - recursive 6y ago
      Some people care about any of that stuff, but it's perfectly reasonable to make a site/page/app that just does something without trying to grow a community or engage or anything.
    - ta17711771 6y ago
bArray 6y ago
I was nodding reading this and then: > No libraries or frameworks (the exception being analytics) There has got to be a better way of collecting analytics than to inject a bunch of crappy JS from some company (probably Google).
- tonymet 6y ago
  with static sites server-side analytics are doable. You can still cookie the browser, record it to access log and you can get pageviews and uniques easily
  - anderspitman 6y ago
    Problem is if you're using a CDN it might not give you access to complete logs. Still there's at least one better free option than GOOG analytics IMO[0] [0]: https://anderspitman.net/20/#get-off-google-analytics https://anderspitman.net/20/#get-off-google-analytics
    - TheDong 6y ago
      So? I have javascript disabled so a frontend analytics option also won't give you complete analytics. It's a tradeoff, you get to decide if you run code on your visitor's computers without consent and get analytics that are wrong in one way, or if you run code on your server with your own permission, and get analytics that are wrong in another way and simpler.
      - anderspitman 6y ago
        Do you feel that the amount of error for those with JS disabled is similar to those going through a CDN?
- three_seagrass 6y ago
  Is there a way to do time-on-page with backend-only analytics?
beamatronic 6y ago
"Did Not Connect: Potential Security Issue" How do you visit this site?
- JonRB 6y ago
  I got that, but it was from the office firewall considering it to be a malicious site
  - MattGaiser 6y ago
    My corporate network uses Cisco and it seems to block any newly set up website.
- tialaramex 6y ago
  It worked fine for me, and judging from comments on this page that respond to the article not just the title, for many others. If you see this message in Firefox for many sites (try some random sites you rarely visit) it's probably a local problem such as "Anti-Virus" software or a "security" appliance helpfully making stuff unsafe. Get rid of them if possible. It is possible that, as the message says, there's actually "Possible Security Issue" just for you, or some subset of visitors, and we can't really help you diagnose that. Maybe your ISP, or your government, or that nerd neighbour kid who said she'd fix your WiFi are trying to snoop you. But probably not. It's also possible the server hosting this went a bit haywire maybe under the load. It's clearly on some cheap bulk host and those can be a bit flaky.
- ta17711771 6y ago
  Synchronize your system clock and attempt again.
mraza007 6y ago
I really like the concept lets say you want to include a code snippet does it support the syntax highlighting and do you write a blogpost in plain html or markdown
- blueridge 6y ago
  You can always write in Markdown, say with iA Writer, then export to HTML. I typically write offline, then type and revise on the computer, then copy paragraphs over to Sublime. Code snippets and syntax highlighting done with CSS.
  - mraza007 6y ago
    I see
every 6y ago
Mine[1] is rather tiny and simple. It is actually generated by the tree command in about a second. It's a port from the gopher protocol and is hosted by the venerable sdf.org[2]. I decided to pay an exorbitant $60 a year for an enhanced membership simply to have an https address and some other assorted goodies[3]... [1] https://every.sdf.org/ https://every.sdf.org/ [2] https://sdf.org/ https://sdf.org/ [3] https://sdf.org/?tutorials/metaarray https://sdf.org/?tutorials/metaarray
- hstaab 6y ago
  Thanks for sharing SDF, I hadn’t heard of it. Seems really cool
- Evidlo 6y ago
  I was considering joining SDF, but I'm confused about the membership levels. What's the minimum level needed for static html hosting with a domain I already own?
  - every 6y ago
    This may be what you are looking for. An ARPA membership with a small annual fee... https://sdf.org/?faq?VHOST?01 https://sdf.org/?faq?VHOST?01
    - deleted 6y ago
      [deleted]
  - samoa42 6y ago
    please correct if wrong, but the free-tier + redirect (cname or http-redirect) from the domain registrar would work just fine
turtlebits 6y ago
I think a better term should be lightweight, usable and performant. The framework shaming mentality is getting quite old. Also, the portfolio website of the author is the opposite of tiny, with a 3.6mb load.
StavrosK 6y ago
I love this initiative in principle, but the instructions left a rather sour taste in my mouth. Create a Firebase app, download and install Node and run some arcane cli commands? For what? To upload a 10-byte HTML file somewhere? Please, do yourself and us a favour and sign up for a free account on https://neocities.org https://neocities.org, and make a quirky website by hand for all of us to enjoy. I half want to write a post like this but with dead-simple instructions, like "Open Notepad, write <html><body>Hello!</body></html>" inside and upload it to Neocities. Congratulations, you now have a website!" A good addition would be a nice CSS stylesheet (https://newcss.net/ https://newcss.net/ looks good, linked by sdan in his comment here) to get the site looking nice and mobile-friendly. That's pretty much all you need to make a simple website.
- reificator 6y ago
  Not affiliated but I think Netlify offers a similar level of initial effort but with more room for later growth.
  - StavrosK 6y ago
    Yeah, they let you drag and drop a zip file to create a site, but is geared more towards companies/professionals. Neocities is more geared towards a community of independent creators, though, so I'd rather support/promote them for indie stuff.
    - unityByFreedom 6y ago
      That's a cool initiative. The HN in me wants to critique it a bit. Why no markdown or WYSIWYG editor? Is it because that would turn it into wordpress? I feel like there's a place for a service that can, * Host static content like netlify/neocities on a CDN * Allow you to register a domain * Choose a template and enter content with basic markup This should be able to be done in < 5 minutes for a non-tech user. You'd think registrars would be incentivized to build such a service. edit: ~~markup~~ markdown/WYSIWYG
      - 6y ago
ddevault 6y ago
>No libraries or frameworks (the exception being analytics) No, analytics are not an exception. Don't put fucking spyware on your pages. I can't believe it's 2020 and people still need to be told this. It's not okay.
- anderspitman 6y ago
  Nowadays you can have your cake and eat it too. There are privacy-respecting free alternatives to GA.
  - ta17711771 6y ago
    Name your favorite?
    - anderspitman 6y ago
      GoatCounter. I did a writeup comparing a few options here: https://anderspitman.net/20/#get-off-google-analytics https://anderspitman.net/20/#get-off-google-analytics
julianeon 6y ago
Since we're talking about tiny websites, and this seems pretty relevant: If it's only static HTML and CSS, it's just a bucket o' files. You can store things like that on S3 for... I don't even know how little. A tiny amount. You will not find a cheaper hosting option than this. I made this site on S3, using Svelte, which is intentionally the humblest, smallest step up from plain JavaScript HTML & CSS, at the link below. http://pitch-deck-svelte.s3-website-us-east-1.amazonaws.com/ http://pitch-deck-svelte.s3-website-us-east-1.amazonaws.com/ Now, the one drawback here is that this doesn't have HTTPS, and you'd need CloudFront for that. This link covers how to do that (note: you should buy your domain on AWS, using Route 53, when following these instructions to make your life easier). https://medium.com/@sbuckpesch/setup-aws-s3-static-website-hosting-using-ssl-acm-34d41d32e394 https://medium.com/@sbuckpesch/setup-aws-s3-static-website-h...
- hagy 6y ago
  I agree that S3, Route 53, Certificate Manager, CloudFront are great for serving small static websites, but as others have mentioned there are plenty of free alternatives. Nonetheless less, I think this approach is the right solution if you're already in the AWS ecosystem since it integrates well with other serveries. E.g, adding LambdaEdge if you need some dynamic components in the future.
- EduardoBautista 6y ago
  > You will not find a cheaper hosting option than this. Services such as Netlify, Surge.sh, and Firebase Hosting can do this at absolutely no cost and you get HTTPS.
  - julianeon 6y ago
    Now that I know this, I may try setting up a free static site with Firebase hosting, with a custom domain (my sticking point, before).
- detaro 6y ago
  > You will not find a cheaper hosting option than this. If you just want to host static files with HTTPS and reasonable traffic, there's several free options. Netlify, Github Pages, Gitlab Pages, Neocities, ...
alpb 6y ago
I hope this keeps the author more encouraged to write, because as usual, this is the first and the only post on their blog.
cetra3 6y ago
I've been yak shaving my website to try and get it to load as fast as possible: https://cetra3.github.io/ https://cetra3.github.io/ I did cheat a little bit and used SpectreCSS but have really tried to squeeze down the page size as much as possible.
- nicbou 6y ago
  29 milliseconds. That is fast.
MattGaiser 6y ago
Make a tiny website, just with Node and Firebase, lol.
- dang 6y ago
  Can you please make your substantive points without being a jerk? We're trying for a bit better than that here, and it's all too easy to come across that way, even if you didn't mean to. https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newswelcome.html https://news.ycombinator.com/newswelcome.html
mikeg8 6y ago
> 2. As few CSS tweaks as possible > 3. It must be fun to build I personally enjoy messing with CSS, it's incredibly fun to try new things and give an otherwise boring page some life and expression. Obviously there is a fine line between tasteful design and obnoxious/unnecessary clutter but a simple website with some character via design is much more memorable that black text on a white background.
- saagarjha 6y ago
  CSS 3 is absurdly powerful and, if you use semantic HTML, progressively degrades really well. Putting just a bit of your touch on the content is a nice feature to take advantage of.
salmonchive 6y ago
Taper is a literary/artistic venue for very small websites (less than two Kilobytes and no links to external resources): https://taper.badquar.to/4/about.html#submit https://taper.badquar.to/4/about.html#submit
saityi 6y ago
I tried to apply the philosophy of keeping things as simple as possible while writing https://saityi.github.io/sml-tour https://saityi.github.io/sml-tour Initially, I wanted no JS and for it to look good in a text-based browser like links, too, but I've strayed from that a bit. Syntax highlighting of the code examples was easiest with a javascript include, and the TOC is a mess hidden by CSS, so it looks particularly egregious in text-based browsers. The website is still functional without JS and text-only, though, and without the favicon and syntax highlighting it comes in at ~4kb to load a page, which I'm happy with; with them it's closer to 40kb, which isn't the worst.
- saagarjha 6y ago
  Why not do the syntax highlighting beforehand instead of on the fly? For example, I use Rouge to highlight all my code as the site is generated.
  - saityi 6y ago
    No reason at all; I think I will go look into doing that now. I think it should be a quick fix :) Thank you for the idea!
  - saityi 6y ago
    Now complete -- thanks again for the suggestion! I never liked having to include that bit of JS.
    - saagarjha 6y ago
      It looks great!
dwg 6y ago
Welcome to the 90's, have a rad time.
mfish 6y ago
I think the same idea can be applied to the backend as well, instead of creating a firebase account, and allowing someone else’s code to magically serve your tiny website. Granted, its not as simple as <h1> Tiny Website </h1>, but it is just as satisfying to build something on the backend that is “your own”, as least in my humble opinion.
intpbro 6y ago
Why take so many steps to do something so simple? That defeats the whole purpose
anuragpeshne 6y ago
Why not go a step ahead and host it on a raspberry pi from your home. Then one could copy the text file directly to the public folder or create the file in the rpi itself.
deleted 6y ago
[deleted]
krm01 6y ago
Really love building tiny projects like these. Had built a simple online code editor a long time ago for exactly these types of projects. http://codecast.me http://codecast.me (not optimized for mobile yet)
crazy_monkey 6y ago
The font is ghastly...
codazoda 6y ago
Most of the "small" designs and frameworks I've seen are quite large, in my mind. I just finished building a minimalist html/css template for some of my own projects. I'm starting to feel like this is some lost art form. https://neat.joeldare.com https://neat.joeldare.com
- cxr 6y ago
  Your `pre` elements are set to `overflow: scroll;`. You pretty much never really want that. (And it looks terrible on platforms that still have real scrollbars instead of the iOS-style overlay indicators that fade away. It should be `auto`. See https://www.w3.org/TR/CSS21/visufx.html#propdef-overflow https://www.w3.org/TR/CSS21/visufx.html#propdef-overflow
  - codazoda 6y ago
    Thanks, I'll try auto and see how it goes.
  - codazoda 6y ago
    I've updated this. Still looks the same on all my devices but hopefully it's an improvement for others. Thanks, again, for the tip.
- hotgeart 6y ago
  Why you don't center your body? We need to turn our head to read.
  - codazoda 6y ago
    I couldn't decide on this one. When I centered it, it didn't feel quite right. I searched the web for examples, and found a lot of left aligned examples, so I went with that. I also had this in my design decisions, but because I hadn't really decided yet, I took it out. I'll try centered again.
bhargav 6y ago
Tiny websites are indeed great. They load fast, and minimize the steps involved in publishing content. I think my sentiment however, practically (i.e: in a business, startup, big company) conflicts with two things/requirements: 1. People who usually write content are not developers 2. People tend to trust sites that are minimal like the one OP posted. Content writers traditionally come from background where they are trained and use tools like wordpress. We are now asking them to write HTML. I believe Jekyll here is a good compromise. We can generate static sites using Jekyll while still allowing simpler tools pre-publishing. Regarding my point #2. Not a week ago, there was a thread to discuss how cool Stripe's animations are. There were multiple conversations in said thread that attest to this fact. Many people look for a sense of branding on product or service based businesses and relate those to their legitimacy. I think my sentiment for small/simpler sites is a pretty common one on HN, but I think it all boils down to who your users are and what they prefer.
aabbcc1241 6y ago
In fact you don't really need to depends on third party to do analytics as well
armyofbots 6y ago
If only there were a search engine for tiny websites.
- 1bc29b36f623ba8 6y ago
  That sounds like an excellent idea for a tiny project! :)
- kwhitefoot 6y ago
  If every tiny website linked to at least two other tiny web sites using something that a crawler could recognize it would be easy. Alternatively, is there a heuristic that reliably classifies websites in to tiny/not-tiny? How could we get this started?
  - ehonda 6y ago
    you might want to try wiby.me
    - kwhitefoot 6y ago
      Thank you. Looks interesting.
_sbrk 6y ago
Ugh, how I loathe the term "full stack". Many who claim this have attended a 12 week crash course where they're armed with the programming equivalent of heavy weaponry and then turned out onto the world to "engineer" websites that are bloated, slow me-too creations with background video, fly-in scroller elements, and everything else that bogs down even the most powerful PC. "Many were increasingly of the opinion that they'd all made a big mistake coming down from the trees in the first place, and some said that even the trees had been a bad move, and that no-one should ever have left the oceans." - Adams
Yhippa 6y ago
I've been messing around with a personal site hosted on S3. Does anybody here like any small UI frameworks that they would recommend?
simook 6y ago
Recently I decided to build the next version of my website by going back to the basics. http://kyle.simukka.com http://kyle.simukka.com Still unsure of what the content and goals are, but it has been a lot of fun to work on a very simple website.
6510 6y ago
I eventually added an editor that displays the html source in a textarea. Above it is a field with the file name, below is the submit button and a password field. (There also is a cookie req that I make manually and it does some IP checks when trying to save.) After submitting it checks if there are links pointing at the (new) page. If those are missing the "success!" page gets a link pointing back at the editor with the index appended to it as the query string, the url that must be added and the page title. (the substring between <title> and </title>) When clicked it loads the index into the editor and inserts a link into the html (so that I can move it around or type text around it) That same functionality is reused by a bookmarklet to insert www links into pages. (it also inserts highlighted text from pages) Except the save page everything is still static html.
ulisesrmzroche 6y ago
Are all these projects targeting this particular buche within HN? Soon as they see this design, people are gonna bounce.
longtermd 6y ago
I love the original thinking in this post. If there was no React/Angular/VueJS, how would YOU design ANY system to help you code faster and more maintainable? That what I'd love to see: more original ideas to solve complex tasks, and not stopping at the first idea coming to mind. BTW: I believe tailwindcss is fantastic at achieving and helping with the OP's frustration.
MrGilbert 6y ago
My personal website, https://g5t.de https://g5t.de uses a custom directory-listing kind of framework I wrote - so it doesn't tick all of the requirements. It's not much, but it does its job kinda well (still lacking notable, deep and interesting content, sorry).
- mrweasel 6y ago
  That is very nice, a little broken in some places: the [001]-how-to-not-build-a-router link doesn't work, you have to click the .md file, and your github link is broken But it looks very nice and I love the idea.
  - MrGilbert 6y ago
    Thanks for your kind words! I fixed the broken links. Maybe I should automate the creation of the readme.md files. :)
fyfy18 6y ago
The funny thing about this website is the page finishes loading before my phone OS finishes the animation to switch to the browser.
nicbou 6y ago
Managing a website and writing for it are two different activities to me. I prefer to do the latter in a WYSISYG editor. I don't want to fire up a terminal to deploy content changes. With proper caching, the output of a CMS can be indistinguishable from a static site, but it can also include RSS, pagination, categories, tagging, responsive images, tables of contents, etc. Take https://allaboutberlin.com https://allaboutberlin.com. In my browser, most of its pages load faster than the tiny website above. It has a big header image, custom fonts and other features. You can achieve great things with HTTP2 server push, static caching and gzip. You should definitely consider making simple, fast websites because they're great for visitors, but how you produce the HTML doesn't matter.
- vidugavia 6y ago
  RSS, pagination, categories, tagging, responsive images, ToCs - all these things work just perfectly in static sites.
  - nicbou 6y ago
    Sure, but they need to be generated by some sort of framework, somewhere. If your definition of a static site includes framework-generated index pages and page structures, aren't almost all websites static already? Making them tiny is just a matter of writing better templates, not picking more obscure frameworks.
    - vidugavia 6y ago
      In my books the difference lies in how the HTML is generated. In case of static sites you generate it only when you rebuild the site after changes. In dynamic sites you build it dynamically on each request. Sure, you can cache the hell out of it and have a feeling that it's the same, but the truth stays that perhaps you're doing 50 SQL queries for a simple "welcome on our site" landing (something I actually witnessed some years ago). And with caching you're achieving the result with adding another infrastructure layer on something that could have been dead-simple from day one.
dhdjdjcjcjcnc 6y ago
>It's your little corner of the internet to do as you please with. > >Follow me on social media: > >Twitter Instagram Really makes you think huh?
- aethertron 6y ago
  Everyone knows solo blogging is lonely. That's why RSS is valuable, and the indieweb folks have tried to make new social protocols.
camillomiller 6y ago
>“ Things have really changed since I began learning, and rightly so. Instead of coding in plain HTML, CSS and JS, I'm now using endless frameworks, modules and libraries to build increasingly more complex web and mobile applications. It's great, if I didn't use these tools my code would be an unmaintainable mess.” How sad that this has become the widely accepted narrative. There’s a lot of value right now in NOT building things that way. Last week I had to deal with fixing another dev’s mess on a stuck project. Big company website, but nothing fancy at all. Purely a marketing window. The amount of complexity he put into it by using Vue.js was insane for the scope of the project. INSANE. To do something as easy as changing the pages <title> tag we had to write an unjustified amount of lines of code. Framework-itis really is a bad disease, it not only affects your work, but it definitely clouds the simplest form of judgement, it appears. Then we have exactly this: someone who got a hammer and spent years treating everything like a nail comes to a reckoning, usually framed as a longing for the good old days when things used to be simple. Well, you know, things can still be simple, if you don’t offload to unjustifiably complex frameworks the duty of understanding what’s going on in your project. To be clear, I’m not at all against frameworks. I love and use some of them, but they’re like a closet. If you are a tidy and organized person, your closet will be full of neatly folded clothes; if you’re a messy person, it will still be a repository for heaps of displaced garments, ready to fall out as soon as you open the door.
- robertlagrant 6y ago
  I don't understand why changing a title tag would require any code. Is it the framework or the code? (I don't know Vue, but this smells a bit.)
  - chownie 6y ago
    We had a similar scenario at my workplace, but with React rather than Vue. We wanted an internal component to be able to change the page title, which ended up with a project to transition to using react-helmet. It ended up taking a few weeks before this project completed.
    - 6y ago
toto444 6y ago
I have been working on a tiny website aiming to teach Japanese using HTML/CSS and Emojis. It is hosted on Github pages. I take this opportunity to share it since I believe it is the kind of website that people miss. https://drdru.github.io/ https://drdru.github.io/ The main problem I have is that despite some love for this type of website on Hackernews they are not really popular. Also, they are not accepted in Show HN.
tjchear 6y ago
Along the same vein, I've been working on a Vi-like editor for creating webpages [0], and if anyone's looking to create a tiny website, it's worth checking out. If you enjoy using Vi, you'll likely have a blast using this one. [0] https://vivpage.com https://vivpage.com
pdevr 6y ago
I see that this is your first submission. I love that it is refreshingly original. Now, there are two main steps to making a website public. * Developing the website (idea, design, development) * Hosting it (domain, email, host, server) What you posted is great for emphasizing that the first step can be done in a very simple way, without any complicated frameworks. The way you did the second part - hosting your site (Using Node.js/npm, Firebase, and npm package) - does not fit well with the simplicity you demonstrated while doing part one. However, if considered as a how-to for building a tiny website using Firebase, it is awesome.
thedonkeycometh 6y ago
A simple site surely would have been one that performs only the task required without anything else. Which begs the question why have Javascript or even CSS at all for what you're doing? And if you're using firebase, why not just host on github pages with raw HTML and an embedded body css? Even writing HTML and FTPing to a shared host (jus like the olden times) is simpler and closer to the aims of the site. Not utterly sure what the point of all this is apart from explicitly not using a framework that the author doesn't understand the workings of. You could say the same of firebase and node.
p4bl0 6y ago
> No libraries or frameworks (the exception being analytics) Why? Why are analytics necessary? How does it matter for such a website?
- SquareWheel 6y ago
  It's nice to know if people are reading what you're putting out.
  - p4bl0 6y ago
    Is it really so nice that you are okay with handing over their personal data to Google? I really think this is a problem.
    - SquareWheel 6y ago
      I really don't think anything collected qualifies as personal data. I use https://minimalanalytics.com/ https://minimalanalytics.com/, which sends a tiny network request. Remember that it's easy enough to opt-out of Google Analytics, too. I leave it enabled because I consider it to be useful data for webmasters.
  - Narann 6y ago
    I have a (french) blog[1] having analytics for first years. I realize most page views where not necessary the ones I had the most fun at writing. It was sad to realize your next post would not necessary bring interest and you start to bring what you guess peoples would be interested in, and not what you are interested at in the first place. It breaks motivation on the long run. Like if you where no more blogging for yourself. I finally remove analytics and now write what I love without being to rationals. It brings far less pressure. [1] https://www.fevrierdorian.com/blog/ https://www.fevrierdorian.com/blog/
    - SquareWheel 6y ago
      I can appreciate that! I have some videos I've created that I've never once checked the view stats for. In that case, I'm just as happy not knowing. Somehow I feel differently about articles I've posted, but to each his own.
codemusings 6y ago
I think the premise of this blog post is flawed. > During my time using frameworks I've become more and more out of touch with the code I'm writing. For example, when I plonk down a button in the Ionic Framework I get a beautifully engineered and designed button, but it also has 10 CSS classes attached to it that I don't really understand. I sometimes feel like the thing I've created isn't truly "mine". That seems to be the nature of CSS utility frameworks. Composition over inheritance; or in this case monolithic element styles. Is the utility function to fetch elements from the DOM tree also truly "yours"? Where's the line drawn? I could get the text representation of the DOM tree and write my own parser? How about that? > I therefore decided to go back to the basics and code my own tiny website. I already knew how to go about it, you probably do too, it's really easy (if you don't know here's how). However, I'd never actually done it, and I'd not made a website without a framework in over a decade. Ah! And there's the problem! Are you creating a website or an application? I do understand that this feels like a cleansing of sorts. But in my opinion doesn't reinforce the original argument. I think the more experience you gain as a developer the more often you will come to the realization that technology evolves and also becomes more nuanced over time. When confronted with this fact of course the first instinct will be to feel overwhelmed and return to basics. Which if you're creating a mostly static website in this case is perfectly reasonable. But you can't be an expert in everything. Thus frameworks and tools emerge to alleviate some of the pain that stems from designing applications not websites. Which again reinforces another often quoted realization: the right tool for the right job.
Tepix 6y ago
Tiny websites are great, agreed. The best thing about them? They can be deployed in a decentralized fashion and can protect the visitor's privacy. This guide however, suggests using Google Analytics which tracks unsuspecting users' browsing history across almost the entire web. It hosts the website centrally by a Google owned service (which provides even more tracking to Google). It suggests buying a domain name from Google. Is this some kind of Google advertisement? No, but no thanks.
extro 6y ago
Only 5 javascript needs to be downloaded for this tiny website. This guy should be banned from the internet.
SamBorick 6y ago
For me the biggest requirement is > 3. It must be fun to build for me that requires a level of abstraction, I don't want to be monkeying with HTML if I don't have to, I just want to write the damn article. That's why I use Hugo, I feel like it hits a fantastic balance between speed for the user and ease of maintenance for me.
ryandrake 6y ago
Just a nit: Using "max-width: 600px;" leaves enormous white margins on either side of the text, when browsed on larger monitors. I wish CSS writers would stop trying to guess the width of my screen.
pcmaffey 6y ago
Can anyone recommend a good WYSIWYG editor (for non-devs) for making static sites that is not tied to hosting? ie. I just want to output a folder of /html.
- dougskinner 6y ago
  Maybe try publii[1] [1]https://getpublii.com/ https://getpublii.com/
meigwilym 6y ago
Reminds me of the 90s when I first started out. In a way it's a shame that the basics have been forgotten, and the first step taken to develop a website is a cli app to install a load of boilerplate.
th3o6a1d 6y ago
I dig the concept, but for ease, firebase-tools, node? Use netlify! Or s3 bucket w hosting
dijksterhuis 6y ago
50 internet points to whoever guesses who I designed my simple portfolio site to impress (i.e. here's my shameless plug). https://whoami.dijksterhuis.co.uk https://whoami.dijksterhuis.co.uk - Pure html and CSS (except embedded iframes like soundcloud). - hosted on GitHub.io - domain name from AWS Only "server side" thing I had to do was put a special file in the GitHub repo. Super cheap too. I have a free pro GitHub account (student ftw) so the only real cost is the AWS hosted zone for dijksterhuis.co.uk I also have subdomains I set up for machines I SSH into because I'm that lazy.
Sophistifunk 6y ago
No libraries or frameworks to make development easier, but still analytics to help Google spy on readers? Pass.
bg451 6y ago
Really awesome idea! I ended up following suit and whipped together http://kojichamber.com http://kojichamber.com to put out the list of things I used to build a fermentation chamber and the nuances of one.
mertnesvat 6y ago
I liked it it's very well articulated and seems promising I just had a new years resolution with the same goal. Keep going Ben!
luord 6y ago
That's what I did with my website. Still tweak it every now and then, but it's nice because 99% of the code is mine.
vfistri2 6y ago
Would love to have some simple stack automated.
_theory_ 6y ago
How far down the abstraction tree do you go before something is 'pure'? Programming on the whole is at a much higher abstraction level than ever. Maybe what people are really looking for is simplicity, but this changes depending on the complexity of your project. Therefore the question becomes, "What is the best level of abstraction for this project?" That changes every time you do something new.

348 points by stokesyio 6y ago

randtrain34 6y ago

Yeah, following the same principles with https://dumbprojectideas.com/ https://dumbprojectideas.com/

mrweasel 6y ago
Hmm, "A marketplace for golfers" I'm not sure that is an actual bad idea.

pashabitz 6y ago

Everything on this website is mine! ... Uses Google Firebase to host.

sdan 6y ago

This is exactly why I was so excited that so many people found https://news.ycombinator.com/item?id=23220081 https://news.ycombinator.com/item?id=23220081 interesting. I do HTML from scratch and Flask w/HTML templates at most. Adding a couple of CSS files is all I'm looking towards, not a bunch of weird React code (which imo looks ugly).

thomas 6y ago

They are great but they are very bad for seo, so they are vastly underutilized.

lvturner 6y ago
Why are they bad for SEO? The author seemed to be talking more about CSS and JS rather than content - does not using bootstrap or ReactJS mark you down on search results?
- jachee 6y ago
  IMHO, SEO is just shorthand for SnakEOil. If gaming search engines is your Brad-and-butter, is your idea really that novel?
  - ta17711771 6y ago
    It's not about gaming them anymore. It's about structuring pages and content in such a way that Google et al believe works best for the reader. Due to Google-side analytics, it's also about bounce-rates. This leads to both more in lengthy pages with depth, as well as lengthy pages of bullshit.
jarofgreen 6y ago
I can't think of any reason why they would be. SEO things to do on your own site are all about content, markup - nothing about a tiny site is a problem here. In fact, speed of website is (was?) a important SEO factor - so by definition tiny websites start with a massive plus.
nicbou 6y ago
Why would they be? They are extremely fast, and over 90% of the page is the main content. There is very little noise, so Google can parse them easily.

jrimbault 6y ago

https://jrimbault.io/citation_needed/ https://jrimbault.io/citation_needed/ I made that _tiny_ website for evenings with friends. It works great. You enter a few names, hit the save button, you get a list with scores and a +1 button for each players. When you refresh the page the scores are reset. The most important feature is the _ding_. The ding makes it fun. It's ridiculously small, but it brings lots of fun.

bArray 6y ago
I really wish I thought of this, nice job :)
turtlebits 6y ago
You have a bug where adding a player doesn't work the first time (from https://jrimbault.io/citation_needed/ https://jrimbault.io/citation_needed/) as it redirects to https://jrimbault.io/citation_needed/?# https://jrimbault.io/citation_needed/?# and clears the player list. Then it works.
- jrimbault 6y ago
  yep, didn't care about it :) It's tiny, it's fun, it's enough. Keyword : enough. Yes I could add a preventDefault, but I don't care. Really, I only entered the names of my friends once, it has been in my localStorage since, and it's only really meant to be used by me. Fixed it.
  - gjs278 6y ago
    it’s tiny is not an answer to such a trivial bug
verve_rat 6y ago
I might use this. Nice. However, needs a mystery biscuits button.
- jrimbault 6y ago

blueridge 6y ago

Yeah! I am with you on this. I've used nothing but HTML/CSS for all of my side projects for years. I manually create, update, and publish each page. Hell, I still drag and drop via FTP. It is indeed very fun. Here's a screenshot of my latest project, nothing fancy, just starting to tinker with Tufte CSS and typography (Lyon Text and Concourse): https://cln.sh/BzBD https://cln.sh/BzBD

ezequiel-garzon 6y ago
Looks great! Why not a link to the actual website?
- blueridge 6y ago
  Thanks! There's nothing to show yet. No domain, no essays, no pages. Just an early work-in-progress.

trog 6y ago

Tiny websites are great! It's interesting to note that the website content itself for this article is 5,045 bytes (HTML + CSS), but the analytics code (firebase-analytics.js) is 26,458 bytes, and firebase-app.js (whatever this is?) is 19,865 bytes. Not a criticism; analytics is important & maybe the app JS is too. Just think it's worth bearing in mind that it's really easy to blow out your website's total delivery impact to users by several times with third party includes.

anderspitman 6y ago
GoatCounter's[0] analytics script is 2.21KB. [0]: https://www.goatcounter.com/ https://www.goatcounter.com/
recursive 6y ago
> analytics is important A lot of times they're not. If you don't have a product, and you're not trying to sell anything, consider the possibility that you just don't need it.
- hagy 6y ago
  Even for small personal projects, analytics can give you a lot of insights into what your viewers like. Things like session duration and bounce rate, broken down by page, can tell what content people enjoy and what contents needs some work. Also useful to know what fraction of your users are recurring versus new users to tell whether people actually return to your site or if they just check it out once. Lastly, the refer stats can help you figure out what other sites and communities are interested in your project so that you can further engage with them.
  - recursive 6y ago
    Some people care about any of that stuff, but it's perfectly reasonable to make a site/page/app that just does something without trying to grow a community or engage or anything.
  - ta17711771 6y ago

bArray 6y ago

I was nodding reading this and then: > No libraries or frameworks (the exception being analytics) There has got to be a better way of collecting analytics than to inject a bunch of crappy JS from some company (probably Google).

tonymet 6y ago
with static sites server-side analytics are doable. You can still cookie the browser, record it to access log and you can get pageviews and uniques easily
- anderspitman 6y ago
  Problem is if you're using a CDN it might not give you access to complete logs. Still there's at least one better free option than GOOG analytics IMO[0] [0]: https://anderspitman.net/20/#get-off-google-analytics https://anderspitman.net/20/#get-off-google-analytics
  - TheDong 6y ago
    So? I have javascript disabled so a frontend analytics option also won't give you complete analytics. It's a tradeoff, you get to decide if you run code on your visitor's computers without consent and get analytics that are wrong in one way, or if you run code on your server with your own permission, and get analytics that are wrong in another way and simpler.
    - anderspitman 6y ago
      Do you feel that the amount of error for those with JS disabled is similar to those going through a CDN?
three_seagrass 6y ago
Is there a way to do time-on-page with backend-only analytics?

beamatronic 6y ago

"Did Not Connect: Potential Security Issue" How do you visit this site?

JonRB 6y ago
I got that, but it was from the office firewall considering it to be a malicious site
- MattGaiser 6y ago
  My corporate network uses Cisco and it seems to block any newly set up website.
tialaramex 6y ago
It worked fine for me, and judging from comments on this page that respond to the article not just the title, for many others. If you see this message in Firefox for many sites (try some random sites you rarely visit) it's probably a local problem such as "Anti-Virus" software or a "security" appliance helpfully making stuff unsafe. Get rid of them if possible. It is possible that, as the message says, there's actually "Possible Security Issue" just for you, or some subset of visitors, and we can't really help you diagnose that. Maybe your ISP, or your government, or that nerd neighbour kid who said she'd fix your WiFi are trying to snoop you. But probably not. It's also possible the server hosting this went a bit haywire maybe under the load. It's clearly on some cheap bulk host and those can be a bit flaky.
ta17711771 6y ago
Synchronize your system clock and attempt again.

mraza007 6y ago

I really like the concept lets say you want to include a code snippet does it support the syntax highlighting and do you write a blogpost in plain html or markdown

blueridge 6y ago
You can always write in Markdown, say with iA Writer, then export to HTML. I typically write offline, then type and revise on the computer, then copy paragraphs over to Sublime. Code snippets and syntax highlighting done with CSS.
- mraza007 6y ago
  I see

every 6y ago

Mine[1] is rather tiny and simple. It is actually generated by the tree command in about a second. It's a port from the gopher protocol and is hosted by the venerable sdf.org[2]. I decided to pay an exorbitant $60 a year for an enhanced membership simply to have an https address and some other assorted goodies[3]... [1] https://every.sdf.org/ https://every.sdf.org/ [2] https://sdf.org/ https://sdf.org/ [3] https://sdf.org/?tutorials/metaarray https://sdf.org/?tutorials/metaarray

hstaab 6y ago
Thanks for sharing SDF, I hadn’t heard of it. Seems really cool
Evidlo 6y ago
I was considering joining SDF, but I'm confused about the membership levels. What's the minimum level needed for static html hosting with a domain I already own?
- every 6y ago
  This may be what you are looking for. An ARPA membership with a small annual fee... https://sdf.org/?faq?VHOST?01 https://sdf.org/?faq?VHOST?01
  - deleted 6y ago
    [deleted]
- samoa42 6y ago
  please correct if wrong, but the free-tier + redirect (cname or http-redirect) from the domain registrar would work just fine

turtlebits 6y ago

I think a better term should be lightweight, usable and performant. The framework shaming mentality is getting quite old. Also, the portfolio website of the author is the opposite of tiny, with a 3.6mb load.

StavrosK 6y ago

I love this initiative in principle, but the instructions left a rather sour taste in my mouth. Create a Firebase app, download and install Node and run some arcane cli commands? For what? To upload a 10-byte HTML file somewhere? Please, do yourself and us a favour and sign up for a free account on https://neocities.org https://neocities.org, and make a quirky website by hand for all of us to enjoy. I half want to write a post like this but with dead-simple instructions, like "Open Notepad, write <html><body>Hello!</body></html>" inside and upload it to Neocities. Congratulations, you now have a website!" A good addition would be a nice CSS stylesheet (https://newcss.net/ https://newcss.net/ looks good, linked by sdan in his comment here) to get the site looking nice and mobile-friendly. That's pretty much all you need to make a simple website.

reificator 6y ago
Not affiliated but I think Netlify offers a similar level of initial effort but with more room for later growth.
- StavrosK 6y ago
  Yeah, they let you drag and drop a zip file to create a site, but is geared more towards companies/professionals. Neocities is more geared towards a community of independent creators, though, so I'd rather support/promote them for indie stuff.
  - unityByFreedom 6y ago
    That's a cool initiative. The HN in me wants to critique it a bit. Why no markdown or WYSIWYG editor? Is it because that would turn it into wordpress? I feel like there's a place for a service that can, * Host static content like netlify/neocities on a CDN * Allow you to register a domain * Choose a template and enter content with basic markup This should be able to be done in < 5 minutes for a non-tech user. You'd think registrars would be incentivized to build such a service. edit: ~~markup~~ markdown/WYSIWYG
    - 6y ago

ddevault 6y ago

>No libraries or frameworks (the exception being analytics) No, analytics are not an exception. Don't put fucking spyware on your pages. I can't believe it's 2020 and people still need to be told this. It's not okay.

anderspitman 6y ago
Nowadays you can have your cake and eat it too. There are privacy-respecting free alternatives to GA.
- ta17711771 6y ago
  Name your favorite?
  - anderspitman 6y ago
    GoatCounter. I did a writeup comparing a few options here: https://anderspitman.net/20/#get-off-google-analytics https://anderspitman.net/20/#get-off-google-analytics

julianeon 6y ago

Since we're talking about tiny websites, and this seems pretty relevant: If it's only static HTML and CSS, it's just a bucket o' files. You can store things like that on S3 for... I don't even know how little. A tiny amount. You will not find a cheaper hosting option than this. I made this site on S3, using Svelte, which is intentionally the humblest, smallest step up from plain JavaScript HTML & CSS, at the link below. http://pitch-deck-svelte.s3-website-us-east-1.amazonaws.com/ http://pitch-deck-svelte.s3-website-us-east-1.amazonaws.com/ Now, the one drawback here is that this doesn't have HTTPS, and you'd need CloudFront for that. This link covers how to do that (note: you should buy your domain on AWS, using Route 53, when following these instructions to make your life easier). https://medium.com/@sbuckpesch/setup-aws-s3-static-website-hosting-using-ssl-acm-34d41d32e394 https://medium.com/@sbuckpesch/setup-aws-s3-static-website-h...

hagy 6y ago
I agree that S3, Route 53, Certificate Manager, CloudFront are great for serving small static websites, but as others have mentioned there are plenty of free alternatives. Nonetheless less, I think this approach is the right solution if you're already in the AWS ecosystem since it integrates well with other serveries. E.g, adding LambdaEdge if you need some dynamic components in the future.
EduardoBautista 6y ago
> You will not find a cheaper hosting option than this. Services such as Netlify, Surge.sh, and Firebase Hosting can do this at absolutely no cost and you get HTTPS.
- julianeon 6y ago
  Now that I know this, I may try setting up a free static site with Firebase hosting, with a custom domain (my sticking point, before).
detaro 6y ago
> You will not find a cheaper hosting option than this. If you just want to host static files with HTTPS and reasonable traffic, there's several free options. Netlify, Github Pages, Gitlab Pages, Neocities, ...

alpb 6y ago

I hope this keeps the author more encouraged to write, because as usual, this is the first and the only post on their blog.

cetra3 6y ago

I've been yak shaving my website to try and get it to load as fast as possible: https://cetra3.github.io/ https://cetra3.github.io/ I did cheat a little bit and used SpectreCSS but have really tried to squeeze down the page size as much as possible.

nicbou 6y ago
29 milliseconds. That is fast.

MattGaiser 6y ago

Make a tiny website, just with Node and Firebase, lol.

dang 6y ago
Can you please make your substantive points without being a jerk? We're trying for a bit better than that here, and it's all too easy to come across that way, even if you didn't mean to. https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newswelcome.html https://news.ycombinator.com/newswelcome.html

mikeg8 6y ago

> 2. As few CSS tweaks as possible > 3. It must be fun to build I personally enjoy messing with CSS, it's incredibly fun to try new things and give an otherwise boring page some life and expression. Obviously there is a fine line between tasteful design and obnoxious/unnecessary clutter but a simple website with some character via design is much more memorable that black text on a white background.

saagarjha 6y ago
CSS 3 is absurdly powerful and, if you use semantic HTML, progressively degrades really well. Putting just a bit of your touch on the content is a nice feature to take advantage of.

salmonchive 6y ago

Taper is a literary/artistic venue for very small websites (less than two Kilobytes and no links to external resources): https://taper.badquar.to/4/about.html#submit https://taper.badquar.to/4/about.html#submit

saityi 6y ago

I tried to apply the philosophy of keeping things as simple as possible while writing https://saityi.github.io/sml-tour https://saityi.github.io/sml-tour Initially, I wanted no JS and for it to look good in a text-based browser like links, too, but I've strayed from that a bit. Syntax highlighting of the code examples was easiest with a javascript include, and the TOC is a mess hidden by CSS, so it looks particularly egregious in text-based browsers. The website is still functional without JS and text-only, though, and without the favicon and syntax highlighting it comes in at ~4kb to load a page, which I'm happy with; with them it's closer to 40kb, which isn't the worst.

saagarjha 6y ago
Why not do the syntax highlighting beforehand instead of on the fly? For example, I use Rouge to highlight all my code as the site is generated.
- saityi 6y ago
  No reason at all; I think I will go look into doing that now. I think it should be a quick fix :) Thank you for the idea!
- saityi 6y ago
  Now complete -- thanks again for the suggestion! I never liked having to include that bit of JS.
  - saagarjha 6y ago
    It looks great!

dwg 6y ago

Welcome to the 90's, have a rad time.

mfish 6y ago

I think the same idea can be applied to the backend as well, instead of creating a firebase account, and allowing someone else’s code to magically serve your tiny website. Granted, its not as simple as <h1> Tiny Website </h1>, but it is just as satisfying to build something on the backend that is “your own”, as least in my humble opinion.

intpbro 6y ago

Why take so many steps to do something so simple? That defeats the whole purpose

anuragpeshne 6y ago

Why not go a step ahead and host it on a raspberry pi from your home. Then one could copy the text file directly to the public folder or create the file in the rpi itself.

deleted 6y ago

[deleted]

krm01 6y ago

Really love building tiny projects like these. Had built a simple online code editor a long time ago for exactly these types of projects. http://codecast.me http://codecast.me (not optimized for mobile yet)

crazy_monkey 6y ago

The font is ghastly...

codazoda 6y ago

Most of the "small" designs and frameworks I've seen are quite large, in my mind. I just finished building a minimalist html/css template for some of my own projects. I'm starting to feel like this is some lost art form. https://neat.joeldare.com https://neat.joeldare.com

cxr 6y ago
Your `pre` elements are set to `overflow: scroll;`. You pretty much never really want that. (And it looks terrible on platforms that still have real scrollbars instead of the iOS-style overlay indicators that fade away. It should be `auto`. See https://www.w3.org/TR/CSS21/visufx.html#propdef-overflow https://www.w3.org/TR/CSS21/visufx.html#propdef-overflow
- codazoda 6y ago
  Thanks, I'll try auto and see how it goes.
- codazoda 6y ago
  I've updated this. Still looks the same on all my devices but hopefully it's an improvement for others. Thanks, again, for the tip.
hotgeart 6y ago
Why you don't center your body? We need to turn our head to read.
- codazoda 6y ago
  I couldn't decide on this one. When I centered it, it didn't feel quite right. I searched the web for examples, and found a lot of left aligned examples, so I went with that. I also had this in my design decisions, but because I hadn't really decided yet, I took it out. I'll try centered again.

bhargav 6y ago

Tiny websites are indeed great. They load fast, and minimize the steps involved in publishing content. I think my sentiment however, practically (i.e: in a business, startup, big company) conflicts with two things/requirements: 1. People who usually write content are not developers 2. People tend to trust sites that are minimal like the one OP posted. Content writers traditionally come from background where they are trained and use tools like wordpress. We are now asking them to write HTML. I believe Jekyll here is a good compromise. We can generate static sites using Jekyll while still allowing simpler tools pre-publishing. Regarding my point #2. Not a week ago, there was a thread to discuss how cool Stripe's animations are. There were multiple conversations in said thread that attest to this fact. Many people look for a sense of branding on product or service based businesses and relate those to their legitimacy. I think my sentiment for small/simpler sites is a pretty common one on HN, but I think it all boils down to who your users are and what they prefer.

aabbcc1241 6y ago

In fact you don't really need to depends on third party to do analytics as well

armyofbots 6y ago

If only there were a search engine for tiny websites.

1bc29b36f623ba8 6y ago
That sounds like an excellent idea for a tiny project! :)
kwhitefoot 6y ago
If every tiny website linked to at least two other tiny web sites using something that a crawler could recognize it would be easy. Alternatively, is there a heuristic that reliably classifies websites in to tiny/not-tiny? How could we get this started?
- ehonda 6y ago
  you might want to try wiby.me
  - kwhitefoot 6y ago
    Thank you. Looks interesting.

_sbrk 6y ago

Ugh, how I loathe the term "full stack". Many who claim this have attended a 12 week crash course where they're armed with the programming equivalent of heavy weaponry and then turned out onto the world to "engineer" websites that are bloated, slow me-too creations with background video, fly-in scroller elements, and everything else that bogs down even the most powerful PC. "Many were increasingly of the opinion that they'd all made a big mistake coming down from the trees in the first place, and some said that even the trees had been a bad move, and that no-one should ever have left the oceans." - Adams

Yhippa 6y ago

I've been messing around with a personal site hosted on S3. Does anybody here like any small UI frameworks that they would recommend?

simook 6y ago

Recently I decided to build the next version of my website by going back to the basics. http://kyle.simukka.com http://kyle.simukka.com Still unsure of what the content and goals are, but it has been a lot of fun to work on a very simple website.

6510 6y ago

I eventually added an editor that displays the html source in a textarea. Above it is a field with the file name, below is the submit button and a password field. (There also is a cookie req that I make manually and it does some IP checks when trying to save.) After submitting it checks if there are links pointing at the (new) page. If those are missing the "success!" page gets a link pointing back at the editor with the index appended to it as the query string, the url that must be added and the page title. (the substring between <title> and </title>) When clicked it loads the index into the editor and inserts a link into the html (so that I can move it around or type text around it) That same functionality is reused by a bookmarklet to insert www links into pages. (it also inserts highlighted text from pages) Except the save page everything is still static html.

ulisesrmzroche 6y ago

Are all these projects targeting this particular buche within HN? Soon as they see this design, people are gonna bounce.

longtermd 6y ago

I love the original thinking in this post. If there was no React/Angular/VueJS, how would YOU design ANY system to help you code faster and more maintainable? That what I'd love to see: more original ideas to solve complex tasks, and not stopping at the first idea coming to mind. BTW: I believe tailwindcss is fantastic at achieving and helping with the OP's frustration.

MrGilbert 6y ago

My personal website, https://g5t.de https://g5t.de uses a custom directory-listing kind of framework I wrote - so it doesn't tick all of the requirements. It's not much, but it does its job kinda well (still lacking notable, deep and interesting content, sorry).

mrweasel 6y ago
That is very nice, a little broken in some places: the [001]-how-to-not-build-a-router link doesn't work, you have to click the .md file, and your github link is broken But it looks very nice and I love the idea.
- MrGilbert 6y ago
  Thanks for your kind words! I fixed the broken links. Maybe I should automate the creation of the readme.md files. :)

fyfy18 6y ago

The funny thing about this website is the page finishes loading before my phone OS finishes the animation to switch to the browser.

nicbou 6y ago

Managing a website and writing for it are two different activities to me. I prefer to do the latter in a WYSISYG editor. I don't want to fire up a terminal to deploy content changes. With proper caching, the output of a CMS can be indistinguishable from a static site, but it can also include RSS, pagination, categories, tagging, responsive images, tables of contents, etc. Take https://allaboutberlin.com https://allaboutberlin.com. In my browser, most of its pages load faster than the tiny website above. It has a big header image, custom fonts and other features. You can achieve great things with HTTP2 server push, static caching and gzip. You should definitely consider making simple, fast websites because they're great for visitors, but how you produce the HTML doesn't matter.

vidugavia 6y ago
RSS, pagination, categories, tagging, responsive images, ToCs - all these things work just perfectly in static sites.
- nicbou 6y ago
  Sure, but they need to be generated by some sort of framework, somewhere. If your definition of a static site includes framework-generated index pages and page structures, aren't almost all websites static already? Making them tiny is just a matter of writing better templates, not picking more obscure frameworks.
  - vidugavia 6y ago
    In my books the difference lies in how the HTML is generated. In case of static sites you generate it only when you rebuild the site after changes. In dynamic sites you build it dynamically on each request. Sure, you can cache the hell out of it and have a feeling that it's the same, but the truth stays that perhaps you're doing 50 SQL queries for a simple "welcome on our site" landing (something I actually witnessed some years ago). And with caching you're achieving the result with adding another infrastructure layer on something that could have been dead-simple from day one.

dhdjdjcjcjcnc 6y ago

>It's your little corner of the internet to do as you please with. > >Follow me on social media: > >Twitter Instagram Really makes you think huh?

aethertron 6y ago
Everyone knows solo blogging is lonely. That's why RSS is valuable, and the indieweb folks have tried to make new social protocols.

camillomiller 6y ago

>“ Things have really changed since I began learning, and rightly so. Instead of coding in plain HTML, CSS and JS, I'm now using endless frameworks, modules and libraries to build increasingly more complex web and mobile applications. It's great, if I didn't use these tools my code would be an unmaintainable mess.” How sad that this has become the widely accepted narrative. There’s a lot of value right now in NOT building things that way. Last week I had to deal with fixing another dev’s mess on a stuck project. Big company website, but nothing fancy at all. Purely a marketing window. The amount of complexity he put into it by using Vue.js was insane for the scope of the project. INSANE. To do something as easy as changing the pages <title> tag we had to write an unjustified amount of lines of code. Framework-itis really is a bad disease, it not only affects your work, but it definitely clouds the simplest form of judgement, it appears. Then we have exactly this: someone who got a hammer and spent years treating everything like a nail comes to a reckoning, usually framed as a longing for the good old days when things used to be simple. Well, you know, things can still be simple, if you don’t offload to unjustifiably complex frameworks the duty of understanding what’s going on in your project. To be clear, I’m not at all against frameworks. I love and use some of them, but they’re like a closet. If you are a tidy and organized person, your closet will be full of neatly folded clothes; if you’re a messy person, it will still be a repository for heaps of displaced garments, ready to fall out as soon as you open the door.

robertlagrant 6y ago
I don't understand why changing a title tag would require any code. Is it the framework or the code? (I don't know Vue, but this smells a bit.)
- chownie 6y ago
  We had a similar scenario at my workplace, but with React rather than Vue. We wanted an internal component to be able to change the page title, which ended up with a project to transition to using react-helmet. It ended up taking a few weeks before this project completed.
  - 6y ago

toto444 6y ago

I have been working on a tiny website aiming to teach Japanese using HTML/CSS and Emojis. It is hosted on Github pages. I take this opportunity to share it since I believe it is the kind of website that people miss. https://drdru.github.io/ https://drdru.github.io/ The main problem I have is that despite some love for this type of website on Hackernews they are not really popular. Also, they are not accepted in Show HN.

tjchear 6y ago

Along the same vein, I've been working on a Vi-like editor for creating webpages [0], and if anyone's looking to create a tiny website, it's worth checking out. If you enjoy using Vi, you'll likely have a blast using this one. [0] https://vivpage.com https://vivpage.com

pdevr 6y ago

I see that this is your first submission. I love that it is refreshingly original. Now, there are two main steps to making a website public. * Developing the website (idea, design, development) * Hosting it (domain, email, host, server) What you posted is great for emphasizing that the first step can be done in a very simple way, without any complicated frameworks. The way you did the second part - hosting your site (Using Node.js/npm, Firebase, and npm package) - does not fit well with the simplicity you demonstrated while doing part one. However, if considered as a how-to for building a tiny website using Firebase, it is awesome.

thedonkeycometh 6y ago

A simple site surely would have been one that performs only the task required without anything else. Which begs the question why have Javascript or even CSS at all for what you're doing? And if you're using firebase, why not just host on github pages with raw HTML and an embedded body css? Even writing HTML and FTPing to a shared host (jus like the olden times) is simpler and closer to the aims of the site. Not utterly sure what the point of all this is apart from explicitly not using a framework that the author doesn't understand the workings of. You could say the same of firebase and node.

p4bl0 6y ago

> No libraries or frameworks (the exception being analytics) Why? Why are analytics necessary? How does it matter for such a website?

SquareWheel 6y ago
It's nice to know if people are reading what you're putting out.
- p4bl0 6y ago
  Is it really so nice that you are okay with handing over their personal data to Google? I really think this is a problem.
  - SquareWheel 6y ago
    I really don't think anything collected qualifies as personal data. I use https://minimalanalytics.com/ https://minimalanalytics.com/, which sends a tiny network request. Remember that it's easy enough to opt-out of Google Analytics, too. I leave it enabled because I consider it to be useful data for webmasters.
- Narann 6y ago
  I have a (french) blog[1] having analytics for first years. I realize most page views where not necessary the ones I had the most fun at writing. It was sad to realize your next post would not necessary bring interest and you start to bring what you guess peoples would be interested in, and not what you are interested at in the first place. It breaks motivation on the long run. Like if you where no more blogging for yourself. I finally remove analytics and now write what I love without being to rationals. It brings far less pressure. [1] https://www.fevrierdorian.com/blog/ https://www.fevrierdorian.com/blog/
  - SquareWheel 6y ago
    I can appreciate that! I have some videos I've created that I've never once checked the view stats for. In that case, I'm just as happy not knowing. Somehow I feel differently about articles I've posted, but to each his own.

codemusings 6y ago

I think the premise of this blog post is flawed. > During my time using frameworks I've become more and more out of touch with the code I'm writing. For example, when I plonk down a button in the Ionic Framework I get a beautifully engineered and designed button, but it also has 10 CSS classes attached to it that I don't really understand. I sometimes feel like the thing I've created isn't truly "mine". That seems to be the nature of CSS utility frameworks. Composition over inheritance; or in this case monolithic element styles. Is the utility function to fetch elements from the DOM tree also truly "yours"? Where's the line drawn? I could get the text representation of the DOM tree and write my own parser? How about that? > I therefore decided to go back to the basics and code my own tiny website. I already knew how to go about it, you probably do too, it's really easy (if you don't know here's how). However, I'd never actually done it, and I'd not made a website without a framework in over a decade. Ah! And there's the problem! Are you creating a website or an application? I do understand that this feels like a cleansing of sorts. But in my opinion doesn't reinforce the original argument. I think the more experience you gain as a developer the more often you will come to the realization that technology evolves and also becomes more nuanced over time. When confronted with this fact of course the first instinct will be to feel overwhelmed and return to basics. Which if you're creating a mostly static website in this case is perfectly reasonable. But you can't be an expert in everything. Thus frameworks and tools emerge to alleviate some of the pain that stems from designing applications not websites. Which again reinforces another often quoted realization: the right tool for the right job.

Tepix 6y ago

Tiny websites are great, agreed. The best thing about them? They can be deployed in a decentralized fashion and can protect the visitor's privacy. This guide however, suggests using Google Analytics which tracks unsuspecting users' browsing history across almost the entire web. It hosts the website centrally by a Google owned service (which provides even more tracking to Google). It suggests buying a domain name from Google. Is this some kind of Google advertisement? No, but no thanks.

extro 6y ago

Only 5 javascript needs to be downloaded for this tiny website. This guy should be banned from the internet.

SamBorick 6y ago

For me the biggest requirement is > 3. It must be fun to build for me that requires a level of abstraction, I don't want to be monkeying with HTML if I don't have to, I just want to write the damn article. That's why I use Hugo, I feel like it hits a fantastic balance between speed for the user and ease of maintenance for me.

ryandrake 6y ago

Just a nit: Using "max-width: 600px;" leaves enormous white margins on either side of the text, when browsed on larger monitors. I wish CSS writers would stop trying to guess the width of my screen.

pcmaffey 6y ago

Can anyone recommend a good WYSIWYG editor (for non-devs) for making static sites that is not tied to hosting? ie. I just want to output a folder of /html.

dougskinner 6y ago
Maybe try publii[1] [1]https://getpublii.com/ https://getpublii.com/

meigwilym 6y ago

Reminds me of the 90s when I first started out. In a way it's a shame that the basics have been forgotten, and the first step taken to develop a website is a cli app to install a load of boilerplate.

th3o6a1d 6y ago

I dig the concept, but for ease, firebase-tools, node? Use netlify! Or s3 bucket w hosting

dijksterhuis 6y ago

50 internet points to whoever guesses who I designed my simple portfolio site to impress (i.e. here's my shameless plug). https://whoami.dijksterhuis.co.uk https://whoami.dijksterhuis.co.uk - Pure html and CSS (except embedded iframes like soundcloud). - hosted on GitHub.io - domain name from AWS Only "server side" thing I had to do was put a special file in the GitHub repo. Super cheap too. I have a free pro GitHub account (student ftw) so the only real cost is the AWS hosted zone for dijksterhuis.co.uk I also have subdomains I set up for machines I SSH into because I'm that lazy.

Sophistifunk 6y ago

No libraries or frameworks to make development easier, but still analytics to help Google spy on readers? Pass.

bg451 6y ago

Really awesome idea! I ended up following suit and whipped together http://kojichamber.com http://kojichamber.com to put out the list of things I used to build a fermentation chamber and the nuances of one.

mertnesvat 6y ago

I liked it it's very well articulated and seems promising I just had a new years resolution with the same goal. Keep going Ben!

luord 6y ago

That's what I did with my website. Still tweak it every now and then, but it's nice because 99% of the code is mine.

vfistri2 6y ago

Would love to have some simple stack automated.

_theory_ 6y ago

How far down the abstraction tree do you go before something is 'pure'? Programming on the whole is at a much higher abstraction level than ever. Maybe what people are really looking for is simplicity, but this changes depending on the complexity of your project. Therefore the question becomes, "What is the best level of abstraction for this project?" That changes every time you do something new.