[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"roadmap-learn-astro-for-content-driven-websites-es":3},{"data":4,"meta":2184},[5],{"id":6,"documentId":7,"title":8,"slug":9,"excerpt":10,"level":11,"durationEstimate":12,"body":13,"createdAt":1984,"updatedAt":1984,"publishedAt":1985,"coverImage":1986,"author":2033,"relatedStacks":2041},19,"sl7m8klkxj3zrxl4cg9dt45r","Learn Astro for Content-Driven Websites","learn-astro-for-content-driven-websites","A practical roadmap for learning Astro to build fast blogs, documentation sites, portfolios, and modern content-driven websites with strong performance and clean architecture.","beginner","4 to 6 weeks",[14,20,24,28,32,36,39,43,47,50,54,58,61,65,69,73,77,81,85,88,92,96,99,103,107,110,114,118,122,126,129,133,136,140,144,147,151,154,158,162,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,232,235,239,243,246,250,254,257,261,265,269,273,277,281,285,288,292,296,300,304,307,310,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,389,393,397,401,404,408,411,415,418,422,426,430,433,436,440,444,447,451,455,459,463,467,471,475,479,482,485,489,493,496,499,503,507,511,515,519,523,527,530,533,537,541,545,548,551,555,559,563,566,569,573,577,581,585,589,592,595,598,602,606,610,614,617,620,624,628,632,636,640,644,647,650,654,657,661,664,667,671,675,678,681,685,689,693,697,700,703,707,711,715,719,722,725,729,732,735,739,742,745,749,753,756,760,764,768,772,776,780,783,786,790,794,797,801,804,807,811,815,819,822,826,829,832,836,840,843,847,851,854,857,861,864,867,870,874,878,882,886,889,893,897,901,904,907,910,913,917,921,924,928,931,934,938,941,944,948,952,956,960,964,968,972,976,980,984,988,991,995,999,1003,1007,1011,1014,1018,1022,1026,1030,1034,1038,1042,1045,1048,1052,1055,1059,1062,1065,1068,1071,1075,1078,1082,1085,1088,1091,1095,1098,1101,1105,1109,1112,1115,1118,1121,1124,1127,1130,1134,1138,1141,1144,1148,1152,1155,1159,1163,1166,1169,1172,1175,1179,1182,1186,1190,1193,1197,1201,1205,1209,1213,1217,1220,1224,1228,1232,1236,1240,1243,1246,1250,1254,1258,1262,1266,1270,1273,1276,1280,1284,1287,1290,1294,1298,1302,1306,1310,1313,1316,1320,1324,1327,1331,1335,1338,1341,1345,1349,1353,1357,1361,1364,1368,1371,1375,1379,1383,1387,1391,1395,1398,1401,1405,1409,1413,1416,1420,1424,1428,1432,1436,1440,1444,1448,1452,1456,1459,1463,1466,1470,1474,1477,1480,1484,1488,1492,1496,1500,1503,1506,1510,1514,1518,1522,1526,1529,1533,1537,1540,1543,1547,1551,1555,1559,1562,1565,1569,1573,1577,1581,1584,1588,1592,1595,1598,1602,1606,1610,1614,1618,1621,1624,1628,1632,1636,1640,1643,1647,1651,1654,1657,1661,1665,1669,1673,1676,1679,1683,1687,1691,1694,1698,1702,1705,1708,1712,1716,1720,1724,1727,1730,1734,1738,1742,1745,1749,1753,1756,1759,1763,1767,1771,1775,1779,1782,1785,1789,1793,1797,1801,1804,1808,1811,1815,1819,1822,1826,1830,1833,1837,1841,1844,1848,1852,1855,1859,1863,1866,1870,1874,1877,1881,1885,1889,1893,1897,1901,1905,1909,1912,1916,1920,1923,1927,1931,1934,1938,1942,1946,1950,1954,1958,1962,1966,1970,1974,1978,1981],{"type":15,"children":16},"paragraph",[17],{"text":18,"type":19},"# Learn Astro for Content-Driven Websites","text",{"type":15,"children":21},[22],{"text":23,"type":19},"Astro is a modern web framework built for content-heavy websites like blogs, documentation portals, portfolios, editorial sites, and marketing pages. Its core strength is a server-first model that sends lightweight HTML by default and adds JavaScript only where needed. Astro also supports file-based routing, reusable layouts, content collections, Markdown/MDX, image optimization, and deployment across static or server-rendered setups. ([Astro][1])",{"type":15,"children":25},[26],{"text":27,"type":19},"",{"type":15,"children":29},[30],{"text":31,"type":19},"## Who this roadmap is for",{"type":15,"children":33},[34],{"text":35,"type":19},"This roadmap is for beginners and intermediate developers who want to build a real Astro site instead of just poking around a starter template. It is especially useful if you want to create a blog, docs site, portfolio, or CMS-driven content platform with strong performance and clean architecture. Astro’s own docs position it as a strong fit for content-driven projects, and the official tutorial teaches it by building a blog from scratch. ([Astro][1])",{"type":15,"children":37},[38],{"text":27,"type":19},{"type":15,"children":40},[41],{"text":42,"type":19},"## What you should be able to do by the end",{"type":15,"children":44},[45],{"text":46,"type":19},"By the end of this roadmap, you should be able to create pages and layouts, understand Astro’s project structure, work with file-based routing, build a blog with Markdown or MDX, organize posts with content collections, add selective interactivity with islands, optimize images, and deploy an Astro project properly. Astro’s current docs also make it clear that modern content collections use the Content Layer API, and that is the direction you should learn now instead of older legacy patterns. ([Astro Documentation][2])",{"type":15,"children":48},[49],{"text":27,"type":19},{"type":15,"children":51},[52],{"text":53,"type":19},"# Phase 1 — Understand Astro’s mental model",{"type":15,"children":55},[56],{"text":57,"type":19},"Before writing code, get this straight: Astro is not trying to turn every website into a giant client-side app. It is built around server-rendered HTML, strong performance, and selective hydration. That means you only ship JavaScript where interactivity is actually needed. This is one of Astro’s biggest differences from app-first frameworks. ([Astro][1])",{"type":15,"children":59},[60],{"text":27,"type":19},{"type":15,"children":62},[63],{"text":64,"type":19},"### Focus on:",{"type":15,"children":66},[67],{"text":68,"type":19},"* Server-first rendering",{"type":15,"children":70},[71],{"text":72,"type":19},"* Content-driven architecture",{"type":15,"children":74},[75],{"text":76,"type":19},"* Islands architecture",{"type":15,"children":78},[79],{"text":80,"type":19},"* Static-first thinking",{"type":15,"children":82},[83],{"text":84,"type":19},"* When Astro is a better fit than a full SPA",{"type":15,"children":86},[87],{"text":27,"type":19},{"type":15,"children":89},[90],{"text":91,"type":19},"### Build:",{"type":15,"children":93},[94],{"text":95,"type":19},"* A tiny website with a homepage, about page, and blog placeholder",{"type":15,"children":97},[98],{"text":27,"type":19},{"type":15,"children":100},[101],{"text":102,"type":19},"# Phase 2 — Set up your first Astro project",{"type":15,"children":104},[105],{"text":106,"type":19},"The official way to start is with the `create astro` CLI wizard. Astro’s docs recommend this as the fastest way to scaffold a project, and the development server is then started through the normal package scripts. ([Astro Documentation][3])",{"type":15,"children":108},[109],{"text":27,"type":19},{"type":15,"children":111},[112],{"text":113,"type":19},"## Step 1: Create the project",{"type":15,"children":115},[116],{"text":117,"type":19},"```bash",{"type":15,"children":119},[120],{"text":121,"type":19},"npm create astro@latest",{"type":15,"children":123},[124],{"text":125,"type":19},"```",{"type":15,"children":127},[128],{"text":27,"type":19},{"type":15,"children":130},[131],{"text":132,"type":19},"Then move into the project and start the dev server:",{"type":15,"children":134},[135],{"text":117,"type":19},{"type":15,"children":137},[138],{"text":139,"type":19},"cd my-astro-site",{"type":15,"children":141},[142],{"text":143,"type":19},"npm run dev",{"type":15,"children":145},[146],{"text":125,"type":19},{"type":15,"children":148},[149],{"text":150,"type":19},"Astro’s docs use this exact workflow as the standard getting-started path. ([Astro Documentation][3])",{"type":15,"children":152},[153],{"text":27,"type":19},{"type":15,"children":155},[156],{"text":157,"type":19},"## Step 2: Understand the basic structure",{"type":15,"children":159},[160],{"text":161,"type":19},"A normal Astro project includes `src/` for source code, `public/` for static assets, `astro.config.mjs`, and `package.json`. Pages live in `src/pages`, and Astro turns those files into routes automatically. ([Astro Documentation][2])",{"type":15,"children":163},[164],{"text":27,"type":19},{"type":15,"children":166},[167],{"text":168,"type":19},"A clean early structure could look like this:",{"type":15,"children":170},[171],{"text":172,"type":19},"```txt",{"type":15,"children":174},[175],{"text":176,"type":19},"my-astro-site/",{"type":15,"children":178},[179],{"text":180,"type":19},"├─ public/",{"type":15,"children":182},[183],{"text":184,"type":19},"│  └─ favicon.svg",{"type":15,"children":186},[187],{"text":188,"type":19},"├─ src/",{"type":15,"children":190},[191],{"text":192,"type":19},"│  ├─ components/",{"type":15,"children":194},[195],{"text":196,"type":19},"│  ├─ layouts/",{"type":15,"children":198},[199],{"text":200,"type":19},"│  ├─ pages/",{"type":15,"children":202},[203],{"text":204,"type":19},"│  │  ├─ index.astro",{"type":15,"children":206},[207],{"text":208,"type":19},"│  │  └─ about.astro",{"type":15,"children":210},[211],{"text":212,"type":19},"│  └─ styles/",{"type":15,"children":214},[215],{"text":216,"type":19},"│     └─ global.css",{"type":15,"children":218},[219],{"text":220,"type":19},"├─ astro.config.mjs",{"type":15,"children":222},[223],{"text":224,"type":19},"├─ package.json",{"type":15,"children":226},[227],{"text":228,"type":19},"└─ tsconfig.json",{"type":15,"children":230},[231],{"text":125,"type":19},{"type":15,"children":233},[234],{"text":27,"type":19},{"type":15,"children":236},[237],{"text":238,"type":19},"# Phase 3 — Build your first page step by step",{"type":15,"children":240},[241],{"text":242,"type":19},"Now the fun part. Let’s build a real first page the proper way.",{"type":15,"children":244},[245],{"text":27,"type":19},{"type":15,"children":247},[248],{"text":249,"type":19},"## Step 1: Create a reusable layout",{"type":15,"children":251},[252],{"text":253,"type":19},"Astro layouts are just Astro components that provide common page structure like `\u003Chtml>`, `\u003Chead>`, and shared UI. The docs explicitly describe layouts as reusable page templates with a `\u003Cslot />` where page content gets injected. ([Astro Documentation][4])",{"type":15,"children":255},[256],{"text":27,"type":19},{"type":15,"children":258},[259],{"text":260,"type":19},"Create `src/layouts/MainLayout.astro`:",{"type":15,"children":262},[263],{"text":264,"type":19},"```astro",{"type":15,"children":266},[267],{"text":268,"type":19},"---",{"type":15,"children":270},[271],{"text":272,"type":19},"interface Props {",{"type":15,"children":274},[275],{"text":276,"type":19},"  title: string;",{"type":15,"children":278},[279],{"text":280,"type":19},"  description?: string;",{"type":15,"children":282},[283],{"text":284,"type":19},"}",{"type":15,"children":286},[287],{"text":27,"type":19},{"type":15,"children":289},[290],{"text":291,"type":19},"const {",{"type":15,"children":293},[294],{"text":295,"type":19},"  title,",{"type":15,"children":297},[298],{"text":299,"type":19},"  description = \"A modern Astro website\"",{"type":15,"children":301},[302],{"text":303,"type":19},"} = Astro.props;",{"type":15,"children":305},[306],{"text":268,"type":19},{"type":15,"children":308},[309],{"text":27,"type":19},{"type":15,"children":311},[312],{"text":313,"type":19},"\u003C!DOCTYPE html>",{"type":15,"children":315},[316],{"text":317,"type":19},"\u003Chtml lang=\"en\">",{"type":15,"children":319},[320],{"text":321,"type":19},"  \u003Chead>",{"type":15,"children":323},[324],{"text":325,"type":19},"    \u003Cmeta charset=\"UTF-8\" />",{"type":15,"children":327},[328],{"text":329,"type":19},"    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />",{"type":15,"children":331},[332],{"text":333,"type":19},"    \u003Cmeta name=\"description\" content={description} />",{"type":15,"children":335},[336],{"text":337,"type":19},"    \u003Ctitle>{title}\u003C/title>",{"type":15,"children":339},[340],{"text":341,"type":19},"    \u003Clink rel=\"stylesheet\" href=\"/src/styles/global.css\" />",{"type":15,"children":343},[344],{"text":345,"type":19},"  \u003C/head>",{"type":15,"children":347},[348],{"text":349,"type":19},"  \u003Cbody>",{"type":15,"children":351},[352],{"text":353,"type":19},"    \u003Cheader class=\"site-header\">",{"type":15,"children":355},[356],{"text":357,"type":19},"      \u003Cdiv class=\"container\">",{"type":15,"children":359},[360],{"text":361,"type":19},"        \u003Ca href=\"/\" class=\"logo\">AstroStarter\u003C/a>",{"type":15,"children":363},[364],{"text":365,"type":19},"        \u003Cnav>",{"type":15,"children":367},[368],{"text":369,"type":19},"          \u003Ca href=\"/\">Home\u003C/a>",{"type":15,"children":371},[372],{"text":373,"type":19},"          \u003Ca href=\"/about\">About\u003C/a>",{"type":15,"children":375},[376],{"text":377,"type":19},"        \u003C/nav>",{"type":15,"children":379},[380],{"text":381,"type":19},"      \u003C/div>",{"type":15,"children":383},[384],{"text":385,"type":19},"    \u003C/header>",{"type":15,"children":387},[388],{"text":27,"type":19},{"type":15,"children":390},[391],{"text":392,"type":19},"    \u003Cmain class=\"container\">",{"type":15,"children":394},[395],{"text":396,"type":19},"      \u003Cslot />",{"type":15,"children":398},[399],{"text":400,"type":19},"    \u003C/main>",{"type":15,"children":402},[403],{"text":27,"type":19},{"type":15,"children":405},[406],{"text":407,"type":19},"    \u003Cfooter class=\"site-footer\">",{"type":15,"children":409},[410],{"text":357,"type":19},{"type":15,"children":412},[413],{"text":414,"type":19},"        \u003Cp>Built with Astro.\u003C/p>",{"type":15,"children":416},[417],{"text":381,"type":19},{"type":15,"children":419},[420],{"text":421,"type":19},"    \u003C/footer>",{"type":15,"children":423},[424],{"text":425,"type":19},"  \u003C/body>",{"type":15,"children":427},[428],{"text":429,"type":19},"\u003C/html>",{"type":15,"children":431},[432],{"text":125,"type":19},{"type":15,"children":434},[435],{"text":27,"type":19},{"type":15,"children":437},[438],{"text":439,"type":19},"## Step 2: Add global styles",{"type":15,"children":441},[442],{"text":443,"type":19},"Create `src/styles/global.css`:",{"type":15,"children":445},[446],{"text":27,"type":19},{"type":15,"children":448},[449],{"text":450,"type":19},"```css",{"type":15,"children":452},[453],{"text":454,"type":19},":root {",{"type":15,"children":456},[457],{"text":458,"type":19},"  --bg: #0b1020;",{"type":15,"children":460},[461],{"text":462,"type":19},"  --surface: #121933;",{"type":15,"children":464},[465],{"text":466,"type":19},"  --text: #e8ecf3;",{"type":15,"children":468},[469],{"text":470,"type":19},"  --muted: #aab4c3;",{"type":15,"children":472},[473],{"text":474,"type":19},"  --accent: #7dd3fc;",{"type":15,"children":476},[477],{"text":478,"type":19},"  --border: #26314f;",{"type":15,"children":480},[481],{"text":284,"type":19},{"type":15,"children":483},[484],{"text":27,"type":19},{"type":15,"children":486},[487],{"text":488,"type":19},"* {",{"type":15,"children":490},[491],{"text":492,"type":19},"  box-sizing: border-box;",{"type":15,"children":494},[495],{"text":284,"type":19},{"type":15,"children":497},[498],{"text":27,"type":19},{"type":15,"children":500},[501],{"text":502,"type":19},"html,",{"type":15,"children":504},[505],{"text":506,"type":19},"body {",{"type":15,"children":508},[509],{"text":510,"type":19},"  margin: 0;",{"type":15,"children":512},[513],{"text":514,"type":19},"  padding: 0;",{"type":15,"children":516},[517],{"text":518,"type":19},"  font-family: Inter, Arial, sans-serif;",{"type":15,"children":520},[521],{"text":522,"type":19},"  background: var(--bg);",{"type":15,"children":524},[525],{"text":526,"type":19},"  color: var(--text);",{"type":15,"children":528},[529],{"text":284,"type":19},{"type":15,"children":531},[532],{"text":27,"type":19},{"type":15,"children":534},[535],{"text":536,"type":19},"a {",{"type":15,"children":538},[539],{"text":540,"type":19},"  color: var(--accent);",{"type":15,"children":542},[543],{"text":544,"type":19},"  text-decoration: none;",{"type":15,"children":546},[547],{"text":284,"type":19},{"type":15,"children":549},[550],{"text":27,"type":19},{"type":15,"children":552},[553],{"text":554,"type":19},".container {",{"type":15,"children":556},[557],{"text":558,"type":19},"  width: min(1100px, calc(100% - 2rem));",{"type":15,"children":560},[561],{"text":562,"type":19},"  margin: 0 auto;",{"type":15,"children":564},[565],{"text":284,"type":19},{"type":15,"children":567},[568],{"text":27,"type":19},{"type":15,"children":570},[571],{"text":572,"type":19},".site-header,",{"type":15,"children":574},[575],{"text":576,"type":19},".site-footer {",{"type":15,"children":578},[579],{"text":580,"type":19},"  border-bottom: 1px solid var(--border);",{"type":15,"children":582},[583],{"text":584,"type":19},"  background: rgba(18, 25, 51, 0.7);",{"type":15,"children":586},[587],{"text":588,"type":19},"  backdrop-filter: blur(8px);",{"type":15,"children":590},[591],{"text":284,"type":19},{"type":15,"children":593},[594],{"text":27,"type":19},{"type":15,"children":596},[597],{"text":576,"type":19},{"type":15,"children":599},[600],{"text":601,"type":19},"  border-top: 1px solid var(--border);",{"type":15,"children":603},[604],{"text":605,"type":19},"  border-bottom: none;",{"type":15,"children":607},[608],{"text":609,"type":19},"  margin-top: 4rem;",{"type":15,"children":611},[612],{"text":613,"type":19},"  padding: 2rem 0;",{"type":15,"children":615},[616],{"text":284,"type":19},{"type":15,"children":618},[619],{"text":27,"type":19},{"type":15,"children":621},[622],{"text":623,"type":19},".site-header .container,",{"type":15,"children":625},[626],{"text":627,"type":19},".site-footer .container {",{"type":15,"children":629},[630],{"text":631,"type":19},"  display: flex;",{"type":15,"children":633},[634],{"text":635,"type":19},"  align-items: center;",{"type":15,"children":637},[638],{"text":639,"type":19},"  justify-content: space-between;",{"type":15,"children":641},[642],{"text":643,"type":19},"  padding: 1rem 0;",{"type":15,"children":645},[646],{"text":284,"type":19},{"type":15,"children":648},[649],{"text":27,"type":19},{"type":15,"children":651},[652],{"text":653,"type":19},"nav {",{"type":15,"children":655},[656],{"text":631,"type":19},{"type":15,"children":658},[659],{"text":660,"type":19},"  gap: 1rem;",{"type":15,"children":662},[663],{"text":284,"type":19},{"type":15,"children":665},[666],{"text":27,"type":19},{"type":15,"children":668},[669],{"text":670,"type":19},".hero {",{"type":15,"children":672},[673],{"text":674,"type":19},"  padding: 5rem 0 3rem;",{"type":15,"children":676},[677],{"text":284,"type":19},{"type":15,"children":679},[680],{"text":27,"type":19},{"type":15,"children":682},[683],{"text":684,"type":19},".hero h1 {",{"type":15,"children":686},[687],{"text":688,"type":19},"  font-size: clamp(2.2rem, 5vw, 4rem);",{"type":15,"children":690},[691],{"text":692,"type":19},"  line-height: 1.05;",{"type":15,"children":694},[695],{"text":696,"type":19},"  margin-bottom: 1rem;",{"type":15,"children":698},[699],{"text":284,"type":19},{"type":15,"children":701},[702],{"text":27,"type":19},{"type":15,"children":704},[705],{"text":706,"type":19},".hero p {",{"type":15,"children":708},[709],{"text":710,"type":19},"  max-width: 680px;",{"type":15,"children":712},[713],{"text":714,"type":19},"  color: var(--muted);",{"type":15,"children":716},[717],{"text":718,"type":19},"  font-size: 1.1rem;",{"type":15,"children":720},[721],{"text":284,"type":19},{"type":15,"children":723},[724],{"text":27,"type":19},{"type":15,"children":726},[727],{"text":728,"type":19},".actions {",{"type":15,"children":730},[731],{"text":631,"type":19},{"type":15,"children":733},[734],{"text":660,"type":19},{"type":15,"children":736},[737],{"text":738,"type":19},"  margin-top: 1.5rem;",{"type":15,"children":740},[741],{"text":284,"type":19},{"type":15,"children":743},[744],{"text":27,"type":19},{"type":15,"children":746},[747],{"text":748,"type":19},".button {",{"type":15,"children":750},[751],{"text":752,"type":19},"  display: inline-flex;",{"type":15,"children":754},[755],{"text":635,"type":19},{"type":15,"children":757},[758],{"text":759,"type":19},"  justify-content: center;",{"type":15,"children":761},[762],{"text":763,"type":19},"  background: var(--accent);",{"type":15,"children":765},[766],{"text":767,"type":19},"  color: #08111f;",{"type":15,"children":769},[770],{"text":771,"type":19},"  padding: 0.85rem 1.15rem;",{"type":15,"children":773},[774],{"text":775,"type":19},"  border-radius: 0.8rem;",{"type":15,"children":777},[778],{"text":779,"type":19},"  font-weight: 700;",{"type":15,"children":781},[782],{"text":284,"type":19},{"type":15,"children":784},[785],{"text":27,"type":19},{"type":15,"children":787},[788],{"text":789,"type":19},".button.secondary {",{"type":15,"children":791},[792],{"text":793,"type":19},"  background: transparent;",{"type":15,"children":795},[796],{"text":526,"type":19},{"type":15,"children":798},[799],{"text":800,"type":19},"  border: 1px solid var(--border);",{"type":15,"children":802},[803],{"text":284,"type":19},{"type":15,"children":805},[806],{"text":27,"type":19},{"type":15,"children":808},[809],{"text":810,"type":19},".features {",{"type":15,"children":812},[813],{"text":814,"type":19},"  display: grid;",{"type":15,"children":816},[817],{"text":818,"type":19},"  grid-template-columns: repeat(3, 1fr);",{"type":15,"children":820},[821],{"text":660,"type":19},{"type":15,"children":823},[824],{"text":825,"type":19},"  margin-top: 2rem;",{"type":15,"children":827},[828],{"text":284,"type":19},{"type":15,"children":830},[831],{"text":27,"type":19},{"type":15,"children":833},[834],{"text":835,"type":19},".card {",{"type":15,"children":837},[838],{"text":839,"type":19},"  background: var(--surface);",{"type":15,"children":841},[842],{"text":800,"type":19},{"type":15,"children":844},[845],{"text":846,"type":19},"  border-radius: 1rem;",{"type":15,"children":848},[849],{"text":850,"type":19},"  padding: 1.25rem;",{"type":15,"children":852},[853],{"text":284,"type":19},{"type":15,"children":855},[856],{"text":27,"type":19},{"type":15,"children":858},[859],{"text":860,"type":19},".card p {",{"type":15,"children":862},[863],{"text":714,"type":19},{"type":15,"children":865},[866],{"text":284,"type":19},{"type":15,"children":868},[869],{"text":27,"type":19},{"type":15,"children":871},[872],{"text":873,"type":19},"@media (max-width: 800px) {",{"type":15,"children":875},[876],{"text":877,"type":19},"  .features {",{"type":15,"children":879},[880],{"text":881,"type":19},"    grid-template-columns: 1fr;",{"type":15,"children":883},[884],{"text":885,"type":19},"  }",{"type":15,"children":887},[888],{"text":27,"type":19},{"type":15,"children":890},[891],{"text":892,"type":19},"  .site-header .container {",{"type":15,"children":894},[895],{"text":896,"type":19},"    flex-direction: column;",{"type":15,"children":898},[899],{"text":900,"type":19},"    gap: 0.75rem;",{"type":15,"children":902},[903],{"text":885,"type":19},{"type":15,"children":905},[906],{"text":284,"type":19},{"type":15,"children":908},[909],{"text":125,"type":19},{"type":15,"children":911},[912],{"text":27,"type":19},{"type":15,"children":914},[915],{"text":916,"type":19},"## Step 3: Create the homepage",{"type":15,"children":918},[919],{"text":920,"type":19},"Astro pages live in `src/pages`, and each file becomes a route based on its file path. So `src/pages/index.astro` maps to `/`. That is Astro’s standard file-based routing model. ([Astro Documentation][5])",{"type":15,"children":922},[923],{"text":27,"type":19},{"type":15,"children":925},[926],{"text":927,"type":19},"Create `src/pages/index.astro`:",{"type":15,"children":929},[930],{"text":264,"type":19},{"type":15,"children":932},[933],{"text":268,"type":19},{"type":15,"children":935},[936],{"text":937,"type":19},"import MainLayout from \"../layouts/MainLayout.astro\";",{"type":15,"children":939},[940],{"text":268,"type":19},{"type":15,"children":942},[943],{"text":27,"type":19},{"type":15,"children":945},[946],{"text":947,"type":19},"\u003CMainLayout",{"type":15,"children":949},[950],{"text":951,"type":19},"  title=\"Learn Astro\"",{"type":15,"children":953},[954],{"text":955,"type":19},"  description=\"A practical Astro starter homepage\"",{"type":15,"children":957},[958],{"text":959,"type":19},">",{"type":15,"children":961},[962],{"text":963,"type":19},"  \u003Csection class=\"hero\">",{"type":15,"children":965},[966],{"text":967,"type":19},"    \u003Cp>Modern content-first development\u003C/p>",{"type":15,"children":969},[970],{"text":971,"type":19},"    \u003Ch1>Build fast websites with Astro\u003C/h1>",{"type":15,"children":973},[974],{"text":975,"type":19},"    \u003Cp>",{"type":15,"children":977},[978],{"text":979,"type":19},"      Astro is ideal for blogs, documentation, portfolios, and marketing sites.",{"type":15,"children":981},[982],{"text":983,"type":19},"      It keeps the HTML light, the architecture clean, and the performance sharp.",{"type":15,"children":985},[986],{"text":987,"type":19},"    \u003C/p>",{"type":15,"children":989},[990],{"text":27,"type":19},{"type":15,"children":992},[993],{"text":994,"type":19},"    \u003Cdiv class=\"actions\">",{"type":15,"children":996},[997],{"text":998,"type":19},"      \u003Ca href=\"/about\" class=\"button\">Get Started\u003C/a>",{"type":15,"children":1000},[1001],{"text":1002,"type":19},"      \u003Ca href=\"/blog\" class=\"button secondary\">Read the Blog\u003C/a>",{"type":15,"children":1004},[1005],{"text":1006,"type":19},"    \u003C/div>",{"type":15,"children":1008},[1009],{"text":1010,"type":19},"  \u003C/section>",{"type":15,"children":1012},[1013],{"text":27,"type":19},{"type":15,"children":1015},[1016],{"text":1017,"type":19},"  \u003Csection class=\"features\">",{"type":15,"children":1019},[1020],{"text":1021,"type":19},"    \u003Carticle class=\"card\">",{"type":15,"children":1023},[1024],{"text":1025,"type":19},"      \u003Ch2>Fast by default\u003C/h2>",{"type":15,"children":1027},[1028],{"text":1029,"type":19},"      \u003Cp>",{"type":15,"children":1031},[1032],{"text":1033,"type":19},"        Ship less JavaScript and let content load like it has some self-respect.",{"type":15,"children":1035},[1036],{"text":1037,"type":19},"      \u003C/p>",{"type":15,"children":1039},[1040],{"text":1041,"type":19},"    \u003C/article>",{"type":15,"children":1043},[1044],{"text":27,"type":19},{"type":15,"children":1046},[1047],{"text":1021,"type":19},{"type":15,"children":1049},[1050],{"text":1051,"type":19},"      \u003Ch2>Perfect for content\u003C/h2>",{"type":15,"children":1053},[1054],{"text":1029,"type":19},{"type":15,"children":1056},[1057],{"text":1058,"type":19},"        Blogs, docs, landing pages, and portfolios feel natural in Astro.",{"type":15,"children":1060},[1061],{"text":1037,"type":19},{"type":15,"children":1063},[1064],{"text":1041,"type":19},{"type":15,"children":1066},[1067],{"text":27,"type":19},{"type":15,"children":1069},[1070],{"text":1021,"type":19},{"type":15,"children":1072},[1073],{"text":1074,"type":19},"      \u003Ch2>Expandable\u003C/h2>",{"type":15,"children":1076},[1077],{"text":1029,"type":19},{"type":15,"children":1079},[1080],{"text":1081,"type":19},"        Add React, Vue, Svelte, Tailwind, CMS data, or dynamic features only where needed.",{"type":15,"children":1083},[1084],{"text":1037,"type":19},{"type":15,"children":1086},[1087],{"text":1041,"type":19},{"type":15,"children":1089},[1090],{"text":1010,"type":19},{"type":15,"children":1092},[1093],{"text":1094,"type":19},"\u003C/MainLayout>",{"type":15,"children":1096},[1097],{"text":125,"type":19},{"type":15,"children":1099},[1100],{"text":27,"type":19},{"type":15,"children":1102},[1103],{"text":1104,"type":19},"## Step 4: Create an About page",{"type":15,"children":1106},[1107],{"text":1108,"type":19},"Create `src/pages/about.astro`:",{"type":15,"children":1110},[1111],{"text":27,"type":19},{"type":15,"children":1113},[1114],{"text":264,"type":19},{"type":15,"children":1116},[1117],{"text":268,"type":19},{"type":15,"children":1119},[1120],{"text":937,"type":19},{"type":15,"children":1122},[1123],{"text":268,"type":19},{"type":15,"children":1125},[1126],{"text":27,"type":19},{"type":15,"children":1128},[1129],{"text":947,"type":19},{"type":15,"children":1131},[1132],{"text":1133,"type":19},"  title=\"About\"",{"type":15,"children":1135},[1136],{"text":1137,"type":19},"  description=\"About this Astro starter project\"",{"type":15,"children":1139},[1140],{"text":959,"type":19},{"type":15,"children":1142},[1143],{"text":963,"type":19},{"type":15,"children":1145},[1146],{"text":1147,"type":19},"    \u003Cp>About this project\u003C/p>",{"type":15,"children":1149},[1150],{"text":1151,"type":19},"    \u003Ch1>A clean Astro foundation\u003C/h1>",{"type":15,"children":1153},[1154],{"text":975,"type":19},{"type":15,"children":1156},[1157],{"text":1158,"type":19},"      This project was created to learn Astro fundamentals: layouts, pages,",{"type":15,"children":1160},[1161],{"text":1162,"type":19},"      routing, styling, and content-first architecture.",{"type":15,"children":1164},[1165],{"text":987,"type":19},{"type":15,"children":1167},[1168],{"text":1010,"type":19},{"type":15,"children":1170},[1171],{"text":1094,"type":19},{"type":15,"children":1173},[1174],{"text":125,"type":19},{"type":15,"children":1176},[1177],{"text":1178,"type":19},"At this point you already understand one of Astro’s most important building blocks: reusable layouts plus file-based routing. That sounds simple because it is simple, and that is exactly why it scales well for content sites. ([Astro Documentation][5])",{"type":15,"children":1180},[1181],{"text":27,"type":19},{"type":15,"children":1183},[1184],{"text":1185,"type":19},"# Phase 4 — Learn routing properly",{"type":15,"children":1187},[1188],{"text":1189,"type":19},"Astro uses file-based routing, and dynamic routes can generate multiple pages from local content or external data. This is essential for blog posts, category pages, docs sections, and CMS-fed pages. ([Astro Documentation][5])",{"type":15,"children":1191},[1192],{"text":27,"type":19},{"type":15,"children":1194},[1195],{"text":1196,"type":19},"## Learn:",{"type":15,"children":1198},[1199],{"text":1200,"type":19},"* Static routes",{"type":15,"children":1202},[1203],{"text":1204,"type":19},"* Nested routes",{"type":15,"children":1206},[1207],{"text":1208,"type":19},"* Dynamic routes",{"type":15,"children":1210},[1211],{"text":1212,"type":19},"* `getStaticPaths()`",{"type":15,"children":1214},[1215],{"text":1216,"type":19},"* Building pages from data",{"type":15,"children":1218},[1219],{"text":27,"type":19},{"type":15,"children":1221},[1222],{"text":1223,"type":19},"## Build:",{"type":15,"children":1225},[1226],{"text":1227,"type":19},"* `/blog`",{"type":15,"children":1229},[1230],{"text":1231,"type":19},"* `/blog/[slug]`",{"type":15,"children":1233},[1234],{"text":1235,"type":19},"* `/category/[name]`",{"type":15,"children":1237},[1238],{"text":1239,"type":19},"A future structure might look like this:",{"type":15,"children":1241},[1242],{"text":27,"type":19},{"type":15,"children":1244},[1245],{"text":172,"type":19},{"type":15,"children":1247},[1248],{"text":1249,"type":19},"src/pages/",{"type":15,"children":1251},[1252],{"text":1253,"type":19},"├─ index.astro",{"type":15,"children":1255},[1256],{"text":1257,"type":19},"├─ about.astro",{"type":15,"children":1259},[1260],{"text":1261,"type":19},"├─ blog/",{"type":15,"children":1263},[1264],{"text":1265,"type":19},"│  ├─ index.astro",{"type":15,"children":1267},[1268],{"text":1269,"type":19},"│  └─ [slug].astro",{"type":15,"children":1271},[1272],{"text":125,"type":19},{"type":15,"children":1274},[1275],{"text":27,"type":19},{"type":15,"children":1277},[1278],{"text":1279,"type":19},"# Phase 5 — Learn Markdown and MDX",{"type":15,"children":1281},[1282],{"text":1283,"type":19},"Astro’s official blog tutorial teaches content creation as a core part of learning the framework. For real blogs, you should learn Markdown first, then MDX when you need richer embedded components inside articles. The docs and tutorials strongly support this workflow. ([Astro Documentation][6])",{"type":15,"children":1285},[1286],{"text":27,"type":19},{"type":15,"children":1288},[1289],{"text":1196,"type":19},{"type":15,"children":1291},[1292],{"text":1293,"type":19},"* Frontmatter",{"type":15,"children":1295},[1296],{"text":1297,"type":19},"* Markdown pages",{"type":15,"children":1299},[1300],{"text":1301,"type":19},"* MDX pages",{"type":15,"children":1303},[1304],{"text":1305,"type":19},"* Article metadata",{"type":15,"children":1307},[1308],{"text":1309,"type":19},"* Authoring workflow",{"type":15,"children":1311},[1312],{"text":27,"type":19},{"type":15,"children":1314},[1315],{"text":1223,"type":19},{"type":15,"children":1317},[1318],{"text":1319,"type":19},"* 3 basic Markdown posts",{"type":15,"children":1321},[1322],{"text":1323,"type":19},"* 1 MDX article with custom callouts or components",{"type":15,"children":1325},[1326],{"text":27,"type":19},{"type":15,"children":1328},[1329],{"text":1330,"type":19},"# Phase 6 — Learn Content Collections the modern way",{"type":15,"children":1332},[1333],{"text":1334,"type":19},"This matters a lot now. Astro’s current docs show that content collections are powered by the Content Layer API, and Astro v6 requires you to use that modern model instead of older legacy collection patterns. So learn the new way from the start and save yourself future migration pain. ([v6.docs.astro.build][7])",{"type":15,"children":1336},[1337],{"text":27,"type":19},{"type":15,"children":1339},[1340],{"text":1196,"type":19},{"type":15,"children":1342},[1343],{"text":1344,"type":19},"* `src/content.config.ts`",{"type":15,"children":1346},[1347],{"text":1348,"type":19},"* Defining collections",{"type":15,"children":1350},[1351],{"text":1352,"type":19},"* Schema validation",{"type":15,"children":1354},[1355],{"text":1356,"type":19},"* Loading local or remote content",{"type":15,"children":1358},[1359],{"text":1360,"type":19},"* Generating pages from entries",{"type":15,"children":1362},[1363],{"text":27,"type":19},{"type":15,"children":1365},[1366],{"text":1367,"type":19},"## Example structure:",{"type":15,"children":1369},[1370],{"text":172,"type":19},{"type":15,"children":1372},[1373],{"text":1374,"type":19},"src/",{"type":15,"children":1376},[1377],{"text":1378,"type":19},"├─ content/",{"type":15,"children":1380},[1381],{"text":1382,"type":19},"│  └─ blog/",{"type":15,"children":1384},[1385],{"text":1386,"type":19},"│     ├─ first-post.md",{"type":15,"children":1388},[1389],{"text":1390,"type":19},"│     └─ second-post.md",{"type":15,"children":1392},[1393],{"text":1394,"type":19},"└─ content.config.ts",{"type":15,"children":1396},[1397],{"text":125,"type":19},{"type":15,"children":1399},[1400],{"text":27,"type":19},{"type":15,"children":1402},[1403],{"text":1404,"type":19},"## Example collection config",{"type":15,"children":1406},[1407],{"text":1408,"type":19},"```ts",{"type":15,"children":1410},[1411],{"text":1412,"type":19},"import { defineCollection, z } from \"astro:content\";",{"type":15,"children":1414},[1415],{"text":27,"type":19},{"type":15,"children":1417},[1418],{"text":1419,"type":19},"const blog = defineCollection({",{"type":15,"children":1421},[1422],{"text":1423,"type":19},"  schema: z.object({",{"type":15,"children":1425},[1426],{"text":1427,"type":19},"    title: z.string(),",{"type":15,"children":1429},[1430],{"text":1431,"type":19},"    description: z.string(),",{"type":15,"children":1433},[1434],{"text":1435,"type":19},"    pubDate: z.coerce.date(),",{"type":15,"children":1437},[1438],{"text":1439,"type":19},"    tags: z.array(z.string()).default([]),",{"type":15,"children":1441},[1442],{"text":1443,"type":19},"    draft: z.boolean().default(false),",{"type":15,"children":1445},[1446],{"text":1447,"type":19},"  }),",{"type":15,"children":1449},[1450],{"text":1451,"type":19},"});",{"type":15,"children":1453},[1454],{"text":1455,"type":19},"export const collections = { blog };",{"type":15,"children":1457},[1458],{"text":125,"type":19},{"type":15,"children":1460},[1461],{"text":1462,"type":19},"That schema-first structure is one of the best things Astro gives you for content work. It keeps your blog from turning into a swamp of random frontmatter nonsense. Beautiful stuff. ([v6.docs.astro.build][7])",{"type":15,"children":1464},[1465],{"text":27,"type":19},{"type":15,"children":1467},[1468],{"text":1469,"type":19},"# Phase 7 — Add styling without making a mess",{"type":15,"children":1471},[1472],{"text":1473,"type":19},"Astro stays flexible here. You can use CSS, Sass, Tailwind, component libraries, or framework integrations. The important thing is not the hype stack; it is keeping the design system consistent and maintainable. Astro is customizable by design, which is one of its strengths. ([Astro][1])",{"type":15,"children":1475},[1476],{"text":27,"type":19},{"type":15,"children":1478},[1479],{"text":1196,"type":19},{"type":15,"children":1481},[1482],{"text":1483,"type":19},"* Global styles",{"type":15,"children":1485},[1486],{"text":1487,"type":19},"* Component-level styling",{"type":15,"children":1489},[1490],{"text":1491,"type":19},"* Typography",{"type":15,"children":1493},[1494],{"text":1495,"type":19},"* Spacing systems",{"type":15,"children":1497},[1498],{"text":1499,"type":19},"* Responsive design",{"type":15,"children":1501},[1502],{"text":27,"type":19},{"type":15,"children":1504},[1505],{"text":1223,"type":19},{"type":15,"children":1507},[1508],{"text":1509,"type":19},"* Article layout",{"type":15,"children":1511},[1512],{"text":1513,"type":19},"* Blog cards",{"type":15,"children":1515},[1516],{"text":1517,"type":19},"* Author box",{"type":15,"children":1519},[1520],{"text":1521,"type":19},"* Tag pills",{"type":15,"children":1523},[1524],{"text":1525,"type":19},"* Dark theme",{"type":15,"children":1527},[1528],{"text":27,"type":19},{"type":15,"children":1530},[1531],{"text":1532,"type":19},"# Phase 8 — Learn Astro Islands",{"type":15,"children":1534},[1535],{"text":1536,"type":19},"Astro islands are where selective interactivity comes in. The framework’s core pitch is that you don’t hydrate everything, only the pieces that need interactivity. This is huge for blogs and docs because it keeps pages fast while still letting you add search, toggles, accordions, comments, or mini widgets. ([Astro][1])",{"type":15,"children":1538},[1539],{"text":27,"type":19},{"type":15,"children":1541},[1542],{"text":1196,"type":19},{"type":15,"children":1544},[1545],{"text":1546,"type":19},"* What hydration means",{"type":15,"children":1548},[1549],{"text":1550,"type":19},"* Why selective hydration matters",{"type":15,"children":1552},[1553],{"text":1554,"type":19},"* When to add interactive components",{"type":15,"children":1556},[1557],{"text":1558,"type":19},"* When to leave things static",{"type":15,"children":1560},[1561],{"text":27,"type":19},{"type":15,"children":1563},[1564],{"text":1223,"type":19},{"type":15,"children":1566},[1567],{"text":1568,"type":19},"* Theme toggle",{"type":15,"children":1570},[1571],{"text":1572,"type":19},"* Copy code button",{"type":15,"children":1574},[1575],{"text":1576,"type":19},"* Search input",{"type":15,"children":1578},[1579],{"text":1580,"type":19},"* Expandable FAQ",{"type":15,"children":1582},[1583],{"text":27,"type":19},{"type":15,"children":1585},[1586],{"text":1587,"type":19},"# Phase 9 — Images, SEO, and performance",{"type":15,"children":1589},[1590],{"text":1591,"type":19},"Astro includes official guidance for working with images, and performance is one of its defining selling points. Learn image handling, metadata, semantic HTML, structured page titles, and Open Graph basics early. A content site without SEO hygiene is just shouting poetry into the void. ([Astro][1])",{"type":15,"children":1593},[1594],{"text":27,"type":19},{"type":15,"children":1596},[1597],{"text":1196,"type":19},{"type":15,"children":1599},[1600],{"text":1601,"type":19},"* Local vs remote images",{"type":15,"children":1603},[1604],{"text":1605,"type":19},"* Metadata and social cards",{"type":15,"children":1607},[1608],{"text":1609,"type":19},"* Semantic HTML",{"type":15,"children":1611},[1612],{"text":1613,"type":19},"* Good heading structure",{"type":15,"children":1615},[1616],{"text":1617,"type":19},"* Core performance basics",{"type":15,"children":1619},[1620],{"text":27,"type":19},{"type":15,"children":1622},[1623],{"text":1223,"type":19},{"type":15,"children":1625},[1626],{"text":1627,"type":19},"* Post cover images",{"type":15,"children":1629},[1630],{"text":1631,"type":19},"* Meta title and description",{"type":15,"children":1633},[1634],{"text":1635,"type":19},"* OG image support",{"type":15,"children":1637},[1638],{"text":1639,"type":19},"* Clean article structure",{"type":15,"children":1641},[1642],{"text":27,"type":19},{"type":15,"children":1644},[1645],{"text":1646,"type":19},"# Phase 10 — Connect a CMS or remote content source",{"type":15,"children":1648},[1649],{"text":1650,"type":19},"Astro is designed to work with local content, remote APIs, and headless CMS platforms. The docs also describe loaders for local and remote content through the Content Loader API. This makes Astro a strong long-term fit for projects that begin with Markdown and later move to a CMS. ([Astro][1])",{"type":15,"children":1652},[1653],{"text":27,"type":19},{"type":15,"children":1655},[1656],{"text":1196,"type":19},{"type":15,"children":1658},[1659],{"text":1660,"type":19},"* Build-time vs live content",{"type":15,"children":1662},[1663],{"text":1664,"type":19},"* Local content vs CMS-driven content",{"type":15,"children":1666},[1667],{"text":1668,"type":19},"* Fetching external content",{"type":15,"children":1670},[1671],{"text":1672,"type":19},"* Page generation from remote data",{"type":15,"children":1674},[1675],{"text":27,"type":19},{"type":15,"children":1677},[1678],{"text":1223,"type":19},{"type":15,"children":1680},[1681],{"text":1682,"type":19},"* Astro + headless CMS blog",{"type":15,"children":1684},[1685],{"text":1686,"type":19},"* Tag pages from API data",{"type":15,"children":1688},[1689],{"text":1690,"type":19},"* Featured content blocks from external source",{"type":15,"children":1692},[1693],{"text":27,"type":19},{"type":15,"children":1695},[1696],{"text":1697,"type":19},"# Phase 11 — Learn when to stay static and when to go dynamic",{"type":15,"children":1699},[1700],{"text":1701,"type":19},"Astro supports static output, server-rendered output, and server islands. The docs describe server islands as a way to render dynamic or personalized content without sacrificing caching for the rest of the page. That is a smart tool, but use it with discipline. Not every blog needs dynamic wizardry. Sometimes static is not a limitation; sometimes static is just maturity. ([Astro Documentation][8])",{"type":15,"children":1703},[1704],{"text":27,"type":19},{"type":15,"children":1706},[1707],{"text":1196,"type":19},{"type":15,"children":1709},[1710],{"text":1711,"type":19},"* Static-first architecture",{"type":15,"children":1713},[1714],{"text":1715,"type":19},"* SSR tradeoffs",{"type":15,"children":1717},[1718],{"text":1719,"type":19},"* Server islands",{"type":15,"children":1721},[1722],{"text":1723,"type":19},"* Performance and caching implications",{"type":15,"children":1725},[1726],{"text":27,"type":19},{"type":15,"children":1728},[1729],{"text":1223,"type":19},{"type":15,"children":1731},[1732],{"text":1733,"type":19},"* Static blog core",{"type":15,"children":1735},[1736],{"text":1737,"type":19},"* Dynamic newsletter box",{"type":15,"children":1739},[1740],{"text":1741,"type":19},"* Personalized widget or server-only component",{"type":15,"children":1743},[1744],{"text":27,"type":19},{"type":15,"children":1746},[1747],{"text":1748,"type":19},"# Phase 12 — Deploy like a professional",{"type":15,"children":1750},[1751],{"text":1752,"type":19},"Astro’s deployment docs support multiple providers and common CI-friendly workflows. The general guide describes connecting your Git repository to a host for continuous deployment, and provider-specific docs include Vercel and AWS. ([Astro Documentation][9])",{"type":15,"children":1754},[1755],{"text":27,"type":19},{"type":15,"children":1757},[1758],{"text":1196,"type":19},{"type":15,"children":1760},[1761],{"text":1762,"type":19},"* Production builds",{"type":15,"children":1764},[1765],{"text":1766,"type":19},"* Environment variables",{"type":15,"children":1768},[1769],{"text":1770,"type":19},"* Static deployment",{"type":15,"children":1772},[1773],{"text":1774,"type":19},"* SSR deployment",{"type":15,"children":1776},[1777],{"text":1778,"type":19},"* Continuous deployment",{"type":15,"children":1780},[1781],{"text":27,"type":19},{"type":15,"children":1783},[1784],{"text":1223,"type":19},{"type":15,"children":1786},[1787],{"text":1788,"type":19},"* Git-based deployment",{"type":15,"children":1790},[1791],{"text":1792,"type":19},"* Custom domain",{"type":15,"children":1794},[1795],{"text":1796,"type":19},"* 404 page",{"type":15,"children":1798},[1799],{"text":1800,"type":19},"* Sitemap or RSS setup",{"type":15,"children":1802},[1803],{"text":27,"type":19},{"type":15,"children":1805},[1806],{"text":1807,"type":19},"# Suggested 6-week learning plan",{"type":15,"children":1809},[1810],{"text":27,"type":19},{"type":15,"children":1812},[1813],{"text":1814,"type":19},"## Week 1",{"type":15,"children":1816},[1817],{"text":1818,"type":19},"Create your Astro project, understand the folder structure, and build static pages with a shared layout. ([Astro Documentation][3])",{"type":15,"children":1820},[1821],{"text":27,"type":19},{"type":15,"children":1823},[1824],{"text":1825,"type":19},"## Week 2",{"type":15,"children":1827},[1828],{"text":1829,"type":19},"Master routing and create a homepage, about page, blog index, and a dynamic post route. ([Astro Documentation][5])",{"type":15,"children":1831},[1832],{"text":27,"type":19},{"type":15,"children":1834},[1835],{"text":1836,"type":19},"## Week 3",{"type":15,"children":1838},[1839],{"text":1840,"type":19},"Learn Markdown and MDX. Publish a few sample articles and refine your writing structure. ([Astro Documentation][6])",{"type":15,"children":1842},[1843],{"text":27,"type":19},{"type":15,"children":1845},[1846],{"text":1847,"type":19},"## Week 4",{"type":15,"children":1849},[1850],{"text":1851,"type":19},"Implement content collections with a schema and generate pages from content entries. Use the current Content Layer approach, not the old legacy setup. ([v6.docs.astro.build][7])",{"type":15,"children":1853},[1854],{"text":27,"type":19},{"type":15,"children":1856},[1857],{"text":1858,"type":19},"## Week 5",{"type":15,"children":1860},[1861],{"text":1862,"type":19},"Improve styling, images, SEO, and selective interactivity with islands. ([Astro Documentation][10])",{"type":15,"children":1864},[1865],{"text":27,"type":19},{"type":15,"children":1867},[1868],{"text":1869,"type":19},"## Week 6",{"type":15,"children":1871},[1872],{"text":1873,"type":19},"Connect remote content or a CMS, choose a deployment target, and launch the site. ([Astro Documentation][9])",{"type":15,"children":1875},[1876],{"text":27,"type":19},{"type":15,"children":1878},[1879],{"text":1880,"type":19},"# Best beginner projects for Astro",{"type":15,"children":1882},[1883],{"text":1884,"type":19},"The best early projects are:",{"type":15,"children":1886},[1887],{"text":1888,"type":19},"* A personal blog",{"type":15,"children":1890},[1891],{"text":1892,"type":19},"* A technical documentation site",{"type":15,"children":1894},[1895],{"text":1896,"type":19},"* A developer portfolio with blog posts",{"type":15,"children":1898},[1899],{"text":1900,"type":19},"* A product marketing site",{"type":15,"children":1902},[1903],{"text":1904,"type":19},"* A content-rich landing page",{"type":15,"children":1906},[1907],{"text":1908,"type":19},"That matches Astro’s core strengths almost perfectly: content, performance, flexibility, and clean rendering. ([Astro][1])",{"type":15,"children":1910},[1911],{"text":27,"type":19},{"type":15,"children":1913},[1914],{"text":1915,"type":19},"# Common mistakes to avoid",{"type":15,"children":1917},[1918],{"text":1919,"type":19},"Do not treat Astro like a full client-side app from day one. Do not skip layout design. Do not dump unvalidated content everywhere when content collections exist. Do not add interactivity just because your inner goblin likes blinking UI. And definitely do not learn legacy collection patterns when the current docs already moved on. Astro v6 makes that last point very real. ([Astro Documentation][11])",{"type":15,"children":1921},[1922],{"text":27,"type":19},{"type":15,"children":1924},[1925],{"text":1926,"type":19},"# Final take",{"type":15,"children":1928},[1929],{"text":1930,"type":19},"Astro is one of the strongest choices today for blogs, docs, portfolios, and content platforms. Learn it in this order: pages and layouts first, content second, collections third, styling and performance after that, and dynamic features only when the project genuinely needs them. That path stays clean, scales well, and avoids the usual “cool stack, terrible architecture” trap. ([Astro][1])",{"type":15,"children":1932},[1933],{"text":27,"type":19},{"type":15,"children":1935},[1936],{"text":1937,"type":19},"[1]: https://astro.build/ \"Astro\"",{"type":15,"children":1939},[1940],{"text":1941,"type":19},"[2]: https://docs.astro.build/en/basics/project-structure/ \"Project structure - Astro Docs\"",{"type":15,"children":1943},[1944],{"text":1945,"type":19},"[3]: https://docs.astro.build/en/install-and-setup/ \"Install Astro | Docs\"",{"type":15,"children":1947},[1948],{"text":1949,"type":19},"[4]: https://docs.astro.build/en/basics/layouts/ \"Layouts - Astro Docs\"",{"type":15,"children":1951},[1952],{"text":1953,"type":19},"[5]: https://docs.astro.build/en/basics/astro-pages/ \"Pages - Astro Docs\"",{"type":15,"children":1955},[1956],{"text":1957,"type":19},"[6]: https://docs.astro.build/en/tutorial/0-introduction/ \"Build a blog tutorial - Astro Docs\"",{"type":15,"children":1959},[1960],{"text":1961,"type":19},"[7]: https://v6.docs.astro.build/en/guides/content-collections/ \"Content collections - Astro Docs\"",{"type":15,"children":1963},[1964],{"text":1965,"type":19},"[8]: https://docs.astro.build/ar/guides/server-islands/ \"Server islands - Astro Docs\"",{"type":15,"children":1967},[1968],{"text":1969,"type":19},"[9]: https://docs.astro.build/en/guides/deploy/ \"Deploy your Astro Site | Docs\"",{"type":15,"children":1971},[1972],{"text":1973,"type":19},"[10]: https://docs.astro.build/de/guides/images/ \"Images - Astro Docs\"",{"type":15,"children":1975},[1976],{"text":1977,"type":19},"[11]: https://docs.astro.build/en/guides/upgrade-to/v6/ \"Upgrade to Astro v6 | Docs\"",{"type":15,"children":1979},[1980],{"text":27,"type":19},{"type":15,"children":1982},[1983],{"text":27,"type":19},"2026-03-13T03:18:19.475Z","2026-03-13T03:18:19.596Z",{"id":1987,"documentId":1988,"name":1989,"alternativeText":1990,"caption":1990,"focalPoint":1990,"width":1991,"height":1992,"formats":1993,"hash":2027,"ext":1995,"mime":1998,"size":2028,"url":2029,"previewUrl":1990,"provider":2030,"provider_metadata":1990,"createdAt":2031,"updatedAt":2031,"publishedAt":2032},11,"sxwarzuphmfkrxe5puj4wvaq","astro-roadmap.png",null,1536,1024,{"large":1994,"small":2004,"medium":2012,"thumbnail":2019},{"ext":1995,"url":1996,"hash":1997,"mime":1998,"name":1999,"path":1990,"size":2000,"width":2001,"height":2002,"sizeInBytes":2003},".png","https://awesome-friends-6b6e40fa18.media.strapiapp.com/large_astro_roadmap_196a244152.png","large_astro_roadmap_196a244152","image/png","large_astro-roadmap.png",1276.4,1000,667,1276404,{"ext":1995,"url":2005,"hash":2006,"mime":1998,"name":2007,"path":1990,"size":2008,"width":2009,"height":2010,"sizeInBytes":2011},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/small_astro_roadmap_196a244152.png","small_astro_roadmap_196a244152","small_astro-roadmap.png",326.92,500,333,326917,{"ext":1995,"url":2013,"hash":2014,"mime":1998,"name":2015,"path":1990,"size":2016,"width":2017,"height":2009,"sizeInBytes":2018},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/medium_astro_roadmap_196a244152.png","medium_astro_roadmap_196a244152","medium_astro-roadmap.png",721.67,750,721665,{"ext":1995,"url":2020,"hash":2021,"mime":1998,"name":2022,"path":1990,"size":2023,"width":2024,"height":2025,"sizeInBytes":2026},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/thumbnail_astro_roadmap_196a244152.png","thumbnail_astro_roadmap_196a244152","thumbnail_astro-roadmap.png",78.46,234,156,78463,"astro_roadmap_196a244152",804.32,"https://awesome-friends-6b6e40fa18.media.strapiapp.com/astro_roadmap_196a244152.png","strapi-provider-upload-strapi-cloud","2026-03-13T03:17:59.583Z","2026-03-13T03:17:59.587Z",{"id":2034,"documentId":2035,"name":2036,"slug":2037,"bio":2038,"createdAt":2039,"updatedAt":2039,"publishedAt":2040},1,"v47xc4w0scmvr4q884stes9o","Jose Henriquez","author","Desarrollador de software y estudiante de Ingeniería en Sistemas, apasionado por la tecnología, la creación de soluciones digitales y la construcción de proyectos con impacto real. Se caracteriza por ser una persona autodidacta, creativa y enfocada en convertir ideas en resultados concretos.","2026-03-08T18:07:58.711Z","2026-03-08T18:07:58.660Z",[2042,2093,2139],{"id":1987,"documentId":2043,"title":2044,"slug":2045,"excerpt":2046,"difficulty":11,"estimatedCost":2047,"seoTitle":2048,"seoDescription":2049,"createdAt":2050,"updatedAt":2050,"publishedAt":2051,"maturity":2052,"coverImage":2053},"mtna95wmkqzsahxvrwl7rc1r","Astro + Tailwind CSS for Modern Landing Pages","astro-tailwind-css-for-modern-landing-pages","A beginner-friendly stack for building fast, modern, and visually polished landing pages with strong performance and clean frontend architecture.","Astro: Free, Tailwind CSS: Free, Hosting: Low or free to start, depending on provider  Optional extras: domain, analytics, forms, email services","Astro + Tailwind CSS Stack Guide for Modern Landing Pages","Learn when to use Astro with Tailwind CSS for landing pages, product websites, startup pages, personal brands, and modern marketing sites.","2026-03-10T03:06:06.022Z","2026-03-10T03:06:06.300Z","stable",{"id":2054,"documentId":2055,"name":2056,"alternativeText":1990,"caption":1990,"focalPoint":1990,"width":2057,"height":2058,"formats":2059,"hash":2089,"ext":1995,"mime":1998,"size":2090,"url":2091,"previewUrl":1990,"provider":2030,"provider_metadata":1990,"createdAt":2092,"updatedAt":2092,"publishedAt":2092},6,"ap2d2wcmasourkoh3f5l0wyi","cover-astro-tailwind-css-modern-landing-pages.png",1857,949,{"large":2060,"small":2067,"medium":2074,"thumbnail":2081},{"ext":1995,"url":2061,"hash":2062,"mime":1998,"name":2063,"path":1990,"size":2064,"width":2001,"height":2065,"sizeInBytes":2066},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/large_cover_astro_tailwind_css_modern_landing_pages_23162e0a23.png","large_cover_astro_tailwind_css_modern_landing_pages_23162e0a23","large_cover-astro-tailwind-css-modern-landing-pages.png",578.15,511,578145,{"ext":1995,"url":2068,"hash":2069,"mime":1998,"name":2070,"path":1990,"size":2071,"width":2009,"height":2072,"sizeInBytes":2073},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/small_cover_astro_tailwind_css_modern_landing_pages_23162e0a23.png","small_cover_astro_tailwind_css_modern_landing_pages_23162e0a23","small_cover-astro-tailwind-css-modern-landing-pages.png",134.93,256,134925,{"ext":1995,"url":2075,"hash":2076,"mime":1998,"name":2077,"path":1990,"size":2078,"width":2017,"height":2079,"sizeInBytes":2080},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/medium_cover_astro_tailwind_css_modern_landing_pages_23162e0a23.png","medium_cover_astro_tailwind_css_modern_landing_pages_23162e0a23","medium_cover-astro-tailwind-css-modern-landing-pages.png",304.81,383,304810,{"ext":1995,"url":2082,"hash":2083,"mime":1998,"name":2084,"path":1990,"size":2085,"width":2086,"height":2087,"sizeInBytes":2088},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/thumbnail_cover_astro_tailwind_css_modern_landing_pages_23162e0a23.png","thumbnail_cover_astro_tailwind_css_modern_landing_pages_23162e0a23","thumbnail_cover-astro-tailwind-css-modern-landing-pages.png",43.63,245,125,43634,"cover_astro_tailwind_css_modern_landing_pages_23162e0a23",336.08,"https://awesome-friends-6b6e40fa18.media.strapiapp.com/cover_astro_tailwind_css_modern_landing_pages_23162e0a23.png","2026-03-10T03:05:54.962Z",{"id":2094,"documentId":2095,"title":2096,"slug":2097,"excerpt":2098,"difficulty":11,"estimatedCost":2099,"seoTitle":2100,"seoDescription":2101,"createdAt":2102,"updatedAt":2103,"publishedAt":2104,"maturity":2052,"coverImage":2105},9,"yxti6jbq6ufd0biu3fx6ffpw","Astro with Content Collections  + Tailwind 4 + shadcn","astro-tailwind-css-v4-shadcn-ui-content-collections","A modern portfolio stack for developers, designers, and creators who want a fast personal website, polished project showcases, reusable UI components, and structured content without relying on a full CMS.","Astro free, Tailwind CSS free, shadcn/ui free, Content Collections built into Astro workflows, hosting low depending on provider.","Astro + Tailwind CSS v4 + shadcn/ui + Content Collections Stack Guide for Modern Portfolios","Learn when to use Astro with Tailwind CSS v4, shadcn/ui, and Content Collections for personal portfolios, developer websites, project showcases, and technical blogs.","2026-03-10T02:11:55.871Z","2026-03-10T02:31:48.345Z","2026-03-10T02:31:48.749Z",{"id":2106,"documentId":2107,"name":2108,"alternativeText":1990,"caption":1990,"focalPoint":1990,"width":1991,"height":1992,"formats":2109,"hash":2134,"ext":1995,"mime":1998,"size":2135,"url":2136,"previewUrl":1990,"provider":2030,"provider_metadata":1990,"createdAt":2137,"updatedAt":2137,"publishedAt":2138},5,"mekbtcfjrui3pj6ixju8k812","astro-content-collection-portfolio-development.png",{"large":2110,"small":2116,"medium":2122,"thumbnail":2128},{"ext":1995,"url":2111,"hash":2112,"mime":1998,"name":2113,"path":1990,"size":2114,"width":2001,"height":2002,"sizeInBytes":2115},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/large_astro_content_collection_portfolio_development_e57d75f3ad.png","large_astro_content_collection_portfolio_development_e57d75f3ad","large_astro-content-collection-portfolio-development.png",435.15,435147,{"ext":1995,"url":2117,"hash":2118,"mime":1998,"name":2119,"path":1990,"size":2120,"width":2009,"height":2010,"sizeInBytes":2121},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/small_astro_content_collection_portfolio_development_e57d75f3ad.png","small_astro_content_collection_portfolio_development_e57d75f3ad","small_astro-content-collection-portfolio-development.png",111.67,111674,{"ext":1995,"url":2123,"hash":2124,"mime":1998,"name":2125,"path":1990,"size":2126,"width":2017,"height":2009,"sizeInBytes":2127},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/medium_astro_content_collection_portfolio_development_e57d75f3ad.png","medium_astro_content_collection_portfolio_development_e57d75f3ad","medium_astro-content-collection-portfolio-development.png",241.38,241381,{"ext":1995,"url":2129,"hash":2130,"mime":1998,"name":2131,"path":1990,"size":2132,"width":2024,"height":2025,"sizeInBytes":2133},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/thumbnail_astro_content_collection_portfolio_development_e57d75f3ad.png","thumbnail_astro_content_collection_portfolio_development_e57d75f3ad","thumbnail_astro-content-collection-portfolio-development.png",30.25,30250,"astro_content_collection_portfolio_development_e57d75f3ad",239.93,"https://awesome-friends-6b6e40fa18.media.strapiapp.com/astro_content_collection_portfolio_development_e57d75f3ad.png","2026-03-10T02:29:59.242Z","2026-03-10T02:29:59.247Z",{"id":2140,"documentId":2141,"title":2142,"slug":2143,"excerpt":2144,"difficulty":11,"estimatedCost":2145,"seoTitle":2146,"seoDescription":2147,"createdAt":2148,"updatedAt":2149,"publishedAt":2150,"maturity":2052,"coverImage":2151},14,"gkvptj1l6vok4xuii8vkj6qe","SvelteKit + Tailwind CSS for Modern Landing Pages","sveltekit-tailwind-css-for-modern-landing-pages","A flexible landing page stack for developers and startups who want modern design, strong performance, and room to grow into a more interactive web experience.","SvelteKit: Free, Tailwind CSS: Free, Hosting: Low or free to start, depending on provider, Optional extras: domain, analytics, forms, email services","SvelteKit + Tailwind CSS Stack Guide for Modern Landing Pages","Learn when to use SvelteKit with Tailwind CSS for landing pages, startup websites, marketing pages, and modern public-facing web experiences.","2026-03-10T03:32:55.146Z","2026-03-10T15:16:43.064Z","2026-03-10T15:16:43.505Z",{"id":2152,"documentId":2153,"name":2154,"alternativeText":1990,"caption":1990,"focalPoint":1990,"width":1991,"height":1992,"formats":2155,"hash":2180,"ext":1995,"mime":1998,"size":2181,"url":2182,"previewUrl":1990,"provider":2030,"provider_metadata":1990,"createdAt":2183,"updatedAt":2183,"publishedAt":2183},7,"dilgak8bwsjs0yty173tnbg9","svelkit-tailwindcss-landing-page.png",{"large":2156,"small":2162,"medium":2168,"thumbnail":2174},{"ext":1995,"url":2157,"hash":2158,"mime":1998,"name":2159,"path":1990,"size":2160,"width":2001,"height":2002,"sizeInBytes":2161},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/large_svelkit_tailwindcss_landing_page_232000d71f.png","large_svelkit_tailwindcss_landing_page_232000d71f","large_svelkit-tailwindcss-landing-page.png",932.81,932811,{"ext":1995,"url":2163,"hash":2164,"mime":1998,"name":2165,"path":1990,"size":2166,"width":2009,"height":2010,"sizeInBytes":2167},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/small_svelkit_tailwindcss_landing_page_232000d71f.png","small_svelkit_tailwindcss_landing_page_232000d71f","small_svelkit-tailwindcss-landing-page.png",262.08,262076,{"ext":1995,"url":2169,"hash":2170,"mime":1998,"name":2171,"path":1990,"size":2172,"width":2017,"height":2009,"sizeInBytes":2173},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/medium_svelkit_tailwindcss_landing_page_232000d71f.png","medium_svelkit_tailwindcss_landing_page_232000d71f","medium_svelkit-tailwindcss-landing-page.png",546.98,546980,{"ext":1995,"url":2175,"hash":2176,"mime":1998,"name":2177,"path":1990,"size":2178,"width":2024,"height":2025,"sizeInBytes":2179},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/thumbnail_svelkit_tailwindcss_landing_page_232000d71f.png","thumbnail_svelkit_tailwindcss_landing_page_232000d71f","thumbnail_svelkit-tailwindcss-landing-page.png",68.48,68477,"svelkit_tailwindcss_landing_page_232000d71f",540.74,"https://awesome-friends-6b6e40fa18.media.strapiapp.com/svelkit_tailwindcss_landing_page_232000d71f.png","2026-03-10T03:33:11.808Z",{"pagination":2185},{"page":2034,"pageSize":2186,"pageCount":2034,"total":2034},25]