A Recipe to Your Own Home-Coded Personal Website

website credit to rocktype on neocities

Being born and having grown up in a generation where algorithms decide what you see online, I feel that the art of making the good 'ol personal webpages has been forgotten, but I'm here now to share a secret old recipe passed down to generations of web users by my internet seniors before their passi--okay I should stop now.

I'm just writing a simple "recipe" - or guide - to making your own personal website like how you would have in the internet of the 2000s. There isn't really that much drama to it. However because this is what I've decided to be my style of writing this article for the yesterweb zine I'm going to talk further about why you should make a personal website of your own, recipe blog style. If you wish to skip out on that part, click here.

So. Web 2.0.

Like I said earlier, I grew up into an internet where algorithms decide what shows up in your little feeds and push content and ads in your face. "Social" platforms outright intend for user engagement instead of socializing, and all that. Clean, single feeds that bring only posts formatted in just a short video, a box with a character limit that doesn't even fit a full sentence, or the same square photo posts that limit you to like, four images seen at first glance. In these content types it's you that has to adjust to a set, limited format.

And you can't even customize your own profile on sites like those! Your only options for customization are a banner, an icon and maybe that's just it! Every user you click on has the same preformatted, sterilised, minimal page, and maybe a different header and circular icon. On most of them they (the sites) don't let you share other people's posts/content/whatever to show others that you liked them. You only get a plain Like button that only the Algorithm picks it up and shoves into other people's faces.

The personal web, however, lets you authentically share the stuff you like, and customize your own page to your liking, from the usual header and icon to the background and layout and content!

It's kind of like a home-made website, like a home-made meal instead of getting it store-bought and ready to consume. There's a sort of joy in getting to manually create the site of your own where you have the freedom to add anything you want onto it, much like a homemade meal has that special touch to it.

And that's ultimately why I want to share this right now, recipe blog style. While I may not have had the experience firsthand to make a website back in the web 1.0 days, my expereince making my own website very recently is like getting taught a favorite secret family recipe that I'd like to share with generations to come, something that you may or may not want to modify, or enjoy as is.

So, if you're still with me on this website making process, read on for the 'recipe' to your own personal website!

Personal, Web 1.0 Style Website info:

a screenshot of a personal website
website credit to illuminesce on neocities

yield: one creative website of your own creation!

difficulty: up to your own judgement, personally for me it’s like, 2.7 on a scale of 5

prep time: based on your own schedule! personally the coding took about a week with prior html knowledge, and additional tweaks and new additions would go for as long as you add on to your website!

The Ingredients:

  • html and css editor
  • website hosting source
  • your own creativity and imagination
  • graphics

The Process:

Your “Thing”

  1. Find a hosting server for your website. For starters, I’d recommend neocities, but there are also other sites you can choose from like:
    • github pages
    • ichi.city
    • glitch
    • tumblr - yes, I know this is a Big Social Platform but if I’m going to be honest it’s pretty neat that you can make custom themes and pages for your theme (you can find it in appearance settings → customize website theme → add a page), and it’s the Big Social Platform that I think is the closest to the old web concept of sharing and having your own customizable space on the internet
  2. Gather your ideas for what you want your site to be about. It can be a combination of one or more of these!
    • blog
    • curated links
    • build a web shrine
    • personal homepage
    • art showcase
  3. [for personal homepages] Ideas for what stuff you can add!
    • short about
    • sitemap
    • blinkie/button/stamp wall
    • links to your friends on neocities
    • links you want others to see
    • updates section
    • adoptables
    • your own button/s
    • links to where else you can be found on the web
    • guestbook

The “Structure”

  1. Learn html and css. If you already know how to, you can skip this part! But for beginners here are some places to start:
  2. Decide on a site layout. Maybe you can make a sketched layout on paper or on a digital sketchbook. If you’re a beginner to html you can find simple themes:
  1. Start coding! Start by coding the structure, like the main header, containers, etc. and then adding on the decorations as you go on. Tips:
    • you’ll be embedding images, adding links, and using the div containers a lot.
    • you can use jquery to load the same stuff from one page to every page to make things simpler, like for navigation bars, etc
  1. Make your website accessible!
    • add image descriptions to your graphics and images using the “alt” attribute.
    • add content warnings to your website in case it contains flashing images, gore-y images, etc
    • make your website responsive - meaning it can be viewed on both mobile devices and desktop browsers. It’s alright if you don’t know how to code this yet, but at least put it somewhere in your content warnings that the site is best viewed on mobile/desktop.
    • read more about web accessibility here

The “Decorations”

This is the fun part. For this section you get to decide on what your website will be designed like! Try not to think of this section as something you have to do after you code your site; decorating your site goes hand in hand with coding it!

  1. For the first step think about what themes, colors, or aesthetics you want to see in your site. Below are some ideas:
    • pastel - bright, pastel colors, cute pixel art galore
    • dark academic - muted browns and greens, pale colors, books and architecture
    • homey/room-ey - furniture graphics, pictures of your favorite stuff, your favorite colors!
    • old web - simple layouts, windows xp/95 style graphics, buttons and gifs
    • horror - black and red color schemes, halloween themed graphics and fonts
    • and many more!
  1. Find your graphics!
    1. general resources - masterposts/masterlists/link pages for graphics, websites, and other stuff you can use to decorate your site!
    1. buttons
    1. dividers
    2. misc graphics
    3. fonts
  2. Put your graphics onto your site! If you're feeling stuck on how to further improve how they look, here are some resources and references!



This article was created by Ryan's Recs/Hallways