Astro is a modern static site generator (SSG) built for speed and optimized for creating fast, SEO-friendly websites. It supports multiple front-end frameworks, making it easy to integrate technologies like React, Vue, Svelte, or even vanilla JavaScript in your project. Astro ships less JavaScript, meaning faster loading times and better performance overall.
In this tutorial, we will cover the following steps:
Before getting started, make sure you have the following installed:
First, you need to create a new Astro project. Open your terminal and run the following command:
npm create astro@latest
This will prompt you to give your project a name. Choose a name for your project and proceed with the setup. You can go with the default settings for simplicity.
Once the project has been set up, navigate into your project directory:
cd your-project-name
To start the development server, run the following command:
npm run dev
Your Astro project should now be running at http://localhost:3000.
Astro uses a file-based routing system. To create a homepage, navigate to the src/pages/ directory and create a file called index.astro.
src/pages/index.astro
In index.astro, add the following code:
--- title = "Home" --- <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{title}</title> </head> <body> <h1>Welcome to My Astro Site</h1> <p>This is the homepage created using Astro.</p> </body> </html>
Astro uses the frontmatter syntax (the --- block at the top) to declare variables that can be used within the file.
Similarly, create an about.astro file in the src/pages/ directory for an About page.
src/pages/about.astro
Add the following code:
--- title = "About" --- <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{title}</title> </head> <body> <h1>About Us</h1> <p>This is the About page of our Astro project.</p> </body> </html>
Visit http://localhost:3000/about to see the new page.
To avoid repetition, Astro supports layouts. Let’s create a basic layout for our site.
Create a src/layouts/ directory and a new file called MainLayout.astro.
src/layouts/MainLayout.astro
Add the following code for the layout:
--- title = "My Astro Site" --- <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{title}</title> </head> <body> <header> <h1>Welcome to {title}</h1> <nav> <a href="/">Home</a> | <a href="/about">About</a> </nav> </header> <main> <slot /> </main> <footer> <p>© 2024 My Astro Site</p> </footer> </body> </html>
Now, let’s update the index.astro and about.astro files to use this layout.
For index.astro, replace the code with:
--- import MainLayout from '../layouts/MainLayout.astro'; title = "Home" --- <MainLayout> <h2>Welcome to My Astro Site</h2> <p>This is the homepage created using Astro.</p> </MainLayout>
Similarly, for about.astro, replace the code with:
--- import MainLayout from '../layouts/MainLayout.astro'; title = "About" --- <MainLayout> <h2>About Us</h2> <p>This is the About page of our Astro project.</p> </MainLayout>
Now, both pages share a common layout for consistency across the site.
Fabform.io is a simple service that lets you add forms to your website without requiring a back-end. You just need to integrate their form endpoint, and Fabform handles the rest.
Create a new file contact.astro inside the src/pages/ directory.
src/pages/contact.astro
Add the following code for a basic contact form:
--- import MainLayout from '../layouts/MainLayout.astro'; title = "Contact" --- <MainLayout> <h2>Contact Us</h2> <form action="https://fabform.io/f/your-form-endpoint" method="POST"> <label for="name">Name:</label> <input type="text" id="name" name="name" required /> <label for="email">Email:</label> <input type="email" id="email" name="email" required /> <label for="message">Message:</label> <textarea id="message" name="message" required></textarea> <button type="submit">Send</button> </form> </MainLayout>
Now, when users submit the form, Fabform will handle the submission and send you the results via email or a service you configure.
You now have a simple, fast website with Astro, complete with multiple pages, a shared layout, and a contact form powered by Fabform.io.
├── src │ ├── layouts │ │ └── MainLayout.astro │ ├── pages │ │ ├── about.astro │ │ ├── contact.astro │ │ └── index.astro └── package.json
Run npm run dev to preview your site again and ensure everything works as expected.
Astro makes it incredibly easy to build static websites with minimal JavaScript and high performance. By using its features like layouts and component-based architecture, we can keep our code clean and reusable. Adding a contact form using Fabform.io ensures you can easily collect user feedback without worrying about building a back-end.
Feel free to expand this project by integrating additional components or frameworks, like React or Svelte, to explore Astro's full capabilities!
The above is the detailed content of Astrobuild tutorial with Contact Form. For more information, please follow other related articles on the PHP Chinese website!