Astro Static Site Generation Tutorial

Astro is a popular static site generator (SSG) that allows you to build fast and secure websites. Astro is built on top of JavaScript and can be used with a variety of frameworks and libraries.

One of the key benefits of using Astro is its ability to pre-render pages at build time. This means that each page is rendered as a static HTML file, which can be served directly by a web server. Astro can also use server-side rendering (SSR) to generate pages on the fly.

To get started with Astro, you'll need to install it as a global npm package. This will give you access to the Astro CLI, which you can use to create and manage projects. Astro also provides a range of plugins and integrations with popular frameworks like React and Vue.

To get started with Astro, you'll need Node.js installed on your machine. You can download it from nodejs.org. Once you have Node.js installed, create a new Astro project using the command "create astro" anywhere on your machine. This will automatically create a new empty directory for your project if needed.

To create a static site with Astro, you'll need to follow the steps outlined in the Astro documentation. You can start by selecting the "Include sample file" option to get a basic project structure.

The folder structure for an Astro project typically includes a "src" folder for managing the application and an "astro.config.mjs" file for managing config settings. You can also choose a Blog template to get a pre-built Markdown section.

To set up an Astro app, you can use npm by running the command "npm install" and following the prompts to set up your project. This will create a new Astro app with the necessary files and dependencies.

Here's a quick rundown of the default port for an Astro app: it's localhost:4321. If you're able to view your new Astro site at this address, you've successfully created a project.

Creating content with Astro.js is a breeze. You can create a new page by adding a new file to the src/pages directory.

Astro.js supports several powerful options for authoring content, making it an excellent choice for content-focused sites. You can use Markdown or MDX files in the src/pages directory to automatically generate pages.

To write content with Astro.js, you can use Markdown files. Astro.js has built-in support for Markdown files, making it easy to create content-heavy pages. To get started with Markdown in Astro, create a new .md file in your src/pages directory, add frontmatter at the top of the file to specify metadata, and write your content using Markdown syntax.

Astro supports various file types for writing content, including Markdown (.md), MDX (.mdx), and HTML (.html) files. You can also use JavaScript or TypeScript (.js/.ts) files as API endpoints.

Markdown is a lightweight markup language that allows you to write and format text with ease. Astro.js can render Markdown files as HTML, making it a great choice for content-focused sites.

Here are some file types supported by Astro for writing content:

With Astro and Markdown, you can create content-heavy pages with ease. You can write global styles to customize the appearance of your content, and use Astro.glob to load local files and display them as static pages.

Content Management with Astro.js is a breeze. Astro.js provides several powerful options for authoring content, making it an excellent choice for content-focused sites like blogs, marketing sites, and portfolios.

You can write and manage content in Astro.js using Markdown files in src/pages, which automatically generate pages. Local Content can be kept outside src/pages and imported into Astro pages, giving you flexibility in organizing your content. Content Collections in src/content/ offer type-safe content management.

Astro.js also supports Markdown syntax, making it easy to create content-heavy pages. To get started with Markdown in Astro, simply create a new .md file in your src/pages directory, add frontmatter at the top of the file to specify metadata, and write your content using Markdown syntax.

Managing Content Pages is a crucial aspect of creating a content-driven website. You can organize your content in various ways using Astro.js.

Page Files are a great way to start, as Markdown and MDX files in src/pages automatically generate pages. This means you can create new pages by simply adding a new file to the src/pages directory.

Local Content is another option, where you can keep content files outside src/pages and import them into Astro pages. This gives you more flexibility in organizing your content.

Content Collections are also available, which allow you to organize content in src/content/ for type-safe content management. This makes it easier to query your content and use it in your pages.

Here's a quick overview of the different ways to manage your content pages:

By using these methods, you can create a robust content management system that meets your needs.

Rewriting my personal site took about a week, which is a relatively quick turnaround time.

Most of my templating was migrated from Vue to Astro components, which made the switch very smooth.

The migration itself went very smoothly, especially since Astro support PostCSS via a plugin for Snowpack.

The benefits of prefetching the data and generating static HTML were obvious very early on.

Everything is much faster because everything is being loaded as HTML and CSS, rather than utilizing a JavaScript framework to render the page.

After finishing and deploying, I ran Lighthouse on the finished migration, and the results showed a significant improvement.

Development is where the magic happens. Astro's static site generation is built on top of a robust development toolchain that makes it easy to get started and scale up.

You can use Astro's built-in support for Markdown and HTML to create content quickly. Astro also integrates seamlessly with popular development tools like Webpack and Babel.

