Welcome to Neocities! Tips on Creating a Homestead

A dear friend of mine recently set up a comfy homestead for himself here on Neocities. While explaining some of the nuances of how Neocities works and things he should keep in mind, I thought it may be a good idea to write an article on the subject for both his benefit and the benefit of anyone who I inspire to join Neocities, as well as the Make the Web Great Again movement.

In this article, I will go over some elements of Neocities that are helpful to know for anyone wishing to have a site here, as well as some general resources for web design in general. I will mark specific topics with large, bold font to make it easy to skip around for anyone who does not want to be inundated with information they are already aware of. Without further ado, lettuce begin.

Nuances of Neocities Perhaps the most important thing to go over here is the way that Neocities handles website updates. Firstly, Neocities has a social media-ish aspect for each site, known as the Profile, that logs and displays updates that people make to their website and allows other people to comment and like their updates and posts, as well as follow them. You can disable this for your website by going to Settings -> Profile and checking off "Disable Site Profile", but I do not recommend doing so. It makes it more difficult for people to follow your work and by extension makes them less likely to do so.

Website updates can constitute anything from uploading a text file to adding a whole new page. However, unless you modified or added a new .HTML file, Neocities will not publicly display a notification that an update was made. More pertinently, Neocities only displays one website update every 24 hours, and the page that was the last to receive its first update will be the "face" of said update.

To provide an example in the hopes of making that awkward sentence more coherent, if you were to upload or modify pages "a.html" and "b.html" and then modify "c.html", c.html would be the "face" of that update, even if you were to later modify "a.html" or "b.html". Of course, if you were to later modify or update a fourth page, it would displace "c.html". It also means that any changes or uploads done less than 24 hours after the first one, will still be counted as part of that update.

In short, plan ahead and make sure that your other pages are good and done before uploading or modifying whichever page you want people to see first. Do not upload a fancy new page that you spent days toiling on, and then follow up by fixing a typo in an article from 3 months ago. Remember that you can always comment on your own page if you accidentally violate this rule, to inform visitors where the meat of the update is.

At some point, you may be tempted to set up a custom RSS feed to track your website's updates. While Neocities does provide an RSS feed to notify visitors about updates, it is rather limited. Aside from only listing one update per 24 hours, it also provides absolutely no information about what the update constituted. Is it a new page, or merely a typo fix?

There is an excellent guide to setting up your own RSS feed here on Neocities. Be sure to prominently link to your custom feed if you do create one, as people will be used to subscribing via the typical methods that Neocities already provides.

Moving on, Neocities does not allow any programming languages other than HTML, CSS, and JavaScript to be used, likely due to security reasons. Worry not, for as even a cursory glance at existing Neocities websites shows that it's perfectly possible to create a state of the art website without relying on fancy modern nonsense. It would perhaps be nice if Flash were available as well in addition to JavaScript, but limits can often be quite a boon for creativity.

You can view relatively bare bones statistics about how popular your website has been by going to your Profile and clicking on "Site Traffic Stats." This gives you the total amount of unique viewers per day as well as the total amount of unique page hits per day. You can look up your website's history and even download a .csv file of it, but no more detailed information is provided. Still, valuable information can be gleaned from dividing the hit count by the viewer count to see how many pages the average user looked prior to departing.

Site traffic statistics seem to be updated every day at around midnight UTC. The link there is to a time zone converter if anyone needs assistance determining what their time zone's equivalent is.

Neocities allows for you to add up to five tags for your website. These should preferably be whatever five terms best sum up your update, and would be words that someone who would enjoy your website would come searching for. If for example, you are aiming to create a 90s aesthetic, pink-coloured website with a trove of information about autism, then "pink", "90s", and "autism" would be relevant tags to use.

You may notice your website not showing up in the list of websites that Neocities spits out upon clicking on one of your tags. The algorithm used in this instance seems to filter by any unknown value. My current suspicion is that it filters out any websites that have under 10,000 views. Rest assured, it should still be immediately findable by searching for any other criteria.

I would not advise new users to overly stress about likes, hits, or views. They are absolutely no indicator of your website's quality so much as they are an indicator of luck and marketing. Just like on any other website with user generated content, there are very popular users with subpar content that reached their pedestals by virtue of successful spamming and advertising. Many great authors went decades or even their entire lifetime without becoming reknown; Edgar Allan Poe, H.P. Lovecraft, Charles Bukowski, and so on. To quote the sublime Mark Twain: "It is better to deserve honors and not have them, than to have them and not deserve them."

