Tiger on The Web

The original can be read on my Tumblr blog.


How (and Why) to Start Creating Your Own Personal Website Using Neocities:

Published: 14/08/2023

Last Updated: 14/08/2023


Why make a website?

The indie web is a tight-knit community focused on creativity, education, and freedom. By creating your website yourself, you can do whatever you want with it and go wherever you wish. You can participate in the wider community, or you can keep to yourself, but from by the very act of making your website you will be helping to keep the indie web alive!

Personal websites have become less common as the web has changed; social media is much more accessible and provides immediate gratification, but I firmly believe that the personal website should not be left behind. With your own website, you will not be caged in by sticking to certain designs, having to pay premiums for access to certain features, or only being able to share certain formats. You will not be under the jurisdiction of some social media CEO. Your creativity won't be dampened by restrictions or uniformity put on by social media platforms. You can do whatever you want, forever.

As most of you know, social media is volatile these days. Platforms always have some risk of being shut down, changed completely, or abandoned. With a personal website, you will always have control over it. Hosts may go defunct, and with that you may lose something, but as long as you keep an updated folder containing your website (Neocities offers a way to download your entire site like this) you will be able to reupload it under a different host, over and over, you can also host a site yourself with some technical knowledge! I won't go into webhosts here because I'm not familiar with them, and this is about Neocities, but it is a positive in having your own handmade website.

A personal website can be anything you want to make it: a blog, an education resource, a place for manifestos and activism, an art gallery, a place to host essays, a place to infodump about your interests, a place to tell someone all about an original world you created, a shrine to your favourite character or piece of media, just something that looks pretty, all of the above. You have full reign on what you create, what you share, and where you share it. You're limited only by your coding expertise and your imagination.

There is no like count on personal sites - unless you add them - giving a semblance of privacy and less pressure to create. Webrings, fanlistings, and forums can allow for a more natural way of meeting others who like the same things as you. Neocities in particular functions as half web-host half social media: other Neocities users can follow you and comment on your profile, unless you remove the ability to.

I will always recommend the personal website as pretty much the pinnacle of self-expression on the internet. It is slower than social media, it is more time-consuming, the rewards will not be instant, but I promise that having all of your creations and interests on one website will be worth it in the long run. I love clicking through my own site and seeing everything I've made for it: it really gives a sense of accomplishment that is difficult to achieve elsewhere. I still get feedback on essays which were written months ago. I've received emails from strangers telling me that things on my website resonated with them deeply or helped them to discover themselves.

When people visit your website they have the ability to explore and see everything at once, so nothing gets buried under algorithms and newer posts. This also means you don't need to battle an algorithm to be seen. Your creations can change people even years later. A website will be a testament to you (or to anything you choose) that can be easily archived, easily edited, easily moved, and easily shared.


Introduction:

Exactly one year before I began writing this guide (13/08/2023) I started creating my personal website. Using my inspiration sparked from Othercon 2022 panels and the resources provided within them, I finished the first version of my website. The site was bare-bones at the beginning but over the months I added more pages, I hosted essays of my own, made a gallery for my artwork, created web shrines, and eventually upgraded from the template I was using to a design I hand-coded myself.

Upon entering Neocities, I had no clue what I was doing. I remembered very little HTML from my computer science lessons in school. I had never been introduced to CSS or web design as I never needed to use them before. All I had was determination to create and a dream, which is the case for most people interested in where to start with their own website.

Obviously, I've only been doing this for a year. I've been working on it casually. I have no formal qualifications in web development and no tech experience in terms of a job. I will say right now that I am not a professional, I don't know anything outside of static sites hosted on Neocities, and I'm writing purely from my personal experience with getting to the point I’m currently at. My website is not very highly technical and as such I do not know much more than making a base of operations that is simple but looks good to others. You do not need to take any of this as gospel, these are steps that helped Me and may help You. If they don't help? If you don't want to follow something? If you find something better? Throw the suggestion out, you won't offend me! I will link resources from people much more experienced than I am, and anyone reading this on Tumblr is welcome to fill in the gaps.

