How can I create my own archive on Neocities?
Intro
Here's how you can make a Neocities archive of your very own to put your fic/art/whatever, if you'd like to do something similar to what I did. This isn't the only way to make your own archive, however - do check out other guides, and don't be afraid to experiment! Before you dive in, however, you might want to consider a few things:
- You can't host a lot of art on the Neocities free plan - that means that if you want to archive art, videos, or anything else that's 'heavy' you'll need to host it elsewhere and embed it on your Neocities site, or pay for a Neocities subscription.
- Content on Neocities must comply with the Neocities TOS - these Terms are pretty decent, and your content shouldn't be in danger, but whenever you use any website to host content, you should follow the website's rules, including Neocities. Just because it's your site doesn't mean you don't have terms to follow. Take some time to read them.
- There are easier ways to archive your work - you'll probably have an easier time by using Wordpress or a similar platform to create a personal archive, or just archive on AO3. That doesn't mean you shouldn't use Neocities! Neocities can be a lot of fun - just figure out what your priorities are. If you want any kind of 'sophisticated' features, such as tags, searching, filtering, etc, that'll either cost you a lot of work, or just plain be impossible. But if you're planning to create something relatively simple, you should manage on Neocities just fine.
At its most basic, all you gotta do to create a page on your Neocities site is to upload an HTML file (we'll get into that below!). Each file is a page, and you can have as many, or as few pages as you'd like. You could in fact simply put every single work on your landing page and call it a day. Of course, that might result in a very long page, and it won't be the easiest to navigate. But it's your site! You could do that.
I like having a little bit more structure, by making each work be on its own page, and then create landing pages so that people can find and access those works. If you'd like a similar set up, your site should take less than an hour to put in place, plus however long it takes to archive all your works. Read on for detailed instructions!
What you'll need
Technically that's all you actually need. There's a few other things that might be nice to have open, however:
Getting started
The first thing you need yo do, if you haven't already, is to create your website:
- Access neocities.org and fill in the sign up form with some basic info about your site:
- Username: Your website's address will be yourusername.neocities.org.
- Tags: Add some tags describing what your site is about, such as 'fanfiction,' 'archive,' 'Black Sails,' etc.
- Password: Chose a strong one, don't get hacked easily! xD
- Email: You'll need to confirm access to this email later.
- Select Create My Site
- On the next page, you'll be asked whether you'd like to continue with free account, or to become a subscriber for 5 USD/month. This tutorial assumes you're using a free account
- Now, you'll be asked to confirm your email. Log in to your email account and you should have received a message titled [Neocities] Confirm your email address. Go ahead and confirm your email.
Congrats! Now you have a website. At this stage, Neocities will link you to a few resources to help you code your own website. These are good resources! Feel free to check them out if you'd like. I'll also link some further resources at the end of this guide. However, if you have zero knowledge of HTML and CSS, I recommend you save these links for later -- I'm writing this assuming you don't know anything, and I'll show you the essentials. Don't overwhelm yourself with learning how to code if you don't want to, I promise you'll be fine for now.
You can browse neocities.org to check out other people's websites if you want to. Whenever you're ready, select the Edit Site (or go to neocities.org/dashboard) to see your Dashboard and start creating your personal archive.
Site structure
Let's start by having a look at the Neocities Dashboard. This is where you'll add pages to your website, and also edit existing pages. Each page will appear here as a .html
file. To add new pages, you'll add new files. I'll show you how to do so below.
You can also upload files to use on your site if you want to, such as images, but be careful! on the free plan, you'll only be able to host 1 GB worth of content. That should be plenty for text, but if you start uploading images or other media, you'll probably run out. Consider hosting media elsewhere and embedding it on your Neocities site instead.
When you first create a website on Neocities, you'll have 4 files on your Dashboard:
- index.html - This is your website's landing page. When someone goes to yourusername.neocities.org, this is the page they'll see. This page cannot be deleted. Neocities puts some random content in here by default. You can safely erase this content later and replace it with whatever you want, but leave it be for now.
- not_found.html - Whenever someone tries to access a URL on your site and the address they type doesn't exisit, they'll be taken to this page. There's a few things you might want to add to it later.
- neocities.png - This is an image. It's here to be used on the website. Ignore it for now.
- style.css - This is a stylesheet. Stylesheets are used to easily add consistent style across several pages. I'll explain in more detail how to do this later in the tutorial.
In this tutorial, our goal is to:
- Create a good landing page for your archive, with some basic information about you, that people can use to navigate your site.
- Create a work page to archive your first work.
- Create a work listing.
- Customize your 'not found' page.
- Add other pages, if desired.
- Add some styling to your archive.
Site index
Work pages
Work listings
Other pages
Mapping and navigation
Updating your site
Making your site pretty
Basic coding resources
HTML
- https://neocities.org/tutorials
- https://www.w3schools.com/html/default.asp
CSS