10.14.24 - How to build a website like this (three hours)
Maybe you found this website and thought, hey that's pretty cool, how do I make something like that. Let me tell you, it is so damn easy and I want to make it even easier. Here are the steps.
Get a grip on What Websites are
Lots of abstraction these days. This may seem basic, but some people really don’t know the very basics. We are often many steps removed from how things actually work. Because things get more complex over time. And this enfeebles us.
Websites are files. That exist on a computer somewhere (or are “hosted on a server”). That computer has a private address where you can reach it and access the files. You can buy a website name from many services that make a public addresses, and points to your private address.
So first you need files, then you need somewhere to host them (unless you’re a pro, don’t host them on your own computer because its dangerous), then you need a public address to those files.
My friends, this is what a pure HTML, one page site looks like. https://motherfuckingwebsite.com
So that's one file, with a dedicated address. If that page had a link on it, that went to another page, it would be two files.
Here's another very basic website to help you get the idea: http://info.cern.ch/hypertext/WWW/TheProject.html
Every page there is just a another html file. That's all it all was ever meant to be.
Now look how that basic idea can be used for a blog (obviously) https://thricegreat.neocities.org
All you need is a one file where you'll keep all of the links, which will be your homepage file, and then a type of file for your posts that you duplicate and use over and over again. It's really extremely basic
You Need an HTML homepage (or INDEX page) & Styles Page
I don’t know HTML that well, but if you’re semi-competent, you can figure it out. I asked ChatGPT to give me HTML code for a basic home page with a three item menu bar, a title, and basically nothing else. Then I asked it to make a styles CSS file where I could customize the colors, font, etc for the homepage.
For complete noobs (I basically am), CSS files are where you can customize the look of a basic website. It makes it so you don’t have to adjust the parameters in individual HTML files. You just have to make sure the HTML files and your CSS are in the same folder and your computer knows what to do. Then you have a site like this: http://bettermotherfuckingwebsite.com If you want to learn a bit more on HTML, this site looks helpful: https://mayborg121.github.io/xs/
I googled some things, noodled around with the code, and adjusted. In case you don’t have ChatGPT, I made it even easier for you. Look below.
Just start with this code
Here is template code for a basic home page, a sample blog, and your CSS file for customization. Name this index.html Name this about.html Name this post1.html Name this styles.css
If you read that, and thought "oh I don't know how to code I'm not going to do that" you're the problem with society. Kids in the 90s were doing this. No you don't need special software. You just put it in a text app that's already preinstealled into your computer. It will open in your browser as a website looking thing. Its completely free. No you don't need technical knowledge. Just copy and paste it and see what happens, trust me!
Copy that code, paste it in textedit or notepad or any equivalnet basic software. Save them with the provided file names, put them all in the same folder (important!). Now open each file in your browser too. Have the text files and the browser side by side. You should see a template of a website. Fuck around the code in the text file. It's even commented with some instructions here and there. Then refresh the browser. You’ll see how the site changes. You’ll figure out how it works. It’s really really basic.
Write some posts
Write a few stupid posts. First, populate the post1 file. Then copy that file, name it post2, write a new post. Make sure to reflect that in the list on the index file. Just do that a bunch of times. Again,mMake sure to links to them in the index file, rename them as necessary, etc. Look at my first post. It was literally nothing. Just get started!
Customize the site and click around
Play around with the CSS until you have something that you like. There’s a lot of things you can do. Use google. HTML is free, easy, and very powerful. I kept things simple but there’s a lot of shit you can do. And if you have ChatGPT, it can do cool things too. See these examples I made it make.
Now, click around your site on the browser. Make sure all your links work. Make sure it’s all clean. If all your posts are on index, and they all open to the right file, you're golden.
Make an account on CloudFlare
Make an account on CloudFlare. Learn how to use it. It’s very basic. Go to workers and pages. Create a new project. Title it. You’ll see a place where it says “create a new deployment.” Go ahead and upload the folder where you kept all the files for your website.
CloudFlare will give you a free URL by the way, a pages.dev URL based on your project title. So now you basically have your own website already! Congrats!
Buy a Domain Name
This is easy. Google how to do it. I bought mine on NameCheap. .xyz domain names are dirt cheap. Like a few dollars a year.
Next, you’ll have to link that domain name to your project in Cloudlfare. This was a little bit complicated for me, and it took just a tiny bit more time than the other steps. But you can figure it out in a couple of hours even with no technical background. One hour.
Voi La! You have a simple but shitty website.
You literally have a website now. It cost you a few bucks and maybe a few hours.
Now this architecture is extremely simple. It’s literally a folder you upload to Cloudlfare and that’s it. I think there are more complex ways to do it, but I’m a law student not an engineer, so I don’t bother. I don't use github or anything. I just drag the entire folder and redeploy the site when I want to update it.
Also, with this method, the changes you make on one HTML file will not be represented on others. So, if on your INDEX page you change your website title, that won’t reflect on your blog post pages. If you change the hyperlink of your email on one page, it won’t do it on other pages. They’re all their own little HTML pages that don’t reference each other. You’ll have to use find and replace to make such identical changes on each page.
The only unified thing you have is your CSS. A change you make on the CSS should reflect on all the pages, per the template I offered.
So, if you have a very basic setup, like I do, it doesn’t matter. I don’t plan to change my menu, my footer, or my title, ever. If I want to make new sections of the website I’ll just have to add them to my index page.
This architecture also gives you an idea of why the early internet looked how it did, and why navigating old websites was sometimes like navigating a maze. People would just build on top of what they had. Especially regular old people. Look at links.net for an example of how things get fucked up over time.
But it’s charming. I don’t care. Yes, Wordpress and those interfaces avoid these issues. But I don’t want to use them. I want to do it myself. And maybe if I want a more sophisticated architecture I’ll just learn the coding skills to do it. I know there’s way to make it smoother with JavaScript, fetching other html pages, etc.
But why should I do it like this
Why would you do it any other way? You want to use square or wix or something? Go ahead. You have chosen to be a cog in a larger machine. You can do it all yourself extremely simply. And elegantly. And tastefully.