I'm writing this because I've learned a hell of a lot over the past twelve months and I found it an extremely rewarding experience; I know exactly what it's like to face the task of building a website when you know fuck all about what to do and where to start, and I wanted a personally-created guide to hand to people I'm trying to get to join me on Neocities. So, below I'll outline some basic steps with explanations, resources, and personal anecdotes to hopefully make the idea of website-building a little less daunting.


Step one and two can be completed in whatever order you wish. I decided what I wanted to do before I learned how to code it. Others prefer to get a grasp of the allowances and limitations of the code they're working with before they decide what the website will be like.

Step One: What do you want to do with a website?

Making a website is a slow process that can be frustrating at times. Make peace with the idea that at the start it will not look perfect. It's perfectly fine for things to be off, for the site to not be up to the standard of front-page popular ones. Keep going and over time you'll see results in terms of your skills. The best thing you can do for yourself is to start. Start and keep working on it. Make this website for yourself, not to please other people, you will find more of an incentive to learn by working off an idea of "wouldn't it be neat if this was on my website" and "I would love to write about this topic that interests me even if nobody I know is interested". People will appreciate your sincerity and enthusiasm, even if they don't understand the topic, or if your website isn't insanely complex and beautiful.

Come up with a list of website titles and URLs you'd like to use. It may be good to make the title and URL match, or make your URL match your best known social media handle, so people can recognise you easily. I would make sure you're 100% about your branding before you start, because it's difficult to go back on that once you get some repute. Once you've decided, hop onto Neocities and create your account to save the URL you want.

While you're on Neocities, take some time to check out the landing page that sets out the most followed websites. After that, take a look at the recently updated websites, as well as searching for any topics you're interested in seeing. If someone's website stands out to you, give them a follow! On your main feed, you will see website updates as well as short comments from the websites you follow; people use the comment feature to update their followers on any important developments, and to comment praise or questions on others' profile pages.

Here's where you can start to think about what your website will feature. Something you may want to do is create a document, a list, or a set of drawings where you come up with ideas of what you want the theme to be and what kind of creations you're most interested in sharing. Do you want it to be a diary? A collection of resources? Somewhere to read non-fiction or fiction writing? Somewhere to put your art, a webcomic, or other visual project? Do you want a generalised personal website where anything goes?

Take a look through the aforementioned Neocities website list, see what other people are putting on their websites, and take note on how these things are presented. Memorising some common website designs and layouts will help you imagine one for your own website.

If you are planning to hand-code the whole thing rather than use a template (there is one linked further down), sketching out designs will help you to create a mental image of what you're going to be creating in the CSS aspect of your website. Looking into things like flexbox and taking inspiration from other Neocities websites will help prevent you from designing something that's impossible to (easily, at least) make. If you're familiar with the inspect element or view source tool, this may help you to see what sort of things people are writing in the code to get their website the way it is. You can take inspiration this way, but don't copy-paste anything without asking first.


Step Two: Learn the fundamentals of the languages you need

There's a few ways to do this. You can go away and learn from sites that teach you, working through their pre-prepared assignments/activities, or you can pull up a cheatsheet and some resources and learn on the go. I picked up on HTML by using cheatsheets while I built my pages, and I got the hang of CSS by working through freeCodeCamp's Responsive Web Design Certification while applying what I learned to my own webpages. Some people won't mind doing unrelated activities, but I personally learned best by picking up knowledge as I ran into issues in my own project. Doing this kept me motivated and less prone to losing focus out of boredom and frustration.

Here are some other suggestions for learning how to code:

What if I can't understand / don't want to learn CSS right now?

Many people starting out will edit the Sadgrl layout template to put their content on. I started with this. There's no shame in taking this route. Personal websites are great for the content hosted on them, not necessarily the technical skill used in designing them. If you are just starting out it can be too intimidating to hand-code everything. Just as a rule-of-thumb, you should use whatever extra tools make the jump to managing a website less difficult. I do not know all of these tools, but they are out there.

