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.
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
featured_image: /images/this.gif
tags: workgroup, web, publishing
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], 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'.
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**
<small>The varia website unfolding over time.</small>
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.
##Static site
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.
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.
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.
<small>Schematic overview of the main differences between a static and a dynamic website.</small>
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 every time 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 whereas dynamic websites depend on recurrent computation. A website based on storage has some advantages for performance, security, portability and reproducibility that we will address 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.
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.
<small>The varia server in the space, where various self-hosted services are installed.</small>
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.
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. That also means the web server doesn't become a liability in terms of exploitable plug-ins or databases like in popular systems such as Wordpress. Once it has been generated, it is very much a case of set and forget.
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.
In essence the minimal file-based website is contrary 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 web design decisions on a specific situation in terms of hardware and hosting location.
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
**Generator**
The static HTML documents that together make the varia website are not manually written in the html language, but are generated out of a set 'plain text'[^10] documents. This *generating* aspect allows for multiple ways to engage with the texts and images that we publish. It is a promising way to think about possible transformations of plain text into not just web pages but different media altogether.
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 of the needs for transformability comes from the fact that our website exists in a context where usage of the web has atrophied to the point where one is required to publish on or via social media in order to reach an audience at all. However, politically we are not interested in dedicated profiles on social media platforms for our organization. This is a clear decision driven by a strong desire to self-host and own our content, yet allowing to let that content be referred to comfortably within social media as well. The technique of the generator allows us to do this[^11].
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.
Working with generative processes also triggers our interest and enthusiasm for exploring other publishing tools. 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.
<small>This article in its plain text 'view', showing the markdown mark-up language.</small>
Later in this series we will further explore the potential of generative processes in the context of our Pelican driven publishing workflow.
At the center this processes relies heavily on the habit of writing in markdown, a mark-up language that allows one to add styling information to plain text, so that it can be read by both people and a variety of tools. The markdown files can be archived using versioning tools[^12] or easily converted into different formats using generators. The content of the website, in its 'raw' form, 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. Using this process makes it possible for our source files to remain simple, fluid and archivable.
** To be continued **
##Concluding
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.
Revisiting static sites and taking all these small steps feels like going back in time. However, revisiting web-development basics in this sense becomes a vehicle for understanding the web of these days. To get a sense of the compound choices that have sedimented over time into 'web design' practices and that remain opaque when using ready made frameworks. Creating an on-line publishing work flow 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.
[^1]: Varia works via different thematic workgroups, one which is concerned with its website. We use the word 'group' here, which only works if you consider two people to be a group already. Current website work group members are Roel Roscam Abbing & Manetta Berends.
[^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.
[^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/)
[^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.
[^4]: *Portable* in the sense that it allows for multiple transformations 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'.
[^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.
[^6]: *FLOSS*, or Free Libre and Open Source Software, refers to free culture communities and the use of free licenses.
[^6b]: The context of varia creates a playfull space that enables us to experiment with different tools, modes of address and publishing workflows.
[^6b]: The context of varia creates a *playful* 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/)
[^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)
[^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)
[^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.
[^10]: *"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
[^11]:
[^11]: For example by generating meta tags in our web page following [Open Graph](http://ogp.me/) or [Twitter Cards](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards.html). These provide previews of one's page when a link is published on social media or in mobile apps. Right click on any page and view source to have a look. The OG headers are at the beginning in the `<meta>` tags.
[^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
[^12]: The source files of the varia website are stored in and tracked by a Git versioning system. You can access these files through this [Gitea interface](https://git.vvvvvvaria.org/varia/varia.website/commits/branch/master), where you can read the markdown documents and follow the changes that are being made. For example: this article can be found [here](https://git.vvvvvvaria.org/varia/varia.website/src/branch/master/content/what-a-website-can-be.en.md).
summary: Deze website is gebouwd met een statische site-generator. Dit artikel gaat in op de implicaties van zowel het maken van een 'statische site' en 'generatieve' publiceer processen.
featured_image: /images/this.gif
tags: werkgroep, web, publiceren
*Dit artikel is in het Engels geschreven, [klik hier voor de volledige versie](/en/what-a-website-can-be.html).*
----
Tijdens het maakproces van een website voor varia, werd het duidelijk dat we niet *alleen maar* een website wilden maken. Het werd een moment om het proces te onderzoeken en te verkennen wat een website kan zijn.
<small>De varia website in de loop der tijd.</small>
