Howdy I'm Pixel!

My Handcrafted Site

Welcome to my first blog post! Here, I want to talk a little about my personal journey creating my website and provide some resources to others on the Internet to start their own website. I'm especially interested in reaching out to people who were like me before I started: people who don't consider themselves techy, or people who have some tech knowledge but are feeling resistance to trying to make a website from scratch when there are so many fancy websites out there.

This blog post isn't a guide itself, but I'll include guides on the bottom. I'll cover, Why?, How?, and some final words of wisdom.

Given that I've increased the margins and font size to improve readability on the site, this post looks long, but if you're willing to take some time to roll along with it, it's not too bad.

By the end of this, I hope you'll gain a better understanding of why I think having agency over one's own website is important, as well as the joy that comes from handcrafting a personal website.

What is my website?

My friend Montag suggested I point out that first of all: my website is a bunch of text files. Like a bunch of words on a piece of paper.

They've been written in HTML (HyperText Markup Language) with teeny bits of CSS (Cascading Style Sheets) and JS (JavaScript) inserted. These files are made viewable by your browser. HTML is largely semantic, so if I add <bold>semantic tags</bold>, the text is made viewable by the browser to look like what it says.

An aside about HTML The intent of creating HTML was to have an intuitive language for the web, which mainly consisted of English speakers at the time of its conception. By doing so, users can create web pages with a structure that feels easy to describe, annotations to add emphasis that feel as easy to compose as prose. It's true that it doesn't always works that way and gives English speakers an advantage. Sometimes I first write my pages in [Markdown] (https://www.markdownguide.org/getting-started/) which is even more minimal than HTML and then convert the file contents to HTML. There are screen readers that can detect these tags and interpret them, but most of the time the output is monotone as less content is crafted by a person to be understood by another person on the web, as opposed to an exchange by a seller and a buyer of a product. At this point HTML is no longer going to be updated. No new features will be added. However, this is fine, as it's already powerful (enough to be used to restore some tools built on Adobe Flash Player. HTML can be really resilient in a world where old technologies that contain digital history and culture are struggling to keep up with the rest of the bloated web and are rotting away. It's not perfect, but as the first language of the web, I still find it interesting!

Why did I make this website?

Making a website is a political act.

In the ideal world, anyone should be able to feel empowered to write and host their own website easily if they wanted to (not that they should have to), without having to be concerned about their level of education in computer science or their income.

Because of my experiences at the forefront of mainstream web design, I spent a long time not making a website. I was occupied by thinking about how things could be better, AKA paralysis by analysis. I've had experience making and managing websites with WordPress, Wix Site, Squarespace, and so on with clients who are small businesses, academic projects, non-profits, etc. I became acutely aware of how web design largely defines access in many ways: Who do we claim we serve and in what ways does our design actually (fail) to serve them? What do we know on the internet and why do we (not) know this knowledge?

At the same time I believed that I should and could make a website, I was feeling insecure about making a website, AKA imposter syndrome. Meanwhile, much of the internet I had grown up with was disappearing.

I used to envy people who were so popular on social media yet didn't seem attached to it at all. In recent years, I've moved off of mainstream centralized platforms like Snapchat, Instagram, and Discord. I felt that it was important to set boundaries around how I want to form relationships on the internet. Learning about open-source communities like those on Mastodon definitely influenced those decisions, they proved to me that we could make social change happen on online platforms built on respecting and caring for community members.

I remain a very online person, but I live on other places on the internet and try to move with intention.

There are some interesting indie web tools out there like mmm.page, hotglue, paper website, and cargo.site or blog tools like Bearblog and Grimoire that are fun to explore. However, my personal interests in creating a handcrafted website relate to considering in particular how accessible making a handcrafted site, a space that can be (re/un)claimed for one's (or ones') own on the internet, for people of marginalized identities—people who the internet wasn't built for but so much of internet only exists because of.

So I decided to engage in praxis, to actually confront those barriers I was critical of and see how far I could go. I stopped worrying about not having enough time and just decided to at least start and try, AKA SOFA: Start Often Finish Rarely.

There are huge inequities in digital literacy despite how much of our lives are becoming increasingly influenced by a virtualized environment. Furthermore, the digital world only exists because of Internet and Communications Technology (ICT) infrastructure, like fiber optic cables in the ocean or data centers on stolen land owned by private capitalist corporations, that have real impacts on the physical environment and the plants, animals, people, fungi, rocks, and others that are sacrificed as a result. I refuse the reductive notion that the life that exists in these beings turned collateral can be quantified into commodities than can have their loss be offset with a proxy equivalent.

It's important that before claiming what defines practicing "perfect" ethics on the internet that we consider power dynamics at play (such as those under racial or colonial structures). People have different reasons and relations to sharing or not sharing information online. Sometimes the reason includes the fact that even though that the internet is portrayed as an open space for the public, much of the knowledge pertaining to how the internet is heavily inaccessible to many.

