Title: What a website can be Author: Roel, Manetta Date: 2018-03-20 Category: article Slug: what-a-website-can-be lang: en summary: This website is built with a static site generator. This article delves into the implications of both 'static site' and 'generator' for its design process. featured_image: /images/ouroboros.gif tags: workgroup, web, publishing status:draft When considering how to design a website for varia, our[^1] mutual but implicit understanding was not to *just* make a site. But rather that there was a potential for the process of site-making to become a process of exploring what a website can be. Exploring how one could do web publishing in a self-hosted[^2], minimal[^3], portable[^4], documented[^5] and FLOSS[^6] way. In a way that both covers and justifies the multiplicity of practices that varia consists of. This text is an attempt to try to make explicit and put to words some the ideas and questions that drove this proces. Hopefully this can trigger different approaches and push web design in the conceptual sense, not as a practice only involved with visual language but as a practice thinking of on-line publishing ecosystems. ##static site varia.zone is a static website built with Pelican[^7], a static site generator based on Python[^8]. A static website is a 'traditional' website where all the content consists of html documents on the server's hard disk. In our case these are generated through the set of pelican scripts and plugins[^9]. Pelican generates these HTML pages out of a repository of plain text articles. This is as opposed to other 'more modern' websites that use content management systems that generate the website on the fly by quering a database. We use pelican only locally, and only for the generation of the HTML pages. The plain text files are our editing interface so to say. They are transformed into a static set of files, that are uploaded to a server. Which means that our website exists on a hard disk of a server as a set of documents. They are always there not only when a visitor visits the page. Like the tree in the forest that also falls when nobody is there to hear it ;). These documents —both as a source for articles and as generated outcomes— are very portable. The articles for the website are written in markdown, a mark-up language that can be read by both people and a variety of tools. The markdown files can be archived and versioned using versioning tools like git or easily converted into different formats using pandoc. The content of the website can therefore be read by many other softwares across (historical) operating systems or included in other workflows, and thus stay open for potential reuse and long-term re-accesibility. The static website is also supportive to another idea we would like to push for: independent, self-hosted services. As a cultural organisation focused primarily around critical understandings of technology it is our desire (and obligation?) to apply them in our own communication channels and forms of making public. Since a static website requires less resources, one can make do with a not-so-powerful, energy efficient server to host them. This opens up the possibility to (economically) serve the site directly from our space, which we currently do. In general hosting a server from one's own space introduces some security concerns. These are however partly mitigated by a static site, because it doesn't use server side languages. This ensures also that one's webserver doesn't become a liability in terms of exploitable plugins or databases like in popular systems such as Wordpress. These choices are a start for us to think about what it means to base design decisions for a website on a specific situation in terms of hardware and hosting location. However interesting working on this type of website might be, it is a fact that it exists in a context where one could argue that (usage of) the web has atrophied to the point where one is required to publish on or via social media to reach an audience at all. As an organization we completely disagree with these forms of social media and creating dedicated profiles on these platforms was out of the question for us. Yet, this context of people reading this content through social media is still something we have to relate to. Taking this context into account, working with a set of python scripts and a set of documents makes it possible for us to engage with the publishing process more closely and think about other forms of sociality that could be included in the publishing process without justifiying or contributing to walled-off publishing platforms. ##Generators Others, from media companies to proponents of an independent web, have already thought about how to deal with this situation and these distributed forms of publishing are also bundled under the term 'syndication'. In the context of the web, web-syndication aims to make content that is published on one website available on other sites. The [Indieweb](https://indieweb.org)[^10] community has done a lot of work on these type of practices. One of the content publishing models they present is 'POSSE': [Publish (on your) Own Site, Syndicate Elsewhere](https://indieweb.org/POSSE). The idea is to publish content on your own (static or non-static) site and distribute this content to third parties with the help of POSSE tools. On their wiki they describe how POSSE is *different from just 'everyone blog on their own site', and also different from 'everyone just install and run (YourFavoriteSocialSoftware)' etc. monoculture solutions*. They introduce a publishing system that uses different API's and permashortlinks to communicate with external platforms such as Medium, WordPress, Tumblr, FB or Twitter. And as we are aware of a context of social media and proprietary instant messages applications being platforms where possibly our site would circulate, we decided to include some of the forms of syndication proposed by Indieweb. Examples of such things are adding open-graph data to the website headers. In this way references to our website on social media show up as small previews with a with a short summary of that specific content on our site. ![An example of an Open-Graph type website preview](/images/og.png) Although we embrace many aspects of syndication, we also question ourselves how much it helps to use that term or logic. Or rather how the idea of the 'generator' is promising. How generating possible transmutations of a 'plain text' in to not just web pages but different media altogether such as calendar entries, rss feeds, email newsletters, print media etc. Which is also the playful part of exploring this way of website making. Different questions come up: How can the same article transmute to rss, mail, print, events calendar etc.? How can the work we put in the website flow into other functionalities, contexts or ways of reading? If we jump a bit further into the future thinking about upcoming protocols such as activitypub etc., how can this website become an entity in the fediverse? How can a website and the process of making a website become a vehicle for exploring these topics? -------- To unpack the website ... This folder of Pelican scripts, markdown documents, images, template and css files ... [varia.website.git](https://git.vvvvvvaria.org/varia/varia.website)
├── content/
|   └── post1.en.md
|   └── post1.nl.md
├── LICENSE
├── Makefile
├── output
├── pelicanconf.py
├── pelican-plugins
├── plugins-custom
├── publishconf.py
├── README.md
└── themes
... generates the following output folder ... output/
├── author/
|   └── [varia.html](https://varia.zone/author/varia.html)
├── [categories.html](https://varia.zone/categories.html)
├── category/
|   └── [event.html](https://varia.zone/category/event.html)
├── [en/](https://varia.zone/en/)
|   └── feeds/
|   |   └── [all-en.rss.xml](https://varia.zone/en/feeds/all-en.rss.xml)
│   ├── [post1.en.html](https://varia.zone/en/century-21-calling.html)
│   ├── [post2.en.html](https://varia.zone/en/algologs.html)
|   └── [post3.en.html](https://varia.zone/en/itisasif.html)
├── [events.ics](http://varia.zone/events.ics)
├── feeds/
|   └── [all.rss.xml](http://varia.zone/feeds/all.rss.xml)
├── images/
├── [index.html](https://varia.zone/)
├── pages/
│   ├── [about.html](http://varia.zone/pages/about.html)
|   └── [stream.html](http://varia.zone/pages/stream.html)
├── [post1.nl.html](http://varia.zone/century-21-calling.html)
├── [post2.nl.html](http://varia.zone/algologs.html)
├── [post3.nl.html](http://varia.zone/itisasif.html)
└── theme/
[^1]: varia works via different thematic workgroups, one which is concerned with the webiste [^2]: do unpack self-hosting culture, and refer to [^3]: Minimal not as in minimalism in design but rather understood as simple/low-tech/appropriate technologies and as understood in (some) aspects of [Minimal Computing](http://go-dh.github.io/mincomp/) [^4]: [^5]: What does documented mean? For whom? Translations into different languages (dual NL/EN, but also in other types of langues like explanatory articles like these rather than just 'read the code') [^6]: Which parts of the process do we document? Translations into different languages (dual NL/EN, but also in other types of langues like explanatory articles like these rather than just 'read the code') [^7]: [^8]: [^9]: We use both [the plugins made by the pelican community](https://github.com/getpelican/pelican-plugins) and [our own custom ones](https://git.vvvvvvaria.org/varia/plugins-custom) [^10]: Minimal Computing has also been an important reference which we should still add to this article..