Guide to update Astro vulnerabilities

Table of Contents

Overview

After git push, you may see this message below. This guide creates a branch to update NPM and Astro, verifies the website is working, merges the changes, and pushes the new changes to the remote repo.

GitHub found _ vulnerabilities on <USERNAME.github.io>’s default branch (_ high, _ moderate, _ low). To find out more, visit:

https://github.com/<USERNAME>/<USERNAME>.github.io/security/dependabot

Notes

# git pull is shorthand for
git fetch
git merge

# Only check for new commits. Outputs nothing if there are no updates.
git fetch

# Start the local dev server to see the site before changing anything
npm run dev

# Stage all changes in the entire working directory
git add -A

# Install any compatible updates to vulnerable dependencies
npm audit fix

# Verify the remote URLs
git remote -v

Begin

Open the Terminal view in Visual Studio Code (MacOS: Control + `)

Check the current state

# Get the current Astro version
npx astro --version
npm ls astro

# Compare installed Astro with the newest version
npm outdated astro

Create a branch for the update

# Create and switch to a new branch
git checkout -b fix/deps-astro-<X.X.X>

# Rename the current branch
git branch -m fix/deps-astro-<X.X.X>-new-name

Upgrade Node.js

# Find out how Node was installed (if path showed ~/.nvm, then nvm)
which node

# Install the newest LTS (Long-Term Support) release of Node
nvm install --lts

# Switch this terminal to the LTS version
nvm use --lts

# Confirm the switch worked
node -v

Reinstall dependencies and upgrade Astro

# Delete installed packages built for the old Node version
# Navigate to project folder
rm -rf ./node_modules

# Reinstall dependencies with the new Node version
npm install

# Upgrade Astro
npx @astrojs/upgrade

Build and fix errors


# Bundle the site for production in `dist/`. Errors can show up right away.
npm run build

# Confirm the upgraded version
npm ls astro

# Check the project for known vulnerabilities
npm audit

Test the built site

# Serve the built `dist/` folder; `-- --host` exposes it on the local network
# Remember to use `npm run build` first
npm run preview -- --host

# Apply edit to file: .github/workflows/deploy.yml
# Uncommented `with:` under `steps:` and set `node-version: 24`
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout your repository using git
        uses: actions/checkout@v4
      - name: Install, build, and upload your site
        uses: withastro/action@v3
        with:
          node-version: 24

Commit, merge, deploy

# Review which files changed and which are staged
git status

# Commit the upgrade on the branch
git commit -m "Upgrade Astro to <X.X.X>, build with Node 24, fix unclosed link"

# Switch back to master
git checkout master

# Bring the upgrade branch's commits into master
git merge fix/deps-astro-<X.X.X>

# Push master to origin/master, which triggers the GitHub Pages deploy
git push