6 ms·

Site.js: Small Web construction set

202 points by thex10 6y ago

x86ARMsRace 6y ago
This looks really cool, however the long setup leads me to wonder how much time I'll spend maintaining this over something like a Ghost droplet on Digital Ocean.
- fedorareis 6y ago
  The 3 basic setup options are all either 3 or 4 steps. If you want websockets and the DB setup it is a little more involved. But having read through the “Get started in seconds” section I wouldn’t consider the setup for this long.
raajg 6y ago
Followed the links and came across https://small-tech.org/ https://small-tech.org/ which is pretty interesting. An example of how technologist can make a dent in how technology has been progressing thanks to an ad-driven internet.
- santa_boy 6y ago
  Absolutely! Very impressed and inspired too!
- 0xmohit 6y ago
  For the rationale behind building site.js, refer to the post "What is the Small Web?" [0] by Aral Balkan. [0] https://ar.al/2020/08/07/what-is-the-small-web/ https://ar.al/2020/08/07/what-is-the-small-web/
ljm 6y ago
> start the server using site enable and you’ll have a secure production web daemon that survives errors/reboots and auto-updates itself Is an auto updating daemon what you want? And does it run under its own account? I wouldn't run this as root or under an account with sufficient sudoers privileges.
- dylkil 6y ago
  i think they mean it hot reloads
fiatjaf 6y ago
Another JavaScript static website generator? Maybe what we want is actually to move these efforts to something like https://gemini.circumlunar.space/ https://gemini.circumlunar.space/.
- d--b 6y ago
  That is not what it is.
drizze 6y ago
following the dynamic part of this, it looks like they recommend DotJS. https://sitejs.org/#dynamic-sites https://sitejs.org/#dynamic-sites I am not too familiar with DotJS, but it looks like its depreciated/unmaintained for years. https://github.com/defunkt/dotjs https://github.com/defunkt/dotjs
- rockwotj 6y ago
  That dotjs is for user scripts (ie a chrome extension) not for the thing their talking about which is php for node.
- gbuk2013 6y ago
  https://github.com/olado/doT https://github.com/olado/doT is what they are talking about I think.
superkuh 6y ago
Wow. That looks super complicated. For a small website I'd recommend just using your system repo to install nginx and then putting html and media files in the web directory.
- nmstoker 6y ago
  It didn't strike me as that complicated or hard to follow. The method you describe is fine but the average user will quickly run into a lack of features that are taken for granted with that approach, and if they then progress to something more "mainstream" it will probably be way more complicated than this.
  - superkuh 6y ago
    For the vast majority of simple sites a static nginx web directory is perfect. For anything more dynamic they'd be better off using a real setup and not some opaque javascript all-in-one binary full of unintentional (to the user who didn't explicitly set them up) attack surfaces.
    - nmstoker 6y ago
      Ah, like another left-pad situation?
- shipstain 6y ago
  It's strange that plain old html and media files are so shunned for simple sites. Buying a domain name, buying web space, pointing the domain name to the web space, uploading files. Does seem ever so simple compared with a million other complex workflows. And yet, it didn't really catch on. Give someone a one-click installer and the bottleneck will still be content creation and design by committee.
- thunderbong 6y ago
  In a way you're right, there are a bunch of commands. However, they are pretty straight-forward and simple. And that's only required for the initial setup. Your comment already assumes that just because a person can type in commands on a terminal, they need to know about version management, nginx configuration and letsencrypt setup. If you look at the site docs [0], it further syncs from local to remote. Also, in many cases all the overhead that we, as software developers assume we should have for everything, need not be the case for just a simple website. [0]: https://github.com/small-tech/site.js/blob/master/README.md https://github.com/small-tech/site.js/blob/master/README.md
