How to code locally

June 2, 2022

It's suprising that a lot of people on Neocities don't do this. It's way easier to code locally than directly onto the Neocities code editor, at least in my opinion. If you like the built-in code editor then no worries~

Coding locally means your files will be saved on your device's storage, and not in Neocities' servers. The benefits of coding locally are:

  1. You will have a local copy of your files, so you won't lose progress in case your Internet connection dies
  2. Save and reload your page almost instantly (good for people with slow Wi-Fi)
  3. You won't have to upload your file to Neocities (by clicking "save" in the editor) just to see if something changed on your page
  4. No one will see your WIPs (embarrassing!)
  5. Your site won't have 135468541321 updates despite having zero content
  6. You will have an easier time coding and managing your files

First you would have to get yourself a code editor. There are a lot of code editors out there and it all boils down to preference. You could even use Notepad like they did in the 90s (but that's even worse than Neocities' editor.) The most popular ones I hear of are Brackets, Visual Studio Code, and Sublime Text (the one I use). Download one of these.

Creating a "Home" folder/directory

Now that you have a code editor, open your file explorer and create a new folder somewhere. Name it something, like "My website" or whatever. Pretend this is your local Neocities Home folder.

This is my home directory on my computer

Its contents (some folders are not for you to see unfortunately)

If you already have some files in your Neocities Dashboard ("Edit site"), go to your Neocities Dashboard, and at the bottom there should be a link that says "Download entire site". You will get a .zip file of your entire site. Right click and Extract the .zip file, and in it you should have a folder with all your site files. Move your files to your local Home folder.

Creating a file using a code editor

This part is fairly easy and you could try figuring it out yourself actually.

Open your code editor then select 'File > New file'. It should create a blank file. It does not have any file type. Hit 'Ctrl + S' to save the file, and your code editor should be asking you what to name the file. Name the file whatever you want. But make sure to stick the extension at the end to determine its file type. '.html' for HTML files, '.css' for CSS files, '.js' for Javascript and so on... This is one way to let your code editor know what programming/mark-up language it's working with. Without it, your file won't have pretty colors in the editor.

Alternatively, you can just select the file type using the dropdown menu beside "Save as type"

Viewing the file on your browser

Open the folder where you saved your file. If you double click it or open it, it should open up your browser. If it doesn't, right click > 'Open with...' > choose browser of your choice. The link on the address should be the file path of your file.

That's all~ You're coding locally now! Now no one will ever see your page drafts and troubleshooting your code will be much easier. Have your file open in your browser and just switch back and forth between it and your code editor using 'Alt + Tab'. Make sure to save your files before refreshing the page with 'Ctrl + R' to see its changes.

Note: scripts using jQuery won't work locally (at least in my experience), so you'd need to upload your file to Neocities to test it.

Note 2: Remember Neocities Dashboard doesn't support uploading nested folders. Be careful...