Astro JS - Pages

Quiz

Pages in Astro JS

In Astro JS, pages are the building blocks of your application. The pages are markdown or HTML files that define the content and layout of your application. This Pages will be rendered as static HTML files and can be accessed directly by users without using any client side JavaScript. This makes pages lightweight and fast to load. All the pages in Astro JS are defined in the 'src/pages' directory.

Supported File Types

Astro JS supports the following file types for pages:

Markdown files (.md or .mdx)
HTML files (.html)
Astro components (.astro)
Endpoints (.js or .ts)

Astro Pages Examples

The section below shows how to use different types of pages in Astro JS with examples.

Markdown Pages

Astro supports markdown files as pages. The markdown files are converted to HTML and rendered as static HTML files. You can easily create markdown pages using any text editor. Here is an example of a markdown page.

---
    title: 'My Markdown page'
---
# Title

This is my page, written in **Markdown.**

Output

The output is shown below. You can see that markdown page is converted as HTML page at client side.

Astro Pages

Astro supports Astro components with '.astro' extension as pages. Astro components can be reusable UI elements, like a header or a profile card. These components are extremely flexible and can be as small as a snippet of HTML, like a collection of common <meta> tags that make SEO easy to work with. Astro components can even contain an entire page layout or, when located in the special 'src/pages/' folder, be an entire page itself.

---
    import Layout from '../layouts/Layout.astro';
---
<html lang="en">
    <head>
        <title>My Homepage</title>
    </head>
    <body>
        <h1>Welcome to my website!</h1>
    </body>
</html>

Output

The output is shown below. You can see that Astro component is converted as HTML page at client side.

HTML Pages

Astro also supports HTML files as pages. Any file with '.html' extension at 'src/pages' directory will be converted as HTML page at client side. Astro considers this as HTML components. It is always recommended to use Astro components instead of HTML pages, as some key Astro features are not supported in HTML Components. Here is an example of HTML page.

<!-- File: src/pages/html-page.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example HTML Page</title>
</head>
<body>
    <div class="container">
        <header>
            <h1>Welcome to My Example Page</h1>
        </header>
        <main>
            <section>
                <h2>About Us</h2>
                <p>
                    This is an example HTML page showing 
                    basic structure and elements.
                </p>
            </section>
        </main>

        <footer>
            <p>© 2023 Example Page. All rights reserved.</p>
        </footer>
    </div>
</body>
</html>

Output

The output is shown below. You can see that HTML page is displayed as it is at client side.

Custom 404 Error Page

Astro JS supports using custom 404 error page. A 404 error page is a special page that is displayed when a user requests a page that does not exist. In astro, you can define a custom 404 error page using the src/pages/404.astro file. Here is an example of a custom 404 error page.

<!-- File: src/pages/404.astro -->

<html lang="en">
    <head>
        <title>404: Page Not Found</title>
    </head>
    <body>
        <main>
            <h1>404</h1>
            <p>Page Not Found</p>
            <a href="/">Go back home</a>
        </main>
    </body>
</html>

Output

The output is shown below. You can see that custom 404 error page is displayed when a user requests a page that does not exist.

Print Page