janaagaard 6y ago
The intro banner says “Sync and deploy to your own VPS”, but I can’t find info about setting up a custom domain and the likes.
chrismorgan 6y ago
Meta on the site’s presentation: If you’re going to use thick light link underlines (text-decoration-color: #ccd6ce; text-decoration-thickness: .2em; text-underline-offset: .25em), please also turn off descender skipping with `text-decoration-skip-ink: none`. With this style of underline, descender skipping becomes a surprisingly large distraction if it kicks in, achieving precisely the opposite of what it was introduced to achieve (reducing distractions and improving readability). (Tested in Firefox and Chrome on Windows on a 2× display. In Firefox, shifting the underline about half a CSS pixel further clears the ink skipping. In Chrome, it already clears it by about 2.7 CSS pixels, because the default underline position already takes font metrics into account, which seems a very-dubious-to-wrong choice to me once you’re offsetting, but is currently within spec since the `text-underline-position: auto` spec just says “The user agent may use any algorithm to determine the underline’s position; however it must be placed at or under the alphabetic baseline.” `text-underline-position: from-font` explicitly opts into this behaviour (works on Firefox), and there is no way of opting out (so I don’t think there’s any way to instruct Chrome to draw the underline touching the text baseline).
tluyben2 6y ago
Small web and simple web is html. Why this?
- pmlnr 6y ago
  Because then aral couldn't reinvent the wheel.
grantcarthew 6y ago
For small sites I much prefer straight HTML, CSS, and JavaScript. I made `htmlsync` to help with the header and footer content: https://github.com/grantcarthew/deno-htmlsync https://github.com/grantcarthew/deno-htmlsync
deleted 6y ago
[deleted]
kderbyma 6y ago
shameless plug. I am working on an open source project for something similar. it is a all-in-one website and generator. you can use it to generate static sites in zips and or host a live server and an admin panel for editting. I just pushed demonstrable alpha out yesterday. it's called Calliope. (https://calliope.site https://calliope.site)
- kderbyma 6y ago
  Netlify Routing is Down Presently - Using their subdomain works. (https://calliope-demo.netlify.app/ https://calliope-demo.netlify.app/)
vittore 6y ago
I like the idea, but i feel like it should be dumb-ed down even more. For simple things I like using next.js with vercel (ex zeit, ex now). You also get simple file-system based routing if you want it (thanks to next.js) and very easy deploy, that is also gets you letsencrypt certificate automatically. It does not have database part of the story atm, but you can use dynamo/fauna/mongo and alike. Really simple thing is dark lang though! it has all of these concerns integrated in, have IDE and incremental automatic deployment. Absolutely love it. But it is still quite early beta.
ChrisArchitect 6y ago
what is this tho? This reads like any other small open source node based site generator page on github..... You're encouraging people to run their own sites/put up their own pages/own domains etc...... why the giant page of stuff and engine that's duplicating much of the other independent projects out there? what's the differentiator?

202 points by thex10 6y ago

This looks really cool, however the long setup leads me to wonder how much time I'll spend maintaining this over something like a Ghost droplet on Digital Ocean.

fedorareis 6y ago
The 3 basic setup options are all either 3 or 4 steps. If you want websockets and the DB setup it is a little more involved. But having read through the “Get started in seconds” section I wouldn’t consider the setup for this long.

raajg 6y ago

Followed the links and came across https://small-tech.org/ https://small-tech.org/ which is pretty interesting. An example of how technologist can make a dent in how technology has been progressing thanks to an ad-driven internet.

santa_boy 6y ago
Absolutely! Very impressed and inspired too!
0xmohit 6y ago
For the rationale behind building site.js, refer to the post "What is the Small Web?" [0] by Aral Balkan. [0] https://ar.al/2020/08/07/what-is-the-small-web/ https://ar.al/2020/08/07/what-is-the-small-web/

ljm 6y ago

> start the server using site enable and you’ll have a secure production web daemon that survives errors/reboots and auto-updates itself Is an auto updating daemon what you want? And does it run under its own account? I wouldn't run this as root or under an account with sufficient sudoers privileges.

dylkil 6y ago
i think they mean it hot reloads

fiatjaf 6y ago

Another JavaScript static website generator? Maybe what we want is actually to move these efforts to something like https://gemini.circumlunar.space/ https://gemini.circumlunar.space/.

d--b 6y ago
That is not what it is.

drizze 6y ago

following the dynamic part of this, it looks like they recommend DotJS. https://sitejs.org/#dynamic-sites https://sitejs.org/#dynamic-sites I am not too familiar with DotJS, but it looks like its depreciated/unmaintained for years. https://github.com/defunkt/dotjs https://github.com/defunkt/dotjs

rockwotj 6y ago
That dotjs is for user scripts (ie a chrome extension) not for the thing their talking about which is php for node.
gbuk2013 6y ago
https://github.com/olado/doT https://github.com/olado/doT is what they are talking about I think.

superkuh 6y ago

Wow. That looks super complicated. For a small website I'd recommend just using your system repo to install nginx and then putting html and media files in the web directory.

nmstoker 6y ago
It didn't strike me as that complicated or hard to follow. The method you describe is fine but the average user will quickly run into a lack of features that are taken for granted with that approach, and if they then progress to something more "mainstream" it will probably be way more complicated than this.
- superkuh 6y ago
  For the vast majority of simple sites a static nginx web directory is perfect. For anything more dynamic they'd be better off using a real setup and not some opaque javascript all-in-one binary full of unintentional (to the user who didn't explicitly set them up) attack surfaces.
  - nmstoker 6y ago
    Ah, like another left-pad situation?
shipstain 6y ago
It's strange that plain old html and media files are so shunned for simple sites. Buying a domain name, buying web space, pointing the domain name to the web space, uploading files. Does seem ever so simple compared with a million other complex workflows. And yet, it didn't really catch on. Give someone a one-click installer and the bottleneck will still be content creation and design by committee.
thunderbong 6y ago
In a way you're right, there are a bunch of commands. However, they are pretty straight-forward and simple. And that's only required for the initial setup. Your comment already assumes that just because a person can type in commands on a terminal, they need to know about version management, nginx configuration and letsencrypt setup. If you look at the site docs [0], it further syncs from local to remote. Also, in many cases all the overhead that we, as software developers assume we should have for everything, need not be the case for just a simple website. [0]: https://github.com/small-tech/site.js/blob/master/README.md https://github.com/small-tech/site.js/blob/master/README.md

janaagaard 6y ago

The intro banner says “Sync and deploy to your own VPS”, but I can’t find info about setting up a custom domain and the likes.

chrismorgan 6y ago

Meta on the site’s presentation: If you’re going to use thick light link underlines (text-decoration-color: #ccd6ce; text-decoration-thickness: .2em; text-underline-offset: .25em), please also turn off descender skipping with `text-decoration-skip-ink: none`. With this style of underline, descender skipping becomes a surprisingly large distraction if it kicks in, achieving precisely the opposite of what it was introduced to achieve (reducing distractions and improving readability). (Tested in Firefox and Chrome on Windows on a 2× display. In Firefox, shifting the underline about half a CSS pixel further clears the ink skipping. In Chrome, it already clears it by about 2.7 CSS pixels, because the default underline position already takes font metrics into account, which seems a very-dubious-to-wrong choice to me once you’re offsetting, but is currently within spec since the `text-underline-position: auto` spec just says “The user agent may use any algorithm to determine the underline’s position; however it must be placed at or under the alphabetic baseline.” `text-underline-position: from-font` explicitly opts into this behaviour (works on Firefox), and there is no way of opting out (so I don’t think there’s any way to instruct Chrome to draw the underline touching the text baseline).

tluyben2 6y ago

Small web and simple web is html. Why this?

pmlnr 6y ago
Because then aral couldn't reinvent the wheel.

grantcarthew 6y ago

For small sites I much prefer straight HTML, CSS, and JavaScript. I made `htmlsync` to help with the header and footer content: https://github.com/grantcarthew/deno-htmlsync https://github.com/grantcarthew/deno-htmlsync

deleted 6y ago

[deleted]

kderbyma 6y ago

shameless plug. I am working on an open source project for something similar. it is a all-in-one website and generator. you can use it to generate static sites in zips and or host a live server and an admin panel for editting. I just pushed demonstrable alpha out yesterday. it's called Calliope. (https://calliope.site https://calliope.site)

kderbyma 6y ago
Netlify Routing is Down Presently - Using their subdomain works. (https://calliope-demo.netlify.app/ https://calliope-demo.netlify.app/)

vittore 6y ago

I like the idea, but i feel like it should be dumb-ed down even more. For simple things I like using next.js with vercel (ex zeit, ex now). You also get simple file-system based routing if you want it (thanks to next.js) and very easy deploy, that is also gets you letsencrypt certificate automatically. It does not have database part of the story atm, but you can use dynamo/fauna/mongo and alike. Really simple thing is dark lang though! it has all of these concerns integrated in, have IDE and incremental automatic deployment. Absolutely love it. But it is still quite early beta.

ChrisArchitect 6y ago

what is this tho? This reads like any other small open source node based site generator page on github..... You're encouraging people to run their own sites/put up their own pages/own domains etc...... why the giant page of stuff and engine that's duplicating much of the other independent projects out there? what's the differentiator?