Website Moved!

Created: February 10, 2023
Updated: February 10, 2023

I hated the workflow of Neocities, so I'm moving to independent hosting!

Basically, this website's directory looks like a bunch of nested folders. Every single webpage is named "index.html". However, whenever I tried to upload nested directories to Neocities (folders inside folders,) it would all get squashed to a single layer. This meant every time I wanted to update Neocities, I had to reupload every folder individually.

I think I would rather die than do that again! But I am SUPER proud of the workflow I have set up here. Let me explain.

Neocities to GitHub

This entire website is now hosted as an Eleventy project on a GitHub repository. Only the "source" files are saved to this repository; the compiled, "usable" HTML and CSS isn't uploaded at all.

Instead, a GitHub Action executes every time the source files update. This Action compiles the code automatically. It then uses a SSH keypair to authenticate with my server and synchronizes the files from there.

Some resources that helped

Holy shit, I did a lot of Googling. Do you ever have a use case so niche that no guide out there does it the way you want? I had to teach myself to write my own GitHub Action through this process. Thank god it's not too hard.

The code

I'm not sure how much this will help, because my use case is EXTREMELY specific. But here is what the GitHub Action looks like.

name: Eleventy Deploy
on: 
  push:
    paths-ignore:
      - README.md 

jobs:
  build-deploy:
    name: Eleventy Build
    runs-on: ubuntu-latest
    steps:
      - name: Git Checkout 
        uses: actions/checkout@v2

      - name: Node.js Setup
        uses: actions/setup-node@v3
        with:
          node-version: 16

      - run: npm install
      - run: npm run build

      - name: Install SSH Key
        uses: shimataro/ssh-key-action@v2
        with:
          key: $
          known_hosts: unnecessary
          config: $

      - name: Adding Known Hosts
        run: ssh-keyscan -p $ -H $  >> ~/.ssh/known_hosts

      - name: Deploy with rsync
        run: rsync -avz -e "ssh -p $" ./public/ $@$:~/public_html/.

Basically:

  • SSH into your server using your authentication method of choice. (I have a Namecheap Stellar Hosting subscription, so I used cPanel's terminal.)
  • CD into your ssh folder (usually "~/.ssh")
  • Run 'ssh-keygen -t rsa -b 4096 -C "YOUR_EMAIL@provider.com"' and save it with whatever name you like.
  • Add the public key to your authorized_keys.
  • Download the private key.
  • Add these five secrets to your GitHub repository:
    • SSH_PRIVATE_KEY: The private key you downloaded.
    • CONFIG: Optional configurations. I had to add ssh-rsa to both HostKeyAlgorithms and PubkeyAcceptedKeyTypes, both on the client and server, just to get it to work on my server.
    • SSH_PORT: The port you are using to SSH. For Namecheap it's 21098.
    • SSH_HOST: The IP address of your server.
    • SSH_USER: The user you use to SSH into your server.
  • Save this yaml file somewhere in (your repo)/.github/workflows/.
  • Commit and push changes to GitHub.

I'm not gonna explain these steps in depth; I recommend the articles and Google. It'll probably take a lot of trial and error (it took me two days) but I think this workflow is a million times better than the Neocities thing.

That's all for this blog post.

Hypercard computer icon