Neocities Coding Heaven

Feelin' lazy.

Flash forward.

The year is 2025. Beans are $2.50 a pound, it's fucking hot, and AI summarizes articles written by AI.

What's the good news? You can develop your personal site locally with auto-refreshing tabs on file saves and deploy to Neocities when you push to Github. Hallelujah!

Here's how:

Auto-refreshing your browser when you save a file

If you already have Node installed on your machine, skip step 1.

1. Go here and install Node for your OS: https://nodejs.org/en/download

2. Install browser-sync by opening your terminal of choice and running:
npx install -g browser-sync

Skip step 3 if you are not intending to set up deployment to Neocities via Github (I'd recommend setting this up).

3. Move all of the files used in your website into a folder called "public."

4. To test, "cd" into your project's root folder in your terminal and run:
npx browser-sync start --server "public" --files "public/*.html"

A breakdown of the command:
- You are first telling npx to run the browser-sync package.
- Your server is reading from the "public" directory, or whatever directory you are hosting your files in (change accordingly).
- The files which, when saved, will trigger a tab refresh. This will need to be modified for your specific project. For example, I use:
--files "public/*.html,public/blogs/*.html,public/stories/*.html,public/styles/*.css,public/js/*.js"

Deploying Code to Neocities when Pushing to Github Repository

This section assumes you have a Github account and know how to create a repository. If not, please reference this article.

1. Follow this article: Deploy to Neocities Github Action

This article will teach you to:
- Create a Github action
- Create an environment variable using your Neocities API key

I had to modify my code a little bit. I would recommend copying this Github action instead of using what's in the article. Modify what you need:
name: Deploy to neocities

on:
  push:
    branches: ["main"]

concurrency:
  group: deploy-to-neocities
  cancel-in-progress: true

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Deploy to neocities
        uses: bcomnes/deploy-to-neocities@v3
        with:
          api_key: ${{ secrets.NEOCITIES_API_TOKEN }}
          dist_dir: public
          cleanup: false
          neocities_supporter: true
          preview_before_deploy: true

One thing you may need to modify is the "branches" section. The branch of the repository I wanted pushed to Neocities was "main."

2. After you're done, and assuming you've moved all of your website's files to the "public" directory, pull from your repository.

3. Make a change to your codebase in "public" and push it to your repository. Go to your Neocities page and make sure the change is reflected on your site. It might take a minute, so refresh. If it isn't updated after two minutes, begin troubleshooting.

Done!

You should now be able to both develop locally with hot reloading and push to your production website via Github! If you notice anything that needs to be updated in this blog, please shoot me an email at tungadev@protonmail.com or simply leave a comment in the guestbook on the home page.

(Bonus)

If you're familiar with aliases using bash, here's a good alias I've been using via my git bash terminal: alias tungas-house='cd "/c/Users/tunga/dev/neocities/tungas-house" && code . && npx browser-sync start --server "public" --files "public/*.html,public/blogs/*.html,public/stories/*.html,public/styles/*.css,public/js/*.js"'

This alias takes you to your local directory, opens it in VS Code, and launches a live instances of it using browser-sync. I literally just type in "tungas-house", hit enter, and away I go.

Some helpful links:

Download git bash
Aliases in .bashrc