One of the key benefits of Astro's development workflow is its ability to optimize images and other assets for web performance. This means you can focus on writing code without worrying about the details.

Astro's development environment is designed to be highly customizable, allowing you to tailor your workflow to your specific needs. For example, you can use Astro's API to create custom plugins and integrations.

The Astro team has also made it easy to integrate with popular development libraries like React and Vue. This means you can use the tools and frameworks you know and love with Astro's static site generation.

To add a new component, you can add a new file to the src/components directory. For example, to add a new component called Button.astro, you can add a new file to the src/components directory called Button.astro.

Components can be either Page Components or regular Components. Page Components are created inside the folder pages and can be opened through a specific route, whereas regular Components are created outside the folder pages and can be imported and used anywhere.

You can define a Props interface to type the props for a component, and use the Astro.props object to access the props passed to the component. To create a new Astro component, you can add a new file to the src/components directory with the same name as the component, and use the Astro.props object to access the props passed to the component.

To send Props into a Component, you can define a Props interface and use the Astro.props object to access the props passed to the component. This allows you to create dynamic Navigation, for example, by passing a variable from the pages/index.astro file to the components/Navigation.astro file.

Here are some key differences between Page Components and regular Components:

Adding a Component is a straightforward process in Astro. To get started, you can add a new file to the src/components directory.

You can name your new component whatever you like, but in this example, let's create a Button component. To do this, add a new file called Button.astro to the src/components directory.

When defining your component, you'll want to type the props using an interface. In the example, a Props interface is defined to type the props for the Button component.

Astro also provides an Astro.props object that allows you to access the props passed to the component. This makes it easy to use and manage your component's props.

Here's a quick rundown of the process:

By following these simple steps, you can create and add new components to your Astro project with ease.

อีกหนึ่งส่วนสำคัญของ Astro คือ Component Script ซึ่งเป็นส่วนของ Astro component ที่ใช้ในการเขียน JavaScript เพื่อควบคุมการทำงานของ component นี่เป็นฟังก์ชันที่ดีมากๆ เพราะเราสามารถกำหนดค่าเริ่มต้นหรือ condition บางอย่างให้กับ component ได้

เราสามารถเขียน JavaScript ระหว่างสัญลักษณ์ --- (เรียกว่า fence) เพื่อเป็นการกำหนด condition หรือข้อมูลก่อนการ render template ออกมาได้ นี่เหมือนกับการกำหนด properties ของ Markdown

ตัวอย่างเช่น หากเราต้องการแสดงชื่อตัวแปร JavaScript เช่น name จาก JavaScript ลง template ของ Astro สามารถทำได้ผ่าน {name} โดยใน {} เป็นการระบุตัวแปรของ JavaScript ที่ได้มีการสร้างเอาไว้

นอกจากนี้ เรายังสามารถดึง data ออกมาก่อนที่จะ render ตัว component ออกมาได้เช่นกัน

GraphCMS allows you to fire a web hook when an action is completed, in this case publish a blog post. This can trigger a rebuild of the site, making new content available relatively quickly.

You can use Astro with Svelte, React, or other client-side JS frameworks, and add a client-side router to fetch and render posts on the client. However, this approach is less efficient and may not show up in search engines.

If your company uses Svelte, consider taking a look at Sveltekit, which offers a similar setup to Astro.

Markdown เป็นเครื่องมือที่ช่วยให้การเขียน Content ง่ายขึ้น และ Astro ยัง support การใช้ Markdown ด้วย ซึ่งช่วยให้เราสามารถเขียน Content ที่มี style ออกมาได้

Astro มี feature Layouts ที่สามารถกำกับ Layout ภาพรวมของทุกๆหน้า รวมถึงสามารถกำกับ Layout ของ Markdown ได้เช่นกัน เราสามารถสร้าง Layout component ออกมาได้ และ import layout นี้เข้ากับ markdown ตรงๆได้ผ่าน properties ของ Markdown

เราสามารถสร้าง Layout component ออกมาได้ เช่น layouts/BaseLayout.astro แล้ว import layout นี้เข้ากับ markdown ตรงๆได้เลย

ตัวอย่างเช่น หากเราต้องการ Layout สำหรับการแสดงผลในหน้า markdown เราสามารถสร้างเป็น Layout component ออกมาได้ แล้ว import layout นี้เข้ากับ markdown ตรงๆได้เลย

Concept Layout นี้สามารถใช้ได้หมดทั้ง markdown และ Page component (Astro component)