You can, and should, create a custom 404 Not Found page. The default 404 page that Neocities provides is as generic as can be, and does not even provide a link back to your website's index page (or wherever you may wish to guide lost visitors.) All that you have to do is create a page named "not_found.html" in your website's root directory, and Neocities will redirect anyone attempting to visit a file, page, or directory that does not exist to it.

Neocities is a free service powered by donations, and as such it can sometimes struggle or even fail to process bulk files upload. I recommend uploading files in batches of no more than 5 at a time just to be safe. Whenever I have to update the sidebar, a Herculean task on a website with over three dozen pages, I try to upload four pages at a time so that I can see that all four were uploaded on my Profile before proceeding to the next batch. Keep in mind that even for minor updates, it can take a few minutes for Neocities to display an up to date image of your webpage in your Profile. Be patient with Penelope.

Site Design (Coding)

As mentioned earlier, the only programming languages that are allowed on Neocities are HTML, CSS, and JavaScript. HTML is the easiest of these three to learn and is theoretically all that you need in order to create a website is HTML, although limiting yourself to that greatly restricts your ability to organise and decorate a website. Constructing a website in HTML is only somewhat more difficult than creating a document in Microsoft Word, differing mainly in that it requires using tags to start new lines, format text (bold; underline; italic, and so on), and start and end the document.

CSS on the other hand is what is responsible for styling and organising a website into elements. If you were to view this website without the css files, you would be greeted with a plain yet jumbled mess. The basic elements - the header, the sidebar, and the article and its HTML-powered text organisation would still be present - but they would be rendered haphazardly due to the browser not having any information in regard to what to put where. The CSS is what informs the browser how the article, the sidebar, and the header need to be positioned in regard to each other. Additionally without the CSS, the background image, colours, and borders would not exist and you would see naught but black text on a white background the whole way down.

I should add that even if you care little to nothing about the aesthetics of your website, is would still behoove you to use CSS. It saves a great amount of time and space for formatting, and enables you to make changes across your entire website by only modifying a single document. For example, if I wanted to modify the layout of every one of the in the Library of Babel section, I need only to modify the CSS file that this section uses, as opposed to going through and modifying every single one of the 15+ involved pages.

JavaScript is the most difficult language of the three to master, but it is entirely optional. It is essentially what enables you to make a website dynamic. The only example on this website as of this writing is the clickable world map accessible on the Portal or the World Map subsection. This is merely an HTML Image Map that triggers very basic JavaScript functions when specific parts of the map are clicked. Each of these scripts replaces the content inside the CSS element beneath the map to provide more information on the element whose map location was clicked on. Simple as this may be, such functionality would not be possible with only HTML and CSS.

My personal main go-to resource for web design is the esteemed W3Schools, a vast and detailed website that offers tutorials and explanations of specific functions for HTML, CSS, JavaScript, and beyond. I also sometimes utilise a selection of 90s and early 2000s era web development books that I have on hand.

Sometimes the best resource however, is simply looking at websites whose design you like and examining how they were created. Any remotely modern web browser should allow you to view the source code of a website. In Pale Moon you would right-click on the website and click on "view page source", for example. Most of the meat is usually in the CSS styling, and the website you are looking at will either link to external CSS files, include the CSS in the HTML file, or do a mixture of both. You can search for ".css" in the source code to find the location of the former, or search for the "<style>" tag to locate the latter.

Site Design (Aesthetics)

Unless you're planning to make a bare bones early 90s-esque website, you will need to have an intuitive grasp of how to use colours. If you have not yet educated yourself on colour theory, it would behoove you to do so before getting into designing your website. There are proven rules behind which colours look good together to the human eye and what emotions they tend to invoke, and it is quite beneficial to be aware of them to avoid blindly tweaking things over and over to make your website have a pleasing balance.

It can be helpful to pick a colour or two, that you feel best fit your website or a section of your website, and go from there. I personally like to use pink and purple as much as possible because they are my favourite colours. It helps that they can invoke a feeling of mysteriousness or creativity, which was my main rationale for draping the funky UFO section in them. My intent was to present autism as it actually is, which happens to be disagree greatly with its mainstream representation that most people are familiar with.

Of course, sometimes you can simply base your website on an existing design to avoid having to think about colours at all. Such was the case for the Town of ZZT which I ~~creatively~~ lazily designed to mimic a ZZT dialogue menu.

