Astro Logo Symbol

Day15 - Astro Series: Layout

Covers how to set up layouts for Markdown/MDX files—templates to manage common page patterns, reduce duplication, and centralize page structure.

2023-09-30
@ Astro
  • #unsorted
Astro Logo Symbol

Day14 - Astro Series: Image Optimization

Images often accompany content and can dominate a page's compute and bandwidth. Astro provides components to help.

2023-09-29
@ Astro
  • #unsorted
Astro Logo Symbol

Day13 - Astro Series: Markdown and MDX

Is it possible to update page content without touching code, simply by editing documents? In other words, separating content from layout and logic.

2023-09-28
@ Astro
  • #unsorted
Astro Logo Symbol

Day12 - Astro Series: Routes

Covers Astro routing: file-based routing, how files in src/pages become pages, and detailed SSG static and dynamic route setup.

2023-09-27
@ Astro
  • #unsorted
Astro logo symbol

Day11 - Astro Series: Global state management

It's easy it is to use components from different frameworks in Astro, but how do you manage their state? We can use Nano Stores to achieve this.

2023-09-26
@ Astro
  • #unsorted
Astro Logo symbol

Day10 - Astro Series: UI framework integration

Shows how to add client JavaScript in .astro for interactivity and how Astro integrates major UI frameworks; covers installation and creating a React component.

2023-09-25
@ Astro
  • #unsorted
Astro logo symbol

Day8 - Astro Series: Tailwind integration

My experience using Tailwind with Astro. After practicing buttons, try building various components to get comfortable with Astro.

2023-09-23
@ Astro
  • #unsorted
Astro Logo symbol

Day7 - Astro Series: Build a button component

Websites need many types of buttons. This chapter combines earlier "basic components" and "styles" to build a reusable web Button component using props.

2023-09-22
@ Astro
  • #unsorted
Astro Logo 符號

Day6 - Astro Series: Style

Astro lets you write CSS the way you prefer—imports, <link>, scoped CSS, preprocessors, or frameworks are supported.

2023-09-21
@ Astro
  • #unsorted
Astro Logo 符號

Day5 - Astro Series: Components

Today we introduce Astro's core concept — components. After creating a project and exploring the CLI and config, we'll build basic components.

2023-09-20
@ Astro
  • #unsorted
Astro Logo Symbol

Day4 - Astro Series: Hello Astro World

This 30-day series guides you through Astro. Today covers the Astro CLI and the astro.config file. Use npm, pnpm, yarn, or bun to run Astro.

2023-09-19
@ Astro
  • #unsorted
Astro Logo Symbol

Day3 - Astro Series: Hello Astro World

Create a new project from scratch and learn the folder structure; earlier we covered components and Astro Islands.

2023-09-18
@ Astro
  • #unsorted
Astro Logo

Day2 - Astro Series: Problem and Solution

This series will continuously update for 30 days, helping you get started with it! Today, we understand the difference between dynamic and static websites.

2023-09-17
@ Astro
  • #unsorted
Astro Logo

Day1 - Astro Series: Preflight Check List

Through this series of articles, I will continuously update for 30 days to help you get started! Learning Astro will be a new trend in front-end development.

2023-09-16
@ Astro
  • #unsorted
Hiking Person Icon

Reflections on Two Months of Military Service

Revisiting military life after two years may not bring about significant changes in life, it has allowed me to appreciate the value of freedom.

2023-07-29
@ Non-technical discussion
  • #Life