Title: What a website can be Author: Roel, Manetta Date: 2018-04-12 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/this.gif tags: workgroup, web, publishing status: 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], FLOSS[^6] and playfull[^6b] way. In a way that connects to the multiplicity of practices that varia consists of. This text is the beginning of an attempt to make explicit and put to words some of the ideas and questions that drove this process. In the spirit of release early, release often we will publish a series of texts as we develop this site. Hopefully this can trigger questions on web design in the conceptual sense, not as a practice only involved with visual language, but as a practice considering on-line publishing ecosystems. One of the fundamental choices we made early on was to use a static site generator as our publishing tool, so we'll start by introducing the concepts of both 'static site' and 'generator'. **Static site** Varia.zone is a *static* website. 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 Pelican[^7], which is a collection of Python[^8] scripts and plugins[^9] to turn unstyled plain text into HTML pages. This way of working can be understood to be different to 'more modern' websites. These modern methods use server side programming languages that generate the website on the fly by querying a database. This means that everytime someone visits the site, it gets generated on demand. A static website instead gets generated once and exists 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. Static websites are thus based on file storage wheras dynamic websites depend on recurrent computation. A website based on storage has some advantages for performance, security, portability and reproducability that we will adress in detail later in the series. The static website is supportive to another idea we would like to push for: independent, self-hosted services. Since a static website requires less resources, one can 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. On the other side, 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. In essence this is opposed to a cloud mentality, where the material circumstances of the hardware and hosting location are made irrelevant (for the cloud/vps customer) meaning that any 'service' can be 'deployed', 'scaled' 'migrated' etc. Our approach instead informs what can be hosted based on the material circumstances of the server. The choice to self-host this website is 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. However, as an organization we agreed to not create dedicated profiles on different social media platforms. It was a clear decision driven by a strong desire to self-host and own our content. Yet, this context of people reading our content through social media is still something we have to relate to. We decided to include open graph data & h-cards to the website. They enable the appearance of a preview with a short summary of specific content once a link is published on social media or in mobile apps. Aside from this small gesture we would like to further explore other forms of connections that can be made to other static sites or publishing platforms like Mastodon, by diving into upcoming publishing protocols such as ActivityPub[^10] and webmentions[^11]. **Generator** Another aspect of our current workflow that stimulates thinking about modes of distribution is *generating*. It is a promising way to think about possible transformations of 'plain text'[^12] into not just web pages but different media altogether. One can imagine a single text or article morphing into widely different media such as calendar entries, RSS feeds, email newsletters, posters etc. Each of these introducing their own potentials for playful aesthetics, reading experiences and publics. This is on the one hand interesting as a form of automation that reduces (or better: re-uses) work, but more importantly as a process which necessarily will introduce new 'forms' and aesthetics. The central tool that enables such generative processes relies heavily on the habit of writing 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. Later in this series we will further explore the potential of generative processes in the context of our Pelican driven publishing workflow. ** To be continued ** Going back to web-development basics is a way of exploring how a website and the process of making that website can become a vehicle for understanding the web. To get a sense of the compound choices that have sedimented over time into 'web design' practices and that are opaque when using ready made frameworks. Creating something from ground up instead allows one to explore the potentials and challenge the conventions of what a website should be. [^1]: Varia works via different thematic workgroups, one which is concerned with its website. [^2]: Self-hosting culture as a way to speak about network infrastructures and preferences. This is also the main subject of the [homebrewserver.club](https://homebrewserver.club), a group for discussions, learning and reflection on the practice of hosting a server from home. [^3]: Minimal not as in minimalism in design but rather understood as simple/low-tech/appropriate technologies, understood in (some) aspects of [Minimal Computing](http://go-dh.github.io/mincomp/) [^4]: Portable in the sense that it allows for multiple tranformations and media, generated by various tools and distributed to various contexts and publics. [^5]: What does a documented process mean? For whom? Currently the varia website is translated into two different languages (dual NL/EN), but documenting can also refer to other types of languages like explanatory articles such as this one, to accompany a work-in-progress to enable further reading than rather just 'reading the code'. [^6]: FLOSS, or Free Libre and Open Source Software, refers to free culture communities and the use of free licences. [^6b]: The context of varia creates a playfull space that enables us to experiment with different tools, modes of address and publishing workflows. [^7]: Pelican is static site generator software written in Python, [getpelican.com](https://blog.getpelican.com/) [^8]: Python is a commonly used object-oriented programming language, [Python](https://python.org) [^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]: [ActivityPub](http://activitypub.rocks/) is a new web standard for federated status updates. While designed around the idea of social media it can also be used to turn this website into an 'account' that can be interacted with. [^11]: [^12]: *Plain text identifies a file format and a frame of mind. (...) a kind of a systematic minimalism when it comes to our use of computers, a minimalism that privileges access to source materials, ensuring legibility and comprehension.* - A quote from: Plain Text, the poetics of Computation (2017), by Dennis Tenen - Stanford University Press ------------------ ** 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/