Methods Of Publishing HTML

In the last week of the Solidarity Infrastructures class, we made a webring using Lichen-Markdown — but a self-hosted server with Lichen-Markdown is just one (fairly esoteric) way of making HTML websites. For folks who are new to website making, I wanted to also point to some other ways to make and share a website, that are also portable from Lichen-Markdown, meaning that in the future, if you want to move your website out of Lichen-Markdown and use a different tool you can do this without losing your past work or data — additionally the languages you lean to style a website in Lichen-Markdown (HTML, CSS and Markdown) will also be the same with most other website-making tools.

So this will be a tutorial briefly mentioning other ways of making websites, self-hosted and otherwise. The preceding tutorial on making a website with Lichen-Markdown is here.

The topics discussed in this tutorial will be:

  • Handwriting HTML

  • my_webapp for Yunohost

  • Github Pages

  • Publishing A Website With May First

  • Self-Hosting A Website Without Yunohost

  • Publishing A Website To Arweave, IPFS or ATProto

    \

source: https://www.are.na/block/19965098
source: https://www.are.na/block/19965098

Handwriting HTML

Lichen-Markdown has been referred to as a halfway house between a CMS (content management system) and handwriting HTML. With a CMS, you use the interface of the CMS (like Lichen-Markdown, Wordpress or Processwire) to create and edit the pages on your site. Often with a CMS there is a graphical interface that lets you do things like add images, tables or other even-more-complicated widgets and components. Lichen-Markdown is a "halfway-house" because it doesn't provide many graphical extras (like many other CMS), but it does let you edit and create pages through a web interface, and use a layout for the whole site (which you can modify by editing header.md, footer.md, and layout.php) which lets you make changes to this general layout in one place (which is not possible with handwritten HTML).

With handwritten HTML, each page is totally independent, so to change something about the header of every page of the website, you would need to individually edit the header of each html file. But if you have just one, or a small number of pages, on your site, this could be a fine approach. Everest Pipkin even hand-updates the RSS feed for their site.

Fundamentally, a handwritten HTML website is a folder of files — files of HTML, CSS and images. This is why Melanie Hoff refers to the whole internet as one giant interconnected Folder Poem. A folder of files for a website can also include Javascript files, but these are only necessary if the website has interactive components.

The most basic handwritten HTML site is a single HTML file, for example you could create a file on your laptop called index.html and start writing HTML into it with your text editor (e.g. Sublime). You could then open this file in your browser and see your website.

