Back to main page

DIY Artists, Promoters, and Venues, Build Your Own Damn Website!

A breakneck overview for hosting a custom website

Be a steward of the old web! Resist the silo’d “ecosystems” full of companies trying to exploit your data, your effort, and funnel you into their content machine. Make your own blog and own your damn castle! And do all that while not being cringe and using the website slop machines like “Squarespace” or “Wix,” which leave you stuck paying dumb fees or using shitty urls. Then you're ultimately locked into ONE company’s ecosystem who can (and will) arbitrarily change prices, change functionality, revoke access to your website, etc. Instead be cool and based and make that shit with HTML/CSS/JS like god fucking intended. It’ll be faster and more storage efficient too! Make it your own!

This is a guide for making a static website, great for blogs + DIY music and promotion. It does not go into extensive detail for all the steps, but should give you a good enough overview of everything to find things on your own. The only cost you pay is for the domain name, every thing else here is free. All the suggestions I have leave the possibility open of taking all your files, and hosting it somewhere else! With the approaches I go over, while you may (or may not) still be dependent on a company, you are always able to walk away. Don’t let a corporation have complete power over your space on the internet of things.

This blog post and all the sites on this are just text files I wrote up, with some common utility from a shared css file. If you inspect element, you can literally see everything I’m showing you. Other websites use more complicated tools so its much more obfuscated whats going on, but at its core a webpage is just some text and photos and a description of how to format it.

Make a website

Make a folder somewhere safe on your computer, then make a file called “index.html”

All valid HTML pages start like this, paste it in.


         <!DOCTYPE html>
         <html lang="en">
             <head>
             </head>
             <body>
             </body>
         </html>

The “head” part is information for your browser to use about the website, and the “body” part is the content people actually read.

What do you put in the head? Stuff like the title of a webpage and the fun little icon you see in your web browser for it. Look at the tab for this website, this is where that gets specified.


         <!DOCTYPE html>
         <html lang="en">
             <head>
                <title>TIMSHEL</title>
                <link rel="icon" href="icon.png">
             </head>
             <body>
             </body>
         </html>

With this, your title will have “TIMSHEL” and the icon will be whatever picture in your folder is titled “icon.png”


         <!DOCTYPE html>
         <html lang="en">
             <head>
                <title>TIMSHEL</title>
                <link rel="icon" href="icon.png">
             </head>
             <body>
                 Put some content-arooski here!
                 
                 <h1>Heres my neat title!</h1>
                 <p>with a sick paragraph</p>
                 <p>or two! And a list of things I like to do
                     <ul>
                         <li>eat food</li>
                         <li>see shows</li>
                         <li>blog</li>
                     </ul>
                 </p>
                 <a href="timshel.band">Here's a link to a cool website!</a>
                 <img src="icon.png" alt="and I display an image here" />
             </body>
         </html>

Above is a completely valid HTML file. That's literally it, everything is just arranging those tags. Here's an overview of said tags.

<h1> -> title tag (replace “1” with any number 1-6 to create smaller sub title tags)

<p> -> paragraph tag, separates your text

<ul> -> “unordered list” (there’s also <ol> which is an ordered list)

Lists are made up of <li> which are list elements.

<a> -> a link to another website (or another page on your website). The “href” is what it links to, and whatever’s inside is the text that gets displayed for the link.

<img> -> image tag! Whatever you link in “src” (which can be a file local to your folder, or even one from another website) will show up where that tag is.

If you want a good example of this, by god, right click on this page, got to developer tools, and "View Page Source," on any Chromium browser.

So you can see its not super crazy, just open and close tags. You may need some styling with CSS for layout stuff, but you can get a lot with pretty basic things.

And if you have other questions, the internet has a gazillion resources on this accured from over the years. I recommend looking up what a “div” is next! I also won’t dive into CSS, but basically you add a “style” tag to your head and then can run with it. But who fucking needs it!

Put it on da web

