{"id":119134,"date":"2026-06-29T16:43:53","date_gmt":"2026-06-29T11:13:53","guid":{"rendered":"https:\/\/www.guvi.in\/blog\/?p=119134"},"modified":"2026-06-29T16:43:55","modified_gmt":"2026-06-29T11:13:55","slug":"astro-framework-tutorial","status":"publish","type":"post","link":"https:\/\/www.guvi.in\/blog\/astro-framework-tutorial\/","title":{"rendered":"Astro Framework Tutorial: Build Your First Fast Website"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>TL;DR Summary<\/strong><\/h2>\n\n\n\n<ul>\n<li>Astro framework is a modern web framework that ships zero JavaScript by default \u2014 making your site faster out of the box.<\/li>\n\n\n\n<li>It uses a .astro component format that looks like HTML but supports JSX-style logic.<\/li>\n\n\n\n<li>Astro&#8217;s &#8220;Islands Architecture&#8221; lets you add React, Vue, or Svelte only where you need interactivity.<\/li>\n\n\n\n<li>You can build a working Astro site in under 30 minutes with its CLI tool.<\/li>\n\n\n\n<li>It&#8217;s perfect for blogs, docs, portfolios, and content-heavy sites.<\/li>\n<\/ul>\n\n\n\n<p>Astro is an open-source web framework built for content-rich, performance-first websites. It renders your pages as static HTML at build time and ships zero JavaScript to the browser unless you specifically ask for it. This makes Astro sites significantly faster than traditional React or Vue apps, and a great starting point for anyone learning modern web development.<\/p>\n\n\n\n<p>If you&#8217;ve been curious about Astro but didn&#8217;t know where to start, this Astro framework tutorial is written for you. By the end, you&#8217;ll understand what Astro is, how to set it up, how its file structure works, and how to build your first page \u2014 step by step.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What Is the Astro Framework?<\/strong><\/h2>\n\n\n\n<p><a href=\"https:\/\/astro.build\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Astro<\/a> is a JavaScript web framework released in 2021 and now used by teams at companies like Google, Microsoft, and Netlify for their documentation and content sites.<\/p>\n\n\n\n<p>What makes it different from <a href=\"https:\/\/www.guvi.in\/courses\/web-development\/nextjs\/?utm_source=blog&amp;utm_medium=hyperlink&amp;utm_campaign=astro-framework-tutorial\" target=\"_blank\" rel=\"noreferrer noopener\">Next.js<\/a> or Nuxt is its core philosophy: <strong>ship less JavaScript<\/strong>. By default, Astro renders everything to HTML at build time. There&#8217;s no hydration overhead, no <a href=\"https:\/\/www.guvi.in\/blog\/guide-on-virtual-dom\/\" target=\"_blank\" rel=\"noreferrer noopener\">virtual DOM<\/a>, and no bundle bloat \u2014 unless you add it intentionally.<\/p>\n\n\n\n<p>\ud83d\udcca <strong>Data Point:<\/strong> According to the 2024 State of JS survey, Astro&#8217;s retention rate jumped to 94% \u2014 the highest of any framework that year. That number tells you developers who try it, keep using it.<\/p>\n\n\n\n<p>Astro works best for:<\/p>\n\n\n\n<ul>\n<li>Blogs and content sites<\/li>\n\n\n\n<li>Documentation portals<\/li>\n\n\n\n<li>Portfolio websites<\/li>\n\n\n\n<li>Marketing landing pages<\/li>\n\n\n\n<li>E-commerce product pages<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Why Should You Learn Astro in 2026?<\/strong><\/h2>\n\n\n\n<p>Before getting into the code, it&#8217;s worth understanding <em>why<\/em> Astro has become a go-to framework \u2014 especially for developers tired of fighting slow build pipelines and bloated bundles.<\/p>\n\n\n\n<p><strong>Three reasons Astro stands out:<\/strong><\/p>\n\n\n\n<ol>\n<li><strong>Performance by default<\/strong> \u2014 Your Lighthouse score doesn&#8217;t require manual optimization. You start fast.<\/li>\n\n\n\n<li><strong>Bring your own framework<\/strong> \u2014 You can use React, Vue, Svelte, Solid, or Preact inside Astro. You&#8217;re not locked in.<\/li>\n\n\n\n<li><strong>Simple mental model<\/strong> \u2014 Astro&#8217;s .astro files look like HTML. If you can read HTML, you can read Astro.<\/li>\n<\/ol>\n\n\n\n<p>\ud83d\udca1 <strong>Pro Tip:<\/strong> If you&#8217;re building a portfolio site or a blog and you&#8217;ve been using plain HTML\/CSS, Astro is the perfect first &#8220;real framework&#8221; to learn. The learning curve is gentle.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Set Up Astro: Step-by-Step<\/strong><\/h2>\n\n\n\n<p>Let&#8217;s get your first Astro project running. This takes about 10 minutes.<\/p>\n\n\n\n<p><strong>What you need before starting:<\/strong><\/p>\n\n\n\n<ul>\n<li>Node.js v18 or higher installed<\/li>\n\n\n\n<li>A terminal (VS Code&#8217;s built-in terminal works great)<\/li>\n\n\n\n<li>Basic familiarity with HTML and CSS<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: Create a New Astro Project<\/strong><\/h3>\n\n\n\n<p>Open your terminal and run:<\/p>\n\n\n\n<p><code>npm create astro@latest<\/code><\/p>\n\n\n\n<p>Astro&#8217;s CLI (they call it &#8220;Houston&#8221;) will walk you through a setup wizard. You&#8217;ll be asked:<\/p>\n\n\n\n<ul>\n<li>What to name your project<\/li>\n\n\n\n<li>Which starter template to use (pick <strong>&#8220;Empty&#8221;<\/strong> for this tutorial)<\/li>\n\n\n\n<li>Whether to install dependencies automatically (say Yes)<\/li>\n<\/ul>\n\n\n\n<p>Once it finishes, navigate into your project folder:<\/p>\n\n\n\n<p><code>cd my-astro-site<\/code><\/p>\n\n\n\n<p><code>npm run dev<\/code><\/p>\n\n\n\n<p>Open your browser and go to http:\/\/localhost:4321. You should see a blank Astro page. That&#8217;s your canvas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Understand the File Structure<\/strong><\/h3>\n\n\n\n<p>Here&#8217;s what Astro creates for you:<\/p>\n\n\n\n<p>my-astro-site\/<\/p>\n\n\n\n<p>\u251c\u2500\u2500 public\/ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; \u2192 Static assets (images, fonts, favicon)<\/p>\n\n\n\n<p>\u251c\u2500\u2500 src\/<\/p>\n\n\n\n<p>\u2502 &nbsp; \u251c\u2500\u2500 pages\/&nbsp; &nbsp; &nbsp; &nbsp; \u2192 Every file here becomes a URL route<\/p>\n\n\n\n<p>\u2502 &nbsp; \u251c\u2500\u2500 components\/ &nbsp; \u2192 Reusable UI pieces<\/p>\n\n\n\n<p>\u2502 &nbsp; \u2514\u2500\u2500 layouts\/&nbsp; &nbsp; &nbsp; \u2192 Page wrapper templates<\/p>\n\n\n\n<p>\u251c\u2500\u2500 astro.config.mjs&nbsp; \u2192 Your Astro configuration<\/p>\n\n\n\n<p>\u2514\u2500\u2500 package.json<\/p>\n\n\n\n<p>The most important folder is src\/pages\/. Any .astro file you create here automatically becomes a page on your site.<\/p>\n\n\n\n<ul>\n<li>src\/pages\/index.astro \u2192 your homepage (\/)<\/li>\n\n\n\n<li>src\/pages\/about.astro \u2192 your about page (\/about)<\/li>\n\n\n\n<li>src\/pages\/blog\/first-post.astro \u2192 your blog post (\/blog\/first-post)<\/li>\n<\/ul>\n\n\n\n<p>No router config needed. Astro handles it for you.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3: Write Your First Astro Component<\/strong><\/h3>\n\n\n\n<p>Open src\/pages\/index.astro and replace its contents with this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/astro\n\n---\n\nconst name = \"Kiran\";\n\nconst skills = &#91;\"HTML\", \"CSS\", \"Astro\"];\n\n---\n\n&lt;html lang=\"en\"&gt;\n\n&nbsp;&nbsp;&lt;head&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset=\"UTF-8\" \/&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;My Astro Site&lt;\/title&gt;\n\n&nbsp;&nbsp;&lt;\/head&gt;\n\n&nbsp;&nbsp;&lt;body&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Hello, {name}!&lt;\/h1&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Things I know:&lt;\/p&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{skills.map(skill =&gt; &lt;li&gt;{skill}&lt;\/li&gt;)}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;\n\n&nbsp;&nbsp;&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>See those &#8212; fences at the top? That&#8217;s the <strong>frontmatter section<\/strong> \u2014 it&#8217;s where you write JavaScript that runs <em>at build time<\/em>, not in the browser. Variables defined here are available in your HTML below.<\/p>\n\n\n\n<p>Save the file. Your browser should hot-reload and show your name and list. That&#8217;s a working Astro component.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 4: Create a Reusable Layout<\/strong><\/h3>\n\n\n\n<p>Most pages on a real site share a header, footer, and base HTML. In Astro, you handle this with a <strong>Layout component<\/strong>.<\/p>\n\n\n\n<p>Create a new file: src\/layouts\/BaseLayout.astro<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/astro\n\n---\n\nconst { title } = Astro.props;\n\n---\n\n&lt;html lang=\"en\"&gt;\n\n&nbsp;&nbsp;&lt;head&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset=\"UTF-8\" \/&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;{title}&lt;\/title&gt;\n\n&nbsp;&nbsp;&lt;\/head&gt;\n\n&nbsp;&nbsp;&lt;body&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;nav&gt;My Site&lt;\/nav&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/header&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;main&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;slot \/&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/main&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;footer&gt;\u00a9 2026&lt;\/footer&gt;\n\n&nbsp;&nbsp;&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>The &lt;slot \/&gt; tag is where your page content gets injected. Think of it like a template hole that each page fills in.<\/p>\n\n\n\n<p>Now update your index.astro to use it:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/astro\n\n---\n\nimport BaseLayout from '..\/layouts\/BaseLayout.astro';\n\n---\n\n&lt;BaseLayout title=\"Home\"&gt;\n\n&nbsp;&nbsp;&lt;h1&gt;Welcome to my site&lt;\/h1&gt;\n\n&nbsp;&nbsp;&lt;p&gt;Built with Astro \u2014 fast by default.&lt;\/p&gt;\n\n&lt;\/BaseLayout&gt;<\/code><\/pre>\n\n\n\n<p>Clean, right? That&#8217;s the Astro way.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What Is Astro&#8217;s Islands Architecture?<\/strong><\/h2>\n\n\n\n<p>This is where Astro gets genuinely interesting \u2014 and where most tutorials gloss over it.<\/p>\n\n\n\n<p>Astro uses a concept called <strong>Islands Architecture<\/strong>. The idea is simple: your page is mostly static HTML (the &#8220;sea&#8221;), but you can drop interactive &#8220;islands&#8221; into it wherever you actually need them.<\/p>\n\n\n\n<p>For example, let&#8217;s say you have a blog post with a comment section that needs React. You don&#8217;t want React loading for your entire page \u2014 just for that one component.<\/p>\n\n\n\n<p>In Astro, you&#8217;d do this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/astro\n\n---\n\nimport CommentBox from '..\/components\/CommentBox.jsx';\n\n---\n\n&lt;article&gt;\n\n&nbsp;&nbsp;&lt;p&gt;Your static blog content here...&lt;\/p&gt;\n\n&nbsp;&nbsp;&lt;CommentBox client:load \/&gt;\n\n&lt;\/article&gt;<\/code><\/pre>\n\n\n\n<p>The client:load directive tells Astro: <em>hydrate this component on the client side.<\/em> Everything else stays as static HTML.<\/p>\n\n\n\n<p><strong>Available client directives:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Directive<\/strong><\/td><td><strong>When it loads<\/strong><\/td><\/tr><tr><td>client:load<\/td><td>Immediately on page load<\/td><\/tr><tr><td>client:idle<\/td><td>When the browser is idle<\/td><\/tr><tr><td>client:visible<\/td><td>When the component scrolls into view<\/td><\/tr><tr><td>client:only<\/td><td>Only on client, never server-rendered<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\"><strong>Available client directives<\/strong><\/figcaption><\/figure>\n\n\n\n<p>\u2705 <strong>Best Practice:<\/strong> Default to no directive (static). Add client:visible for below-the-fold interactive components to save load time.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What to Do Next<\/strong><\/h2>\n\n\n\n<p>You&#8217;ve covered the core of what makes Astro special. Here&#8217;s your natural next step:<\/p>\n\n\n\n<ol>\n<li><strong>Add a blog<\/strong> \u2014 Use Astro&#8217;s content collections to manage markdown blog posts<\/li>\n\n\n\n<li><strong>Deploy to Netlify or Vercel<\/strong> \u2014 Astro supports one-click deploys to both<\/li>\n\n\n\n<li><strong>Add a UI framework<\/strong> \u2014 Try dropping a React or Svelte component using Islands<\/li>\n\n\n\n<li><strong>Explore Astro integrations<\/strong> \u2014 Tailwind CSS, MDX, and image optimization are all one command away<\/li>\n<\/ol>\n\n\n\n<p>If you want a structured, mentor-supported path and learn all these new tools, then HCL GUVI\u2019s IIT-M Pravartak Certified <a href=\"https:\/\/www.guvi.in\/zen-class\/full-stack-development-course\/?utm_source=blog&amp;utm_medium=hyperlink+&amp;utm_campaign=astro-framework-tutorial\" target=\"_blank\" rel=\"noreferrer noopener\">Full Stack Developer Course<\/a> with AI Integration covers the entire journey, from HTML to deployment, with real projects, live sessions, and placement support. Over 10,000 students have used it to break into product-based companies.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Key Takeaways<\/strong><\/h2>\n\n\n\n<ul>\n<li>Astro sends zero JavaScript by default \u2014 making your site fast without extra work.<\/li>\n\n\n\n<li>.astro files use a frontmatter section for build-time logic and HTML below it for markup.<\/li>\n\n\n\n<li>File-based routing means every page in src\/pages\/ becomes a real URL.<\/li>\n\n\n\n<li>Layouts and &lt;slot \/&gt; help you avoid repeating HTML across pages.<\/li>\n\n\n\n<li>Islands Architecture lets you use React\/Vue\/Svelte only where you need interactivity.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>FAQs<\/strong><\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1782442088071\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Q1: Is Astro good for beginners?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p> Yes. Astro&#8217;s syntax is close to plain HTML, which makes it easier to pick up than React or Vue. If you know HTML and basic JavaScript, you can build a working Astro site in a single afternoon.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1782442093382\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Q2: Does Astro replace React?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p> No \u2014 Astro works <em>with<\/em> React. You can use React components inside Astro using the Islands system. Astro handles the static shell; React handles the interactive parts.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1782442100879\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Q3: Is Astro free to use?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p> Yes. Astro is fully open-source and free. Hosting on platforms like Netlify, Vercel, or Cloudflare Pages is also free for personal and small projects.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1782442104879\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Q4: Can I use Tailwind CSS with Astro?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p> Absolutely. Run npx astro add tailwind and Astro sets it up automatically. It&#8217;s one of the most popular Astro integrations.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1782442110086\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Q5: How is Astro different from Next.js?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p> Next.js is React-based and great for apps with heavy interactivity. Astro is framework-agnostic and built for content-first sites. Astro sites typically load faster with less setup for things like blogs, docs, and portfolios.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1782442115452\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Q6: Does Astro support dynamic routing?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p> Yes. You can create dynamic routes using bracket syntax \u2014 for example, src\/pages\/blog\/[slug].astro \u2014 and use getStaticPaths() to generate pages from a data source.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>TL;DR Summary Astro is an open-source web framework built for content-rich, performance-first websites. It renders your pages as static HTML at build time and ships zero JavaScript to the browser unless you specifically ask for it. This makes Astro sites significantly faster than traditional React or Vue apps, and a great starting point for anyone [&hellip;]<\/p>\n","protected":false},"author":22,"featured_media":119491,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[429,294],"tags":[],"views":"37","authorinfo":{"name":"Lukesh S","url":"https:\/\/www.guvi.in\/blog\/author\/lukesh\/"},"thumbnailURL":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2026\/06\/Astro-Framework-300x116.webp","_links":{"self":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/119134"}],"collection":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/comments?post=119134"}],"version-history":[{"count":4,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/119134\/revisions"}],"predecessor-version":[{"id":119495,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/119134\/revisions\/119495"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media\/119491"}],"wp:attachment":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media?parent=119134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/categories?post=119134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/tags?post=119134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}