for the past few years, i'm sure many of you have read my many lamentations about the death of the old, small web many of us grew up with.
there are tons of static site generators out there, but none of them did what i wanted: something that could build an entire site without futzing with javascript and library dependencies. i wanted something that we would have had in 2005, but didn't have in 2025.
in january, i decided to do something about it instead of whining. i started gluing together a few php scripts i had been using to build blogs, rss feeds and mini homepages. i even wrote a new mini markup language.
i thought it would take me a week. it took >3 months. 😅
it ran for the past month as globaltalk.network's interactive site, and many of you asked if i'd ever let other people spin up an instance. i can finally say: yes!
today, kiki is officially finished and released for public use. named after my little black house demon, it's small, fast, and sometimes well behaved. and, it's all written in php without a single external dependency.
... mehr anzeigenfor the past few years, i'm sure many of you have read my many lamentations about the death of the old, small web many of us grew up with.
there are tons of static site generators out there, but none of them did what i wanted: something that could build an entire site without futzing with javascript and library dependencies. i wanted something that we would have had in 2005, but didn't have in 2025.
in january, i decided to do something about it instead of whining. i started gluing together a few php scripts i had been using to build blogs, rss feeds and mini homepages. i even wrote a new mini markup language.
i thought it would take me a week. it took >3 months. 😅
it ran for the past month as globaltalk.network's interactive site, and many of you asked if i'd ever let other people spin up an instance. i can finally say: yes!
today, kiki is officially finished and released for public use. named after my little black house demon, it's small, fast, and sometimes well behaved. and, it's all written in php without a single external dependency. just unzip and go.
it's released as shareware - in the oldest, finest, jankiest meaning of the word: you're free to goof around with and share the unregistered version. build your own little kiki instance, and customize the heck out of it until it feels like your own little home in the world wide web:
tomodashi.com/kiki
#kiki #homepage #worldWideWeb #smolWeb #smallWeb #php
![const BasicLayoutTemplate = async ({ title, SLOT }) => {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(0, 3)
return kitten.html`
<main>
<page css>
<h1>${title}</h1>
${SLOT}
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</main>
`
}
export default async () => await kitten.html`
<${BasicLayoutTemplate} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`](https://inne.city/photo/preview/640/225173 "const BasicLayoutTemplate = async ({ title, SLOT }) => {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(0, 3)
return kitten.html`
<main>
<page css>
<h1>${title}</h1>
${SLOT}
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</main>
`
}
export default async () => await kitten.html`
<${BasicLayoutTemplate} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`")
![class BasicLayoutTemplate extends kitten.Component {
async html ({title, SLOT}) {
return kitten.html`
<main id='page' morph>
<page css>
<h1>${title}</h1>
${SLOT}
<${FediversePosts.connectedTo(this)} />
</main>
`
}
}
class FediversePosts extends kitten.Component {
async html () {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(Math.floor(Math.random()*6), 3)
return kitten.html`
<div id='posts' morph>
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<button name='refresh' connect>Refresh</button>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</div>
`
}
onRefresh () { this.update() }
}
export default class MyPage extends kitten.Page {
async html () {
return kitten.html`
<${BasicLayoutTemplate.connectedTo(this)} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`
}
}](https://inne.city/photo/preview/640/225175 "class BasicLayoutTemplate extends kitten.Component {
async html ({title, SLOT}) {
return kitten.html`
<main id='page' morph>
<page css>
<h1>${title}</h1>
${SLOT}
<${FediversePosts.connectedTo(this)} />
</main>
`
}
}
class FediversePosts extends kitten.Component {
async html () {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(Math.floor(Math.random()*6), 3)
return kitten.html`
<div id='posts' morph>
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<button name='refresh' connect>Refresh</button>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</div>
`
}
onRefresh () { this.update() }
}
export default class MyPage extends kitten.Page {
async html () {
return kitten.html`
<${BasicLayoutTemplate.connectedTo(this)} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`
}
}")
