Reading time: 2 minute(s)
Neocities is a free static website host where you can make your own site creation to share with the world! It’s a little intimidating for first-time users, so I made this guide to hopefully make it a little easier.
This guide assumes you have NO or LITTLE experience with building websites. Please leave a comment if you have any feedback about it!
- Go to Neocities and create an account. Once your account has been created, log in.
- The first time you log in, you’ll be taken to your Dashboard.
- This is where you will see updates from other websites you follow.
- For now, click on the red Edit Site button at the top right.
- This will take you to the area where you make your site. At first, it will look a little like this screenshot (but emptier):
- Click on the area outlined in red – this changes the view, so it’s a little easier to read. Now it should look like this:
- This is the interface you will use to build your website. A website is really just a folder that exists on a server somewhere.
- This Home screen is your “folder”. You can upload or create files & folders inside of your folder.
- Look for a file called index.html and click on the Edit option beside it. The index.html file in your Home folder is your homepage. It is the first page people will see when viewing your website.
- Hop on over to my layout maker and create a layout structure that you think looks good, using the tools at the top of the page. When it looks good, click generate HTML.
- Go to your index.html and remove everything between the <body></body> tags (keep the stuff at the top!)
- Save & preview your page.
- Now you can go back to your index.html and change the text between the HTML tags.
Tip: An HTML tag looks like <this></this> if you're unsure! Anything inside of <> is an HTML tag.
Tip: If you're unsure of where to edit, look at the tags! I tried to include helpful class="" and id="" names for each area.
- To change the colors/images/look and feel of your website, look between the <style></style> tags and change the values right underneath root.
Tip: For your colors to work, you need to generate hex codes for colors. You can do so here or with this browser extension.
Creating Other Pages
Okay, so index.html is your homepage, but what about your other pages? You have to make them!
How you create your pages will impact how your links look when you share them.
- Go back to your Edit Site page so you are in your Home folder.
- Click on the red New File button and name it about.html
- Then, go to https://yoursite.neocities.org/about.html
- There’s your page! Now you can go back and edit that file to make it look how you want.
- Perhaps generate a new page with my layout maker, or use the same one as a ‘template’ but change your custom text.
- But what if you’d rather have your url look like this?:
- Then, instead of using your about.html file, click on New Folder. Name it about.
- Inside of that folder, click on the red New File button. Name it index.html.
- Then, go to https://yoursite.neocities.org/about/
Keeping each page in its own folder is also a great way to keep your website organized.