Deploy Static Sites with GitHub Actions on Nife | Site CI/CD Integration

Learn to deploy static sites using GitHub Actions with Nife. Automatically deploy your site on every push to GitHub.

---

Continuous Deployment Using Nifectl (CLI) with GitHub

Prerequisites

• Your site code is available on GitHub
• You have a Nife account
• You have deployed your site to Nife at least once

Step-by-Step Setup

1. Get Your Nife API Token

Retrieve your Nife API token using one of these methods:

Option A: Using nifectl CLI

nifectl auth token

Option B: From Nife Dashboard

• Log in to launch.nife.io
• Go to Settings → API Tokens
• Generate a new token

2. Create GitHub Secret

1. Go to your GitHub repository
2. Click Settings
3. Navigate to Secrets and variables → Actions
4. Click New repository secret
5. Name: NIFE_ACCESS_TOKEN
6. Value: Paste your Nife API token from Step 1
7. Click Add secret

3. Create GitHub Actions Workflow

Clone your repository to your local machine:

git clone https://github.com/your-org/your-repo.git
cd your-repo

Create the GitHub Actions workflow file:

mkdir -p .github/workflows

Create .github/workflows/main.yml with these contents:

name: Deploy Site to Nife
on:
  push:
    branches:
      - main
      - master
jobs:
  deploy:
    name: Deploy to Nife
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      
      - name: Deploy to Nife
        uses: nifetency/nife-[email protected]
        env:
          NIFE_ACCESS_TOKEN: ${{ secrets.NIFE_ACCESS_TOKEN }}
        with:
          args: "site redeploy --yes"

4. Commit and Push

git add .github/workflows/main.yml
git commit -m "Add Nife site deployment workflow"
git push

5. Monitor Deployment

• Go to your GitHub repository
• Click Actions tab
• Watch your workflow run in real-time
• See the deployment logs

Your site will now deploy automatically on every push to main or master branches.

---

Continuous Deployment Using Nife Dashboard UI with GitHub

Prerequisites

• Your site is deployed on Nife
• You have admin access to your GitHub repository

Step-by-Step Setup

1. Deploy Your Site to Nife

First, deploy your static site to Nife:

1. Log in to launch.nife.io
2. Click Create New Site
3. Provide your GitHub repository URL
4. Configure build settings:
   • Install Command: npm install (or your build tool)
   • Build Command: npm run build (or your build command)
   • Output Directory: build, dist, or public (where your built files are)
5. Click Deploy

Your site is now live on Nife.

2. Download nife.toml Configuration

After deployment, download your site's configuration:

1. Go to your Site in the Nife Dashboard
2. Click Settings or Configuration
3. Click Download nife.toml

This downloads your site's configuration file.

3. Configure nife.toml with Git URL

The downloaded nife.toml file contains your site configuration. You need to add your GitHub repository URL so Nife knows where to pull your code from automatically.

Example nife.toml:

name = "my-awesome-site"
org = "your-org-id"
git-url = "https://github.com/your-org/your-repo"
git-branch = "main"
git-provider = "github"
framework = "React"
install = "npm install"
build = "npm run build"
output = "build"

Key fields to set:

