Free shipping on orders over $50 · Digital guides delivered instantly
GoodBetterBest
Maintenance Guide

Manual Website Updates

Learn how to download, edit, and update your website manually when Manus credits are unavailable. This guide covers everything from setup to deployment.

1. Download

Get your website files from Manus

2. Edit

Make changes using VS Code

3. Test

Preview changes locally

4. Deploy

Upload to your hosting

1

Getting Started: Download & Setup

1
Access Your Manus Project Dashboard
Navigate to your project to download the source code.
  • Log in to your Manus account at manus.im
  • Find your Good-Better-Best Nutrition project in your dashboard
  • Click on the project to open its management panel
  • Look for the 'Code' or 'Files' section in the sidebar

💡 Tip: Bookmark your project dashboard for quick access in the future.

2
Download Your Website Files
Export all your website files as a ZIP archive.
  • In the Code/Files section, look for a 'Download' or 'Export' button
  • Click to download all files as a ZIP archive
  • Save the file to a location you can easily find (like your Desktop)
  • The download includes all code, images, and configuration files

💡 Tip: Create a dated backup folder (e.g., 'website-backup-2024-01-25') to keep track of versions.

3
Set Up Your Local Environment
Install the tools needed to edit and run your website locally.
  • Download and install Node.js from nodejs.org (LTS version recommended)
  • Download and install VS Code from code.visualstudio.com (free code editor)
  • Unzip your downloaded website files to a folder
  • Open VS Code and select File > Open Folder, then choose your website folder

💡 Tip: VS Code is free and works on Windows, Mac, and Linux. It's the most popular code editor for web development.

4
Install Dependencies
Set up all the required packages for your website.
  • In VS Code, open the terminal (View > Terminal or Ctrl+`)
  • Make sure you're in your project folder (the terminal should show the folder name)
  • Type 'npm install' and press Enter
  • Wait for all packages to download (this may take a few minutes)
  • You should see a 'node_modules' folder appear in your project

💡 Tip: If you see errors, try running 'npm install' again. Some packages may need a second attempt.

5
Run Your Website Locally
Start a local development server to preview changes.
  • In the VS Code terminal, type 'npm run dev' and press Enter
  • Wait for the server to start (you'll see a URL like http://localhost:3000)
  • Open your web browser and go to that URL
  • You should see your website running locally!
  • Changes you make to files will automatically refresh in the browser

💡 Tip: Keep the terminal open while working. Press Ctrl+C to stop the server when you're done.

2

Updating the Free Resources Section

This section specifically covers how to add new ebooks and downloadable resources to your Free Resources page.

1
Locate the Resources Page File
Find the file that controls the Free Resources page.
  • In VS Code, look at the file explorer on the left side
  • Navigate to: client > src > pages > Resources.tsx
  • Click on Resources.tsx to open it in the editor
  • This file contains all the resource definitions and page layout
2
Understand the Resource Structure
Learn how resources are defined in the code.
  • Look for the 'resources' array near the top of the file
  • Each resource is an object with: id, title, description, category, icon, downloadUrl, fileType, fileSize
  • The 'featured' property (true/false) determines if a resource is highlighted
  • The 'downloadUrl' points to where the file is stored
3
Add a New Resource
Copy an existing resource and modify it for your new ebook.
  • Find an existing resource object in the array
  • Copy the entire object (from { to },)
  • Paste it after the last resource in the array
  • Update all the fields with your new resource information
  • Make sure to add a comma after the previous resource if needed
4
Upload Your Ebook File
Add your PDF or ebook file to the project.
  • In VS Code, navigate to: client > public > resources
  • If the 'resources' folder doesn't exist, right-click on 'public' and select 'New Folder'
  • Drag and drop your PDF file into this folder
  • Update the 'downloadUrl' in your resource object to match: '/resources/your-file-name.pdf'
5
Test Your Changes
Verify the new resource appears correctly.
  • Save your changes (Ctrl+S or Cmd+S)
  • Check your browser—the page should automatically refresh
  • Navigate to the Free Resources page
  • Verify your new resource appears and the download works
  • Test on mobile view too (use browser dev tools or resize the window)
Example Resource Object
Copy this template and modify it for your new resource
{
  id: "new-guide",
  title: "Your New Guide Title",
  description: "A helpful description of what this guide contains and who it's for.",
  category: "Recipe Guide",
  icon: Utensils,
  downloadUrl: "/resources/your-guide.pdf",
  fileType: "PDF",
  fileSize: "2.5 MB",
  featured: false,
}

Available icons: Utensils, Clock, Heart, Leaf, BookOpen, FileText, Star

3

Deploying Your Changes

Once you've made and tested your changes locally, follow these steps to make them live.

1
Build Your Website
Create optimized files for deployment.
  • Stop the development server if running (Ctrl+C in terminal)
  • Run 'npm run build' in the terminal
  • Wait for the build to complete
  • A 'dist' or 'build' folder will be created with your optimized files
2
Upload to Your Hosting Provider
Deploy your updated website.
  • Log in to your hosting provider (Vercel, Netlify, or other)
  • Find the deployment or upload section
  • Upload the contents of your 'dist' or 'build' folder
  • Wait for the deployment to complete
  • Visit your live website to verify the changes

Frequently Asked Questions

Required Tools

Node.js
JavaScript runtime (download LTS version)
VS Code
Free code editor from Microsoft
Need More Help?

If you run into issues or need assistance with more complex changes, consider these options:

  • Wait for your Manus credits to refresh for AI-assisted updates
  • Search for tutorials on YouTube for specific tasks
  • Hire a freelance developer for complex modifications

Ready to Explore More?

Check out our free resources or learn about other monetization options.

Free ResourcesStripe Setup Guide