Handwriting HTML is not usually my preferred way to make a website, because of the repetition it can involve, but I think it can be a great way to learn, and the experience of the simplicity and directness of handwriting HTML was definitely an inspiration for Lichen-Markdown and the appreciation of other small and simple website making tools (e.g. https://codeberg.org/thgie/awesome-small-web-publishing).

Some more resources on writing HTML and CSS are here, as well as in these videos by Laurel Schwulst (Basics of HTML, Basics of CSS). Here is another interesting resource about HTML and boundaries made by Melanie Hoff.

I wanted to start by talking about handwriting HTML, in part because a key part of the rest of this tutorial is based on the fact that most of the website-making tools mentioned (Lichen-Markdown, static site generators) actually produce a folder of HTML which is exactly the same as if it had been hand-written.

Such a folder of HTML can be viewed locally on your computer using your browser. You can double click the HTML files to open them in your browser, or you can start a small local web server to "serve" the whole folder as a local website. To serve a local folder as a website, in the terminal run the following commands:

cd path-to-your-local-website-folder
python3 -m http.server

You can then view your website by navigating to http://localhost:8000 in your browser.

The other five sections of this tutorial are about ways of sharing such a folder on the public internet, which is why this tutorial is titled "Methods Of Publishing HTML". But for any of the methods, the first-step is creating a folder of HTML, CSS files and assets (images, audio files, etc.) that represents your website. There is also a tutorial here about how to export a folder like this from Lichen-Markdown. Such a folder is sometimes called a "static website" or a "static artifact" or a folder of "static assets". Such a folder can be viewed locally with your browser, and the next question is how to make such a folder visible on the public internet.

source: https://www.are.na/block/1705980
source: https://www.are.na/block/1705980

my_webapp For Yunohost

Yunohost provides an app which can be used for serving a folder of static files as a website — aptly named "my_webapp".

You can install my_webapp through the Yunohost admin interface just like any other yunohost application, and it will create a folder on your server which gets served as a website at the domain you chose for my_webapp. You then just need to copy over your static website files from your laptop into the folder on your server served by my_webapp. Copying your website files over to the server can be done using sftp, scp or rsync. TODO: each of these should link to a tutorial on how to use them for this.

Thus, using my_webapp, you can create a website folder on your laptop using any tool that you want (a static site generator, handwriting HTML, etc.), and then copy over the result to your server to be served as a website via my_webapp. Just using mojojojo-style repetition here for clarity.

source: https://www.are.na/block/3402988
source: https://www.are.na/block/3402988

Github Pages

While copying over a folder of HTML files to your yunohost server to be served by my_webapp is in some ways more general than using Lichen-Markdown, it is still a pretty esoteric way to put a website on the internet. We are not self-hosting fundamentalists here, so I also want to leave a pointer to an easy and more conventional way to serve a website.

Github provides a free way to publish your static website onto the internet called Github Pages. There is a tutorial about how to use it here, as well as many other places on the internet.

source: https://www.are.na/block/3061132
source: https://www.are.na/block/3061132

Publishing A Website With May First

As a middle-ground in between self-hosting your own website, and publishing your website to Github Pages, you could also get a May First membership for ~50 usd/year, which comes with other perks, and then also publish your website to May First. Here is a guide on how to copy over your website files to your May First server after you've signed up: https://help.mayfirst.org/en/guide/how-to-connect-to-your-website-host-with-ssh-or-sftp (although a more beginner-friendly guide could be made and perhaps I should contribute one).

source: https://www.are.na/block/17864967
source: https://www.are.na/block/17864967

Self-Hosting A Website Without Yunohost

This method is also left as a pointer to know about rather than as a detailed guide. But I just want to mention that on a self-hosted server, you also do not need to use Yunohost or "my_webapp" to serve a website.

A more "traditional" way to serve a website from your server would be to use a web server on your server directly, like nginx or apache. For example here is a guide on how to serve a website on a server using nginx. If you want to learn more about servers and hosting, trying to serve a website on your server with plain debian via nginx would be a good learning exercise. In the backend, yunohost actually uses nginx as its webserver, and this is exactly what my_webapp is a wrapper for.

source: https://www.are.na/block/2244272
source: https://www.are.na/block/2244272

Publishing A Website To Arweave, IPFS Or ATProto

A theme of this tutorial is that a folder of HTML files is actually a very versatile, archivable and portable format which can be published and used many different places.

Each of the methods listed so far still involved publishing a website to one particular place. This last section is pointing to possibilities of publishing a folder of HTML files using some type of distributed protocol.

Many people have explored this, although none of these methods are particularly popular yet. Arweave in particular makes a lot of claims on their website that seem really questionable to me (as I've written about here), but they do also have some interesting ideas. Here is a tutorial on how to publish a website to IPFS using pinata. I'm still researching if you can only write Markdown to white-wind or if there is some other way to publish HTML to atproto. So far none of these methods have resonated with me as more compelling than publishing a website to the World Wide Web, but I wanted to leave this note mentioning the possibility of publishing HTML via other protocols, and as an open-ended question.

source: https://www.are.na/block/20666932
source: https://www.are.na/block/20666932

Publishing As A Relational Practice

After spilling so many words about different technical methods of publishing HTML, I wanted to end this tutorial with a link remembering that publishing is ultimately a relational practice. May all our html divs contribute towards that.

https://livingbooks.mitpress.mit.edu/pub/u72nuu61/release/1 (actually this link is not my favorite, and if you know of a different essay or article about publishing and community weaving, please send it my way)

source: https://www.are.na/block/32331057
source: https://www.are.na/block/32331057