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, 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/ 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.
https://glitch.com is also excellent. I’ve been using it to teach a website development workshop to 10-15 year olds and it’s the most intuitive interface I’ve found so far for those with no prior experience with HTML/CSS/JS.
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.
I'll second Netlify. Totally fantastic service; I've played with a lot of "github to deployed app" services, and I was still blown away with how straightforward it was to get a NextJS static site on there, auto-deploying, on a custom domain, with site analytics built-in, no code required.
I find myself torn on the specific instructions. It's certainly a lot more arcane than my early sites, but that was mostly because there was a whole lot of boilerplate handled by the host (Enter these details into your FTP program, put your files into public_html, start with index.html).
I didn't have any idea what Apache was, how files were served, or really anything about internet infrastructure. And that's fine, certainly good for a kid or to whip up a quick business site, but it doesn't satisfy the hacker in me today. There's too much magic going on behind the scenes for me to feel much ownership of it.
I suppose it sort of depends who you're aiming it at. TFA didn't feel to me like it was trying to approach novices (after all, it's talking about leaving frameworks and libraries behind, novices aren't much using frameworks). Your instructions are good for an easy introduction for people with no web development experience, to recreate that sense of ease, but I think it's a different thing from what the article is going for. Even a simple site requires a fair bit under the hood, because serving files isn't all that simple unless you just hide it away from the end-user.
I don't know, I mostly agree with you, but I disagree that a simple site requires that much. Just drop the files in a folder in some web server and you're done.
I do agree that beyond the site being tiny, an important part of taking control back is to question the hosting part. The "traditional" web is, unfortunately, not fit for minimum hosting without either shelling out some money or depending on a third-party (however good it is). It is high time decentralized web alternatives gain adoption.
1. Open Beaker
2. If you don't have any content, select "New Hyperdrive" from the burger menu, enter your site name, and start editing content with the integrated editor
3. If you already have a folder with content, select "New Hyperdrive from folder"
4. You have a website ! Update it locally and changes will be propagated. Your site address is the hyperlink in the URL bar !
There shouldn't need to be more steps and, more importantly, dependencies on external processes/companies/organization to say what you want to say and spread it.
You do need to keep your computer always[0] on, though. I don't mind depending on external companies, I mind depending on external companies that I can't pay to ensure their loyalty to me.
Agreed, you'll lose access to all that server-side stuff after not too long. Just do something dead simple: single page of vanilla html/css. You'll have to move it at some point, the hosting server will need updating or shut down, and a single file is way easier to move around.
My website, https://cyrialize.dev/, is hosted on Neocities. I used jekyll to create it and I use water.css which I found on CSS Bed (https://www.cssbed.com/). The Neocities gem is VERY useful.
Yeah, that whole Firebase thing was not necessary. After creating the public folder, dragging and dropping it onto Netlify would've instantly given you a public website. No commands necessary. I use Netlify for everything, even hosting a static blog generated in Hugo. All free, only thing I pay for is my domain.
>“ 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.
As someone that has used vue.js quite a bit in the past, I have to admit what you came up against is quite odd.
It is a very minimal framework.
He might just be that kind of JS dev that really likes to build a webpack castle.
You know, if you can drop in a url to a cdn-distributed version of a JS, you'll instead rebuild the whole thing in webpack, babel, and several other things just to be able to type "import".
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.
It's not about Vue (or React for that matter). Incompetent developers will take whatever tools they have at their disposal and turn a few hours project into an unmaintainable monstrosity.
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.
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.
I didn't see myself asking Tom Scott for his sound effects, the ding is also not the same. And my friends and I have our own gimmick, generally more cheese-based (raclette or fondue) than biscuit-based.
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
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.
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.
I'm working on Plausible Analytics which is only 1.4 KB right now and provides a modern dashboard. It also doesn't use cookies and doesn't collect personal data so you're not required to show the cookie/GDPR prompts which would make tiny websites much less tiny.
You claim that using your analytics doesn't require user consent:
> "Plausible does not use cookies and does not collect any personal data. This makes us compliant with the different cookie laws and privacy regulations. It means that you are not required to annoy your visitors with a cookie notice if you’re using Plausible analytics." [1]
> "Compliant with privacy regulations: Google Analytics places cookies and collects a lot of data from your visitors. You’re required to have a privacy policy, to show a cookie banner and to obtain consent for GDPR. Plausible Analytics doesn’t use cookies and doesn’t track personal data so you don’t need to annoy your visitors or worry about those prompts." [2]
It would seem you are collecting PII and processing it server side (?), e.g. calculate_fingerprint here [3].
Care to explain how that doesn't require user consent?
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]...
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?
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
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]
> 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.
Readit News
Please, do yourself and us a favour and sign up for a free account on 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/ 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.
I didn't have any idea what Apache was, how files were served, or really anything about internet infrastructure. And that's fine, certainly good for a kid or to whip up a quick business site, but it doesn't satisfy the hacker in me today. There's too much magic going on behind the scenes for me to feel much ownership of it.
I suppose it sort of depends who you're aiming it at. TFA didn't feel to me like it was trying to approach novices (after all, it's talking about leaving frameworks and libraries behind, novices aren't much using frameworks). Your instructions are good for an easy introduction for people with no web development experience, to recreate that sense of ease, but I think it's a different thing from what the article is going for. Even a simple site requires a fair bit under the hood, because serving files isn't all that simple unless you just hide it away from the end-user.
How to host your tiny website with beaker (https://beakerbrowser.com/)
1. Open Beaker 2. If you don't have any content, select "New Hyperdrive" from the burger menu, enter your site name, and start editing content with the integrated editor 3. If you already have a folder with content, select "New Hyperdrive from folder" 4. You have a website ! Update it locally and changes will be propagated. Your site address is the hyperlink in the URL bar !
There shouldn't need to be more steps and, more importantly, dependencies on external processes/companies/organization to say what you want to say and spread it.
[0] For varying values of "always".
Deleted Comment
Or just commit directly to Github, enable pages, job done :)
My website, https://cyrialize.dev/, is hosted on Neocities. I used jekyll to create it and I use water.css which I found on CSS Bed (https://www.cssbed.com/). The Neocities gem is VERY useful.
My process is super simple, it's basically:
- Make changes
- Commit & Push
- jekyll build
- neocities push _site/
https://gitlab.com/stavros/neocities-gitlab-ci-demo
yeah, even easier (or maybe more minimalistic) would be:
goto 192.168.0.1 (or .1.1) and figure out how to port forward '80' to your machine.
install apache
goto a dynamic dns service, get some sub-subdomain, and setup a curl script to set it to your IP.
put an html file in your apache server.
voila, you have your own website*
*if your ISP allows traffic on port 80
For me, I hate installing stuff, last time I installed Apache must have been before 2004, and I would like to not have to go back.
Dead Comment
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.
He might just be that kind of JS dev that really likes to build a webpack castle.
You know, if you can drop in a url to a cdn-distributed version of a JS, you'll instead rebuild the whole thing in webpack, babel, and several other things just to be able to type "import".
(I don't know Vue, but this smells a bit.)
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.
However, I've also seen simple pages that are line by line copies of tutorials for whole sites, pared down to a single page.
Frameworks aren't bad, unstructured working practices and environments often breed this sort of toxicity in code.
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.
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.
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
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.
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.
[0]: https://www.goatcounter.com/
I'm working on Plausible Analytics which is only 1.4 KB right now and provides a modern dashboard. It also doesn't use cookies and doesn't collect personal data so you're not required to show the cookie/GDPR prompts which would make tiny websites much less tiny.
See https://plausible.io/
There's an issue on our Github which will help us perhaps reduce it to under 1 KB too. We're working on that https://github.com/plausible-insights/plausible/issues
> "Plausible does not use cookies and does not collect any personal data. This makes us compliant with the different cookie laws and privacy regulations. It means that you are not required to annoy your visitors with a cookie notice if you’re using Plausible analytics." [1]
> "Compliant with privacy regulations: Google Analytics places cookies and collects a lot of data from your visitors. You’re required to have a privacy policy, to show a cookie banner and to obtain consent for GDPR. Plausible Analytics doesn’t use cookies and doesn’t track personal data so you don’t need to annoy your visitors or worry about those prompts." [2]
It would seem you are collecting PII and processing it server side (?), e.g. calculate_fingerprint here [3].
Care to explain how that doesn't require user consent?
[1] https://plausible.io/data-policy#plausible-is-compliant-with...
[2] https://plausible.io/blog/blog-post-changed-my-startup#new-p...
[3] https://github.com/plausible-insights/plausible/blob/master/...
[1] https://every.sdf.org/
[2] https://sdf.org/
[3] https://sdf.org/?tutorials/metaarray
https://sdf.org/?faq?VHOST?01
> 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).
[0]: https://anderspitman.net/20/#get-off-google-analytics
Or, better yet: If it's a tiny site, do you really even have to care about time-on-page?
> 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.