Public directory for static assets in Astro - Mini Project: Build & Apply

Using the Public Directory for Static Assets in Astro

📖 Scenario: You are building a simple Astro website that needs to display a logo image and a favicon. These files should be served as static assets from the public directory so they can be accessed directly by the browser.

🎯 Goal: Create an Astro project structure that uses the public directory to store static files. Then, reference these files correctly in your Astro component so the logo image and favicon appear on the page.

📋 What You'll Learn

Create a public directory at the root of the Astro project

Add a logo image file named logo.png inside the public directory

Add a favicon file named favicon.ico inside the public directory

Reference the logo image in the Astro component using the correct path

Add a <link> tag in the component's <head> to use the favicon

💡 Why This Matters

🌍 Real World

Websites often need to serve images, icons, and other files directly to users. The public directory is the standard way to organize and serve these static assets efficiently.

💼 Career

Understanding how to manage static assets is essential for front-end developers and web designers. It ensures websites load resources correctly and improves user experience.

1

Create the public directory and add static files

Create a public directory at the root of your Astro project. Inside it, add two files exactly named logo.png and favicon.ico. These files will be your static assets.

Astro

# Your project folder should now have a 'public' directory with 'logo.png' and 'favicon.ico' inside

Hint

The public directory is where you put files that the browser can access directly. Make sure the files are named exactly logo.png and favicon.ico.

2

Add a config variable for the logo image path

In your Astro component file, create a constant called logoPath and set it to the string "/logo.png". This path points to the logo image in the public directory.

Astro

# Create a constant named logoPath with the value '/logo.png'
# Your code here

Hint

The path to files in the public directory always starts with a slash / followed by the file name.

3

Use the logo image in the Astro component

Add an <img> tag in the component's HTML that uses the logoPath constant as the src attribute. Also add an alt attribute with the text "Site Logo".

Astro

const logoPath = "/logo.png";

 tag with src={logoPath} and alt="Site Logo" below -->
# Your code here

Hint

Use curly braces {} to insert the JavaScript variable logoPath inside the src attribute.

4

Add the favicon link tag in the head

Inside the component's <head> section, add a <link> tag with rel="icon" and href="/favicon.ico" to use the favicon from the public directory.

Astro

const logoPath = "/logo.png";


   tag for favicon here -->

Hint

The favicon link tag must be inside the <head> section and use the path /favicon.ico.

Practice

1. What is the main purpose of the public directory in an Astro project?

easy

A. To store static files that are served directly without processing

B. To write server-side code for API routes

C. To keep component files for UI rendering

D. To store configuration files for the project

Solution

1. Step 1: Understand the role of the public directory

   The public directory is designed to hold static assets like images, fonts, and icons that do not need processing.

2. Step 2: Differentiate from other directories

   Unlike source or config folders, public files are served as-is with root-relative URLs.

3. Final Answer:

   To store static files that are served directly without processing -> Option A

4. Quick Check:

   Public directory = static files served as-is [OK]

Hint: Public folder holds files served directly at root URL [OK]

Common Mistakes:

• Confusing public with source code folders
• Thinking public is for server code
• Assuming public files are processed or compiled

2. Which of the following is the correct way to reference an image named logo.png stored in the public directory inside an Astro component?

easy

A. <img src="./logo.png" alt="Logo" />

B. <img src="/logo.png" alt="Logo" />

C. <img src="public/logo.png" alt="Logo" />

D. <img src="../logo.png" alt="Logo" />

Solution

1. Step 1: Understand URL referencing for public assets

   Files in the public directory are accessed with root-relative URLs starting with a slash (/).

2. Step 2: Apply correct path for image source

   Using /logo.png correctly points to the file in the public folder.

3. Final Answer:

   <img src="/logo.png" alt="Logo" /> -> Option B

4. Quick Check:

   Public assets use root-relative paths starting with / [OK]

Hint: Use root-relative path starting with / for public files [OK]

Common Mistakes:

• Using relative paths like ./ or ../ for public assets
• Including 'public/' in the URL path
• Forgetting the leading slash in the path

3. Given a file icon.svg inside the public/icons folder, what will be the URL to access it in the browser?

medium

A. /src/icons/icon.svg

B. /public/icons/icon.svg

C. ./icons/icon.svg

D. /icons/icon.svg

Solution

1. Step 1: Identify the public folder URL mapping

   Files inside the public folder are served at the root URL, so the folder name after public is part of the URL.

2. Step 2: Construct the URL path

   The file inside public/icons is accessed as /icons/icon.svg.

3. Final Answer:

   /icons/icon.svg -> Option D

4. Quick Check:

   Public folder maps to root URL, so path = /icons/icon.svg [OK]

Hint: Public subfolders appear directly after root slash in URL [OK]

Common Mistakes:

• Including 'public' in the URL path
• Using relative paths like ./icons/icon.svg
• Referencing source folders instead of public

4. You placed a font file custom-font.woff2 inside the public/fonts folder but your CSS @font-face rule is not loading it. Which of the following is the most likely cause?

medium

A. The font file should be inside the src folder, not public

B. Astro does not support font files in the public directory

C. The CSS URL is missing the leading slash, e.g., url('fonts/custom-font.woff2')

D. The font file must be imported in the component script

Solution

1. Step 1: Check CSS URL path for public assets

   URLs for files in public must start with a slash to be root-relative.

2. Step 2: Identify the missing slash issue

   Using url('fonts/custom-font.woff2') is relative and incorrect; it should be url('/fonts/custom-font.woff2').

3. Final Answer:

   The CSS URL is missing the leading slash, e.g., url('fonts/custom-font.woff2') -> Option C

4. Quick Check:

   Public assets need root-relative URLs starting with / [OK]

Hint: Always start public asset URLs with / in CSS [OK]

Common Mistakes:

• Omitting the leading slash in CSS URLs
• Moving static assets to wrong folders
• Expecting Astro to process font files automatically

5. You want to add a downloadable PDF named guide.pdf to your Astro site. You placed it inside the public/docs folder. How should you create a link in your component so users can download it when clicked?

hard

A. <a href="/docs/guide.pdf" download>Download Guide</a>

B. <a href="docs/guide.pdf" download>Download Guide</a>

C. <a href="/public/docs/guide.pdf" download>Download Guide</a>

D. <a href="./docs/guide.pdf" download>Download Guide</a>

Solution

1. Step 1: Understand public folder URL mapping

   Files inside public are served at root URL, so the path must start with a slash and exclude 'public'.

2. Step 2: Use correct href with download attribute

   The link should use /docs/guide.pdf as href and include the download attribute for direct download.

3. Final Answer:

   <a href="/docs/guide.pdf" download>Download Guide</a> -> Option A

4. Quick Check:

   Public files use root-relative URLs with leading / and download attribute triggers download [OK]

Hint: Use root-relative URL with download attribute for static files [OK]

Common Mistakes:

• Omitting the leading slash in href
• Including 'public' in the URL path
• Using relative paths like ./docs/guide.pdf