So right now, that html file is just a text file on your computer. To let other people access it, you need a server!

A “server” is just a computer thats somewhere else in the world that “serves” files to computers that request it. Whenever you access a website, all its giving you is some text which your web browser then interprets to make it look the way it does. Of course, for large tech companies, behind the scenes so much more is happening with data retrival and ads and so forth, but on a surface level its all the same thing: you connect to a computer, and it gives you some text to put on your browser.

Get a domain name

Prices can vary wildy for domains, but usually its around 12/yr. You would need to pay this anyways with a third party service if you want a custom URL.

I use namecheap which tends to give me good prices for things, but there are tons of websites available for this. They also have free “.me” domain names for students! Only found this out while researching, pretty neat.

Get a server host

I have here 3 approaches for making a server, from (arguably) least to most complicated, but the more complex you go the more flexiblity, freedom, and capability you give to yourself. I would recommend approach 2 the most!

Approach 1 (Github Pages)

If you’re willing to learn about git, which is a software for keeping track of changes (ie version control) for software, and its popular hosting platform github, you can then make use of “github pages” which will streamline the hosting process as well.

Tons of other tutorials for making a githubs page website, you may want to look into it as well, especially if you are already familiar. But their official quick start is really good here is the main quickstart tutorial for github pages

Approach 2 (Cloudflare)

Or you can have someone host it. I recommend using “Cloudflare,” which is a company dedicated to doing web services, and they have a very cool free way to host basic websites (static websites) like the one we’re making here.

For this approach, you would make an account with Cloudflare. In the developer dashboard, go to the “Compute and AI” section on the left, and click “Workers and Pages.” You’ll be making a Page. Then either setup a github repository or simply create a folder with your desired site. Back to Cloudflare, go to “Create Application.” You can choose “Upload your static files,” and you just drag in your website files to Cloudflare, and they’ll host them like a website! In the context of this tutorial, that would be the folder you have your “index.html” file in, and any css files, photos, etc. associated with it

You can also connect your Github repository to serve the website you made on there. This approach (with Github) is actually what I do for this website!

Approach 3 (Self host)

Now, there is a way for you to host your own website, on your own computer (!!!) You could buy a dedicated razzberry pi or small computer (or use a pre-existing one if you have it), or use your laptop or desktop now. The thing is that you’re responsible for keeping it up all the time. If you can do this though, it would be super cool!

This approach is the most technical, but definitely feasible! But going into it is (currently) out of the scope of this article.

My favorite example of a website doing something like this the solar powered blog lowtechmagazine. They embody what I wish the web were, and the aesthetics and ideals I wish DIY music would go for on the web. If you go to that link, the server that hosts it is an incredibly low powered computer which is solar powered. Their design decisions are based on keeping the website as small as possible and thus easy to serve, hence the dithered, low complexity photos. Isn’t that so cool??? They write about it more here. The coolest part is the website has so much personality and charm, it looks really beautiful and unique in its own way. THIS COULD BE YOU!

For this approach, you may still want to interact with a cloudflare service called Cloudflare Tunnels. With this, you are able to take a website domain, and reroute its traffic directly to a computer of your choosing without the need to port forward. From there, you can then host your website using various programs. Nginx is a very good option for this but requires some learning. This option lets you self host relatively easily with good security as well!

If you’re willing to code, you could even use Go’s built in http server functionality, and make a small program to serve files in a folder. Then use Cloudflare tunnels to connect it to the internet properly. Similar options are available in other programming languages as well, such as Python.

After some research, I think this tutorial also embodies the spirit of this approach, and is likely a lot safer and more secure! It also goes more in depth on how to do it on a Raspberry Pi.

Thank you!

I hope this opened your eyes about the possibility of a more DIY web setup. If you have questions or comments, email me at timshelbandsj@gmail.com or reach out to me on instagram I would be happy to help out artists, venues, or promoters personally if they want to make a site of their own. Now go out and stake your corner of the web!