• git-url - Your GitHub repository URL (e.g., https://github.com/username/my-site) - This automatically updates when you push!
• git-branch - Branch to deploy from (default: main)
• install - Command to install dependencies (e.g., npm install)
• build - Command to build your site (e.g., npm run build)
• output - Directory with built files (e.g., dist, build, public)

The Git URL field is crucial—it tells Nife where to fetch your code from automatically on every deployment.

4. Add nife.toml to Repository

1. Copy the nife.toml file to your repository root
2. Commit and push it:

git add nife.toml
git commit -m "Add Nife site configuration"
git push

5. Generate Nife API Token

1. Log in to launch.nife.io
2. Go to Settings → API Tokens
3. Click Generate New Token
4. Select expiry duration:
   • 1 Hour - For testing
   • Lifetime - For permanent use
5. Click Generate
6. Copy the token

6. Add Token to GitHub Secrets

1. Go to your GitHub repository
2. Click Settings
3. Navigate to Secrets and variables → Actions
4. Click New repository secret
5. Name: NIFE_ACCESS_TOKEN
6. Value: Paste your Nife API token
7. Click Add secret

7. Set Up CI/CD Integration

1. In your Site in Nife Dashboard
2. Look for Setup GitHub CI/CD button
3. Click it to see the guided setup
4. Follow the 3-step configuration:
   • Step 1: Configure Workflow
   • Step 2: Download nife.toml
   • Step 3: Add Access Token

This pushes the GitHub Actions workflow to your repository.

8. Monitor Deployments

• Go to your GitHub repository
• Click Actions tab
• View workflow runs and logs
• Your site deploys automatically on every push

---

Supported Frameworks

The Nife static site deployment supports any framework that produces static HTML, CSS, and JavaScript:

• React - Build with npm run build
• Vue - Build with npm run build
• Next.js - Build with npm run build
• Astro - Build with npm run build
• Jekyll - Build with jekyll build
• Hugo - Build with hugo
• Gatsby - Build with gatsby build
• Eleventy - Build with eleventy
• Svelte - Build with npm run build
• Static HTML - No build needed

As long as your framework produces static files in an output directory, it works with Nife.

---

Workflow Explanation

Here's what happens when you push code:

1. You push to GitHub (main/master branch)
   ↓
2. GitHub Actions workflow triggers
   ↓
3. Checkout your repository code
   ↓
4. Execute "site redeploy --yes" command
   ↓
5. Nife reads nife.toml configuration
   ↓
6. Pulls latest code from GitHub using git-url
   ↓
7. Runs build command (npm run build, etc.)
   ↓
8. Deploys built files to Nife
   ↓
9. Site is live with your changes

The --yes flag automatically confirms the deployment without waiting for user input—perfect for CI/CD automation.

---

Troubleshooting

Workflow doesn't trigger

• Verify .github/workflows/deploy-site.yml exists
• Check that file is committed and pushed to GitHub
• Ensure workflow is on correct branch (main or master)

"NIFE_ACCESS_TOKEN not found" error

• Go to GitHub Settings → Secrets and verify token exists
• If missing, add it again from your Nife Dashboard token
• Make sure secret name is exactly NIFE_ACCESS_TOKEN

"Site not found" error

• Verify site exists in Nife Dashboard
• Check nife.toml is in repository root
• Ensure git-url in nife.toml points to correct GitHub repository
• Verify site name in nife.toml matches Nife Dashboard

Deployment timeout

• Check if site is very large
• Increase timeout in workflow: timeout-minutes: 15
• Review GitHub Actions logs for specific errors

Site doesn't update after push

• Verify git-url in nife.toml is correct
• Check that git-branch matches your push branch
• Ensure build commands work locally: npm run build
• Check GitHub Actions logs for build errors

---

Best Practices

✅ Keep nife.toml in Git - Version control your deployment configuration
✅ Use meaningful commit messages - Track what changed in each deployment
✅ Test locally first - Run build command locally before pushing
✅ Protect main branch - Require reviews before merging
✅ Monitor deployments - Check Actions tab after pushing
✅ Regenerate tokens periodically - Update tokens every 30-60 days
✅ Use specific build commands - Ensure your build command produces correct output
✅ Verify output directory - Make sure output field matches your build output folder

---

Environment Variables

If your build process needs environment variables, you can add them to GitHub Secrets:

1. Go to GitHub repository Settings
2. Secrets and variables → Actions
3. Add variables like REACT_APP_API_URL, etc.
4. Reference in your code normally

The workflow automatically includes all secrets as environment variables.

---

More Resources

• Find Nife Actions on GitHub Marketplace
• GitHub Actions Documentation
• Nife Documentation
• Nife CLI Site Reference

---

© Nife - Deploy anything, anywhere