Absolute beginner’s guide to Neocities

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?:
    • https://yoursite.neocities.org/about/
  • 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/
  • Voila!
Keeping each page in its own folder is also a great way to keep your website organized.


Hey, thanks for reading! If you have any questions, you can leave me a comment and I always try to reply.

If you have any suggestions on how I can improve this article, please let me know!

This website is not monetized in any way. It purely exists to help others on their web-building journey. However, if you have the means to donate toward my server costs, I have a ko-fi account where I accept tips.

30 thoughts on “Absolute beginner’s guide to Neocities”

  1. I’m getting a weird error with the index.html files in folders. For some of them, it works perfectly as your method describes, for others, it requires the index.html after the last / to load the latest version of the page. I’m not sure why this occurs. Any ideas?

    Reply
  2. thank you for this guide! i’m trying to make new pages within new folders, but i’m getting the error that i can’t add “index.html” within these folders because it already exists as a file in the home folder. am i doing something wrong?

    Reply
    • Hi! It’s possible you’re not actually in the folder before you create the file? So you have to click on the folder itself so it says the folder name at the top of the files. When you’re in the home directory this area will say “Home”. When you’re in another folder it’ll say Home > About (if your folder is named About). Once you’re in here, you should be able to create index.html! I hope this helps!

      Reply
  3. when i put the template html in my index file, it doesnt work. same for any other template ive tried. help?? ive barely done any coding besides adding a marquee image and changing my bg. 🙁

    Reply
  4. i know the crumbiest crumb of html and css and was wondering if there was a way to put a marquee image in my header section or atleast at the top of my main box area thingy? i’ve tried everything obvious and have failed. miserably.

    Reply
    • Hi! It’d be different depending on how you’re building your website. If you used my layout maker, you’d find your header id tag in the HTML (either header-contained or header-full depending on how you built it) and add a marquee tag: <marquee>Your text here</marquee> – I recommend placing the marquee inside of a div and then using the outer div to adjust the width.

      Reply
    • 1. look for the line of code starting with “html, body {” or just “body {“.
      2. then add this line:

      background-image:url(‘https://yoursite.neocities.org/yourimage.jpg’);

      3. just be sure to change the link to one that works!

      Reply
      • Thank you so much sadness! I’m so excited to start my own site. For the files that we link to (e.g. background images) – do they need to be hosted online on a site like imugr? Or can we upload the files in the neocities interface as a file? If the latter do you reccomend saving all your reference files/ images in one spot?

        Reply
        • You can upload the files onto Neocities directly! I recommend putting everything in a folder called “images” or “img” or whatever, at least until you get more comfy with custom directory structures. If you put the folder in your “root” directory (the home area), then your images will always live at https://yoursite.neocities.org/img/filename.jpg.

          You can always use this full link on your site to link to your images, but I’d recommend writing your link paths as “/img/filename.jpg” because that’s the exact same, (starting a link with / always starts at your home directory). That way, if you ever change your URL, you won’t have to update every single link heheh.

          Using imgur links or something is fine too (you need the entire url for those), it’s up to your preference! Note that Neocities free accounts have limited space, so if you wanna upload images with large file sizes, it might be an issue – but honestly unless you’re uploading high-res 3D textures, you’ll probably be fine.

          Reply
      • Thank you so much sadness! I’m so excited to start my own site. For the files that we link to (e.g. background images) – do they need to be hosted online on a site like imugr? Or can we upload the files in the neocities interface as a file? If the latter do you recommend saving all your reference files/ images in one spot?

        Reply
    • 1. look for (or create) a line of code starting with “html, body {” or just “body {“.

      2. then add this line:

      background-image:url(‘https://yoursite.neocities.org/yourimage.jpg’);

      2.5. if you created the “html,body{” for the first time, make sure to add a closing “}” at the end.

      3. just be sure to change the link to one that works

      Reply
  5. i don’t know if this guide is still active, but i would like to know how to make section changes while a part of the index is unchanged? like, changing the middle part while the header and the sidebar stay there.

    Reply
    • Hi! I think this is what you’re looking for: https://learn.sadgrl.online/put-a-navbar-or-sidebar-on-every-page/ – using a jQuery script, you can place your sidebar/nav/footer/header/etc in their own files and automatically display the same content on every page while the “unique page content” stays the same. That way when you change something in one of these areas, it automatically will reflect on every page. Let me know if you need any help figuring this out!

      Reply
    • Hi! If all of your pages share the same styles, you can save all of your CSS code in a file ending with .css. So for example, you can create a file called styles.css and paste your CSS. Do NOT include style tags here.

      Then, on the page you want to use it on, go up to your <head> tag and add this before the closing </head> tag:

      <link rel=”stylesheet” href=”styles.css”>

      This will only work if your styles.css file is in your root (Home) directory. If you want to keep it somewhere else, that’s fine, but you’ll need to have the direct path. The easiest way is to go into your Neocities dashboard, and place your style.css file wherever you like. Then, right-click on style.css and choose “copy link”. This is what you’ll want to put in the “href” field.

      In case you just mean in general… moving stuff around after you already have things in place and working can be tough. I don’t think there’s a super easy way to move things around on Neocities. I recommend just manually copying the text inside of the file, creating your new file, and pasting the text in the new location. Remember to update your path (file location) if you’re linking the CSS in your head tag.

      Reply
  6. hi! i love your tutorials so much, i have a question about the blog layout tool! is it possible to make the sidebars + content container stretch to fit their text seperately – e.g. if you have less Stuff in your sidebar, it’s shorter than your content container? thank you!

    Reply
    • Hi yes, it is possible! The only problem is, I’m struggling with how to do it exactly. Give me a couple days and I’ll see if I can find the magic line of code!

      Reply
  7. Hi!! My header is stuck as just plain white and I was wondering if I was able to change the color or input an image there instead, is that possible? Thank you!!

    Reply
    • hi! I think that’s my bad, as the image I used in my layout maker broke (I will fix it soon I promise) . All you should need to do is look at the top of the file under where it says “/*header*/” there’s a variable called

      –header-background:url(‘https://url/’);

      Just change the URL of the image in here and you should be good!

      Reply

Leave a Comment