Totem Project is a great place to get started if you want a brief intro on how the internet works, and has made many courses to help activists and journalists become informed on digital security without having a background in computer science (which I also don't have!).

How did I make this website?

I came into making a website with pre-existing knowledge of HTML and CSS, such as from my past work as a content creator/social media manager or from Tumblr (seriously, it taught me a lot about UI/UX for better for worse). I used good ol' W3Schools for HTML tags I didn't know or needed to brush up on. Community input from the Fediverse helped along the way as I established my website and developed an appreciation for others.

I used the Atom text editor by GitHub to start writing some HTML files. I was introduced to the editor during a hackathon I attended in high school, though I never did much at (got free food and met cool people though). Hackathons have become a way for company sponsors to influence young programmers, developers, and designers. Fret not though, there are Hackathons and Hackerspaces out there that still keep to the original ethos of hacking, tinkering, moving slow, and fixing things.

A tool that helped me while I was writing out all my code was Espanso, a text expander tool. I also use it for things completely unrelated to code, such as getting \-- to automatically turn into a — when I type. The HTML add-on is the most useful in the case of writing HTML. I then put these HTML files into a folder, which I would upload to wherever I hosted my website.

Originally, I hosted my website on GitHub for free. I needed a service to help me host my site, because I didn't have the resources to self-host a web server, which would give me some more autonomy (my friend Greyor has a good blog post about self-hosting and your options). Unfortunately, this also means I don't know as much about the details of my web traffic or the resources my site uses to be hosted. Many people host their website on GitHub Pages, however after their purchase by Microsoft, I decided to looking into a different place to host my website: Codeberg Pages, especially because they recently added custom domain (URL name) support.

I don't know a lot about git, but with this type of host, I have a public repository (folder with history) where people can see all the files from my website (e.g. git is version control). I can use a git graphical user interface (GUI) tool to push new updates to the site when I'm ready with new changes from my local (on my personal device, not the internet) folder. I used to use GitHub Desktop, and now use Fork/Atom to push commits. The public aspect makes me mindful of what I make public, and git gets me into a habit of versioning, in case I want to see what my site looked like before I made a change. With this much, I can still get by with limited CS knowledge in order to make a website.

The only cost associated with my website is the custom domain, which is a criteria of the xxiivv webring, and also provides an easier URL to type as well as allowing me to maintain the same URL identity while changing hosts. It got rid of the .github.io or .codeberg.page at the end of my domain, but some people like showing off where they're hosted! A friend recommended PorkBun to me, and they have pretty good customer service and provided an SSL certificate with the domain (what adds the "s" to HTTP, learn more about HTTP with Totem Project).

Many people on the xxiivv webring make their own static site generators, however while I think it's an amazing feat that they can minimize a lot of friction with these tools, I don't actually know how to use one let alone make one, and didn't want to worry about that when getting started. A popular SSG is Jekyll and you'll see some guides explain how to use it. I wanted to avoid tools that I didn't understand how the backend worked (under the hood), but maybe I'll switch over one day. This is also why I minimized my use of javascript, it's a language I'm not familiar with which runs the risk of me contributing to web bloat or opening up security and accessibility risks to myself or my visitors.

All that being said

I'm providing some guides which I think might be useful for someone who has no background in making websites approach it from scratch.

As I myself did not use a guide, you may find yourself seeing weaknesses in my website, or contradictions between guides. Some guides may leave you with holes that don't serve your most important values or needs. For example, I never intended to make my website a blog that people could subscribe to using RSS (more on that below) or mirrored on the gemini protocol or feature artwork—at first. Since my website started as just once HTML page, as the site has grown, I've identified that there are many ways I can improve.

Maybe you just want to get started right away, maybe you want to understand HTML and CSS first, maybe you want to think about your personal brand. So, skim through a guide, consider if the end product is similar to what you might be looking for, and then as you go through the process and learn keywords, poke around some tips and tricks.

In addition to following a guide, it might be helpful to read other's experiences with actually having the website, to understand what you want to keep in mind with your site as well, such as security, privacy, and accessibility. Some guides use techniques or have goals I would never implement because they go against my values or are outside the scope of what I'm willing to spend time on, but have advice that is easy to understand and inspires me to re-think my approach and look elsewhere. For more inspiration, you can go back to my homepage and explore those webrings I'm in, they're a great way to see that there's a whole expanse of personal websites out there that isn't reflected by what you'll get out of your first 3 Google results, AKA the Google Fallacy.

Some of these links are going to lead you to, you guessed it, even more links. It can be overwhelming—if you approach it as if you need to get through everything. But the truth is, you don't. There's no one path to making a website, so have fun experimenting with making yours reflect your interests, decisions, and relationships. In the end, there can be a great joy to creating something that you can claim as situated to your personal contexts.

Guides

Get a taste for HTML and CSS (no hosting)

Make a starter website

Tips and Tricks

Tools

Hosts

Articles/Blogs/Essays/Artwork

RSS