Gatsby构建部署至Digital Ocean后导航404及资源缺失问题

Let’s break down your problems one by one and work through fixes step by step:

1. 404 Errors When Clicking Menu Navigation #

This is a super common quirk with static Gatsby/React sites—client-side routing doesn’t play nicely with default server behavior. Here’s how to fix it depending on your Digital Ocean setup:

If you’re using Digital Ocean App Platform: #

• Head to your app’s settings and locate the Routes section.
• Add a catch-all route rule: set Source to /* and Destination to /index.html, then save the changes. This tells the platform to serve the main entry file for any route, letting Gatsby handle the client-side routing logic.

If you’re using a Droplet with Nginx: #

• SSH into your droplet and open your site’s Nginx config file (usually stored at /etc/nginx/sites-available/your-site.conf).
• Inside the location / block, add these lines:

  try_files $uri $uri/ /index.html;
  

• Save the file, test the config for errors with sudo nginx -t, then reload Nginx with sudo systemctl reload nginx. This ensures any unknown routes fall back to the index.html file instead of throwing a 404.

2. Missing Bootstrap CSS, Other Styles, or JS Files #

This almost always boils down to path misconfiguration or incomplete deployment. Let’s check these key points:

• Double-check Gatsby’s path settings: If you’re deploying to the root domain (which you are), make sure gatsby-config.js doesn’t have an incorrect pathPrefix set. Omit this field entirely or set it to an empty string "" to avoid path conflicts.
• Re-build and re-deploy properly: Sometimes old build artifacts cause issues. Run gatsby clean first to wipe cached files, then gatsby build to generate a fresh production bundle. Upload the entire public folder to your Digital Ocean server—don’t just upload changed files, as missing even one asset can break styles/scripts.
• Fix server file permissions (for Droplets): Ensure Nginx can access your static files. Run these commands to set proper ownership and access:

  sudo chmod -R 755 /path/to/your/public/folder
  sudo chown -R www-data:www-data /path/to/your/public/folder
  

• Validate Bootstrap integration: If you’re using Bootstrap via npm, confirm it’s imported correctly in gatsby-browser.js or your main layout component:

  import 'bootstrap/dist/css/bootstrap.min.css';
  

  If you’re using a CDN link, double-check the URL is valid and accessible from the server.

Quick Pre-Deployment Check #

Before deploying again, run gatsby serve locally and test every feature—navigation, styles, scripts. If everything works here, the issue is definitely in your deployment configuration or file transfer process.

内容的提问来源于stack exchange，提问作者Yashaswi Maharshi