I mention this mainly because it amuses me, but the Haunted House section was something that first came to me in a dream I had where I was browsing the Web and found a Halloween-themed Web 1.0 site that resembled it. I immediately decided that I needed to create something like it upon waking up, and put "Haunted House" on the early website's sidebar in spite of having no clue where I intended to take the idea. Dreams can be a terrific source of inspiration, which is one reason I tend to write my best ones down.

If you are interested in tips on designing a 90s/early 00s era aesthetic website, I went into my personal principles about web design, as someone who was there to witness the greatness of the 90s Web, in another Babel article in much detail for anyone curious to read more about the subject.

Graphic Design

There is a plethora of resources available in terms of graphics that you can use to decorate your website, and I will list some of the best ones that I am aware of in a bit. That said, it's easier than one might be led to believe to create many types of graphics. I designed the majority of the images on this site in Photoshop and Inkscape in spite of an overall lack of drawing talent.

While Photoshop is my personal favourite program to use, it is a proprietary, paid program. If you do not have access to a corporate or student account and do not wish to pay for a graphic design program, Inkscape and GIMP are two powerful free and open source alternatives that you may want to use instead. GIMP is a regular image editing program like Photoshop, while Inkscape is a vector-based illustration program akin to Adobe Illustrator.

Drawing in Inkscape or Illustrator can seem very unnatural and difficult at first, but it can actually make it quite easy to create reasonably quality illustrations even with no drawing ability. You merely have to get used to the interface and be able to recognise patterns and shapes and know how to replicate them.

For example, the under construction sign on the Dock involved first drawing a crab and a hammer in Inkscape by looking at pictures of both and replicating the individual shapes that represent them one by one. After that, it was a matter of drawing the backbone of the sign in Photoshop, adding the text, and using filters and effects to give the impression of text painted on a wooden sign. I used photographs of signs at the boardwalk of a beach area where I vacationed multiple times as a child for inspiration, to go with the page's dock/boardwalk theme.

Now, in the interests of full disclosure, I do graphics work professionally. However, I learned everything that I know on my own via trial and error and reading online tutorials when necessary. There are a plethora of easy to follow tutorials online that can help your own graphics, while steadily learning the ins and outs of your preferred graphics program.

One other method I should mention is sketching the graphic that you would like to create by hand, then scanning it, painting over it in a new layer in Photoshop/GIMP, and then filling in the details and the shading. Even with smoothing, it can be very difficult to draw properly on a computer, and graphics tablets are cost prohibitive for most people.

Free Resources Bonnibel's Graphic Collection is a fairly massive collection here on Neocities, of graphics from all over, sorted by category.

The Horror Gif Necronomicon here on Neocities is a substantial collection of stylish, old horror-related gifs sorted by category.

GifCities is a search engine that traverses through Archive.org's Geocities website repository for gif files. An excellent way to find authentic graphics from that era.

Textfiles.com has a huge and diverse trove of Under Construction images saved from Geocities sites.

MIDIsite is a very useful search engine designed specifically to find MIDIs. While lamentably, no remotely modern browser aside from Internet Explorer and Opera supports background MIDIs, you can at least find something here to convert to OGG or MP3 for a somewhat era-authentic background tune.

Cyber Vanguard has the most massive collection of 88x31 buttons that I am aware of, weighing in at an astounding 3,182 total buttons as of this writing. If you are unable to create your own buttons, you will surely be able to find something to fulfill your needs here.

Pixabay is a vast repository of copyright-free stock photographs and illustrations that are searchable by tag.

There are programs designed to extract resources from older video games, which can be used for websites. XWE is the one I used for the assets on the Castle of Doom. Keengraph appears to be the Commander Keen equivalent.

Miscellaneous

While there are a plethora of high quality websites out there that are dedicated to a single topic, I do not personally recommend limiting oneself. The nice thing about having a website that focuses on a myriad of topics, is that you are rarely lacking in content to create. If anything, I find myself having the opposite problem - as I write this, I have in my head an article about alternatives to big technology platforms and programs, a forthcoming new website section, a Babel article about Kemetic deities and their relevance in the modern world (namely Apep), and two Dragon Ball Super fanfictions.

I see a lot of younger folks (and clueless older folks) here championing the proprietary and spyware-riddled chat platform Discord. As Spyware Watchdog here on Neocities explained, Discord is a centralised spyware platform that tracks and logs everything that its users do. We already have (and have had for decades) a free and decentralised alternative in the form of IRC. Anyone championing the ways of the old Web while trumpeting discord is misinformed at best and a charlatan at worst. I plan to return to IRC full time myself after I get my Linux server online again, and will update the Wildcat Den with that contact information once I'm back.