Welcome

Welcome to rg-mage’s documentation page.
This page is used for the Neocities Coding Nights, hosted every month at .zip in Rotterdam (NL).

Use this page for reference. On my home page, there’s also a bunch of links to fun resources (cool gifs, text generators, code snippets etc).

If it’s your first night, please read this entire page for a good understanding. :)

Why are we here?

The internet currently belongs to big companies that dictate how we communicate, what we see and when we get to see it. Many of us are feeling fatigued. We’re dealing with addiction, ‘brain rot’, ‘doom scrolling’ and the feeling you have no agency over your content any longer.

But there are also feelings of inner creativity and longing for change!
Let’s ride the wave of the Indie Web Movement.

Before social media platforms were a thing — before 2004-ish — people used to make their own personal websites with basic HTML and CSS code. They created social circles out of these sites by linking and referring to each others’ pages, or implementing an online ‘guestbook’ that allowed you to leave comments. Finding other people’s content became an adventurous trip where one hopped over from site to site, discovering new content along the way. There was a vibrant network of people exchanging coding tips. Nothing got algorithmically filtered, but thematically things were adjacent. A webmaster decided how their page looked, and what they share on it. Some made blogs, others shared pictures or music projects. Everything was handmade, ironically you could call it ‘analog internet’.

Nowadays, we call this ‘Digital Gardening’, aka slowly building your website, adding cool things bit by bit, as if you were tending your garden. You have all the freedom to be as creative as possible, and decide on the format of your content yourself.

Digital Gardening is becoming popular again with internet veterans, as well as with Gen Z’s and Alphas. These people actively want to move away from big tech social media and AI generated content, seeking for ways to (creatively) express themselves on the web. This is the Indie Web Movement!

MTAA (1997), Simple Net Art Diagram

Geocities to Neocities

Neocities was born after GeoCities, one of the first free web hosting services (1994 - 2009). You could make a website for free and you’d get a geocities url (such as: rg-mage.geocities.org). The user sites are well known for their distinct aesthetic.

Geocities.org was incredibly popular, being the 3rd most visited site worldwide in 1999. The company was bought by Yahoo at some point and got killed off in 2009. In an effort to revive this "self-made" internet, Neocities was founded in 2013 (initially to serve as an archive to GeoCities). The Indie Web Revival Movement started somewhere around 2020/2021 and Neocities has gotten more popular since then.

Indie Web Movement

Gaining traction since ±2020
Partially because of a broader trend (resurgence of early 2000s design aesthetic)
But also as a voice against soulless social media and content platforms
"Make the web fun again"

Lots of girlies pushing the movement on Youtube

Some Cool Websites

Frutiger Aero Archive

Also check out https://neocities.org/browse and browse for a while...

To make a Neocities page, you'll need...

A Neocities Account. Go here.
A code editor, such as one of these industry standards

VS Code (owned by Microsoft)
Sublime Text
You can also use a regular text editor like textEdit on Mac, but a code editor gives you some nifty shortcuts and error checking.
Even Neocities has a built-in online code editor, but I strongly advise to always edit and store your files locally, then upload them to Neocities! This prevents you from publishing mistakes or losing your files because of server or account issues.

A local folder on your computer.
A sketch of your web layout on paper or in a design app

What should your website say or do?

Your blog.
Your hobbies / personality.
Your art.
A little game.
Images you like.
A guestbook or chatroom.
Music that you love.
Try-outs and brainfarts and weird projects.
A shrine to something you're a fan of.
Exhange 'buttons' with sites you love.
Join a webring.

Start sketching out your layout on paper! Just like sketching out a layout for your room, it gives some physicality to your design by imagining your content as blocks that need a space.

Newbie: What is a website? 1

A website is basically a folder with documents, the contents of the folder get loaded once you navigate to the website.

In a site folder, you’ll usually encounter:

An html file (such as index.html, about.html)

This is the content of your page. In this file, you specify scripts and files that need to be loaded, as well as the page's structure, content and images.

A css file (such as style.css)

Css stands for Cascading Style Sheet. In this file, you specify the styles of all your elements, such as the border color of your images, or the size of your menu.

Images and font files

Newbie: What is a website? 2

When you make a Neocities account, you’ll get a site folder with a basic setup.
Other files you’ll see in there, are:

robots.txt : a text file in which one can indicate how search engine robots index your website. You can leave it alone for now. Or: Read how to use the robots.txt file to block AI scraper bots.
not_found.html : This page is presented to the viewer when they navigate to a page on your site that doesn’t exist. This page can also be customized.
neocities.png : a png image. Allowed image files are: .jpg, .png, .gif, .svg, .ico

