Astroframework~20 mins

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

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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.

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.

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.

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.