install Owncast, set it up as a systemd service, and serve it securely at your hostname.
As usual, your Let’s Encrypt certificates will be automatically provisioned when you first hit your server and get renewed automatically for you from there on.
Note that while Site.js will get automatic updates, Owncast will not. However, newer versions of Site.js will always include the latest Owncast install script. Currently, to update Owncast, simply disable your server using Develop and test on your own device. Sync and deploy to your own VPS. Host your own site at your own domain. No configuration; get started in seconds on Linux, macOS, and Windows. And small as in small tech. Automatic TLS everywhere with Let’s Encrypt and mkcert. Write plain HTML, CSS, JS or use the bundled Hugo static site generator. Use simple DotJS or the full power of Node.js and Express.js. WebSockets, database, proxy, live reload, sync, auto-update, statistics, etc. Launch a terminal window (on Windows, a PowerShell session running under Windows Terminal) and follow along. Create a folder. Enter the folder. Write the string Site.js starts serving your hello-world site at https://localhost. Go there in your browser to see your “Hello, world!” message. Congratulations, you’re up and running with Site.js! The type of site you just created is an old-school static site. You can create static sites with Site.js using plain old HTML, CSS, and JavaScript. Site.js will automatically serve any files it finds in the folder you start it on as static files. For larger sites, hand-rolling your static site might become cumbersome. That’s why Site.js comes bundled with the Hugo static site generator. Let’s create a new Hugo site and start serving it. Create a folder. Enter the folder. Site.js starts serving your Hugo site at https://localhost. Go there in your browser to see your “Hello, world!” message. Congratulations, you just created your first Hugo site with Site.js! Site.js does not limit you to creating and serving fully static sites. You can easily add dynamic functionality to your static sites or create fully dynamic sites. The easiest way to get started with dynamic sites is to use DotJS. DotJS gives you PHP-like simplicity in JavaScript using simple Follow along to create a very basic dynamic site that updates a counter every time the home page is reloaded. Create the folders. Make a project folder called count and a special nested folder in that called .dynamic: Enter the dynamic routes folder. Make a file called index.js that holds the dynamic counter route: Hit https://localhost and refresh to see the counter update. Congratulations, you just made your first fully dynamic DotJS site! In addition to static routes and dynamic HTTPS routes, you can also specify secure WebSocket (WSS) routes in DotJS. And you can mix all three types of routes as you please. To see WebSockets in action, let’s create a very simple chat app. Start the server. To test your chat app, open up two or more web browser windows at https://localhost and play with the chat interface. Site.js also has a fast and simple JavaScript Database (JSDB) built into it. You can refer to the database for your app any of your routes using the global Let’s see how easy it is to use JSDB by persisting the messages our simple chat app. The code you need to add is presented in boldface. You need to update the client so that it can handle the initial list of messages that is sent when someone joins the chat. Again, the code you need to add is presented in boldface. You can use Site.js as a proxy to add automatic TLS for HTTP and WebSocket to any web app. ForThe following is a simple HTTP server written in Python 3 (server.py) that runs insecurely on port 3000: To keep things simple, the following command will simply run it in the background. Start a server with Deploy using the built-in sync feature. Live blog using Live Sync. Migrate your existing sites without breaking links on the web with native support for archival cascades and native 404 → 302 support. Easily create custom 404 and 500 error pages. See your most popular pages and discover broken links using privacy-respecting, ephemeral statistics that are reset on every server start. Learn more about building static and dynamic web sites and applications using Site.js in the Site.js documentation. Made with love by Small Technology Foundation. We are a tiny not-for-profit based in Ireland that makes tools for people like you – not for startups, enterprises, or governments. And we’re also funded by people like you. If you like our work and want to help us continue to exist, please fund us. Site.js is Small Technology.site disable
and re-enable it using the command above.The Small Web is for people (not startups, enterprises, or governments).
One person.
One server.
One site.
Develop, test, sync, and deploy (using a single tool that comes in a single binary).
Just works.
Free as in freedom.
Secure by default.
For static sites.
For dynamic sites.
And more…
Get started in seconds
Install Site.js.
Linux
wget -qO- https://sitejs.org/install | bash
macOS
curl -s https://sitejs.org/install | bash
Windows
iex(iwr -UseBasicParsing https://sitejs.org/install.txt).Content
Create a basic static web page.
mkdir hello-world
cd hello-world
'Hello, world'
into a file called index.html, creating or overwriting it as necessary.Linux and macOS
echo 'Hello, world' > index.html
Windows
echo 'Hello, world' | Out-File -Encoding UTF8 index.html
Start the server.
site
Static sites with Hugo
Set up a new project.
mkdir my-hugo-site
cd my-hugo-site
Create a new Hugo site.
site hugo new site .hugo
Create a basic page layout.
Linux and macOS
echo '<body><h1>Hello, world!</h1></body>' > .hugo/layouts/index.html
Windows
echo '<body><h1>Hello, world!</h1></body>' | Out-File -Encoding UTF8 .hugo/layouts/index.html
Start the server.
site
Dynamic sites with DotJS
.js
files.Create the project structure.
mkdir -p count/.dynamic
cd count/.dynamic
Create a dynamic route.
Linux and macOS
echo 'i=0; module.exports=(_, res) => res.html(`${++i}`)' > index.js
Windows
echo 'i=0; module.exports=(_, res) => res.html(`${++i}`)' | Out-File -Encoding UTF8 index.js
Serve your site.
site ..
WebSockets
Create the project structure.
mkdir -p chat/.dynamic/.wss
Create the chat server.
Linux and macOS
echo '
module.exports = function (client, request) {
// Set the room based on the route’s URL.
client.room = this.setRoom(request)
// Create a message handler.
client.on("message", message => {
// Broadcast a received message to everyone in the room.
this.broadcast(client, message)
})
}
' > chat/.dynamic/.wss/chat.js
Windows
echo '
module.exports = function (client, request) {
// Set the room based on the route URL.
client.room = this.setRoom(request)
// Create a message handler.
client.on("message", message => {
// Broadcast a received message to everyone in the room.
this.broadcast(client, message)
})
}
' | Out-File -Encoding UTF8 chat/.dynamic/.wss/chat.js
Create the chat client.
Linux and macOS
echo '
<!doctype html>
<html lang="en">
<title>Chat</title>
<h1>Chat</h1>
<form name="messageForm">
<input name="message" type="text">
<button>Send</button>
</form>
<h2>Messages</h2>
<ul id="messageList"></ul>
<script>
const socket = new WebSocket(`wss://${window.location.hostname}/chat`)
const showMessage = message => {
const list = document.querySelector("#messageList")
list.innerHTML += `<li>${message.text}</li>`
}
socket.onmessage = message => {
showMessage(JSON.parse(message.data))
}
document.messageForm.addEventListener("submit", event => {
const message ={ text: event.target.message.value }
socket.send(JSON.stringify(message))
showMessage(message)
event.preventDefault()
})
</script>
' > chat/index.html
Windows
echo '
<!doctype html>
<html lang="en">
<title>Chat</title>
<h1>Chat</h1>
<form name="messageForm">
<input name="message" type="text">
<button>Send</button>
</form>
<h2>Messages</h2>
<ul id="messageList"></ul>
<script>
const socket = new WebSocket(`wss://${window.location.hostname}/chat`)
const showMessage = message => {
const list = document.querySelector("#messageList")
list.innerHTML += `<li>${message.text}</li>`
}
socket.onmessage = message => {
showMessage(JSON.parse(message.data))
}
document.messageForm.addEventListener("submit", event => {
const message ={ text: event.target.message.value }
socket.send(JSON.stringify(message))
showMessage(message)
event.preventDefault()
})
</script>
'| Out-File -Encoding UTF8 chat/index.html
Launch the server.
site chat
Database
db
instance.Update the server.
module.exports = function (client, request) {
// Ensure the messages table exists.
if (!db.messages) {
db.messages = []
}
// Set the room based on the route’s URL.
client.room = this.setRoom(request)
// Send new clients all existing messages.
client.send(JSON.stringify(db.messages))
// Create a message handler.
client.on('message', message => {
// Parse the message JSON string into a JavaScript object.
const parsedMessage = JSON.parse(message)
// Persist the message.
db.messages.push(parsedMessage)
// Broadcast a received message to everyone in the room.
this.broadcast(client, message)
})
}
Update the client.
<!doctype html>
<html lang="en">
<title>Chat</title>
<h1>Chat</h1>
<form name="messageForm">
<input name="message" type="text">
<button>Send</button>
</form>
<h2>Messages</h2>
<ul id="messageList"></ul>
<script>
const socket = new WebSocket(`wss://${window.location.hostname}/chat`)
const showMessage = message => {
const list = document.querySelector("#messageList")
list.innerHTML += `<li>${message.text}</li>`
}
socket.onmessage = websocketMessage => {
// Deserialise the data.
const data = JSON.parse(websocketMessage.data)
if (Array.isArray(data)) {
// Display initial list of messages we get when we join a room.
data.forEach(message => showMessage(message))
} else {
// Display a single message.
showMessage(data)
}
}
document.messageForm.addEventListener("submit", event => {
const message = { text: event.target.message.value }
socket.send(JSON.stringify(message))
showMessage(message)
event.preventDefault()
})
</script>
Proxy servers
Create a simple insecure service
from http.server import HTTPServer, BaseHTTPRequestHandler
class MyRequestHandler(BaseHTTPRequestHandler):
def do_GET(self):
self.send_response(200)
self.end_headers()
self.wfile.write(b'Hello, from Python!')
server = HTTPServer(('localhost', 3000), MyRequestHandler)
server.serve_forever()
Run it
$ python3 server &
Serve it securely using Site.js
$ site enable :3000
Further reading
Multi-device testing
site @hostname
and use a service like ngrok to test on all your devices with live reload or to test your site with others over the Internet.Sync
Evergreen Web
Custom error pages
Ephemeral statistics
Documentation
Like this? Fund us!