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