Newbie: What is a website? 3

Download your current site (Go to dashboard, find a download button at the bottom)
Copy the content of this zip folder to your specified local folder.
You can doubleclick on index.html in your folder, and it will automatically open in your browser.
You'll see that the url in the address bar isn't some https:// thing, but a path to your local file.
It's best practice to first code your website locally, then upload to the web for others to see.

Next step, follow this amazing tutorial for HTML: https://www.w3schools.com/html/html_intro.asp
Learn until level 'HTML id'.

For CSS, follow https://www.w3schools.com/css/css_syntax.asp until level CSS Overflow + Check out CSS Flexbox and CSS Grid further down in the menu.

Refresher: Some tips 1

Basic structure of an html file consists of:

-- One <!DOCTYPE html> 
Specifies to expect an html document. Write this at the very start of your document.

-- One <html></html> tag. 
Between these, all your html takes place, so you’ll find these tags at the absolute top and bottom of your document.

-- One <head></head> tag. 
This is where you specify meta characteristics, such as site title, scale settings and references to style sheet documents.

-- One <body></body> tag. 
Between these, you place all your site content (your structures, text, images, javascripts, etc).

Never use more than 1 set of these tags in 1 document.
A comment is made by placing <!— and —> tags around it.

-- For example:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>My website</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1"> <!— this viewport setting prevents the site from scaling down too much on smartphone —>
    <link href="style.css" rel="stylesheet" type="text/css" media="all">
  </head>

<body>
    <h1>Welcome to my cool new website</h1>
  </body>

</html>

Refresher: Some tips 2

The html file called index.html will always be automatically considered the home page (when you navigate to your neocities url, this is the first page people will see)

A css file can be used for multiple html pages. Just refer to the same document in the < head > section of each html page.

Refrain from using spaces in your folders and file names.
Use dashes or underscores instead, like so: cat-looking-out-of-window.jpg or ABC_MaxiRound.ttf

CSS Grid and Flexbox for your layout

Since 2005, css has gotten some upgrades (thank god).

Centering, aligning or distributing one element or an array of elements
Place all your elements in a ‘flexbox’ (a div element with its css property ‘display’ set to ‘flex’).
Flex has many options.
Find a great guide here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

For two-dimensional layouts (think rows and columns)
Set a div to display:grid; . Even when your grid cells are differently shaped and sized. Look at my home page for example. My widgets are placed in a grid.
A guide to CSS grid: https://css-tricks.com/snippets/css/complete-guide-grid/
The CSS grid generator tool: https://cssgridgenerator.io/

Layout Generators and resources

You can also have your grid and flexbox generated for you:
Nice and simple layout generator
petrapixel's cute neocities layout generator

More resources
I've placed my favorite text/effect/script/gif/background resources on my homepage.
Another fantastic list of resources: https://discourse.32bit.cafe/t/resources-list-for-the-personal-web/49

Social Etiquette on personal sites

Without any hotshot CEO telling you how to polarise, people came up with a bunch of different ways to link their sites to each other.

Affiliate buttons

Do you like someone's website and they like yours? Exchange buttons with each other. Place their buttons (with a link) on your site, so visitors can click on them and travel along on the web.
Make a button here, or make one yourself with an app of your choice.

Guestbook or Chat Box

Visitors can leave kind comments or message on these little widgets.
CBox is often used for Neocities pages. You'll need to create a (free) account and they'll host the server to save the messages on.
SmartGB for a more guest book like look. Same concept as CBox.

Follow each other on Neocities

Through neocities.org, it's also possible to follow users and leave a comment on their update timeline. People use this to leave compliments on each others' sites.

Webring

A webring is a small widget you add to your website to connect with a specific online community. It features a community badge (like a button or image) and navigation arrows that let visitors browse to neighboring sites within the same ring. To join a webring, Visit the webring's official website. Submit a request to the webmaster for approval. Once approved, your site will be added to the webring's directory, and you'll be assigned neighbors automatically.

Rotterdam webring

I've built a webring. A webring is a social system of linked web sites.
The webring manager (in this case rg-mage) adds your website url to their webring database. Then, when you place the webring button on your site, you can click on 'previous' and 'next' to visit your webring neighbors.

Old school webrings from 1999.

There are many webrings.
Melonking built a webring that floods your site with water.
But I was missing one for Rotterdam-made sites.

To join the webring, tell rg-mage your website url, and add the following code to your page: There is more info on the Rotterdam Webring page!