{"id":349894,"date":"2023-07-06T21:01:55","date_gmt":"2023-07-06T21:01:55","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=349894"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=349894","title":{"rendered":"<span>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 Astro<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>Astro \u2014 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0441\u0430\u0439\u0442\u043e\u0432, \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c. \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0431\u0438\u0440\u0430\u0435\u0442 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c \u0438 \u043a\u043e\u043d\u043a\u0443\u0440\u0438\u0440\u0443\u0435\u0442 \u0441 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c NextJS.<\/p>\n<p>\u0427\u0435\u043c \u0436\u0435 \u0442\u0430\u043a \u0445\u043e\u0440\u043e\u0448 Astro? \u0420\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043e\u0431 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u0435\u0433\u043e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0445 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0430\u0445, \u043f\u043e\u0434\u0445\u043e\u0434\u0430\u0445 \u0438 \u0444\u0438\u0448\u043a\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0442\u044c \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p>\u041f\u043e\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u0432 \u0442\u0435\u043c\u0443 \u0431\u0443\u0434\u0435\u043c \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0441\u0431\u043e\u0440\u043a\u0438 \u0431\u043b\u043e\u0433\u0430 \u043f\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435. \u041a\u0441\u0442\u0430\u0442\u0438, \u0432\u0435\u0441\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u0430 \u043e\u0442 \u0438\u043c\u0435\u043d\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0434\u043b\u044f \u043d\u0430\u0441 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 ChatGPT.<\/p>\n<p>\u0414\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0438\u0434\u0435\u043e\u043a\u043e\u043d\u0442\u0435\u043d\u0442: \u0442\u043e\u0442 \u0436\u0435 \u0441\u0430\u043c\u044b\u0439 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043f\u043e Astro \u043c\u044b \u0441\u043e\u0431\u0440\u0430\u043b\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 <a href=\"https:\/\/www.youtube.com\/playlist?list=PLSh5XwEmbT9CvasTytCbr3VSiryci04Xg\" rel=\"noopener noreferrer nofollow\">\u043f\u043b\u0435\u0439\u043b\u0438\u0441\u0442<\/a> \u043d\u0430 Youtube.<\/p>\n<h2>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u0442\u0435\u043e\u0440\u0438\u0438<\/h2>\n<h3>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Astro?<\/h3>\n<p>Astro \u2014 \u044d\u0442\u043e \u0432\u0435\u0431-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0441\u0430\u0439\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0431\u0435\u0437 JavaScript. \u0421 Astro \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443: React, Vue, Angular \u0438 \u0434\u0440\u0443\u0433\u0438\u0435.<\/p>\n<p>\u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a: \u043c\u044b \u0433\u0440\u0443\u0437\u0438\u043c \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 JS-\u0444\u0430\u0439\u043b, \u043e\u043d \u043f\u0430\u0440\u0441\u0438\u0442\u0441\u044f \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u043e\u043c \u0443\u0436\u0435 \u0432\u0441\u0451 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442. \u0414\u0430, \u0435\u0441\u0442\u044c \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u0447\u0430\u043d\u043a\u0438, \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 JavaScript \u2014 \u043d\u043e \u0441\u0430\u043c\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043d\u0438\u043a\u0443\u0434\u0430 \u043d\u0435 \u0434\u0435\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>Astro \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043d\u0430\u043c \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434: \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0447\u0438\u0441\u0442\u044b\u0435 HTML \u0438 CSS, \u0430 \u0432\u0441\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u043c\u0435\u0447\u0430\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e. \u042d\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u00ab\u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043e\u0439 \u043e\u0441\u0442\u0440\u043e\u0432\u043e\u0432\u00bb, \u0433\u0434\u0435 \u0432\u043e\u0434\u0430 \u2014 HTML \u0438 CSS, \u0430 \u043e\u0441\u0442\u0440\u043e\u0432\u043a\u0438 \u2014 JS.<\/p>\n<h3>\u041f\u043e\u0447\u0435\u043c\u0443 Astro?<\/h3>\n<p>Astro \u043b\u044e\u0431\u044f\u0442 \u043f\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c:<\/p>\n<ol>\n<li>\n<p><strong>\u0423\u0434\u043e\u0431\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/strong>. \u041f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u043a\u0440\u0443\u0442\u0438\u0442\u0441\u044f Vite, \u0432\u0441\u0451 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0431\u044b\u0441\u0442\u0440\u043e, \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043c\u0435\u043d\u044f\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433 \u2014 \u0438 \u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c build.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>\n<p><strong>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438<\/strong>. \u041c\u0430\u043b\u043e \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0432 Astro \u043c\u043e\u0436\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u0442\u0430\u043a \u0438\u0445 \u0435\u0449\u0451 \u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"3\">\n<li>\n<p><strong>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u0432\u0435\u0431-\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432<\/strong>. \u041e\u043d\u043e \u0434\u0430\u0451\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e, \u043a\u043e\u0433\u0434\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0448\u044c \u0441 \u0447\u0438\u0441\u0442\u044b\u043c\u0438 HTML \u0438 CSS.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"4\">\n<li>\n<p><strong>\u0410\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430<\/strong>. HTML + CSS + CDN \u2014 \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430. \u0412\u044b \u0441\u0442\u0440\u043e\u0438\u0442\u0435 \u043f\u0440\u043e\u0434\u0443\u043a\u0442, \u0437\u0430\u043b\u0438\u0432\u0430\u0435\u0442\u0435 \u2014 \u0438 \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0431\u0435\u0437 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"5\">\n<li>\n<p><strong>\u041f\u0440\u043e\u0441\u0442\u043e\u0442\u0430<\/strong>. \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 React, \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0434\u043b\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e Facebook, Astro \u0438\u0434\u0435\u0430\u043b\u0435\u043d \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0441\u0430\u0439\u0442\u043e\u0432 \u0431\u0435\u0437 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/p>\n<\/li>\n<\/ol>\n<p>\u041c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e Astro \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0432\u0435\u0431 \u0441 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430\u043c\u0438. \u0421\u0430\u043c\u0430 \u043f\u043e \u0441\u0435\u0431\u0435 \u0437\u0430\u0434\u0443\u043c\u043a\u0430 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f \u2014 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043e\u043d\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435.<\/p>\n<h2>\u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430: \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442<\/h2>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h3>\n<p>\u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u2014 \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u0441 \u043f\u0443\u0441\u0442\u044b\u043c Astro-\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c. \u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0435 Astro \u0432 \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437, \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u043f\u0430\u043a\u0435\u0442\u0430 create-astro. \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c TypeScript.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/6eb\/697\/e63\/6eb697e6324668e6124f44e511fbf2d1.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1409\" height=\"990\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6eb\/697\/e63\/6eb697e6324668e6124f44e511fbf2d1.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u0445 TypeScript \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c strict (\u043f\u0440\u043e \u043e\u0442\u043b\u0438\u0447\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/github.com\/withastro\/astro\/tree\/main\/packages\/astro\/tsconfigs\" rel=\"noopener noreferrer nofollow\">\u0442\u0443\u0442<\/a>) \u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/f62\/769\/c84\/f62769c840e92e89a5109d8f6404e8ed.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1402\" height=\"992\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f62\/769\/c84\/f62769c840e92e89a5109d8f6404e8ed.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c WebStorm. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043e\u043d \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 Astro, \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0435\u0441\u044c \u0434\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438. \u0412 <a href=\"https:\/\/docs.astro.build\/en\/editor-setup\/\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a> \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438 \u043f\u043e VS Code \u0438 \u0434\u0440\u0443\u0433\u0438\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c.<\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u043f\u043e\u043c\u0438\u043c\u043e \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u043e\u0447\u0435\u0433\u043e, \u0432\u0438\u0434\u0438\u043c \u043d\u0435\u043a\u0438\u0439 \u0444\u0430\u0439\u043b env.d.ts. \u042d\u0442\u043e \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u0444\u0430\u0439\u043b TypeScript \u0441 \u0442\u0438\u043f\u0430\u043c\u0438. \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0443 \u043d\u0430\u0441 \u043a\u0440\u0443\u0442\u0438\u0442\u0441\u044f Vite, \u0430 \u0435\u0433\u043e \u0442\u0438\u043f\u044b \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0434\u043b\u044f API Node.js. \u0427\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u043a\u0430\u043a \u0440\u0430\u0437 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 env.d.ts \u2014 \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 Astro \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b \u0441\u0430\u043c.<\/p>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 package.json \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u0431\u043e\u0440\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/p>\n<p><code>npm run start<\/code><\/p>\n<p>\u041f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 localhost:3000 \u0432\u0438\u0434\u0438\u043c \u043d\u0430\u0448 \u0441\u0430\u0439\u0442.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/ee6\/f69\/bfe\/ee6f69bfef19b3ce7931889006fcb08c.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1389\" height=\"885\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ee6\/f69\/bfe\/ee6f69bfef19b3ce7931889006fcb08c.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u0437 \u0444\u0430\u0439\u043b\u043e\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u043a\u043e\u043d\u0444\u0438\u0433. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 .gitignore .idea\/.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/bb8\/1c0\/207\/bb81c02075e4b2ac2fa623b4aeb35b95.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1396\" height=\"895\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/bb8\/1c0\/207\/bb81c02075e4b2ac2fa623b4aeb35b95.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0432\u0441\u0451 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f. \u0422\u043e \u0435\u0441\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0444\u0430\u0439\u043b\u043e\u0432. \u042d\u0442\u043e \u043c\u0435\u043b\u043e\u0447\u044c \u2014 \u043d\u043e \u0441\u0443\u043f\u0435\u0440\u043f\u0440\u0438\u044f\u0442\u043d\u0430\u044f, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430 \u0434\u043b\u0438\u043d\u043d\u043e\u0439 \u0434\u0438\u0441\u0442\u0430\u043d\u0446\u0438\u0438.<\/p>\n<p>\u041d\u0430\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u043a \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c prettier, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0451 \u0431\u044b\u043b\u043e \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u043e \u043a\u0440\u0430\u0441\u0438\u0432\u043e:<\/p>\n<p><code>npm install -DE prettier<\/code><\/p>\n<p><code>echo {}> .prettierrc.json<\/code><\/p>\n<p><code>touch .prettierignore<\/code><\/p>\n<p><code># build output<\/code><\/p>\n<p><code>dist\/<\/code><\/p>\n<p><code># generated types<\/code><\/p>\n<p><code>.astro\/<\/code><\/p>\n<p><code>npx prettier --write .<\/code><\/p>\n<p>\u0418 \u0432\u0441\u0451, \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0433\u043e\u0442\u043e\u0432 \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u2014 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a \u043e\u0441\u0432\u043e\u0435\u043d\u0438\u044e Astro.<\/p>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0438 \u0440\u043e\u0443\u0442\u0438\u043d\u0433<\/h3>\n<p>\u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c\u00a0 \u043d\u0430\u0443\u0447\u0438\u043c\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438.\u00a0<\/p>\n<p>\u0417\u0430\u0445\u043e\u0434\u0438\u043c \u0432 SRC \u0438 \u0432\u0438\u0434\u0438\u043c \u043f\u0430\u043f\u043a\u0443 pages \u2014 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043e\u043d\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u043e\u0443\u0442\u0435\u0440\u0430.<\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u043b\u0435\u0436\u0438\u0442 \u0444\u0430\u0439\u043b index.astro. \u041f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0432 \u043d\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0434\u043b\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u2014 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 ChatGPT (\u0441\u043c. scratches\/base-index.html \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438).<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/992\/8d6\/9db\/9928d69dbdf976a6eb0e9bb8c2ec48ee.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1378\" height=\"889\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/992\/8d6\/9db\/9928d69dbdf976a6eb0e9bb8c2ec48ee.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043f\u0430\u043f\u043a\u0435 pages Astro-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 blog.astro \u2014 \u044d\u0442\u043e \u0431\u0443\u0434\u0443\u0449\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u0431\u043b\u043e\u0433\u0430. \u0421 \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c\u0438 \u0447\u0451\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c\u0441\u044f \u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435, \u0430 \u043f\u043e\u043a\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u043e\u0441\u043b\u0435 \u043d\u0438\u0445 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a:<\/p>\n<p><code>&lt;h1>Blog&lt;h1><\/code><\/p>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043c\u043e\u0436\u043d\u043e \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 localhost:3000\/blog. \u041f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e \u0440\u043e\u0443\u0442\u0435\u0440 \u0447\u0443\u0432\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u0435\u043d \u043a \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0443!<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/995\/5a8\/d1d\/9955a8d1dee1ecfb1ce3fdd9c2fdd55d.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1401\" height=\"877\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/995\/5a8\/d1d\/9955a8d1dee1ecfb1ce3fdd9c2fdd55d.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0447\u0442\u043e \u043f\u043e \u0441\u0443\u0442\u0438 \u043c\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 \u043d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0439 HTML \u0441 \u043e\u0434\u043d\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u00ab\u0433\u043e\u043b\u044b\u043c\u00bb \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u043c &lt;h1> \u2014 \u043d\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0432\u0438\u0434\u0438\u043c \u0430\u0441\u0442\u0440\u043e\u0432\u0441\u043a\u0438\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b &lt;head> \u0438 &lt;body>. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u0442\u043e\u043c, \u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/web.dev\/howbrowserswork\/\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e Astro-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c MD \u0438 MDX (\u0442\u043e\u0442 \u0436\u0435 \u043c\u0430\u0440\u043a\u0434\u0430\u0443\u043d, \u043d\u043e \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b), HTML \u0438 TypeScript\/JavaScript-\u0444\u0430\u0439\u043b\u044b.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043f\u0430\u043f\u043a\u0435 pages \u0442\u0440\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u0430:<\/p>\n<ol>\n<li>\n<p><strong>about.md<\/strong>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0442\u043e\u0442 \u0436\u0435 \u0442\u0435\u043a\u0441\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u044c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0430 \u0434\u043b\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (\u0441\u043c. base-about.md).<\/p>\n<\/li>\n<li>\n<p><strong>account.html<\/strong> \u0441 \u043b\u044e\u0431\u044b\u043c \u0440\u0430\u043d\u0434\u043e\u043c\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c (\u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435).<\/p>\n<\/li>\n<li>\n<p><strong>posts.ts<\/strong> \u0441 \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442\u043e\u043c \u0434\u043b\u044f API:<\/p>\n<\/li>\n<\/ol>\n<p><code>export async function get() {<\/code><\/p>\n<p><code>\u00a0\u00a0return {<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0body: JSON.stringify([{ id: 1, title: \"abc\" }]),<\/code><\/p>\n<p><code>\u00a0\u00a0};<\/code><\/p>\n<p><code>}<\/code><\/p>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043e\u0442\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445:<\/p>\n<ol>\n<li>\n<p>\u041f\u043e \u0430\u0434\u0440\u0435\u0441\u0443<strong> localhost:3000\/about <\/strong>\u0432\u0438\u0434\u0438\u043c \u043c\u0430\u0440\u043a\u0434\u0430\u0443\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 Astro \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u043b: \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u0438\u043b \u0442\u0435\u0433\u0438, \u043f\u0440\u043e\u0441\u0442\u0430\u0432\u0438\u043b id \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>\n<p>\u041f\u043e \u0430\u0434\u0440\u0435\u0441\u0443<strong> localhost:3000\/account<\/strong> \u043b\u0435\u0436\u0438\u0442 \u0442\u043e\u0442 HTML-\u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0442\u0443\u0434\u0430 \u043f\u043e\u043b\u043e\u0436\u0438\u043b\u0438.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"3\">\n<li>\n<p>\u041f\u043e \u0430\u0434\u0440\u0435\u0441\u0443<strong> localhost:3000<\/strong>\/<strong>posts<\/strong> \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c JSON-\u043e\u0442\u0432\u0435\u0442.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0432\u0435\u0441\u044c \u0440\u043e\u0443\u0442\u0438\u043d\u0433 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043b\u0441\u044f \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0430. \u0421\u043e\u0431\u0435\u0440\u0451\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0432 \u0438\u0442\u043e\u0433\u0435:\u00a0<\/p>\n<p><code>npm run build<\/code><\/p>\n<p>\u041f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f dist \u2014 \u0432 \u043d\u0435\u0439 \u043b\u0435\u0436\u0430\u0442 \u043d\u0430\u0448\u0438 \u0444\u0430\u0439\u043b\u044b: \u043a\u0430\u0436\u0434\u044b\u0439 \u0432 \u0441\u0432\u043e\u0435\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u043f\u0430\u043f\u043a\u0435. \u0412\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043f\u043e \u0444\u0430\u043a\u0442\u0443 \u0432\u0441\u0435 \u043e\u043d\u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043e\u0442\u0432\u0435\u0442 \u043e\u0442 API.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/8c1\/5ed\/8b7\/8c15ed8b7c917f5ded5d7b58cb727dc3.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1375\" height=\"881\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8c1\/5ed\/8b7\/8c15ed8b7c917f5ded5d7b58cb727dc3.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432<\/h3>\n<p>\u041d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u0435\u0449\u0451 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0432\u044b \u043f\u043e\u0434\u0443\u043c\u0430\u043b\u0438, \u0447\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u0415\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, Astro \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f.<\/p>\n<p>\u0414\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043f\u0430\u043f\u043a\u0443 layouts. \u041e\u043d\u0430 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439, \u043e\u0434\u043d\u0430\u043a\u043e \u043f\u043e <a href=\"https:\/\/docs.astro.build\/en\/core-concepts\/project-structure\/\" rel=\"noopener noreferrer nofollow\">\u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044e<\/a> Astro \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0435\u0451 \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a, \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u2014 \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0435\u043a\u0442 \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u0441\u044f \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u043c \u0434\u043b\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432.<\/p>\n<p>\u0412 \u043f\u0430\u043f\u043a\u0435 layouts \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0444\u0430\u0439\u043b Layout.astro, \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u0442\u0443\u0434\u0430 \u043a\u043e\u0434 \u0438\u0437 index.astro \u0438 \u043e\u0447\u0438\u0449\u0430\u0435\u043c \u0435\u0433\u043e \u043e\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430:<\/p>\n<p><code>&lt;html lang=\"ru\"><\/code><\/p>\n<p><code>&lt;head><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0&lt;meta charset=\"utf-8\" \/><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0&lt;link rel=\"icon\" type=\"image\/svg+xml\" href=\"\/favicon.svg\" \/><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0&lt;meta name=\"viewport\" content=\"width=device-width\" \/><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0&lt;meta name=\"generator\" content={Astro.generator} \/><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0&lt;title>\u0421\u0430\u0439\u0442 ChatGPT \u2014 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440\u0430 \u0441\u043e \u0441\u0442\u0430\u0436\u0435\u043c&lt;\/title><\/code><\/p>\n<p><code>&lt;\/head><\/code><\/p>\n<p><code>&lt;body><\/code><\/p>\n<p><code>&lt;slot \/><\/code><\/p>\n<p><code>&lt;\/body><\/code><\/p>\n<p><code>&lt;\/html><\/code><\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 &lt;slot \/>. \u041f\u043e \u0441\u0443\u0442\u0438 \u0441\u0432\u043e\u0435\u0439 \u044d\u0442\u043e \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u0438 children \u0432 React \u2014 \u043e\u043d \u043d\u0443\u0436\u0435\u043d, \u0447\u0442\u043e\u0431\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u043e\u0441\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435. \u041f\u0440\u0430\u0432\u0434\u0430, \u043e\u0442 children \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u043b\u0438\u0447\u0438\u0439: \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 slot \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u0440\u0430\u0437\u0443 \u0431\u0435\u0437 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e.<\/p>\n<p>\u0428\u0430\u0431\u043b\u043e\u043d \u0433\u043e\u0442\u043e\u0432 \u2014 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u0444\u0430\u0439\u043b\u044b. \u0422\u0430\u043a \u0447\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u0432 index.astro, \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c Layout (\u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u0445 \u0441\u0430\u043c\u044b\u0445 \u0437\u0430\u0433\u0430\u0434\u043e\u0447\u043d\u044b\u0445 \u0447\u0451\u0440\u0442\u043e\u0447\u0435\u043a) \u0438 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0432 \u043d\u0435\u0433\u043e\u00a0 \u0432\u0435\u0441\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442:<\/p>\n<p><code>---<\/code><\/p>\n<p><code>import Layout from '..\/layouts\/Layout.astro';<\/code><\/p>\n<p><code>---<\/code><\/p>\n<p><code>&lt;Layout><\/code><\/p>\n<p><code>&lt;h1>Hello, Astro&lt;\/h1><\/code><\/p>\n<p><code>&lt;\/Layout><\/code><\/p>\n<p>\u041f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d \u0432 blog.astro \u0438 \u0447\u0443\u0442\u044c \u0438\u043d\u0430\u0447\u0435 \u0432 <a href=\"http:\/\/about.md\" rel=\"noopener noreferrer nofollow\">about.md<\/a>:<\/p>\n<p><code>---<\/code><\/p>\n<p><code>layout: ..\/layouts\/Layout.astro<\/code><\/p>\n<p><code>---<\/code><\/p>\n<p><code># About<\/code><\/p>\n<p><code>Text<\/code><\/p>\n<p>\u0410 \u0432\u043e\u0442 \u043a HTML-\u0444\u0430\u0439\u043b\u0443 \u0432 Astro \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0435\u043b\u044c\u0437\u044f, \u0442\u0430\u043a \u0447\u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f. \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043e\u0431 \u044d\u0442\u043e\u043c \u0437\u043d\u0430\u0435\u043c, \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 account.html \u043c\u043e\u0436\u043d\u043e \u0441\u043c\u0435\u043b\u043e \u0443\u0434\u0430\u043b\u044f\u0442\u044c.<\/p>\n<p>\u041d\u0438\u0436\u0435 \u043c\u044b \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0444\u0430\u0439\u043b\u043e\u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 .astro \u0438 .md.<\/p>\n<h3>\u0424\u0430\u0439\u043b\u044b \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 .astro \u0438 .md<\/h3>\n<p><strong>\u0427\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u0444\u043e\u0440\u043c\u0430\u0442 .astro?<\/strong><\/p>\n<p>\u041a \u0444\u0430\u0439\u043b\u0430\u043c \u044d\u0442\u043e\u0433\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u044c\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u043a\u0430\u043a \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c, \u0430 \u043d\u0435 \u043a\u0430\u043a \u043a \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0443. \u0415\u0441\u043b\u0438 \u0432\u044b \u043a\u043e\u0433\u0434\u0430-\u043d\u0438\u0431\u0443\u0434\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0441 PHP, Astro \u043e\u0447\u0435\u043d\u044c \u043d\u0430 \u043d\u0435\u0433\u043e \u043f\u043e\u0445\u043e\u0436: \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438 \u043e\u0442\u0434\u0430\u0451\u043c \u0435\u0451 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442. \u0420\u0430\u0437\u0432\u0435 \u0447\u0442\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0442\u0443\u0442 \u0431\u043e\u043b\u0435\u0435 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439, JS-\u043e\u0432\u0441\u043a\u0438\u0439.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c npm run start, \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043a\u0440\u0443\u0442\u0438\u0442\u044c\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440. \u041e\u043d \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 Astro-\u0444\u0430\u0439\u043b\u044b \u0438 \u0432 \u0438\u0442\u043e\u0433\u0435 \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 npm run build \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0438\u0445 \u0432 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 HTML.<\/p>\n<p><strong>\u0427\u0442\u043e \u0437\u0430 \u0447\u0451\u0440\u0442\u043e\u0447\u043a\u0438\/\u0434\u0435\u0444\u0438\u0441\u044b \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e Astro-\u0444\u0430\u0439\u043b\u0430?<\/strong><\/p>\n<p>\u041f\u043e-\u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438 \u044d\u0442\u0430 \u0448\u0442\u0443\u043a\u0430 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f code fence \u2014 \u0434\u043e\u0441\u043b\u043e\u0432\u043d\u043e \u00ab\u0437\u0430\u0431\u043e\u0440 \u0438\u0437 \u043a\u043e\u0434\u0430\u00bb. \u0412\u0441\u0451, \u0447\u0442\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0435\u0451 \u0433\u0440\u0430\u043d\u0438\u0446\u0430\u0445, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f <u>\u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435<\/u> \u0438 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u043f\u0440\u043e\u043d\u0438\u043a\u0430\u0435\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 code fence \u043c\u043e\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0430\u0440\u043e\u043b\u0438 \u043e\u0442 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432, \u0442\u043e\u043a\u0435\u043d\u044b \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043d\u0435\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0435 \u0432\u0435\u0449\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u043b\u044c\u0437\u044f \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434.<\/p>\n<p>\u041e\u0431\u044b\u0447\u043d\u043e \u00ab\u0437\u0430 \u0437\u0430\u0431\u043e\u0440\u043e\u043c\u00bb \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u044e\u0442:<\/p>\n<ul>\n<li>\n<p>\u0438\u043c\u043f\u043e\u0440\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Astro,<\/p>\n<\/li>\n<li>\n<p>\u0438\u043c\u043f\u043e\u0440\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, React,<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u043e\u043f\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432,<\/p>\n<\/li>\n<li>\n<p>\u0438\u043c\u043f\u043e\u0440\u0442 \u0434\u0430\u043d\u043d\u044b\u0445, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, JSON-\u0444\u0430\u0439\u043b\u043e\u0432 \u0438\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439,<\/p>\n<\/li>\n<li>\n<p>\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0438\u0437 API \u0438\u043b\u0438 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445,<\/p>\n<\/li>\n<li>\n<p>\u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432\u043d\u0443\u0442\u0440\u0438 code fence \u0432 index.astro:<\/p>\n<p><code>---<\/code><\/p>\n<p><code>import Layout from '..\/layouts\/Layout.astro';<\/code><\/p>\n<p><code>const title = 'Hello, Astro';<\/code><\/p>\n<p><code>const list = ['a', 'b', 'c'];<\/code><\/p>\n<p><code>---<\/code><\/p>\n<p><code>&lt;Layout><\/code><\/p>\n<p><code>&lt;h1>{title}&lt;\/h1><\/code><\/p>\n<p><code>{list.map(item => &lt;p>{item}&lt;\/p>)}<\/code><\/p>\n<p><code>&lt;\/Layout><\/code><\/p>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a \u2014 \u0442\u0430\u043c \u0436\u0435 \u043f\u0440\u043e\u043a\u0438\u043d\u0443\u0442\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n<p><code>&lt;Layout title=\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f\"><\/code><\/p>\n<p><code>...<\/code><\/p>\n<p><code>&lt;\/Layout><\/code><\/p>\n<p>\u0418 \u0432\u044b\u0442\u0430\u0449\u0438\u0442\u044c \u043f\u0440\u043e\u043f \u0432 code fence \u0448\u0430\u0431\u043b\u043e\u043d\u0430 Layout.astro:<\/p>\n<p><code>---<\/code><\/p>\n<p><code>const { title = 'Astro' } = Astro.props;<\/code><\/p>\n<p><code>---<\/code><\/p>\n<p><code>...<\/code><\/p>\n<p><code>&lt;title>{title}&lt;\/title><\/code><\/p>\n<p><code>...<\/code><\/p>\n<p><strong>\u0427\u0442\u043e \u043d\u0430\u0441\u0447\u0451\u0442 \u043c\u0430\u0440\u043a\u0434\u0430\u0443\u043d-\u0444\u0430\u0439\u043b\u043e\u0432?<\/strong><\/p>\n<p>\u0412 \u043c\u0430\u0440\u043a\u0434\u0430\u0443\u043d-\u0444\u0430\u0439\u043b \u043d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u043e\u043a\u0438\u043d\u0443\u0442\u044c \u043f\u0440\u043e\u043f\u044b \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0432 .astro \u2014 \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0432 \u0434\u0440\u0443\u0433\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c API. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c title \u0432 <a href=\"http:\/\/about.md\" rel=\"noopener noreferrer nofollow\">about.md<\/a>:<\/p>\n<p><code>---<\/code><\/p>\n<p><code>layout: ..\/layouts\/Layout.astro<\/code><\/p>\n<p><code>title: \u041e\u0431\u043e \u043c\u043d\u0435<\/code><\/p>\n<p><code>---<\/code><\/p>\n<p>\u0410 \u0437\u0430\u0442\u0435\u043c \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c Layout.astro, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u043f\u0440\u043e\u043f\u044b, \u0438 \u043c\u0430\u0440\u043a\u0434\u0430\u0443\u043d-\u043f\u0440\u043e\u043f\u044b (frontmatter):<\/p>\n<p><code>---<\/code><\/p>\n<p><code>const { title = 'Astro', frontmatter = {} } = Astro.props;<\/code><\/p>\n<p><code>const pageTitle = frontmatter.title || title;<\/code><\/p>\n<p><code>---<\/code><\/p>\n<p>\u0414\u0440\u0443\u0433\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u2014\u00a0 \u0441\u043e\u0437\u0434\u0430\u0442\u044c\u00a0 \u0434\u043b\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d MdLayout.astro, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439:<\/p>\n<p><code>---<\/code><\/p>\n<p><code>import Layout from '.\/Layout.astro';<\/code><\/p>\n<p><code>const { frontmatter } = Astro.props;<\/code><\/p>\n<p><code>---<\/code><\/p>\n<p><code>&lt;Layout title={frontmatter.title}><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0&lt;slot \/><\/code><\/p>\n<p><code>&lt;\/Layout><\/code><\/p>\n<h3>\u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430<\/h3>\n<p>\u041c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c \u0441\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u043c\u0438, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u2014 \u043f\u043e\u0440\u0430 \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0432 Astro \u043f\u0438\u0441\u0430\u0442\u044c CSS. \u0412 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0440\u0430\u0437 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c index.astro \u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u0442\u0438\u043b\u0438:<\/p>\n<p><code>&lt;style><\/code><\/p>\n<p><code>p {<\/code><\/p>\n<p><code>font-size: 18px;<\/code><\/p>\n<p><code>font-family: sans-serif;<\/code><\/p>\n<p><code>}<\/code><\/p>\n<p><code>&lt;\/style><\/code><\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c DevTools \u0438 \u0432\u0438\u0434\u0438\u043c \u043e\u0434\u0438\u043d \u043a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. Astro \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043f\u043e \u043a\u043b\u0430\u0441\u0441\u0443 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 (\u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u2014 \u044d\u0442\u043e \u0444\u0430\u0439\u043b index.astro) \u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0441\u0442\u0438\u043b\u0438 \u0447\u0435\u0440\u0435\u0437 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 :where. \u0414\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043a\u0440\u0435\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0430\u0442\u0438\u0432\u043d\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0438\u0445 \u0437\u0430\u043a\u0440\u044b\u0442\u043e\u0441\u0442\u044c.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/92b\/349\/1a3\/92b3491a35aa72740dfd52866347f01e.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1393\" height=\"881\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/92b\/349\/1a3\/92b3491a35aa72740dfd52866347f01e.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0432\u043e\u043f\u0440\u043e\u0441: \u00ab\u0417\u0430\u0447\u0435\u043c \u043d\u0443\u0436\u043d\u044b \u043d\u043e\u0432\u044b\u0435 \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b, \u0435\u0441\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c p.astro-dlkjdas \u2014 \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u0442 \u0436\u0435?\u00bb \u0412\u0441\u0451 \u0434\u0435\u043b\u043e \u0432 \u043d\u0443\u043b\u0435\u0432\u043e\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 (<a href=\"https:\/\/codesandbox.io\/s\/brave-dew-kwbq01?\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0438\u043c\u0435\u0440<\/a>).<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0431\u0435\u0437\u043e \u0432\u0441\u044f\u043a\u0438\u0445 :where, \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c is:global:<\/p>\n<p><code>&lt;style is:global><\/code><\/p>\n<p><code>p {<\/code><\/p>\n<p><code>font-size: 18px;<\/code><\/p>\n<p><code>font-family: sans-serif;<\/code><\/p>\n<p><code>}<\/code><\/p>\n<p><code>&lt;\/style><\/code><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/08e\/9b3\/dce\/08e9b3dced37d04a6bd1f5d32c92170b.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1409\" height=\"879\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/08e\/9b3\/dce\/08e9b3dced37d04a6bd1f5d32c92170b.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0421\u043e\u0431\u0435\u0440\u0451\u043c build \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. \u041f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u043f\u0430\u043f\u043a\u0430 .astro \u2014 \u0432 \u043d\u0435\u0439 \u043b\u0435\u0436\u0438\u0442 \u0444\u0430\u0439\u043b CSS. \u0412 index.html Astro \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0441\u0442\u0438\u043b\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/c13\/7db\/d88\/c137dbd885245b2f69e03a2eaf42471d.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1392\" height=\"879\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c13\/7db\/d88\/c137dbd885245b2f69e03a2eaf42471d.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0421\u0431\u043e\u0440\u043a\u0438 \u0441 is:global \u0438 \u0431\u0435\u0437 \u043d\u0435\u0433\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 is:inline:<\/p>\n<p><code>&lt;style is:inline><\/code><\/p>\n<p><code>p {<\/code><\/p>\n<p><code>font-size: 18px;<\/code><\/p>\n<p><code>font-family: sans-serif;<\/code><\/p>\n<p><code>}<\/code><\/p>\n<p><code>&lt;\/style><\/code><\/p>\n<p>\u0414\u0435\u043b\u0430\u0435\u043c build \u0438 \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0444\u0430\u0439\u043b CSS \u0438\u0441\u0447\u0435\u0437, \u0430 \u0441\u0442\u0438\u043b\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d\u044b \u0432\u043d\u0443\u0442\u0440\u0438 index.html.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/9ae\/a46\/e44\/9aea46e44c28b5a55701ee95bc632450.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1398\" height=\"893\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9ae\/a46\/e44\/9aea46e44c28b5a55701ee95bc632450.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0438\u0445 \u043a \u0448\u0430\u0431\u043b\u043e\u043d\u0443. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0430\u043f\u043a\u0443 styles \u0438 \u0444\u0430\u0439\u043b global.css \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0451:<\/p>\n<p><code>p {<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0font-size: 18px;<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0font-family: sans-serif;<\/code><\/p>\n<p><code>}<\/code><\/p>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0441\u0442\u0438\u043b\u0438 \u0432 Layout.astro:<\/p>\n<p><code>---<\/code><\/p>\n<p><code>...<\/code><\/p>\n<p><code>import '..\/styles\/content.css';<\/code><\/p>\n<p><code>...<\/code><\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u0447\u0442\u043e\u0431\u044b \u0435\u0449\u0451 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u0448\u0430\u0431\u043b\u043e\u043d Layout.astro \u0448\u0430\u043f\u043a\u0443 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 (\u0441\u043c. scratches\/base-layout.css). \u0417\u0430\u043e\u0434\u043d\u043e \u043f\u0440\u0438\u0447\u0435\u0448\u0435\u043c \u0441\u0442\u0438\u043b\u0438 \u0432 \u0444\u0430\u0439\u043b\u0435 global.css (\u0441\u043c. scratches\/base-global.css).<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/65f\/82c\/8b1\/65f82c8b14cb83ca74494dc8500fc469.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"897\" height=\"877\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/65f\/82c\/8b1\/65f82c8b14cb83ca74494dc8500fc469.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u043c\u044b \u043d\u0435 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c\u0441\u044f. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u043c\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0442\u043e \u043c\u043e\u0436\u0435\u043c \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0437\u0430\u043f\u0440\u043e\u0441\u0443, \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a\u0443\u044e \u0438\u043c\u0435\u043d\u043d\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u043b\u0438, \u0438 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u0438\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e\u00a0 \u0441\u0441\u044b\u043b\u043a\u0443.<\/p>\n<p>\u041f\u0440\u043e\u043f\u0438\u0448\u0435\u043c \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 Layout.astro, \u0447\u0442\u043e \u0441\u0441\u044b\u043b\u043a\u0430 \u0432 \u0448\u0430\u043f\u043a\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439, \u0435\u0441\u043b\u0438 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u044c\u044e \u0437\u0430\u043f\u0440\u043e\u0448\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u0443\u0442\u0438 (\/, \/about, \/blog):<\/p>\n<p>&#8212;<\/p>\n<p><code>const pathname = new URL(Astro.request.url).pathname;<\/code><\/p>\n<p><code>const currentPath = pathname.split(\u201c\/\u201d).filter(Boolean)[0];<\/code><\/p>\n<p><code>---<\/code><\/p>\n<p><code>&lt;header><\/code><\/p>\n<p>\u00a0\u00a0<code>&lt;nav><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0&lt;a href=\"\/\" class:list={{ active: currentPath === undefined }}<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0>\u0413\u043b\u0430\u0432\u043d\u0430\u044f&lt;\/a<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0&lt;a href=\"\/about\" class:list={{ active: currentPath === \"about\" }}<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0>\u041e\u0431\u043e \u043c\u043d\u0435&lt;\/a<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0&lt;a href=\"\/blog\" class:list={{ active: currentPath === \"blog\" }}>\u0411\u043b\u043e\u0433&lt;\/a><\/code><\/p>\n<p><code>\u00a0\u00a0&lt;\/nav><\/code><\/p>\n<p><code>\u00a0\u00a0&lt;a href=\"\/posts\" class:list={{ active: currentPath === \"posts\" }}>\u0410\u041f\u0418&lt;\/a><\/code><\/p>\n<p><code>&lt;\/header><\/code><\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u043c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0434\u0432\u0430 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u043c\u043e\u043c\u0435\u043d\u0442\u0430:<\/p>\n<ol>\n<li>\n<p>\u041d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0432 \u0444\u0430\u0439\u043b\u0430\u0445 .astro \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442 class, \u0430 \u043d\u0435 className, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u0432 React.\u00a0<\/p>\n<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>\n<p>\u041d\u0430 \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043b\u0430\u0441\u0441\u043e\u0432 class:list, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0443\u0441\u043b\u043e\u0432\u0438\u044f.<\/p>\n<\/li>\n<\/ol>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0443, \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043c, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u0432 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0431\u043b\u043e\u0433\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043f\u043e\u043b\u043d\u0438\u043c \u0444\u0430\u0439\u043b blog.astro \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c: \u044d\u0442\u043e \u0441\u043f\u0438\u0441\u043e\u043a \u0431\u0443\u0434\u0443\u0449\u0438\u0445 \u0441\u0442\u0430\u0442\u0435\u0439 \u043f\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0443 \u043e\u0442 ChatGPT (\u0441\u043c. base-blog.html).<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/465\/08c\/e2f\/46508ce2ff96f09985f30c9684782270.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"898\" height=\"845\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/465\/08c\/e2f\/46508ce2ff96f09985f30c9684782270.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<h3>\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/h3>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438, \u0442\u043e \u0435\u0441\u0442\u044c \u043a JavaScript \u0438 UI-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c.<\/p>\n<h4>\u0421\u043a\u0440\u0438\u043f\u0442\u044b<\/h4>\n<p>\u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0442\u0435\u0433 &lt;script> \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u043e\u0432\u043d\u043e \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0442\u0435\u0433 &lt;style> \u2014 \u0432\u043d\u0435 \u00ab\u0437\u0430\u0431\u043e\u0440\u0430\u00bb code fence. \u0422\u0430\u043a \u0447\u0442\u043e \u0441\u043c\u0435\u043b\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0444\u0430\u0439\u043b index.astro \u0438 \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0432 \u043a\u043e\u043d\u0435\u0446 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0439 \u0441\u043a\u0440\u0438\u043f\u0442:<\/p>\n<p><code>&lt;script><\/code><\/p>\n<p><code>\u00a0\u00a0console.log('hello');<\/code><\/p>\n<p><code>&lt;\/script><\/code><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/ffc\/87a\/504\/ffc87a504c30b018439881b6acd0b7bd.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1393\" height=\"880\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ffc\/87a\/504\/ffc87a504c30b018439881b6acd0b7bd.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u0435\u043b\u0430\u0435\u043c build, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u043d\u0430\u0448 \u0441\u043a\u0440\u0438\u043f\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0442\u0441\u044f \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435 \u2014 \u0438 \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043e\u043d \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u043e \u0432\u0441\u0442\u0440\u043e\u0438\u043b\u0441\u044f \u0432 index.html.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/11f\/56f\/d28\/11f56fd28e2b98db4449c30826e4899b.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1401\" height=\"898\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/11f\/56f\/d28\/11f56fd28e2b98db4449c30826e4899b.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u0442\u043e, \u0447\u0442\u043e \u0432 \u0441\u043a\u0440\u0438\u043f\u0442\u0430\u0445 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u043f\u043e\u0440\u0442\u044b. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443\u0442\u0438\u043b\u0438\u0442\u0443 utils.ts, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u0443\u0435\u0442 \u0434\u0430\u0442\u044b:<\/p>\n<p><code>export const formatDate = (date = new Date()) => date<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0.toLocaleDateString(<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'ru-RU',<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0weekday: 'long',<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0year: 'numeric',<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0month: 'long',<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0day: 'numeric',<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});<\/code><\/p>\n<p>\u0418 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0435\u0451 \u0432 index.astro:<\/p>\n<p><code>&lt;script><\/code><\/p>\n<p><code>import { formatDate } from \"..\/utils\/formatDate\";<\/code><\/p>\n<p><code>console.log(formatDate());<\/code><\/p>\n<p><code>&lt;\/script><\/code><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/086\/2f5\/305\/0862f53054b0814a0d6743207d861423.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1392\" height=\"877\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/086\/2f5\/305\/0862f53054b0814a0d6743207d861423.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u043a\u0435\u0439, \u0430 \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442, \u0435\u0441\u043b\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u044e\u044e \u0441\u0441\u044b\u043b\u043a\u0443? \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, React:<\/p>\n<p><code>&lt;script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.development.js\">&lt;\/script><\/code><\/p>\n<p>\u0421\u043c\u043e\u0442\u0440\u0438\u043c build \u0438 \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e Astro \u0441\u043e\u0437\u0434\u0430\u043b \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 JS-\u0444\u0430\u0439\u043b \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434 \u043d\u0430\u0448 \u0438\u043c\u043f\u043e\u0440\u0442.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/222\/b0d\/85b\/222b0d85b5bee47c415af1cb3e0e9a7f.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1398\" height=\"885\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/222\/b0d\/85b\/222b0d85b5bee47c415af1cb3e0e9a7f.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 JS-\u0444\u0430\u0439\u043b, \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 is:inline \u2014 \u0438 \u0441\u043a\u0440\u0438\u043f\u0442 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 HTML:<\/p>\n<p><code>&lt;script is:inline src=\"https:\/\/unpkg.com\/react@18\/umd\/react.development.js\">&lt;\/script><\/code><\/p>\n<p>\u0412 \u0446\u0435\u043b\u043e\u043c \u0432 Astro \u0432\u0441\u0451 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 HTML: \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0432\u0440\u0443\u0447\u043d\u0443\u044e, \u044d\u0442\u043e \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e \u0438 \u0441\u043b\u043e\u0436\u043d\u043e \u2014 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<h4>UI-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/h4>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0433\u043b\u0443\u043f\u0443\u044e \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0448\u0442\u0443\u043a\u0443: \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0431\u043b\u043e\u0433\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u042f \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b\u00bb \u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043d\u0435\u0451 \u043d\u0430 \u0432\u0441\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432\u044b\u043b\u0435\u0442\u0430\u043b\u0438 \u043a\u043e\u043d\u0444\u0435\u0442\u0442\u0438.<\/p>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 react-confetti \u2014 \u0430\u043d\u0430\u043b\u043e\u0433\u0438 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c JS \u043d\u0430\u043c \u043f\u043e \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442. \u0425\u043e\u0440\u043e\u0448\u0430\u044f \u043d\u043e\u0432\u043e\u0441\u0442\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432 Astro \u043c\u043e\u0436\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u0443\u044e UI-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u0431\u0443\u0434\u044c \u0442\u043e React, Solid, Vue \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0435.<\/p>\n<p>\u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u043c React \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e <a href=\"https:\/\/docs.astro.build\/en\/guides\/integrations-guide\/react\/\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>:<\/p>\n<p><code>npx astro add react<\/code><\/p>\n<p>\u0412 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/c3e\/dc8\/1c8\/c3edc81c859e4536a20f1bdf0f5f6241.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1400\" height=\"895\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c3e\/dc8\/1c8\/c3edc81c859e4536a20f1bdf0f5f6241.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043a\u043e\u043d\u0444\u0435\u0442\u0442\u0438:<\/p>\n<p><code>npm i react-confetti-explosion<\/code><\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435, \u0441\u043b\u0435\u0434\u0443\u044f \u043e\u0431\u0449\u0435\u043f\u0440\u0438\u043d\u044f\u0442\u043e\u043c\u0443 \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044e Astro, \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043f\u0430\u043f\u043a\u0443 components. \u0412 \u043d\u0435\u0439 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u043c \u043f\u0430\u043f\u043a\u0443 ConfettiButton \u0441 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 ConfettiButton.tsx \u0438 style.module.css (\u0441\u043c. \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e scratches\/ConfettiButton.tsx \u0438 scratches\/ConfettiButton.css).<\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435. \u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0432 \u0444\u0430\u0439\u043b blog.astro, \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c. \u0418 \u0434\u0430\u0436\u0435 \u0432 DevTools \u043c\u044b \u043d\u0435 \u0443\u0432\u0438\u0434\u0438\u043c react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>\u042d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c \u0442\u0430 \u0441\u0430\u043c\u0430\u044f \u00ab\u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043e\u0441\u0442\u0440\u043e\u0432\u043e\u0432\u00bb \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438. \u0414\u0430\u0436\u0435 \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c JS-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0438\u0441\u0443\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0447\u0435\u0440\u0435\u0437 JavaScript, Astro \u0434\u0435\u043b\u0430\u0435\u0442 \u0438\u0437 \u043d\u0435\u0451 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 HTML-\u0442\u0435\u0433\u0438. \u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0447\u0430\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0432 \u0444\u0430\u0439\u043b\u0430\u0445 .astro.<\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u2014 \u043d\u0430\u0434\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 client \u0432 blog.astro:<\/p>\n<p><code>import { ConfettiButton } from \"..\/components\/ConfettiButton\/ConfettiButton.trx\";<\/code><\/p>\n<p><code>...<\/code><\/p>\n<p><code>&lt;div class=\"counter\"><\/code><\/p>\n<p><code>&lt;ConfettiButton client:load \/><\/code><\/p>\n<p><code>&lt;\/div><\/code><\/p>\n<p>\u0417\u0430\u0433\u043b\u044f\u0434\u044b\u0432\u0430\u0435\u043c \u0432 Network \u0438 \u2014 \u0443\u0440\u0430 \u2014 \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u043d\u0430\u0448\u0438 react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0438 \u0443\u0431\u0435\u0436\u0434\u0430\u0435\u043c\u0441\u044f, \u0447\u0442\u043e \u043e\u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/af9\/ae6\/a26\/af9ae6a2684885c95a55f3dd96ae84a7.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1393\" height=\"888\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/af9\/ae6\/a26\/af9ae6a2684885c95a55f3dd96ae84a7.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c build \u0438 \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0432 \u0441\u0431\u043e\u0440\u043a\u0443 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438\u0441\u044c JS-\u0444\u0430\u0439\u043b\u044b.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/45b\/20d\/f23\/45b20df231a5d48c736a24c7bd55bf22.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1380\" height=\"872\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/45b\/20d\/f23\/45b20df231a5d48c736a24c7bd55bf22.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0427\u0442\u043e \u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 client, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432 \u0444\u0430\u0439\u043b .astro? \u042d\u0442\u043e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0440\u0430\u0431\u043e\u0442\u0443 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432:<\/p>\n<ul>\n<li>\n<p><strong>load<\/strong>: \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441 \u0432\u044b\u0441\u043e\u043a\u0438\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c, \u043a\u043e\u0433\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0443\u0436\u0435\u043d \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u043e\u0440\u0435\u0435.<\/p>\n<\/li>\n<li>\n<p><strong>idle<\/strong>: \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u043e \u0441\u0440\u0435\u0434\u043d\u0438\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c, \u043a\u043e\u0433\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0443\u0436\u0435\u043d, \u043d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043d\u0438\u043c \u043d\u0435 \u0441\u0440\u0430\u0437\u0443 \u2014 \u0432\u0430\u0436\u043d\u0435\u0435, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u043e\u0441\u044c \u0432\u0441\u0451 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435.<\/p>\n<\/li>\n<li>\n<p><strong>visible<\/strong>: \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441 \u043d\u0438\u0437\u043a\u0438\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c. \u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0433\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n<\/li>\n<li>\n<p><strong>only<\/strong>: \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441 \u0432\u044b\u0441\u043e\u043a\u0438\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c, \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435. \u041d\u0443\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e Astro \u043d\u0435 \u0437\u043d\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f \u043d\u0430 client:only:<\/p>\n<p><code>&lt;div class=\"counter\"><\/code><\/p>\n<p><code>&lt;ConfettiButton client:only=\"react\" \/><\/code><\/p>\n<p><code>&lt;\/div><\/code><\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u0435\u0441\u043b\u0438 \u043c\u044b \u0432\u044b\u043a\u043b\u044e\u0447\u0438\u043c JavaScript, \u043d\u0430\u0448\u0430 \u043a\u043d\u043e\u043f\u043a\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u043f\u0430\u0434\u0451\u0442 \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/7ff\/032\/9b1\/7ff0329b1fe0444dfc1d6f30eafc0b8d.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1394\" height=\"875\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7ff\/032\/9b1\/7ff0329b1fe0444dfc1d6f30eafc0b8d.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e. \u041c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0431\u043b\u043e\u0433 \u0441\u0447\u0451\u0442\u0447\u0438\u043a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u0439. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0443\u0436\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0435\u0439, \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043e\u0442 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 \u2014 \u0441\u043a\u0430\u0436\u0435\u043c, \u043d\u0430 SolidJS.<\/p>\n<p>\u041d\u043e \u0443 \u043d\u0430\u0441 \u0436\u0435 React! \u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u0434\u043b\u044f Astro \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c UI-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0422\u0430\u043a \u0447\u0442\u043e \u0441\u043c\u0435\u043b\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u043c Solid:<\/p>\n<p><code>npx astro add solid<\/code><\/p>\n<p>\u041f\u0440\u0430\u0432\u0434\u0430, \u043d\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 TS-\u043a\u043e\u043d\u0444\u0438\u0433\u0430 \u0441\u043e\u0433\u043b\u0430\u0448\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u0441\u0442\u043e\u0438\u0442, \u0432\u0435\u0434\u044c \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043d\u0430 React.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/fb1\/e1b\/d43\/fb1e1bd436cd15326a64ccb223e9f3b9.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1411\" height=\"878\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fb1\/e1b\/d43\/fb1e1bd436cd15326a64ccb223e9f3b9.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u043e\u0439 \u043d\u0430\u043c \u043f\u0430\u043f\u043a\u0435 components \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043f\u0430\u043f\u043a\u0443 Couter \u0441 \u0444\u0430\u0439\u043b\u043e\u043c Counter.tsx:<\/p>\n<p><code>import styles from \".\/style.module.css\";<\/code><\/p>\n<p><code>interface Props {<\/code><\/p>\n<p><code>\u00a0\u00a0count: number;<\/code><\/p>\n<p><code>}<\/code><\/p>\n<p><code>export const Counter = ({ count = 0 }: Props) => {<\/code><\/p>\n<p><code>\u00a0\u00a0return &lt;div class={styles.counter}>{count}&lt;\/div>;<\/code><\/p>\n<p><code>};<\/code><\/p>\n<p>\u0412 \u0442\u0443 \u0436\u0435 \u043f\u0430\u043f\u043a\u0443 \u0437\u0430\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u0441\u0442\u0438\u043b\u0438 \u2014 style.module.css (\u0441\u043c. scratches\/Counter.css).<\/p>\n<p>\u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430: \u0432 JSX \u043a\u043e\u0434\u0435 Solid (\u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 React) \u043d\u0435\u0442 className \u2014 \u0442\u043e\u043b\u044c\u043a\u043e class. \u0410 \u0438\u0437-\u0437\u0430 TS-\u043a\u043e\u043d\u0444\u0438\u0433\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043d\u0435 \u0441\u0442\u0430\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c, IDE \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043d\u0430\u043c className.\u00a0<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/191\/cd0\/9f9\/191cd09f9b3e186fc23459721c6ebe3a.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1395\" height=\"889\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/191\/cd0\/9f9\/191cd09f9b3e186fc23459721c6ebe3a.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u0448\u0438\u0431\u043a\u0430 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u043b\u0435\u0433\u043a\u043e: \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439, \u0441\u043e\u043e\u0431\u0449\u0430\u044e\u0449\u0438\u0439, \u0447\u0442\u043e \u043c\u044b \u043f\u0438\u0448\u0435\u043c \u043d\u0430 Solid:<\/p>\n<p><code>\/** <a class=\"mention\" href=\"\/users\/jsxImportSource\">@jsxImportSource<\/a> solid-js \/<\/code><\/p>\n<p><em>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0441\u0447\u0451\u0442\u0447\u0438\u043a \u043a blog.astro \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 ConfettiButton.<\/em><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/f90\/00d\/f44\/f9000df4433262e09e9192d47730ee9c.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1277\" height=\"812\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f90\/00d\/f44\/f9000df4433262e09e9192d47730ee9c.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<h3>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c<\/h3>\n<p>\u041b\u043e\u0433\u0438\u0447\u043d\u044b\u0439 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u044d\u0442\u0430\u043f \u2014 \u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u0441\u0447\u0451\u0442\u0447\u0438\u043a \u0441 \u043a\u043d\u043e\u043f\u043a\u043e\u0439, \u0442\u043e \u0435\u0441\u0442\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0432\u043e\u0434\u0438\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u043b\u043e\u0441\u044c \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u043d\u0430\u0436\u0430\u0442\u0438\u0438.<\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c: \u0445\u043e\u0442\u044f \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a <u>\u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0434\u043d\u043e\u0433\u043e Astro-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/u>, \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0447\u0451\u0442\u0447\u0438\u043a \u043d\u0430 Solid \u0432 \u043a\u043e\u043d\u0444\u0435\u0442\u0442\u0438 \u043d\u0430 React.<\/p>\n<p>\u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043d\u0435\u043a\u043e\u0435 \u0432\u043d\u0435\u0448\u043d\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u0410 \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0443 Astro \u043d\u0435\u0442 (\u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0430\u0439\u043b\u044b), \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0438\u043b\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0439 store.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0434\u043e\u043b\u0433\u043e \u043d\u0435 \u043c\u0443\u0447\u0438\u0442\u044c\u0441\u044f, \u043c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0432\u043d\u0435\u0448\u043d\u0438\u0439. \u0421\u0430\u043c Astro \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 nanostores, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u0430 \u043f\u043e\u0447\u0442\u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0432\u0435\u0441\u0438\u0442 \u0438 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432:<\/p>\n<p><code>npm install nanostores <a class=\"mention\" href=\"\/users\/nanostores\">@nanostores<\/a>\/solid <a class=\"mention\" href=\"\/users\/nanostores\">@nanostores<\/a>\/react<\/code><\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043f\u0430\u043f\u043a\u0443 stores \u0441 \u0444\u0430\u0439\u043b\u043e\u043c counterStore.ts \u0432\u043d\u0443\u0442\u0440\u0438:<\/p>\n<p><code>import { atom } from \"nanostores\";<\/code><\/p>\n<p><code>export const $counter = atom(0);<\/code><\/p>\n<p><code>export const increaseCounter = () => {<\/code><\/p>\n<p><code>\u00a0\u00a0$counter.set(\" class=\"formula inline\">counter.get() + 1);<\/code><\/p>\n<p><code>};<\/code><\/p>\n<p>\u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c ConfettiButton.tsx:<\/p>\n<p><code>import { increaseCounter } from \"..\/..\/stores\/counterStore\";<\/code><\/p>\n<p><code>...<\/code><\/p>\n<p><code>&lt;button<\/code><\/p>\n<p><code>\u00a0\u00a0onClick={() => {<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0toggleConfetti(true);<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0increaseCounter();<\/code><\/p>\n<p><code>\u00a0\u00a0}}<\/code><\/p>\n<p><code>><\/code><\/p>\n<p>\u00a0<code>...<\/code><\/p>\n<p>\u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c Counter.tsx:<\/p>\n<p><code>\/** <a class=\"mention\" href=\"\/users\/jsxImportSource\">@jsxImportSource<\/a> solid-js *\/<\/code><\/p>\n<p><code>import styles from \".\/style.module.css\";<\/code><\/p>\n<p><code>import { useStore } from <a class=\"mention\" href=\"\/users\/nanostores\">@nanostores<\/a>s\/solid\";<\/code><\/p>\n<p><code>import { $counter } from \"..\/..\/stores\/counterStore\";<\/code><\/p>\n<p><code>export const Counter = () => {<\/code><\/p>\n<p><code>\u00a0\u00a0const count = useStore(\" class=\"formula inline\">counter);<\/code><\/p>\n<p><code>\u00a0\u00a0return &lt;div class={styles.counter}>{count()}&lt;\/div>;<\/code><\/p>\n<p><code>};<\/code><\/p>\n<p><em>\u041e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u0441\u044f \u043d\u0430 \u0441\u0430\u0439\u0442 \u0438 \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0441\u0447\u0451\u0442\u0447\u0438\u043a \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b!<\/em><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/d89\/a47\/9bd\/d89a479bdc1156c65ba1cec9359b2618.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1402\" height=\"875\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d89\/a47\/9bd\/d89a479bdc1156c65ba1cec9359b2618.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0430 \u043f\u043e\u0442\u043e\u043c \u0432\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u0432 \u0431\u043b\u043e\u0433, \u0441\u0447\u0451\u0442\u0447\u0438\u043a \u043e\u0431\u043d\u0443\u043b\u0438\u0442\u0441\u044f. Astro \u0432 \u044d\u0442\u043e\u043c \u0441\u043c\u044b\u0441\u043b\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u043e \u0434\u0435\u0434\u043e\u0432\u0441\u043a\u0438\u043c \u043c\u0435\u0442\u043e\u0434\u0430\u043c: \u0441\u0430\u0439\u0442 \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0439 \u0438 HTML-\u0444\u0430\u0439\u043b\u044b \u043d\u0438\u043a\u0430\u043a \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c \u043d\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u044b.<\/p>\n<p>\u0417\u043d\u0430\u0447\u0438\u0442, \u043d\u0430\u043c \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0433\u0434\u0435-\u0442\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f (\u0432 local storage, \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434\u0435 \u0438 \u0442.\u0434.), \u0430 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0438\u0445. \u0411\u043e\u043b\u044c\u0448\u0430\u044f \u043b\u0438 \u044d\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043d\u043e\u0433\u043e \u0432\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u0435 \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 SPA \u043c\u044b \u0431\u044b \u043c\u043e\u0433\u043b\u0438 \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u043c\u0438. \u041d\u043e \u0432 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0431\u044b \u043e\u0442\u043a\u0443\u0434\u0430-\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c.<\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u0438 (\u043f\u0440\u043e \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044e Astro \u0438 \u0435\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u044b) \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043a \u043a\u043e\u043d\u0446\u0443. \u041d\u0430\u0447\u0438\u043d\u0430\u044f \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043d\u0430\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0431\u043b\u043e\u0433 \u0441\u0442\u0430\u0442\u044c\u044f\u043c\u0438, \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0438 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0444\u0438\u0448\u043a\u0438 Astro.<\/p>\n<h2>\u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430: \u0444\u0438\u0448\u043a\u0438<\/h2>\n<h3>\u041a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438<\/h3>\n<p>\u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0431\u043b\u043e\u0433\u0430 \u0443 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0434\u0430\u0432\u043d\u043e \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043e \u043c\u0435\u043d\u044e \u0441\u0442\u0430\u0442\u0435\u0439. \u041f\u043e\u0440\u0430, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c \u0441\u0442\u0430\u0442\u044c\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u043b\u0438\u0441\u044c. \u041c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438.<\/p>\n<p>\u0412 Astro \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e \u0441\u0442\u0430\u0442\u0435\u0439 \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 content (\u044d\u0442\u043e \u0437\u0430\u0440\u0435\u0437\u0435\u0440\u0432\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0434\u043b\u044f \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430). \u0412 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e \u043c\u043e\u0433\u0443\u0442 \u0432\u0445\u043e\u0434\u0438\u0442\u044c \u043c\u0430\u0440\u043a\u0434\u0430\u0443\u043d-\u0444\u0430\u0439\u043b\u044b, JSON-\u0444\u0430\u0439\u043b\u044b, YAML-\u0444\u0430\u0439\u043b\u044b \u0438 MDX-\u0444\u0430\u0439\u043b\u044b.<\/p>\n<p>\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043f\u0430\u043f\u043a\u0443 content \u0441 \u043f\u0430\u043f\u043a\u043e\u0439 blog \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0438 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u043c \u0442\u0430\u043c \u043c\u0430\u0440\u043a\u0434\u0430\u0443\u043d-\u0444\u0430\u0439\u043b\u044b \u0441\u043e \u0441\u0442\u0430\u0442\u044c\u044f\u043c\u0438 (\u0441\u043c. scratches\/blog\/.md). \u0421 \u0442\u0435\u043c\u0438 \u0441\u0430\u043c\u044b\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442 \u043b\u0438\u0446\u0430 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043b ChatGPT.<\/p>\n<p>\u0417\u0430\u043c\u0435\u0447\u0430\u0435\u043c, \u0447\u0442\u043e \u0432 \u0441\u0431\u043e\u0440\u043a\u0435 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0441\u044f \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 \u0444\u0430\u0439\u043b .astro\/types.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/896\/231\/666\/896231666b4e2f2a8413f95c022df560.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1397\" height=\"926\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/896\/231\/666\/896231666b4e2f2a8413f95c022df560.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u0438 \u0432\u0438\u0434\u0438\u043c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438:<\/p>\n<ul>\n<li>\n<p>\u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0446\u0438\u044e \u043c\u043e\u0434\u0443\u043b\u044f content,<\/p>\n<\/li>\n<li>\n<p>\u043a\u0443\u0447\u0443 \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 (\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0438\u0441\u0438 \u043f\u043e \u0441\u043b\u0430\u0433\u0443\/id, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u0438 \u0442.\u0434.),<\/p>\n<\/li>\n<li>\n<p>ContentEntryMap c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438,<\/p>\n<\/li>\n<li>\n<p>\u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0440\u0435\u043d\u0434\u0435\u0440.<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: \u0432\u0441\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0430\u043c\u0435\u0440\u0435\u043d\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0447\u0435\u0440\u0435\u0437 \u0434\u0435\u0444\u0438\u0441\u044b, \u0442.\u043a. \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0438 \u043f\u0430\u0440\u0441\u0438\u0442\u0441\u044f \u043f\u043e\u0434 \u0441\u0441\u044b\u043b\u043a\u0438 \u2014 \u0442\u0430\u043a \u0431\u0443\u0434\u0443\u0442 \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u0448\u0438 \u0441\u0442\u0430\u0442\u044c\u0438 \u0432 \u0430\u0434\u0440\u0435\u0441\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u0444\u0438\u0433 config.ts \u0432 \u043f\u0430\u043f\u043a\u0435 content. \u042d\u0442\u043e \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0447\u0443\u0432\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u044e \u043f\u0440\u0435\u043b\u0435\u0441\u0442\u044c \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0439 \u0432 Astro:<\/p>\n<p><code>import { defineCollection, z } from \"astro:content\";<\/code><\/p>\n<p><code>const blog = defineCollection({<\/code><\/p>\n<p><code>\u00a0\u00a0type: \"content\",<\/code><\/p>\n<p><code>\u00a0\u00a0schema: z.object({}),<\/code><\/p>\n<p><code>});<\/code><\/p>\n<p><code>export const collections = { blog };<\/code><\/p>\n<p>\u0422\u0438\u043f content \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043c\u0430\u0440\u043a\u0434\u0430\u0443\u043d-\u0444\u0430\u0439\u043b\u0430\u043c\u0438 (\u0434\u043b\u044f JSON\/YAML \u043c\u044b \u0431\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u0442\u0438\u043f data).\u00a0<\/p>\n<p>\u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u0445\u0435\u043c\u0430\u043c\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 Astro \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 Zod. \u0418\u0434\u0435\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c frontmatter \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0432 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0442\u0438\u043f\u044b TypeScript \u043f\u0440\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.\u00a0<\/p>\n<p>\u041a\u0441\u0442\u0430\u0442\u0438, \u0435\u0441\u043b\u0438 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u0444\u0438\u0433\u0430 astro:content \u0437\u0430\u0433\u043e\u0440\u0435\u043b\u0441\u044f \u043a\u0440\u0430\u0441\u043d\u044b\u043c, \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u043e\u043c\u043e\u0447\u044c \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<h3>\u0412\u044b\u0432\u043e\u0434 \u0441\u0442\u0430\u0442\u0435\u0439<\/h3>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u0432\u044b\u0432\u043e\u0434\u0443 \u0441\u0442\u0430\u0442\u0435\u0439. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u0438\u0437 \u043d\u0438\u0445 \u0432 \u043f\u0430\u043f\u043a\u0435 pages, \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u043e\u0443\u0442.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u0443\u0442\u0438 \u043a \u0441\u0442\u0430\u0442\u044c\u044f\u043c \u0442\u0438\u043f\u0430 &#171;\/blog\/article1&#187;, &#171;\/blog\/article2&#187;:<\/p>\n<ol>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0451\u043c pages\/blog.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u044b\u0432\u0430\u0435\u043c blog.astro \u0432 index.astro \u0438 \u0443\u043d\u043e\u0441\u0438\u043c \u0435\u0433\u043e \u0432 \u043f\u0430\u043f\u043a\u0443 blog.<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0442\u043e\u0439 \u0436\u0435 \u043f\u0430\u043f\u043a\u0435 blog \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0444\u0430\u0439\u043b [\u2026slug].astro (\u043e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 slug \u0431\u0443\u0434\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u0440\u043e\u0443\u0442):<\/p>\n<\/li>\n<\/ol>\n<p><code>---<\/code><\/p>\n<p><code>import Layout from \"..\/..\/layouts\/Layout.astro\";<\/code><\/p>\n<p><code>import { getCollection } from \"astro:content\";<\/code><\/p>\n<p><code>export async function getStaticPaths() {<\/code><\/p>\n<p><code>\u00a0\u00a0const posts = await getCollection(\"blog\");<\/code><\/p>\n<p><code>\u00a0\u00a0return posts.map((post) => ({<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0params: { slug: post.slug },<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0props: { post },<\/code><\/p>\n<p><code>\u00a0\u00a0}));<\/code><\/p>\n<p><code>}<\/code><\/p>\n<p><code>const { post } = Astro.props;<\/code><\/p>\n<p><code>const { Content } = await post.render();<\/code><\/p>\n<p><code>---<\/code><\/p>\n<p><code>&lt;Layout><\/code><\/p>\n<p><code>\u00a0\u00a0&lt;article><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0&lt;Content \/><\/code><\/p>\n<p><code>\u00a0\u00a0&lt;\/article><\/code><\/p>\n<p><code>&lt;\/Layout><\/code><\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u043c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0440\u0435\u043d\u0434\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f. \u041e\u043d\u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 (Astro-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043f\u0435\u0440\u0435\u0432\u0435\u0434\u0451\u043d\u043d\u044b\u0439 \u0432 HTML), \u043d\u043e \u0438 \u0432\u044b\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u0442 \u0438\u0437 \u043c\u0430\u0440\u043a\u0434\u0430\u0443\u043d-\u0444\u0430\u0439\u043b\u0430 \u0432\u0441\u044f\u043a\u0438\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0448\u0442\u0443\u043a\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/67c\/be1\/66f\/67cbe166ff12f2f46c8f04a1dc04fbbb.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1388\" height=\"921\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/67c\/be1\/66f\/67cbe166ff12f2f46c8f04a1dc04fbbb.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0441\u0442\u0430\u0442\u0438, \u0447\u0442\u043e\u0431\u044b \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0447\u0435\u0433\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u043b\u0430\u0441\u044c \u043d\u0430\u0448\u0430 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u00ab\u041d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u043e\u00bb, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0430\u0439\u043b 404.astro \u2014 \u0438 Astro \u0441\u0430\u043c \u0435\u0433\u043e \u043f\u043e\u0434\u0445\u0432\u0430\u0442\u0438\u0442:<\/p>\n<p><code>---<\/code><\/p>\n<p><code>import Layout from \"..\/layouts\/Layout.astro\";<\/code><\/p>\n<p><code>---<\/code><\/p>\n<p><code>&lt;Layout title=\"\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u0430\"><\/code><\/p>\n<p><code>\u00a0\u00a0&lt;h1>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u0430 ?&lt;\/h1><\/code><\/p>\n<p><code>&lt;\/Layout><\/code><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/720\/fbb\/55a\/720fbb55a20d17bef8c1024b194c975a.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1384\" height=\"915\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/720\/fbb\/55a\/720fbb55a20d17bef8c1024b194c975a.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c blog\/index.astro, \u0447\u0442\u043e\u0431\u044b \u0442\u0443\u0434\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u043b\u0441\u044f \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0442\u0430\u0442\u0435\u0439 \u0438\u0437 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438:<\/p>\n<p><code>---<\/code><\/p>\n<p><code>import Layout from \"..\/..\/layouts\/Layout.astro\";<\/code><\/p>\n<p><code>import { getCollection } from \"astro:content\";<\/code><\/p>\n<p><code>const posts = await getCollection(\"blog\");<\/code><\/p>\n<p><code>---<\/code><\/p>\n<p><code>&lt;Layout title=\"\u0411\u043b\u043e\u0433\"><\/code><\/p>\n<p><code>\u00a0\u00a0&lt;h1>\u0411\u043b\u043e\u0433&lt;\/h1><\/code><\/p>\n<p><code>\u00a0\u00a0&lt;p><\/code><\/p>\n<p>\u00a0\u00a0\u00a0\u00a0<code>\u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u0432\u044b \u043d\u0430\u0439\u0434\u0435\u0442\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u0430\u0442\u044c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b, \u0447\u0442\u043e\u0431\u044b<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u0432\u043e\u0438\u043c\u0438 \u0437\u043d\u0430\u043d\u0438\u044f\u043c\u0438 \u0438 \u043e\u043f\u044b\u0442\u043e\u043c \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/code><\/p>\n<p><code>\u00a0\u00a0&lt;\/p><\/code><\/p>\n<p><code>\u00a0\u00a0{<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0posts.map((post) => {<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return (<\/code><\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<code>&lt;article><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h2><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a href={\/blog\/${post.slug}}>{post.slug}&lt;\/a><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/h2><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435&lt;\/p><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/article><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0})<\/code><\/p>\n<p><code>\u00a0\u00a0}<\/code><\/p>\n<p><code>&lt;\/Layout><\/code><\/p>\n<p>\u0421\u0447\u0451\u0442\u0447\u0438\u043a \u043c\u044b \u043d\u0435 \u0443\u0434\u0430\u043b\u044f\u0435\u043c, \u0430 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043c \u0432 [\u2026slug].astro \u2014 \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0441\u0447\u0438\u0442\u0430\u043b \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e.<\/p>\n<p>\u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u0434 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e \u043f\u043e \u043a\u043b\u0430\u0441\u0441\u0443 \u0432 global.css:<\/p>\n<p><code>.astro-code {<\/code><\/p>\n<p><code>\u00a0\u00a0padding: 30px 30px;<\/code><\/p>\n<p><code>\u00a0\u00a0border-radius: 20px;<\/code><\/p>\n<p><code>}<\/code><\/p>\n<p>\u0421\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438 \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u043c, \u0447\u0435\u0433\u043e \u043d\u0430\u043c \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442: \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u0435\u0439, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u0435\u0439 \u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u043f\u043e \u0434\u0430\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/7ff\/358\/876\/7ff358876fc797983f3dcf1054709bf5.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1404\" height=\"917\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7ff\/358\/876\/7ff358876fc797983f3dcf1054709bf5.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u0430\u0448\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u2014 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u0430\u0436\u0434\u0443\u044e \u0438\u0437 \u043b\u0435\u0436\u0430\u0449\u0438\u0445 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u0441\u0442\u0430\u0442\u0435\u0439, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0432 \u043d\u0430\u0447\u0430\u043b\u043e frontmutter \u0441 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u043c, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0438 \u0434\u0430\u0442\u043e\u0439. \u041c\u044b \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b\u0438 \u043c\u0430\u0440\u043a\u0434\u0430\u0443\u043d-\u0444\u0430\u0439\u043b\u044b \u0441 \u0442\u0438\u043f\u0430\u043c\u0438 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 (\u0441\u043c. scratches\/blog-with-types\/*.md), \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u0438\u0445, \u043d\u0435 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044f \u0441\u0431\u043e\u0440\u043a\u0443.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/7ef\/655\/c33\/7ef655c33a942fcf73ace8967686c19a.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1397\" height=\"927\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7ef\/655\/c33\/7ef655c33a942fcf73ace8967686c19a.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0442\u0438\u043f\u044b \u0432 config.ts:<\/p>\n<p><code>import { defineCollection, z } from \"astro:content\";<\/code><\/p>\n<p><code>const blog = defineCollection({<\/code><\/p>\n<p><code>\u00a0\u00a0type: \"content\",<\/code><\/p>\n<p><code>\u00a0\u00a0schema: z.object({<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0title: z.string(),<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0description: z.string(),<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0publishedAt: z.string().transform((val) => new Date(val)),<\/code><\/p>\n<p><code>\u00a0\u00a0}),<\/code><\/p>\n<p><code>});<\/code><\/p>\n<p><code>export const collections = { blog };<\/code><\/p>\n<p>\u0415\u0441\u043b\u0438 \u0441\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u0443\u0431\u0435\u0440\u0451\u043c \u0438\u0437 \u043a\u0430\u043a\u043e\u0433\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u043c\u0430\u0440\u043a\u0434\u0430\u0443\u043d-\u0444\u0430\u0439\u043b\u0430 \u043e\u0434\u0438\u043d \u0438\u0437 \u0442\u0438\u043f\u043e\u0432, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u043c, \u043a\u0430\u043a \u0441\u0431\u043e\u0440\u043a\u0430 \u0432\u0430\u043b\u0438\u0442\u0441\u044f \u2014 \u044d\u0442\u043e Zod \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0430 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0442\u0438\u043f\u044b. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u044b \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438, \u043a\u043e\u043d\u0444\u0438\u0433 \u043c\u043e\u0436\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c.<\/p>\n<p>\u0412\u043d\u043e\u0441\u0438\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 blog\/index.astro \u2014 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0443 \u043f\u043e \u0434\u0430\u0442\u0435 \u0438 \u0432\u044b\u0432\u043e\u0434 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430+\u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f:<\/p>\n<p><code>---<\/code><\/p>\n<p><code>...<\/code><\/p>\n<p><code>posts.sort((itemA, itemB) => itemB.data.publishedAt - itemA.data.publishedAt);<\/code><\/p>\n<p><code>---<\/code><\/p>\n<p><code>{<\/code><\/p>\n<p><code>\u00a0\u00a0posts.map((post) => {<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0return (<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;article><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h2><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0<\/code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<code>&lt;a href={\/blog\/${post.slug}}>{post.data.title}&lt;\/a><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/h2><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p>{post.data.description}&lt;\/p><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/article><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0);<\/code><\/p>\n<p><code>\u00a0\u00a0})<\/code><\/p>\n<p><code>}<\/code><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/ff9\/7b4\/216\/ff97b4216d9b71028c3af4a6935ca2d8.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1400\" height=\"928\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ff9\/7b4\/216\/ff97b4216d9b71028c3af4a6935ca2d8.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u044b\u0432\u043e\u0434 \u0434\u0430\u0442\u044b \u0432 \u0441\u0430\u043c\u0438\u0445 \u0441\u0442\u0430\u0442\u044c\u044f\u0445 [\u2026slug].astro:<\/p>\n<p><code>...<\/code><\/p>\n<p><code>&lt;time datetime={post.data.publishedAt.toISOString()}><\/code><\/p>\n<p><code>\u00a0\u00a0{formatDate(post.data.publishedAt)}<\/code><\/p>\n<p><code>&lt;\/time><\/code><\/p>\n<p><code>&lt;Content \/><\/code><\/p>\n<p><code>...<\/code><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/47e\/de7\/f9d\/47ede7f9d07f7b9c1df5613f13a9f31c.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1385\" height=\"917\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/47e\/de7\/f9d\/47ede7f9d07f7b9c1df5613f13a9f31c.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u0441\u0431\u043e\u0440\u043a\u0435 \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 Astro \u0441\u0434\u0435\u043b\u0430\u043b \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u043f\u0430\u043f\u043e\u0447\u043a\u0443 \u0441 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c index.html. \u0413\u043e\u0442\u043e\u0432\u043e!<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u0438 \u0438\u0437 \u0430\u0434\u043c\u0438\u043d\u043a\u0438, \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043c\u0435\u0441\u0442\u043e getCollection \u043d\u0443\u0436\u0435\u043d await fetch(url), \u0430 \u0432\u043c\u0435\u0441\u0442\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u043d\u0430\u0434\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043c\u0430\u0440\u043a\u0434\u0430\u0443\u043d (<a href=\"https:\/\/docs.astro.build\/en\/guides\/markdown-content\/#fetching-remote-markdown\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/a>).<\/p>\n<h3>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c (SSR)<\/h3>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u0430\u0436\u0435 \u0432 \u0443\u0441\u043b\u043e\u0432\u043d\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0431\u043b\u043e\u0433\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0443\u0436\u0435\u043d:<\/p>\n<ul>\n<li>\n<p>\u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0438\u0437 \u0430\u0434\u043c\u0438\u043d\u043a\u0438 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438,<\/p>\n<\/li>\n<li>\n<p>\u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0443 \u0437\u0430\u044f\u0432\u043a\u0438,<\/p>\n<\/li>\n<li>\n<p>\u0447\u0442\u043e\u0431\u044b \u043e\u0431\u043e\u0439\u0442\u0438 CORS,<\/p>\n<\/li>\n<li>\n<p>\u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c API.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421 \u043d\u0435\u0434\u0430\u0432\u043d\u0438\u0445 \u043f\u043e\u0440 \u0432 Astro \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u0433\u0438\u0431\u0440\u0438\u0434\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c: \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u0435\u0440\u0432\u0435\u0440, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u044b\u0431\u0440\u0430\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0431\u0443\u0434\u0443\u0442 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e, \u0430 \u043a\u0430\u043a\u0438\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0451\u043c.<\/p>\n<p>\u042d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u0443\u0442\u0430\u044f \u0444\u0438\u0447\u0430. \u0417\u0430\u0447\u0435\u043c \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0432\u0441\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430, \u0435\u0441\u043b\u0438 \u043e\u043d \u043e\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u043d\u0435 \u043d\u0443\u0436\u0435\u043d \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438\u043b\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043e\u0431\u043e \u043c\u043d\u0435? \u041f\u0443\u0441\u0442\u044c \u0432\u0441\u0451 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u0442\u0434\u0430\u0451\u0442\u0441\u044f \u0432 \u0441\u0442\u0430\u0442\u0438\u043a\u0435.<\/p>\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u0435\u0437 JS. \u0410 \u0435\u0449\u0451 \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d API-\u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0437\u0430\u0449\u0438\u0449\u0451\u043d\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435\u043b\u044c\u0437\u044f \u0441\u0432\u0435\u0442\u0438\u0442\u044c \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435.<\/p>\n<p>\u0421\u043f\u0435\u0440\u0432\u0430 \u0432\u043a\u043b\u044e\u0447\u0438\u043c \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0434\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433 astro.config.mjs:<\/p>\n<p><code>export default defineConfig({<\/code><\/p>\n<p><code>\u00a0\u00a0output: 'server',<\/code><\/p>\n<p><code>\u00a0\u00a0...<\/code><\/p>\n<p><code>});<\/code><\/p>\n<p>\u0415\u0449\u0451 \u0434\u043b\u044f SSR \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0435\u0440. Astro \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0433\u0434\u0435 \u0431\u0443\u0434\u0435\u0442 \u043a\u0440\u0443\u0442\u0438\u0442\u044c\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440. \u0415\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b <a href=\"https:\/\/docs.astro.build\/en\/guides\/integrations-guide\/\" rel=\"noopener noreferrer nofollow\">\u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0439<\/a>, \u043d\u043e \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0432\u043e\u044e.<\/p>\n<p>\u041c\u044b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0430\u0434\u0430\u043f\u0442\u0435\u0440 Netlify, \u0441\u043e\u0433\u043b\u0430\u0448\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0430:<\/p>\n<p><code>npx astro add netlify<\/code><\/p>\n<p>\u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c build \u0438 \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e HTML \u0444\u0430\u0439\u043b\u043e\u0432 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435\u0442. \u0411\u043b\u043e\u0433 \u043d\u0435 \u0437\u0430\u0432\u043e\u0434\u0438\u0442\u0441\u044f, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u044b \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u043c \u0441\u0442\u0430\u0442\u0438\u043a\u0443. \u0417\u0430\u0442\u043e \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u043f\u0430\u043f\u043a\u0430 .netlify.<\/p>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0442\u0430\u043a \u0434\u0435\u043b\u043e \u043d\u0435 \u043f\u043e\u0439\u0434\u0451\u0442: \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0442\u0435\u0440\u044f\u0442\u044c \u0432 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438. \u0422\u0430\u043a \u0447\u0442\u043e \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0433\u0438\u0431\u0440\u0438\u0434 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0435 astro.config.mjs \u2014 \u0438 \u0432\u0441\u0451 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0432\u043e\u0438 \u043c\u0435\u0441\u0442\u0430:<\/p>\n<p><code>export default defineConfig({<\/code><\/p>\n<p><code>\u00a0\u00a0output: 'hybrid',<\/code><\/p>\n<p><code>\u00a0\u00a0...<\/code><\/p>\n<p><code>});<\/code><\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 pages \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u0444\u043e\u0440\u043c\u043e\u0439 contact.astro (\u0441\u043c. scratches\/contact-base.astro).<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/835\/6c6\/c93\/8356c6c938f86fece4fb270ee6c24e84.jpeg\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\" width=\"1404\" height=\"922\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/835\/6c6\/c93\/8356c6c938f86fece4fb270ee6c24e84.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043c\u0435\u043d\u044e \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 Layout.astro (API \u043c\u044b \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f, \u0430 \u0432\u043e\u0442 \u043c\u0435\u0441\u0442\u043e \u043f\u043e\u0434 \u0444\u043e\u0440\u043c\u0443 \u043a\u0430\u043a \u0440\u0430\u0437 \u043d\u0443\u0436\u043d\u043e):<\/p>\n<p><code>&lt;a href=\"\/contact\" class:list={{ active: currentPath === \"contact\" }}><\/code><\/p>\n<p><code>\u00a0\u00a0\u0421\u0432\u044f\u0437\u0430\u0442\u044c\u0441\u044f \u0441\u043e \u043c\u043d\u043e\u0439<\/code><\/p>\n<p><code>&lt;\/a><\/code><\/p>\n<p>\u041f\u0438\u0448\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0444\u0430\u0439\u043b\u0430 contact.astro, \u043d\u0435 \u0437\u0430\u0431\u044b\u0432 \u043e\u0442\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440:<\/p>\n<p><code>export const prerender = false;<\/code><\/p>\n<p><code>let message = \"\";<\/code><\/p>\n<p><code>if (Astro.request.method === \"POST\") {<\/code><\/p>\n<p><code>\u00a0\u00a0try {<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0const data = await Astro.request.formData();<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0const email = data.get(\"email\");<\/code><\/p>\n<p>\u00a0\u00a0\u00a0\u00a0<code>const text = data.get(\"text\");<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0\/\/ TODO: \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043a \u0441\u0435\u0431\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0438\u0441<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0message = \u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043e, \u0441\u043f\u0430\u0441\u0438\u0431\u043e! \u042f \u043e\u0442\u0432\u0435\u0447\u0443 \u043d\u0430 &amp;lt;i&amp;gt;${email}&amp;lt;\/i&amp;gt; \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u0434\u043d\u044f;<\/code><\/p>\n<p><code>\u00a0\u00a0} catch (error) {<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0console.error(error);<\/code><\/p>\n<p><code>\u00a0\u00a0}<\/code><\/p>\n<p><code>}<\/code><\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435 \u0444\u043e\u0440\u043c\u0430 \u043d\u0430\u0442\u0438\u0432\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0437\u0430 \u0441\u0447\u0451\u0442 POST-\u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u0424\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0432\u0441\u0451 \u044d\u0442\u043e \u043d\u0430 React \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e \u2014 \u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b\u0440\u0443\u0431\u0438\u0442\u044c JS, \u0442\u043e \u0444\u043e\u0440\u043c\u0430 \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0437\u0430 \u0441\u0447\u0451\u0442 \u0431\u044d\u043a\u0430.<\/p>\n<p>\u0417\u0430\u0434\u0435\u043f\u043b\u043e\u0438\u0442\u044c \u0441\u0430\u0439\u0442 \u0441 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f GitHub\/GitLab \u043d\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Netlify \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e <a href=\"https:\/\/docs.astro.build\/en\/guides\/deploy\/netlify\/#cli-deployment\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>.<\/p>\n<h2>\u0412\u044b\u0432\u043e\u0434\u044b<\/h2>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 Astro \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0430\u0439\u0442\u043e\u0432: \u0431\u043b\u043e\u0433\u043e\u0432, \u043d\u043e\u0432\u043e\u0441\u0442\u043d\u044b\u0445 \u043f\u043e\u0440\u0442\u0430\u043b\u043e\u0432, \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u043e\u0432, \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u044d\u0442\u0430 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u0434\u0430\u043b\u044c\u0448\u0435. \u0415\u0441\u043b\u0438 \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u043e\u043d\u0438 \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0442 \u0434\u0435\u043b\u0430\u0442\u044c SPA, \u0442\u043e \u043f\u043e \u0441\u0443\u0442\u0438 \u0441\u0442\u0430\u043d\u0443\u0442 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c \u0431\u0435\u0437 \u0437\u0430\u0432\u044f\u0437\u043a\u0438 \u043d\u0430 UI-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435.<\/p>\n<p>\u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0438\u0434\u0435\u043e\u043b\u043e\u0433\u0438\u0438 Astro \u043e \u0442\u043e\u043c, \u0447\u0442\u043e JavaScript \u0443\u0431\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u2014 \u0435\u0451 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e. \u0412\u0441\u0451 \u0432\u0441\u0435\u0433\u0434\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0418\u043d\u043e\u0433\u0434\u0430 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u043d\u0443\u043b\u044f, \u0438\u043d\u043e\u0433\u0434\u0430 \u2014 \u0434\u043e\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435. \u0422\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043c\u0435\u0440 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u043f\u043e\u043a\u0430\u0436\u0435\u0442, \u043a\u0430\u043a \u0432\u0430\u0448 \u0441\u0430\u0439\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u0435\u0435.<\/p>\n<p>\u041c\u044b \u043d\u0435 \u0437\u0440\u044f \u043d\u0430\u0437\u0432\u0430\u043b\u0438 \u044d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e \u00ab\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u0432 Astro\u00bb: \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c \u0432 \u043e\u0441\u043d\u043e\u0432\u0430\u0445, \u043f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043d\u043e \u0442\u043e\u0447\u043d\u043e \u043d\u0435 \u043f\u043e\u043a\u0440\u044b\u043b\u0438 \u0432\u0441\u0451. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0435 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c Astro \u0432 \u0440\u0430\u0431\u043e\u0442\u0443, \u0441\u043e\u0432\u0435\u0442\u0443\u0435\u043c \u043e\u0441\u043d\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u0432 \u0435\u0433\u043e <a href=\"https:\/\/docs.astro.build\/en\/getting-started\/\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e<\/a> \u2014 \u0432\u044b \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e \u043f\u043e\u0447\u0435\u0440\u043f\u043d\u0451\u0442\u0435 \u0435\u0449\u0451 \u043a\u0443\u0447\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0444\u0438\u0448\u0435\u043a.<\/p>\n<p>\u2013\u2013\u2013<br \/><span class=\"habrahidden\">\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442\u0441\u044f React \u2013 \u043f\u0440\u043e\u0434\u0443\u043a\u0442 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 Meta, \u043f\u0440\u0438\u0437\u043d\u0430\u043d\u043d\u043e\u0439 \u044d\u043a\u0441\u0442\u0440\u0435\u043c\u0438\u0441\u0442\u0441\u043a\u043e\u0439 \u0438 \u0437\u0430\u043f\u0440\u0435\u0449\u0451\u043d\u043d\u043e\u0439 \u043d\u0430 \u0442\u0435\u0440\u0440\u0438\u0442\u043e\u0440\u0438\u0438 \u0420\u0424<\/span><\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p> <!----> <!----><\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/746380\/\"> https:\/\/habr.com\/ru\/articles\/746380\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>Astro \u2014 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0441\u0430\u0439\u0442\u043e\u0432, \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c. \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0431\u0438\u0440\u0430\u0435\u0442 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c \u0438 \u043a\u043e\u043d\u043a\u0443\u0440\u0438\u0440\u0443\u0435\u0442 \u0441 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c NextJS.<\/p>\n<p>\u0427\u0435\u043c \u0436\u0435 \u0442\u0430\u043a \u0445\u043e\u0440\u043e\u0448 Astro? \u0420\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043e\u0431 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u0435\u0433\u043e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0445 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0430\u0445, \u043f\u043e\u0434\u0445\u043e\u0434\u0430\u0445 \u0438 \u0444\u0438\u0448\u043a\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0442\u044c \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p>\u041f\u043e\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u0432 \u0442\u0435\u043c\u0443 \u0431\u0443\u0434\u0435\u043c \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0441\u0431\u043e\u0440\u043a\u0438 \u0431\u043b\u043e\u0433\u0430 \u043f\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435. \u041a\u0441\u0442\u0430\u0442\u0438, \u0432\u0435\u0441\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u0430 \u043e\u0442 \u0438\u043c\u0435\u043d\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0434\u043b\u044f \u043d\u0430\u0441 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 ChatGPT.<\/p>\n<p>\u0414\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0438\u0434\u0435\u043e\u043a\u043e\u043d\u0442\u0435\u043d\u0442: \u0442\u043e\u0442 \u0436\u0435 \u0441\u0430\u043c\u044b\u0439 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043f\u043e Astro \u043c\u044b \u0441\u043e\u0431\u0440\u0430\u043b\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 <a href=\"https:\/\/www.youtube.com\/playlist?list=PLSh5XwEmbT9CvasTytCbr3VSiryci04Xg\" rel=\"noopener noreferrer nofollow\">\u043f\u043b\u0435\u0439\u043b\u0438\u0441\u0442<\/a> \u043d\u0430 Youtube.<\/p>\n<h2>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u0442\u0435\u043e\u0440\u0438\u0438<\/h2>\n<h3>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Astro?<\/h3>\n<p>Astro \u2014 \u044d\u0442\u043e \u0432\u0435\u0431-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0441\u0430\u0439\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0431\u0435\u0437 JavaScript. \u0421 Astro \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443: React, Vue, Angular \u0438 \u0434\u0440\u0443\u0433\u0438\u0435.<\/p>\n<p>\u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a: \u043c\u044b \u0433\u0440\u0443\u0437\u0438\u043c \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 JS-\u0444\u0430\u0439\u043b, \u043e\u043d \u043f\u0430\u0440\u0441\u0438\u0442\u0441\u044f \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u043e\u043c \u0443\u0436\u0435 \u0432\u0441\u0451 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442. \u0414\u0430, \u0435\u0441\u0442\u044c \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u0447\u0430\u043d\u043a\u0438, \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 JavaScript \u2014 \u043d\u043e \u0441\u0430\u043c\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043d\u0438\u043a\u0443\u0434\u0430 \u043d\u0435 \u0434\u0435\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>Astro \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043d\u0430\u043c \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434: \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0447\u0438\u0441\u0442\u044b\u0435 HTML \u0438 CSS, \u0430 \u0432\u0441\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u043c\u0435\u0447\u0430\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e. \u042d\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u00ab\u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043e\u0439 \u043e\u0441\u0442\u0440\u043e\u0432\u043e\u0432\u00bb, \u0433\u0434\u0435 \u0432\u043e\u0434\u0430 \u2014 HTML \u0438 CSS, \u0430 \u043e\u0441\u0442\u0440\u043e\u0432\u043a\u0438 \u2014 JS.<\/p>\n<h3>\u041f\u043e\u0447\u0435\u043c\u0443 Astro?<\/h3>\n<p>Astro \u043b\u044e\u0431\u044f\u0442 \u043f\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c:<\/p>\n<ol>\n<li>\n<p><strong>\u0423\u0434\u043e\u0431\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/strong>. \u041f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u043a\u0440\u0443\u0442\u0438\u0442\u0441\u044f Vite, \u0432\u0441\u0451 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0431\u044b\u0441\u0442\u0440\u043e, \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043c\u0435\u043d\u044f\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433 \u2014 \u0438 \u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c build.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>\n<p><strong>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438<\/strong>. \u041c\u0430\u043b\u043e \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0432 Astro \u043c\u043e\u0436\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u0442\u0430\u043a \u0438\u0445 \u0435\u0449\u0451 \u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"3\">\n<li>\n<p><strong>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u0432\u0435\u0431-\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432<\/strong>. \u041e\u043d\u043e \u0434\u0430\u0451\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e, \u043a\u043e\u0433\u0434\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0448\u044c \u0441 \u0447\u0438\u0441\u0442\u044b\u043c\u0438 HTML \u0438 CSS.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"4\">\n<li>\n<p><strong>\u0410\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430<\/strong>. HTML + CSS + CDN \u2014 \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430. \u0412\u044b \u0441\u0442\u0440\u043e\u0438\u0442\u0435 \u043f\u0440\u043e\u0434\u0443\u043a\u0442, \u0437\u0430\u043b\u0438\u0432\u0430\u0435\u0442\u0435 \u2014 \u0438 \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0431\u0435\u0437 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"5\">\n<li>\n<p><strong>\u041f\u0440\u043e\u0441\u0442\u043e\u0442\u0430<\/strong>. \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 React, \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0434\u043b\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e Facebook, Astro \u0438\u0434\u0435\u0430\u043b\u0435\u043d \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0441\u0430\u0439\u0442\u043e\u0432 \u0431\u0435\u0437 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/p>\n<\/li>\n<\/ol>\n<p>\u041c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e Astro \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0432\u0435\u0431 \u0441 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430\u043c\u0438. \u0421\u0430\u043c\u0430 \u043f\u043e \u0441\u0435\u0431\u0435 \u0437\u0430\u0434\u0443\u043c\u043a\u0430 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f \u2014 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043e\u043d\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435.<\/p>\n<h2>\u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430: \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442<\/h2>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h3>\n<p>\u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u2014 \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u0441 \u043f\u0443\u0441\u0442\u044b\u043c Astro-\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c. \u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0435 Astro \u0432 \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437, \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u043f\u0430\u043a\u0435\u0442\u0430 create-astro. \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c TypeScript.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u0445 TypeScript \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c strict (\u043f\u0440\u043e \u043e\u0442\u043b\u0438\u0447\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/github.com\/withastro\/astro\/tree\/main\/packages\/astro\/tsconfigs\" rel=\"noopener noreferrer nofollow\">\u0442\u0443\u0442<\/a>) \u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c WebStorm. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043e\u043d \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 Astro, \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0435\u0441\u044c \u0434\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438. \u0412 <a href=\"https:\/\/docs.astro.build\/en\/editor-setup\/\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a> \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438 \u043f\u043e VS Code \u0438 \u0434\u0440\u0443\u0433\u0438\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c.<\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u043f\u043e\u043c\u0438\u043c\u043e \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u043e\u0447\u0435\u0433\u043e, \u0432\u0438\u0434\u0438\u043c \u043d\u0435\u043a\u0438\u0439 \u0444\u0430\u0439\u043b env.d.ts. \u042d\u0442\u043e \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u0444\u0430\u0439\u043b TypeScript \u0441 \u0442\u0438\u043f\u0430\u043c\u0438. \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0443 \u043d\u0430\u0441 \u043a\u0440\u0443\u0442\u0438\u0442\u0441\u044f Vite, \u0430 \u0435\u0433\u043e \u0442\u0438\u043f\u044b \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0434\u043b\u044f API Node.js. \u0427\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u043a\u0430\u043a \u0440\u0430\u0437 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 env.d.ts \u2014 \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 Astro \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b \u0441\u0430\u043c.<\/p>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 package.json \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u0431\u043e\u0440\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/p>\n<p><code>npm run start<\/code><\/p>\n<p>\u041f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 localhost:3000 \u0432\u0438\u0434\u0438\u043c \u043d\u0430\u0448 \u0441\u0430\u0439\u0442.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u0437 \u0444\u0430\u0439\u043b\u043e\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u043a\u043e\u043d\u0444\u0438\u0433. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 .gitignore .idea\/.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0432\u0441\u0451 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f. \u0422\u043e \u0435\u0441\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0444\u0430\u0439\u043b\u043e\u0432. \u042d\u0442\u043e \u043c\u0435\u043b\u043e\u0447\u044c \u2014 \u043d\u043e \u0441\u0443\u043f\u0435\u0440\u043f\u0440\u0438\u044f\u0442\u043d\u0430\u044f, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430 \u0434\u043b\u0438\u043d\u043d\u043e\u0439 \u0434\u0438\u0441\u0442\u0430\u043d\u0446\u0438\u0438.<\/p>\n<p>\u041d\u0430\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u043a \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c prettier, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0451 \u0431\u044b\u043b\u043e \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u043e \u043a\u0440\u0430\u0441\u0438\u0432\u043e:<\/p>\n<p><code>npm install -DE prettier<\/code><\/p>\n<p><code>echo {}> .prettierrc.json<\/code><\/p>\n<p><code>touch .prettierignore<\/code><\/p>\n<p><code># build output<\/code><\/p>\n<p><code>dist\/<\/code><\/p>\n<p><code># generated types<\/code><\/p>\n<p><code>.astro\/<\/code><\/p>\n<p><code>npx prettier --write .<\/code><\/p>\n<p>\u0418 \u0432\u0441\u0451, \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0433\u043e\u0442\u043e\u0432 \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u2014 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a \u043e\u0441\u0432\u043e\u0435\u043d\u0438\u044e Astro.<\/p>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0438 \u0440\u043e\u0443\u0442\u0438\u043d\u0433<\/h3>\n<p>\u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c\u00a0 \u043d\u0430\u0443\u0447\u0438\u043c\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438.\u00a0<\/p>\n<p>\u0417\u0430\u0445\u043e\u0434\u0438\u043c \u0432 SRC \u0438 \u0432\u0438\u0434\u0438\u043c \u043f\u0430\u043f\u043a\u0443 pages \u2014 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043e\u043d\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u043e\u0443\u0442\u0435\u0440\u0430.<\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u043b\u0435\u0436\u0438\u0442 \u0444\u0430\u0439\u043b index.astro. \u041f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0432 \u043d\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0434\u043b\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u2014 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 ChatGPT (\u0441\u043c. scratches\/base-index.html \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438).<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043f\u0430\u043f\u043a\u0435 pages Astro-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 blog.astro \u2014 \u044d\u0442\u043e \u0431\u0443\u0434\u0443\u0449\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u0431\u043b\u043e\u0433\u0430. \u0421 \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c\u0438 \u0447\u0451\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c\u0441\u044f \u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435, \u0430 \u043f\u043e\u043a\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u043e\u0441\u043b\u0435 \u043d\u0438\u0445 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a:<\/p>\n<p><code>&lt;h1>Blog&lt;h1><\/code><\/p>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043c\u043e\u0436\u043d\u043e \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 localhost:3000\/blog. \u041f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e \u0440\u043e\u0443\u0442\u0435\u0440 \u0447\u0443\u0432\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u0435\u043d \u043a \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0443!<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0447\u0442\u043e \u043f\u043e \u0441\u0443\u0442\u0438 \u043c\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 \u043d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0439 HTML \u0441 \u043e\u0434\u043d\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u00ab\u0433\u043e\u043b\u044b\u043c\u00bb \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u043c &lt;h1> \u2014 \u043d\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0432\u0438\u0434\u0438\u043c \u0430\u0441\u0442\u0440\u043e\u0432\u0441\u043a\u0438\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b &lt;head> \u0438 &lt;body>. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u0442\u043e\u043c, \u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/web.dev\/howbrowserswork\/\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e Astro-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c MD \u0438 MDX (\u0442\u043e\u0442 \u0436\u0435 \u043c\u0430\u0440\u043a\u0434\u0430\u0443\u043d, \u043d\u043e \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b), HTML \u0438 TypeScript\/JavaScript-\u0444\u0430\u0439\u043b\u044b.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043f\u0430\u043f\u043a\u0435 pages \u0442\u0440\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u0430:<\/p>\n<ol>\n<li>\n<p><strong>about.md<\/strong>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0442\u043e\u0442 \u0436\u0435 \u0442\u0435\u043a\u0441\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u044c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0430 \u0434\u043b\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (\u0441\u043c. base-about.md).<\/p>\n<\/li>\n<li>\n<p><strong>account.html<\/strong> \u0441 \u043b\u044e\u0431\u044b\u043c \u0440\u0430\u043d\u0434\u043e\u043c\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c (\u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435).<\/p>\n<\/li>\n<li>\n<p><strong>posts.ts<\/strong> \u0441 \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442\u043e\u043c \u0434\u043b\u044f API:<\/p>\n<\/li>\n<\/ol>\n<p><code>export async function get() {<\/code><\/p>\n<p><code>\u00a0\u00a0return {<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0body: JSON.stringify([{ id: 1, title: \"abc\" }]),<\/code><\/p>\n<p><code>\u00a0\u00a0};<\/code><\/p>\n<p><code>}<\/code><\/p>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043e\u0442\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445:<\/p>\n<ol>\n<li>\n<p>\u041f\u043e \u0430\u0434\u0440\u0435\u0441\u0443<strong> localhost:3000\/about <\/strong>\u0432\u0438\u0434\u0438\u043c \u043c\u0430\u0440\u043a\u0434\u0430\u0443\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 Astro \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u043b: \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u0438\u043b \u0442\u0435\u0433\u0438, \u043f\u0440\u043e\u0441\u0442\u0430\u0432\u0438\u043b id \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>\n<p>\u041f\u043e \u0430\u0434\u0440\u0435\u0441\u0443<strong> localhost:3000\/account<\/strong> \u043b\u0435\u0436\u0438\u0442 \u0442\u043e\u0442 HTML-\u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0442\u0443\u0434\u0430 \u043f\u043e\u043b\u043e\u0436\u0438\u043b\u0438.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"3\">\n<li>\n<p>\u041f\u043e \u0430\u0434\u0440\u0435\u0441\u0443<strong> localhost:3000<\/strong>\/<strong>posts<\/strong> \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c JSON-\u043e\u0442\u0432\u0435\u0442.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0432\u0435\u0441\u044c \u0440\u043e\u0443\u0442\u0438\u043d\u0433 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043b\u0441\u044f \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0430. \u0421\u043e\u0431\u0435\u0440\u0451\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0432 \u0438\u0442\u043e\u0433\u0435:\u00a0<\/p>\n<p><code>npm run build<\/code><\/p>\n<p>\u041f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f dist \u2014 \u0432 \u043d\u0435\u0439 \u043b\u0435\u0436\u0430\u0442 \u043d\u0430\u0448\u0438 \u0444\u0430\u0439\u043b\u044b: \u043a\u0430\u0436\u0434\u044b\u0439 \u0432 \u0441\u0432\u043e\u0435\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u043f\u0430\u043f\u043a\u0435. \u0412\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043f\u043e \u0444\u0430\u043a\u0442\u0443 \u0432\u0441\u0435 \u043e\u043d\u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043e\u0442\u0432\u0435\u0442 \u043e\u0442 API.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432<\/h3>\n<p>\u041d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u0435\u0449\u0451 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0432\u044b \u043f\u043e\u0434\u0443\u043c\u0430\u043b\u0438, \u0447\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u0415\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, Astro \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f.<\/p>\n<p>\u0414\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043f\u0430\u043f\u043a\u0443 layouts. \u041e\u043d\u0430 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439, \u043e\u0434\u043d\u0430\u043a\u043e \u043f\u043e <a href=\"https:\/\/docs.astro.build\/en\/core-concepts\/project-structure\/\" rel=\"noopener noreferrer nofollow\">\u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044e<\/a> Astro \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0435\u0451 \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a, \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u2014 \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0435\u043a\u0442 \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u0441\u044f \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u043c \u0434\u043b\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432.<\/p>\n<p>\u0412 \u043f\u0430\u043f\u043a\u0435 layouts \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0444\u0430\u0439\u043b Layout.astro, \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u0442\u0443\u0434\u0430 \u043a\u043e\u0434 \u0438\u0437 index.astro \u0438 \u043e\u0447\u0438\u0449\u0430\u0435\u043c \u0435\u0433\u043e \u043e\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430:<\/p>\n<p><code>&lt;html lang=\"ru\"><\/code><\/p>\n<p><code>&lt;head><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0&lt;meta charset=\"utf-8\" \/><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0&lt;link rel=\"icon\" type=\"image\/svg+xml\" href=\"\/favicon.svg\" \/><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0&lt;meta name=\"viewport\" content=\"width=device-width\" \/><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0&lt;meta name=\"generator\" content={Astro.generator} \/><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0&lt;title>\u0421\u0430\u0439\u0442 ChatGPT \u2014 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440\u0430 \u0441\u043e \u0441\u0442\u0430\u0436\u0435\u043c&lt;\/title><\/code><\/p>\n<p><code>&lt;\/head><\/code><\/p>\n<p><code>&lt;body><\/code><\/p>\n<p><code>&lt;slot \/><\/code><\/p>\n<p><code>&lt;\/body><\/code><\/p>\n<p><code>&lt;\/html><\/code><\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 &lt;slot \/>. \u041f\u043e \u0441\u0443\u0442\u0438 \u0441\u0432\u043e\u0435\u0439 \u044d\u0442\u043e \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u0438 children \u0432 React \u2014 \u043e\u043d \u043d\u0443\u0436\u0435\u043d, \u0447\u0442\u043e\u0431\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u043e\u0441\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435. \u041f\u0440\u0430\u0432\u0434\u0430, \u043e\u0442 children \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u043b\u0438\u0447\u0438\u0439: \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 slot \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u0440\u0430\u0437\u0443 \u0431\u0435\u0437 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e.<\/p>\n<p>\u0428\u0430\u0431\u043b\u043e\u043d \u0433\u043e\u0442\u043e\u0432 \u2014 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u0444\u0430\u0439\u043b\u044b. \u0422\u0430\u043a \u0447\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u0432 index.astro, \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c Layout (\u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u0445 \u0441\u0430\u043c\u044b\u0445 \u0437\u0430\u0433\u0430\u0434\u043e\u0447\u043d\u044b\u0445 \u0447\u0451\u0440\u0442\u043e\u0447\u0435\u043a) \u0438 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0432 \u043d\u0435\u0433\u043e\u00a0 \u0432\u0435\u0441\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442:<\/p>\n<p><code>---<\/code><\/p>\n<p><code>import Layout from '..\/layouts\/Layout.astro';<\/code><\/p>\n<p><code>---<\/code><\/p>\n<p><code>&lt;Layout><\/code><\/p>\n<p><code>&lt;h1>Hello, Astro&lt;\/h1><\/code><\/p>\n<p><code>&lt;\/Layout><\/code><\/p>\n<p>\u041f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d \u0432 blog.astro \u0438 \u0447\u0443\u0442\u044c \u0438\u043d\u0430\u0447\u0435 \u0432 <a href=\"http:\/\/about.md\" rel=\"noopener noreferrer nofollow\">about.md<\/a>:<\/p>\n<p><code>---<\/code><\/p>\n<p><code>layout: ..\/layouts\/Layout.astro<\/code><\/p>\n<p><code>---<\/code><\/p>\n<p><code># About<\/code><\/p>\n<p><code>Text<\/code><\/p>\n<p>\u0410 \u0432\u043e\u0442 \u043a HTML-\u0444\u0430\u0439\u043b\u0443 \u0432 Astro \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0435\u043b\u044c\u0437\u044f, \u0442\u0430\u043a \u0447\u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f. \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043e\u0431 \u044d\u0442\u043e\u043c \u0437\u043d\u0430\u0435\u043c, \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 account.html \u043c\u043e\u0436\u043d\u043e \u0441\u043c\u0435\u043b\u043e \u0443\u0434\u0430\u043b\u044f\u0442\u044c.<\/p>\n<p>\u041d\u0438\u0436\u0435 \u043c\u044b \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0444\u0430\u0439\u043b\u043e\u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 .astro \u0438 .md.<\/p>\n<h3>\u0424\u0430\u0439\u043b\u044b \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 .astro \u0438 .md<\/h3>\n<p><strong>\u0427\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u0444\u043e\u0440\u043c\u0430\u0442 .astro?<\/strong><\/p>\n<p>\u041a \u0444\u0430\u0439\u043b\u0430\u043c \u044d\u0442\u043e\u0433\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u044c\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u043a\u0430\u043a \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c, \u0430 \u043d\u0435 \u043a\u0430\u043a \u043a \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0443. \u0415\u0441\u043b\u0438 \u0432\u044b \u043a\u043e\u0433\u0434\u0430-\u043d\u0438\u0431\u0443\u0434\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0441 PHP, Astro \u043e\u0447\u0435\u043d\u044c \u043d\u0430 \u043d\u0435\u0433\u043e \u043f\u043e\u0445\u043e\u0436: \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438 \u043e\u0442\u0434\u0430\u0451\u043c \u0435\u0451 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442. \u0420\u0430\u0437\u0432\u0435 \u0447\u0442\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0442\u0443\u0442 \u0431\u043e\u043b\u0435\u0435 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439, JS-\u043e\u0432\u0441\u043a\u0438\u0439.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c npm run start, \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043a\u0440\u0443\u0442\u0438\u0442\u044c\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440. \u041e\u043d \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 Astro-\u0444\u0430\u0439\u043b\u044b \u0438 \u0432 \u0438\u0442\u043e\u0433\u0435 \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 npm run build \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0438\u0445 \u0432 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 HTML.<\/p>\n<p><strong>\u0427\u0442\u043e \u0437\u0430 \u0447\u0451\u0440\u0442\u043e\u0447\u043a\u0438\/\u0434\u0435\u0444\u0438\u0441\u044b \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e Astro-\u0444\u0430\u0439\u043b\u0430?<\/strong><\/p>\n<p>\u041f\u043e-\u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438 \u044d\u0442\u0430 \u0448\u0442\u0443\u043a\u0430 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f code fence \u2014 \u0434\u043e\u0441\u043b\u043e\u0432\u043d\u043e \u00ab\u0437\u0430\u0431\u043e\u0440 \u0438\u0437 \u043a\u043e\u0434\u0430\u00bb. \u0412\u0441\u0451, \u0447\u0442\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0435\u0451 \u0433\u0440\u0430\u043d\u0438\u0446\u0430\u0445, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f <u>\u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435<\/u> \u0438 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u043f\u0440\u043e\u043d\u0438\u043a\u0430\u0435\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 code fence \u043c\u043e\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0430\u0440\u043e\u043b\u0438 \u043e\u0442 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432, \u0442\u043e\u043a\u0435\u043d\u044b \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043d\u0435\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0435 \u0432\u0435\u0449\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u043b\u044c\u0437\u044f \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434.<\/p>\n<p>\u041e\u0431\u044b\u0447\u043d\u043e \u00ab\u0437\u0430 \u0437\u0430\u0431\u043e\u0440\u043e\u043c\u00bb \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u044e\u0442:<\/p>\n<ul>\n<li>\n<p>\u0438\u043c\u043f\u043e\u0440\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Astro,<\/p>\n<\/li>\n<li>\n<p>\u0438\u043c\u043f\u043e\u0440\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, React,<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u043e\u043f\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432,<\/p>\n<\/li>\n<li>\n<p>\u0438\u043c\u043f\u043e\u0440\u0442 \u0434\u0430\u043d\u043d\u044b\u0445, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, JSON-\u0444\u0430\u0439\u043b\u043e\u0432 \u0438\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439,<\/p>\n<\/li>\n<li>\n<p>\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0438\u0437 API \u0438\u043b\u0438 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445,<\/p>\n<\/li>\n<li>\n<p>\u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432\u043d\u0443\u0442\u0440\u0438 code fence \u0432 index.astro:<\/p>\n<p><code>---<\/code><\/p>\n<p><code>import Layout from '..\/layouts\/Layout.astro';<\/code><\/p>\n<p><code>const title = 'Hello, Astro';<\/code><\/p>\n<p><code>const list = ['a', 'b', 'c'];<\/code><\/p>\n<p><code>---<\/code><\/p>\n<p><code>&lt;Layout><\/code><\/p>\n<p><code>&lt;h1>{title}&lt;\/h1><\/code><\/p>\n<p><code>{list.map(item => &lt;p>{item}&lt;\/p>)}<\/code><\/p>\n<p><code>&lt;\/Layout><\/code><\/p>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a \u2014 \u0442\u0430\u043c \u0436\u0435 \u043f\u0440\u043e\u043a\u0438\u043d\u0443\u0442\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n<p><code>&lt;Layout title=\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f\"><\/code><\/p>\n<p><code>...<\/code><\/p>\n<p><code>&lt;\/Layout><\/code><\/p>\n<p>\u0418 \u0432\u044b\u0442\u0430\u0449\u0438\u0442\u044c \u043f\u0440\u043e\u043f \u0432 code fence \u0448\u0430\u0431\u043b\u043e\u043d\u0430 Layout.astro:<\/p>\n<p><code>---<\/code><\/p>\n<p><code>const { title = 'Astro' } = Astro.props;<\/code><\/p>\n<p><code>---<\/code><\/p>\n<p><code>...<\/code><\/p>\n<p><code>&lt;title>{title}&lt;\/title><\/code><\/p>\n<p><code>...<\/code><\/p>\n<p><strong>\u0427\u0442\u043e \u043d\u0430\u0441\u0447\u0451\u0442 \u043c\u0430\u0440\u043a\u0434\u0430\u0443\u043d-\u0444\u0430\u0439\u043b\u043e\u0432?<\/strong><\/p>\n<p>\u0412 \u043c\u0430\u0440\u043a\u0434\u0430\u0443\u043d-\u0444\u0430\u0439\u043b \u043d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u043e\u043a\u0438\u043d\u0443\u0442\u044c \u043f\u0440\u043e\u043f\u044b \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0432 .astro \u2014 \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0432 \u0434\u0440\u0443\u0433\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c API. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c title \u0432 <a href=\"http:\/\/about.md\" rel=\"noopener noreferrer nofollow\">about.md<\/a>:<\/p>\n<p><code>---<\/code><\/p>\n<p><code>layout: ..\/layouts\/Layout.astro<\/code><\/p>\n<p><code>title: \u041e\u0431\u043e \u043c\u043d\u0435<\/code><\/p>\n<p><code>---<\/code><\/p>\n<p>\u0410 \u0437\u0430\u0442\u0435\u043c \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c Layout.astro, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u043f\u0440\u043e\u043f\u044b, \u0438 \u043c\u0430\u0440\u043a\u0434\u0430\u0443\u043d-\u043f\u0440\u043e\u043f\u044b (frontmatter):<\/p>\n<p><code>---<\/code><\/p>\n<p><code>const { title = 'Astro', frontmatter = {} } = Astro.props;<\/code><\/p>\n<p><code>const pageTitle = frontmatter.title || title;<\/code><\/p>\n<p><code>---<\/code><\/p>\n<p>\u0414\u0440\u0443\u0433\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u2014\u00a0 \u0441\u043e\u0437\u0434\u0430\u0442\u044c\u00a0 \u0434\u043b\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d MdLayout.astro, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439:<\/p>\n<p><code>---<\/code><\/p>\n<p><code>import Layout from '.\/Layout.astro';<\/code><\/p>\n<p><code>const { frontmatter } = Astro.props;<\/code><\/p>\n<p><code>---<\/code><\/p>\n<p><code>&lt;Layout title={frontmatter.title}><\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0\u00a0&lt;slot \/><\/code><\/p>\n<p><code>&lt;\/Layout><\/code><\/p>\n<h3>\u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430<\/h3>\n<p>\u041c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c \u0441\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u043c\u0438, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u2014<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-349894","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/349894","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=349894"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/349894\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=349894"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=349894"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=349894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}