What about JavaScript?

I can't give any advice about JavaScript. I have been meaning to learn and haven't gotten around to it. I will say I haven't needed it yet - if you just want a static site to host text and a simple art gallery on, you most likely don't need to learn it immediately, if at all. For this reason, I don't want to add a section on it that will be poorly researched and possibly incorrect.


Step Three: Put it all together

Neocities has a browser editor, so you could very easily do the entirety of your coding within Neocities itself. Aside from small edits, I would not recommend doing this. I advise keeping your site files on your machine for preservation reasons (if Neocities ever went down, your only record of your site would go with it), and I advise doing the bulk of your coding locally due to the way the site bumps yours to the top every time you save a change and everyone can see what you're up to. Nothing wrong with this feature, I just thought it was too scary for everyone to see exactly what I was doing while I was messing with code and breaking everything.

There are a million different code editors, and you can pick whatever works best with your hardware and with the way you work. There are countless Reddit posts, articles, and forum threads discussing the different software. I use the most simple way: Notepad. I use Linux, so my specific program is FeatherPad, though it functions the same way.

Open a new file, save it as .html or .css, and start writing your code. If you want a preview, right click the HTML file and open it in your browser. To see your changes in the form of a webpage, save your file and refresh the browser. There are different, more specialised, programs that will offer things like live previews, automatic brackets, and correcting syntax, but personally for my purposes I found them too slow and unwieldy for my low-end laptop.

For the first few months of creating my website I actually used an iPad because I had no access to a computer of my own. The experience was awful and finicky but I am saying this because if that's your only option, it is possible to work with. There are lots of different apps to check out, both paid and unpaid, I personally used Code Master and copied and pasted my work onto Neocities when I wanted to update.

Your HTML/CSS fundamentals should have covered the main bit of how to write the code, but here's some extra guides that will come in handy:

Here's a step-by-step guide to starting a html document.

Here's a guide at making your website responsive. Some people skip this part and encourage viewers to look at it on a computer rather than a phone, but I would suggest at least making important resources and text accessible to those on mobile if you're hosting things like that.

If you run into any tricky errors, or just don't know how to do something specific: google it! The internet is vast, and there are many, many free resources for web development. The beauty of computer science is you can find this stuff everywhere, for free. There are countless forum threads full of people's coding problems. Your issue will be in there, and a lot of the time you can just copy someone's solution to put in your own code no harm done.

Create as much in this step as you're happy to. You can create a homepage and work from there, or you can create a few pages. You will make many updates and changes to the site over time, don't worry about having a huge amount of content on here before it's 'worthy' of being seen.


Step Four: Publish it! Get yourself out there!

Once you've got your pages ready, upload them to your site on Neocities! This guide will walk you through doing that.

You will get traffic simply from updating your site, but if you want more traffic from specific people I recommend linking your website to your social media, adding tags to your website that explain what it's focused on, hosting your creations on there and directing others to them, following other websites and interacting with them, participating in forums where you can link your website in a signature or profile, joining webrings, and participating in events run by other users. Here are some suggestions I have, but this is definitely not all the indie web has to offer! Look around at what webrings or fanlistings other sites have joined, and join them too.

Many webmasters recommend other websites by placing a personalised button, made by the owner of the target website, on their own website. This button is an image 88 pixels in width, 31 pixels in height, and functions as a link directing to your homepage. You can make this in an image editing program of your choice, or with this tool.

It will take time for people to notice you, but once you get a few followers it snowballs. Don't worry if it takes a while to get to this point! Keep creating whatever you want, updating your site, and sharing it with others. You will get somewhere you're happy with.


Conclusion:

I hope that this document can help you to visualise a path to creating a website. It's a tough thing to start, but something I have not regretted at all. I'm open to answering questions but can't guarantee I know everything. Good luck!

If you end up creating a Neocities website of your own, follow me there or comment or something, I'd love to see what you create.


Extra Resources: