📁 PROJECT STRUCTURE & FILE GUIDE

Complete Overview of Your Website Files

---

🗂️ FILE STRUCTURE

MTJ_Website/
│
├── 📄 START_HERE.md                    ← READ THIS FIRST!
├── 📄 NETLIFY_QUICK_START.md          ← 5-minute Netlify deploy guide
├── 📄 NETLIFY_DEPLOYMENT.md           ← Complete Netlify guide
├── 📄 PRE_DEPLOYMENT_CHECKLIST.md     ← Checklist before deploying
├── 📄 PROJECT_STRUCTURE.md            ← This file
├── 📄 README.md                       ← Full documentation
├── 📄 QUICKSTART.md                   ← General quick start guide
├── 📄 DEPLOYMENT.md                   ← General deployment guide
├── 📄 LOGO_INSTRUCTIONS.txt           ← How to add your logo
│
├── ⚙️ CONFIGURATION FILES
│   ├── _quarto.yml                    ← Main website configuration
│   ├── netlify.toml                   ← Netlify deployment settings
│   ├── custom.scss                    ← Theme color customization
│   ├── styles.css                     ← Custom styling
│   └── .gitignore                     ← Git ignore rules
│
├── 📝 CONTENT FILES (Website Pages)
│   ├── index.qmd                      ← Home page
│   ├── services.qmd                   ← Services page
│   ├── pricing.qmd                    ← Pricing page
│   ├── webinars.qmd                   ← Webinars & Training page
│   ├── about.qmd                      ← About/Why Choose Us page
│   └── contact.qmd                    ← Contact page
│
├── 🔧 HELPER FILES
│   └── build_website.R                ← R script to build website
│
└── 📦 GENERATED (after running quarto render)
    └── docs/                          ← Built website (deploy this!)
        ├── index.html
        ├── services.html
        ├── pricing.html
        ├── webinars.html
        ├── about.html
        ├── contact.html
        ├── site_libs/
        └── [other generated files]

---

📚 DOCUMENTATION FILES EXPLAINED

Essential Reading (Read in this order)

1. START_HERE.md
   • First file to read
   • Quick overview of the project
   • Immediate next steps
   • Links to other documentation
2. NETLIFY_QUICK_START.md ⭐
   • 5-minute deployment guide
   • Simplest method (drag & drop)
   • Perfect for beginners
   • Use this for fastest deployment
3. NETLIFY_DEPLOYMENT.md ⭐⭐⭐
   • Complete Netlify deployment guide
   • Both drag & drop and GitHub methods
   • Custom domain setup
   • Troubleshooting section
   • Post-deployment tasks
4. PRE_DEPLOYMENT_CHECKLIST.md
   • Things to check before deploying
   • Content verification
   • Link testing
   • Performance checklist

Reference Documentation

5. README.md
   • Complete project documentation
   • How to customize the website
   • General deployment options (all platforms)
   • Maintenance guidelines
6. QUICKSTART.md
   • General quick start guide
   • Not specific to Netlify
   • Alternative deployment options
7. DEPLOYMENT.md
   • Detailed deployment guide for all platforms
   • GitHub Pages, Netlify, Vercel, own server
   • DNS configuration
   • SSL setup
8. LOGO_INSTRUCTIONS.txt
   • How to add your logo
   • Logo specifications
   • Where to place the file
9. PROJECT_STRUCTURE.md
   • This file!
   • Overview of all files
   • What each file does

---

⚙️ CONFIGURATION FILES EXPLAINED

_quarto.yml

Purpose: Main configuration file for your website

Contains: - Website title and description - Navigation menu structure - Page layout settings - Theme configuration - Footer content

When to edit: - Change website title - Modify navigation menu - Update footer information - Add/remove pages

Format: YAML (indent-sensitive)

---

netlify.toml

Purpose: Netlify deployment configuration

Contains: - Build command: quarto render - Publish directory: docs - Security headers - Performance optimization

When to edit: - Usually never! It’s pre-configured - Only if you need custom Netlify settings

Format: TOML

---

custom.scss

Purpose: Theme color customization

Contains: - Primary brand color (#0047AB) - Secondary colors - Font settings (if customized)

When to edit: - Change brand colors - Modify color scheme

Format: SCSS/CSS

Example:

$primary: #0047AB;  // Change this to your color

---

styles.css

Purpose: Custom styling for website components

Contains: - Hero section styling - Card layouts - Button styles - Responsive design rules - Form styling

When to edit: - Modify component appearance - Adjust spacing/padding - Change hover effects - Customize layout

Format: CSS

---

.gitignore

Purpose: Tells Git which files to ignore

Contains: - docs/ folder (generated files) - Temporary files - System files - IDE files

When to edit: - Add new files to ignore - Usually don’t need to edit

Format: Plain text, one pattern per line

---

📝 CONTENT FILES EXPLAINED

All content files use .qmd extension (Quarto Markdown)

index.qmd

Page: Home
URL: / or /index.html

Contains: - Hero section with tagline - Company statistics (200+ projects, etc.) - Overview section - Service cards - Why choose us features

When to edit: - Update statistics - Change hero message - Modify overview text - Update feature descriptions

---

services.qmd

Page: Services
URL: /services.html

Contains: - All service descriptions - Statistical consulting - Training courses - Data management - Research support details

When to edit: - Add new services - Update service descriptions - Modify service categories

---

pricing.qmd

Page: Pricing
URL: /pricing.html

Contains: - Complete price list - All services with costs - Package deals - Payment information

When to edit: - Update prices - Add new services - Modify packages - Change payment details

---

webinars.qmd

Page: Webinars & Training
URL: /webinars.html

Contains: - Upcoming webinars - Training programs - Registration information - Past webinar recordings

When to edit: - Add new webinars - Update dates and times - Remove past events - Add new training programs

---

about.qmd

Page: About / Why Choose Us
URL: /about.html

Contains: - Company overview - Expertise and values - Technology stack - Track record - Testimonials

When to edit: - Update company information - Add new testimonials - Update statistics - Modify value propositions

---

contact.qmd

Page: Contact
URL: /contact.html

Contains: - Contact information - Phone numbers - Email addresses - Physical address - Contact form - Social media links - FAQs

When to edit: - Update contact information - Modify business hours - Add/remove contact methods - Update FAQ section

---

🔧 HELPER FILES EXPLAINED

build_website.R

Purpose: R script to help build the website

Features: - Interactive menu - Build website option - Preview option - Check installation

How to use:

source("build_website.R")
main()  # Shows interactive menu

When to use: - If you prefer using R/RStudio - For checking installation - For guided building process

---

📦 GENERATED FILES

docs/ folder

Created by: quarto render command

Contains: - All HTML files (one per page) - CSS files (compiled from scss/css) - JavaScript files - Images (if any) - site_libs/ folder (dependencies)

Important: - This is what you deploy to Netlify! - Don’t edit files in this folder directly - Regenerated each time you run quarto render - Not tracked in Git (.gitignore)

Deploy this folder: - Drag to Netlify: Drag the entire docs/ folder - GitHub: Netlify reads from this folder - Own server: Upload contents of this folder

---

📝 FILE FORMAT REFERENCE

.qmd (Quarto Markdown)

Used for: All content pages

Syntax:

---
title: "Page Title"
---

# Heading 1
## Heading 2

Regular paragraph text.

- Bullet point
- Another bullet

[Link text](url)

Learn more: https://quarto.org/docs/authoring/

---

.yml (YAML)

Used for: Configuration (_quarto.yml)

Syntax:

key: value
nested:
  key: value
  list:
    - item1
    - item2

Important: Indentation matters! Use spaces, not tabs.

---

.scss (Sass CSS)

Used for: Theme customization (custom.scss)

Syntax:

$variable: #0047AB;

.class {
  color: $variable;
}

---

.css (Cascading Style Sheets)

Used for: Styling (styles.css)

Syntax:

.class {
  color: #0047AB;
  padding: 10px;
}

---

🔍 FINDING WHAT YOU NEED

“I want to change…”

…the home page content → Edit: index.qmd

…service descriptions → Edit: services.qmd

…prices → Edit: pricing.qmd

…upcoming webinars → Edit: webinars.qmd

…company information → Edit: about.qmd

…contact details → Edit: contact.qmd

…website colors → Edit: custom.scss and styles.css

…navigation menu → Edit: _quarto.yml

…footer content → Edit: _quarto.yml (page-footer section)

---

🎯 COMMON TASKS

Deploy Website

1. Run: quarto render
2. Drag docs/ folder to Netlify
3. Done!

Update Content

1. Edit relevant .qmd file
2. Run: quarto render
3. Deploy updated docs/ folder

Change Colors

1. Edit custom.scss (primary color)
2. Edit styles.css (component colors)
3. Run: quarto render
4. Deploy

Add Logo

1. Save logo as logo.png in root folder
2. Run: quarto render
3. Deploy

Add New Page

1. Create new .qmd file
2. Add to navbar in _quarto.yml
3. Run: quarto render
4. Deploy

---

📱 AFTER DEPLOYMENT

Your deployed website will have these URLs:

https://yoursite.netlify.app/
https://yoursite.netlify.app/services.html
https://yoursite.netlify.app/pricing.html
https://yoursite.netlify.app/webinars.html
https://yoursite.netlify.app/about.html
https://yoursite.netlify.app/contact.html

---

💡 TIPS

1. Always work with .qmd files, not .html files
   • Edit: .qmd source files
   • Don’t edit: .html generated files
2. Test locally before deploying
   • Run: quarto preview
   • Check everything works
   • Then deploy
3. Keep backups
   • Save copies of your .qmd files
   • Use Git for version control (optional)
4. Build before deploying
   • Always run quarto render first
   • Then deploy the updated docs/ folder

---

🆘 TROUBLESHOOTING

“I can’t find the file to edit”

→ Use the “I want to change…” section above

“My changes don’t appear”

→ Did you run quarto render after editing? → Did you deploy the updated docs/ folder?

“The docs/ folder is missing”

→ Run quarto render to create it

“Build fails”

→ Check for syntax errors in .qmd files → Verify _quarto.yml is correct → See error message for specific issues

---

📞 SUPPORT

Need help understanding the structure?

• 📧 Email: info@mtjdataanalytics.com
• 📱 WhatsApp: +234 901 944 1200
• 📖 Read: README.md for general help
• 🚀 Read: NETLIFY_DEPLOYMENT.md for deployment help

---

This structure is designed to be simple and maintainable!

You have everything you need to deploy and maintain a professional website.

---

© 2025 MTJ Data Analytics