How to Efficiently Deploy a Website to Neocities Using GitHub Actions

Mar 7, 2024 | Programming

In the modern web development landscape, deploying your website should be as easy as pie. With the integration of GitHub Actions and Neocities, you can automate your deployment process seamlessly. This guide will walk you through the steps for setting up and using the deploy-to-neocities action to efficiently push your changes to your Neocities site.

Getting Started

Before diving into the code, you’ll need to create a workflow for your GitHub repository. This involves writing a YAML file that will define the deployment process. Here’s a step-by-step approach!

Step 1: Setting Up Your Workflow YML File

First, you need to create a new workflow file in your repository under the structure: .github/workflows/. The YML file (for example, neocities.yml) should look like this:

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@v3  
      
      - name: Use Node.js  
        uses: actions/setup-node@v3  
        with:  
          node-version: lts*
          
      - name: Install deps and build  
        run:  
          npm i  
          npm run build  
          
      - name: Deploy to neocities  
        uses: bcomnes/deploy-to-neocities@v2  
        with:  
          api_token: ${{ secrets.NEOCITIES_API_TOKEN }}  
          cleanup: false  
          dist_dir: public

Step 2: Understanding the Workflow

Think of this YAML file as a recipe for baking a cake. Each step plays a crucial role in making sure your final product is delicious (or in this case, your website is deployed correctly). Here’s a breakdown of the steps:

  • actions/checkout@v3: This grabs the ingredients (your code) from the GitHub repository.
  • actions/setup-node: Just like prepping your kitchen, this sets up Node.js, which you need for building your website.
  • Install deps and build: This step mixes your ingredients (installs dependencies and builds your site) before putting it into the oven.
  • Deploy to neocities: Finally, this is when you take your cake out of the oven and place it on the Neocities plate!

Step 3: The API Token

You’ll need an API token for your Neocities site for this to work properly. Go to this link to generate your API token: Create API Token. Then, set your GitHub repository secret called NEOCITIES_API_TOKEN with your generated token. This adds a layer of security!

Step 4: Configuring Deployment Options

In your workflow configuration, you have options for cleanup and dist_dir. The cleanup option determines whether to delete files on Neocities that are not in your specified directory. The default dist_dir is ‘public,’ but you can customize that if your files live elsewhere.

Troubleshooting Common Issues

Even the best chefs face challenges! Here are some troubleshooting tips to help you if things don’t go smoothly:

  • Make sure your NEOCITIES_API_TOKEN is correctly set in your GitHub Secrets.
  • Check if the correct branch is being pushed. The default is set to main, but if you’re using master, adjust accordingly.
  • Review the logs in GitHub Actions for any error messages during the deployment process.
  • If you’re still stuck, visit the fxis.ai community for support!

For additional insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

By following this guide, you’ll be able to deploy your website to Neocities effortlessly through GitHub Actions. Embrace automation and enjoy the time saved for more creative projects. At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Stay Informed with the Newest F(x) Insights and Blogs

Tech News and Blog Highlights, Straight to Your Inbox