{"id":1694,"date":"2021-05-20T10:54:36","date_gmt":"2021-05-20T10:54:36","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=1694"},"modified":"2021-05-20T10:54:36","modified_gmt":"2021-05-20T10:54:36","slug":"%d0%b4%d0%b5%d1%82%d0%b0%d0%bb%d1%8c%d0%bd%d0%be-%d0%bf%d1%80%d0%be-gatsby-js","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=1694","title":{"rendered":"\u0414\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e Gatsby.js"},"content":{"rendered":"\n<p>\u042f\u043a&nbsp;\u0432\u0456\u0434\u043e\u043c\u043e, \u043d\u0430&nbsp;\u043e\u0434\u043d\u0438\u0445 \u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u0430\u0445 \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435&nbsp;\u0437\u0430\u0457\u0434\u0435\u0448, \u0442\u043e\u043c\u0443 \u0434\u043e\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043b\u0456\u0437\u0442\u0438 \u0432\u0433\u043b\u0438\u0431 \u0431\u0443\u0434\u044c-\u044f\u043a\u043e\u0457 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0456\u0457, \u0449\u043e\u0431 \u043d\u0430\u0432\u0447\u0438\u0442\u0438\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u0438 \u0449\u043e\u0441\u044c \u0432\u0430\u0440\u0442\u0456\u0441\u043d\u0435. \u0423&nbsp;\u0446\u0456\u0439 \u0441\u0442\u0430\u0442\u0442\u0456 \u0440\u043e\u0437\u0433\u043b\u044f\u043d\u0435\u043c\u043e \u0434\u0435\u0442\u0430\u043b\u0456 Gatsby.js, \u0437\u043d\u0430\u043d\u043d\u044f \u044f\u043a\u0438\u0445 \u0434\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u0432\u0430\u043c \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 \u0456&nbsp;\u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0432\u0430\u0442\u0438 \u0441\u043a\u043b\u0430\u0434\u043d\u0456 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0438 \u0456&nbsp;\u0431\u043b\u043e\u0433\u0438.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>\u0422\u0435\u043c\u0438, \u0440\u043e\u0437\u0433\u043b\u044f\u043d\u0443\u0442\u0456 \u043d\u0438\u0436\u0447\u0435:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/dou.ua\/lenta\/articles\/gatsbyjs-guide\/#one\">\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u043e\u043a \u0456&nbsp;\u0440\u043e\u0443\u0442\u0438\u043d\u0433<\/a><\/li><li><a href=\"https:\/\/dou.ua\/lenta\/articles\/gatsbyjs-guide\/#two\">\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438, \u0448\u0430\u0431\u043b\u043e\u043d\u0438 \u0442\u0430&nbsp;\u0457\u0445&nbsp;\u0432\u0437\u0430\u0454\u043c\u043e\u0434\u0456\u044f<\/a><\/li><li><a href=\"https:\/\/dou.ua\/lenta\/articles\/gatsbyjs-guide\/#three\">\u0420\u043e\u0431\u043e\u0442\u0430 \u0437&nbsp;\u0434\u0430\u043d\u0438\u043c\u0438<\/a><\/li><li><a href=\"https:\/\/dou.ua\/lenta\/articles\/gatsbyjs-guide\/#four\">\u041f\u043b\u0430\u0433\u0456\u043d\u0438<\/a><\/li><li><a href=\"https:\/\/dou.ua\/lenta\/articles\/gatsbyjs-guide\/#five\">\u0421\u0442\u0438\u043b\u0456\u0437\u0430\u0446\u0456\u044f \u0441\u0430\u0439\u0442\u0443<\/a><\/li><li><a href=\"https:\/\/dou.ua\/lenta\/articles\/gatsbyjs-guide\/#six\">SEO-\u043e\u043f\u0442\u0438\u043c\u0456\u0437\u0430\u0446\u0456\u044f \u0437&nbsp;\u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f\u043c react-helmet<\/a><\/li><li><a href=\"https:\/\/dou.ua\/lenta\/articles\/gatsbyjs-guide\/#seven\">\u041d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f PWA<\/a><\/li><\/ul>\n\n\n\n<h2>\u041f\u0456\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430<\/h2>\n\n\n\n<p>\u0412\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044f Gatsby \u043d\u0430&nbsp;\u041f\u041a\u041a\u043b\u043e\u043d\u0443\u0432\u0430\u043d\u043d\u044f \u043c\u0456\u043d\u0456\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0443\u0406\u043d\u0456\u0446\u0456\u0430\u043b\u0456\u0437\u0430\u0446\u0456\u044f \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0456\u044e\u041f\u0435\u0440\u0435\u0432\u0456\u0440\u043a\u0430 \u0441\u043f\u0440\u0430\u0432\u043d\u043e\u0441\u0442\u0456<\/p>\n\n\n\n<h2 id=\"one\">\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u043e\u043a \u0456&nbsp;\u0440\u043e\u0443\u0442\u0438\u043d\u0433<\/h2>\n\n\n\n<p>\u0429\u043e\u0431 \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u0438 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443 \u0432&nbsp;Gatsby, \u0434\u043e\u0441\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043c\u0456\u0441\u0442\u0438\u0442\u0438 \u043d\u043e\u0432\u0438\u0439 \u0444\u0430\u0439\u043b \u0432&nbsp;\u043f\u0430\u043f\u043a\u0443&nbsp;<em>\/src\/pages<\/em>, \u0442\u0430&nbsp;\u0439\u043e\u0433\u043e \u0431\u0443\u0434\u0435 \u0441\u043a\u043e\u043c\u043f\u0456\u043b\u044c\u043e\u0432\u0430\u043d\u043e \u0432&nbsp;\u043e\u043a\u0440\u0435\u043c\u0443 HTML-\u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443.&nbsp;<strong>\u0412\u0430\u0436\u043b\u0438\u0432\u043e \u0437\u0430\u0443\u0432\u0430\u0436\u0438\u0442\u0438, \u0449\u043e&nbsp;URL \u0434\u043e&nbsp;\u0446\u0456\u0454\u0457 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438 \u0431\u0443\u0434\u0435 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u0430\u0442\u0438 \u0444\u0430\u043a\u0442\u0438\u0447\u043d\u043e\u043c\u0443 \u0448\u043b\u044f\u0445\u0443 \u0437&nbsp;\u043d\u0430\u0437\u0432\u043e\u044e.<\/strong>&nbsp;\u041d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u0434\u043e\u0434\u0430\u043c\u043e \u0449\u0435&nbsp;\u043a\u0456\u043b\u044c\u043a\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u043e\u043a:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">src\n\u2514\u2500\u2500 pages\n    \u251c\u2500\u2500 about.js\n    \u251c\u2500\u2500 index.js\n    \u2514\u2500\u2500 tutorial\n        \u251c\u2500\u2500 part-four.js\n        \u251c\u2500\u2500 part-one.js\n        \u251c\u2500\u2500 part-three.js\n        \u251c\u2500\u2500 part-two.js\n        \u2514\u2500\u2500 part-zero.js<\/pre>\n\n\n\n<p>\u041a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u043e\u043a\u0438 \u043d\u0435&nbsp;\u0432\u0430\u0436\u043b\u0438\u0432\u0438\u0439, \u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u0430 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0431\u0443\u0434\u044c-\u044f\u043a\u0438\u0439 \u0442\u0435\u043a\u0441\u0442 \u0437\u0430\u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0449\u043e\u0431 \u0440\u043e\u0437\u0440\u0456\u0437\u043d\u044f\u0442\u0438 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import React from \"react\";\n\nexport default () =&gt; &lt;div&gt;Welcome to tutorial\/part-one&lt;\/div&gt;;<\/pre>\n\n\n\n<p>\u041f\u0435\u0440\u0435\u0432\u0456\u0440\u044f\u0454\u043c\u043e \u0432&nbsp;\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0456:<\/p>\n\n\n\n<ul><li><a href=\"http:\/\/localhost:8000\/tutorial\/part-one\" target=\"_blank\" rel=\"noreferrer noopener\">localhost:8000\/tutorial\/part-one<\/a><\/li><li><a href=\"http:\/\/localhost:8000\/about\" target=\"_blank\" rel=\"noreferrer noopener\">localhost:8000\/about<\/a><\/li><\/ul>\n\n\n\n<p>\u041e\u0441\u044c \u0442\u0430\u043a\u0438\u043c \u0447\u0438\u043d\u043e\u043c \u043c\u043e\u0436\u043d\u0430, \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443\u044e\u0447\u0438 \u0444\u0430\u0439\u043b\u0438, \u0432\u043e\u0434\u043d\u043e\u0447\u0430\u0441 \u0432\u0438\u0440\u0456\u0448\u0443\u0432\u0430\u0442\u0438 \u043f\u0438\u0442\u0430\u043d\u043d\u044f \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0443.<\/p>\n\n\n\n<p><em>\u0422\u0430\u043a\u043e\u0436 \u0456\u0441\u043d\u0443\u0454 \u0441\u043f\u0435\u0446\u0456\u0430\u043b\u044c\u043d\u0438\u0439&nbsp;<strong>createPage API<\/strong>, \u0437\u0430&nbsp;\u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u044f\u043a\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u0430 \u0431\u0456\u043b\u044c\u0448 \u0433\u043d\u0443\u0447\u043a\u043e \u043a\u0435\u0440\u0443\u0432\u0430\u0442\u0438 \u0448\u043b\u044f\u0445\u0430\u043c\u0438 \u0456&nbsp;\u043d\u0430\u0437\u0432\u0430\u043c\u0438 \u0441\u0442\u043e\u0440\u0456\u043d\u043e\u043a, \u0430\u043b\u0435 \u0434\u043b\u044f \u0440\u043e\u0431\u043e\u0442\u0438 \u0437&nbsp;\u043d\u0438\u043c \u043d\u0430\u043c \u0437\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0440\u043e\u0437\u0443\u043c\u0456\u043d\u043d\u044f \u0440\u043e\u0431\u043e\u0442\u0438 \u0434\u0430\u043d\u0438\u0445 \u0432&nbsp;Gatsby, \u0442\u043e\u043c\u0443 \u0440\u043e\u0437\u0433\u043b\u044f\u043d\u0435\u043c\u043e \u0439\u043e\u0433\u043e \u0442\u0440\u043e\u0445\u0438 \u0434\u0430\u043b\u0456 \u0432&nbsp;\u0441\u0442\u0430\u0442\u0442\u0456.<\/em><\/p>\n\n\n\n<p>\u0417\u0432\u2019\u044f\u0436\u0435\u043c\u043e \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u0456 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438 \u0437\u0430&nbsp;\u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u044c \u2015 \u0434\u043b\u044f \u0446\u044c\u043e\u0433\u043e \u0441\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0454\u043c\u043e\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c&nbsp;<code>&lt;Link \/&gt;<\/code>&nbsp;\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 Gatsby, \u044f\u043a\u0438\u0439 \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u0438\u0439 \u0441\u043f\u0435\u0446\u0456\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u0432\u043d\u0443\u0442\u0440\u0456\u0448\u043d\u044c\u043e\u0457 \u043d\u0430\u0432\u0456\u0433\u0430\u0446\u0456\u0457. \u0414\u043b\u044f \u0432\u0441\u0456\u0445 \u0437\u043e\u0432\u043d\u0456\u0448\u043d\u0456\u0445 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u044c \u0441\u043b\u0456\u0434 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0437\u0432\u0438\u0447\u0430\u0439\u043d\u0438\u0439&nbsp;<code>&lt;a&gt;<\/code>&nbsp;\u0442\u0435\u0433.<\/p>\n\n\n\n<p><em>\/src\/pages\/index.js<\/em><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import React from \"react\";\nimport { Link } from \"gatsby\";\n\nexport default () =&gt; (\n  &lt;div&gt;\n    &lt;ul&gt;\n      &lt;li&gt;\n        &lt;Link to=\"\/about\"&gt;about&lt;\/Link&gt;\n      &lt;\/li&gt;\n      &lt;li&gt;\n        &lt;Link to=\"\/tutorial\/part-zero\"&gt;Part #0&lt;\/Link&gt;\n      &lt;\/li&gt;\n      &lt;li&gt;\n        &lt;Link to=\"\/tutorial\/part-one\"&gt;Part #1&lt;\/Link&gt;\n      &lt;\/li&gt;\n      &lt;li&gt;\n        &lt;Link to=\"\/tutorial\/part-two\"&gt;Part #2&lt;\/Link&gt;\n      &lt;\/li&gt;\n      &lt;li&gt;\n        &lt;Link to=\"\/tutorial\/part-three\"&gt;Part #3&lt;\/Link&gt;\n      &lt;\/li&gt;\n      &lt;li&gt;\n        &lt;Link to=\"\/tutorial\/part-four\"&gt;Part #4&lt;\/Link&gt;\n      &lt;\/li&gt;\n    &lt;\/ul&gt;\n  &lt;\/div&gt;\n);<\/pre>\n\n\n\n<p><em><code>&lt;Link&gt;<\/code>&nbsp;\u043f\u0456\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u043c\u0430\u0454 \u0434\u0443\u0436\u0435 \u0445\u0438\u0442\u0440\u0438\u0439 \u043c\u0435\u0445\u0430\u043d\u0456\u0437\u043c \u0449\u043e\u0434\u043e \u043e\u043f\u0442\u0438\u043c\u0456\u0437\u0430\u0446\u0456\u0457 \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0435\u043d\u043d\u044f \u0441\u0442\u043e\u0440\u0456\u043d\u043e\u043a \u0456&nbsp;\u0442\u043e\u043c\u0443 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454\u0442\u044c\u0441\u044f \u0437\u0430\u043c\u0456\u0441\u0442\u044c&nbsp;<code>&lt;a&gt;<\/code>&nbsp;\u0434\u043b\u044f \u043d\u0430\u0432\u0456\u0433\u0430\u0446\u0456\u0457 \u043f\u043e&nbsp;\u0441\u0430\u0439\u0442\u0443. \u0414\u0435\u0442\u0430\u043b\u044c\u043d\u0456\u0448\u0435 \u043c\u043e\u0436\u043d\u0430 \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u0438&nbsp;<a href=\"https:\/\/www.gatsbyjs.org\/docs\/gatsby-link\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u0442\u0443\u0442<\/a>.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/s.dou.ua\/storage-files\/image1_pHFvnKH.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p>\u0421\u0442\u043e\u0440\u0456\u043d\u043a\u0438 \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u0456, \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u0434\u043e\u0434\u0430\u043d\u0456. \u0421\u0445\u043e\u0436\u0435, \u0449\u043e&nbsp;\u0437&nbsp;\u043d\u0430\u0432\u0456\u0433\u0430\u0446\u0456\u0454\u044e \u0437\u0430\u043a\u0456\u043d\u0447\u0438\u043b\u0438.<\/p>\n\n\n\n<h2 id=\"two\">\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438, \u0448\u0430\u0431\u043b\u043e\u043d\u0438 \u0442\u0430&nbsp;\u0457\u0445&nbsp;\u0432\u0437\u0430\u0454\u043c\u043e\u0434\u0456\u044f<\/h2>\n\n\n\n<p>\u042f\u043a&nbsp;\u0432\u0456\u0434\u043e\u043c\u043e, \u0432&nbsp;\u0431\u0443\u0434\u044c-\u044f\u043a\u043e\u043c\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0456 \u0437\u0430\u0432\u0436\u0434\u0438 \u0454&nbsp;\u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0438, \u0449\u043e&nbsp;\u043f\u043e\u0432\u0442\u043e\u0440\u044e\u044e\u0442\u044c\u0441\u044f. \u0414\u043b\u044f \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0456\u0432 \u0446\u0435&nbsp;\u0445\u0435\u0434\u0435\u0440, \u0444\u0443\u0442\u0435\u0440, \u043d\u0430\u0432\u0456\u0433\u0430\u0446\u0456\u0439\u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u044c. \u0422\u0430\u043a\u043e\u0436 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438, \u043d\u0435\u0437\u0430\u043b\u0435\u0436\u043d\u043e \u0432\u0456\u0434 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443, \u0431\u0443\u0434\u0443\u044e\u0442\u044c\u0441\u044f \u0437\u0430&nbsp;\u0437\u0430\u0434\u0430\u043d\u043e\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u044e. \u0422\u0430\u043a \u044f\u043a&nbsp;<strong>Gatsby<\/strong>&nbsp;\u2014 \u0446\u0435&nbsp;\u043a\u043e\u043c\u043f\u0456\u043b\u044f\u0442\u043e\u0440 \u0434\u043b\u044f&nbsp;<strong>React<\/strong>&nbsp;, \u0442\u0443\u0442 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454\u0442\u044c\u0441\u044f \u0442\u043e\u0439 \u0441\u0430\u043c\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u0438\u0439 \u043f\u0456\u0434\u0445\u0456\u0434 \u0434\u043b\u044f \u0432\u0438\u0440\u0456\u0448\u0435\u043d\u043d\u044f \u0446\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c.<\/p>\n\n\n\n<p>\u0421\u0442\u0432\u043e\u0440\u0438\u043c\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438 \u0434\u043b\u044f \u0445\u0435\u0434\u0435\u0440\u0430 \u0442\u0430&nbsp;\u043d\u0430\u0432\u0456\u0433\u0430\u0446\u0456\u0439\u043d\u043e\u0457 \u043f\u0430\u043d\u0435\u043b\u0456:<\/p>\n\n\n\n<p><em>\/src\/components\/header.js<\/em><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import React from \"react\";\nimport { Link } from \"gatsby\";\n\n<em>\/**\n * \u0417\u0432\u0435\u0440\u043d\u0456\u0442\u044c \u0443\u0432\u0430\u0433\u0443 \u043d\u0430 \u0442\u0435, \u0449\u043e \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u0434\u043b\u044f \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0443\n * \u0456\u043c\u043f\u043e\u0440\u0442\u0443\u0454\u0442\u044c\u0441\u044f \u0442\u0430\u043a \u0441\u0430\u043c\u043e, \u044f\u043a \u0456 \u0432 \u0437\u0432\u0438\u0447\u0430\u0439\u043d\u043e\u043c\u0443 React-\u043f\u0440\u043e\u0435\u043a\u0442\u0456.\n * \u0426\u0435 \u0442\u0438\u043c\u0447\u0430\u0441\u043e\u0432\u0435 \u0456 \u043d\u0435 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u0435 \u0440\u0456\u0448\u0435\u043d\u043d\u044f, \u0442\u043e\u043c\u0443 \u0449\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\n * \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0454\u0442\u044c\u0441\u044f \"\u044f\u043a \u0454\". \u0422\u0440\u043e\u0445\u0438 \u0434\u0430\u043b\u0456 \u043c\u0438 \u0440\u043e\u0437\u0433\u043b\u044f\u043d\u0435\u043c\u043e\n * \u044f\u043a \u0446\u0435 \u0440\u043e\u0431\u0438\u0442\u0438 \"\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\" \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0447\u0438 GraphQL \u0456 gatsby-\u043f\u043b\u0430\u0433\u0456\u043d\u0438\n *\/<\/em>\nimport logoSrc from \"..\/images\/logo.png\";\n\nexport default () =&gt; (\n  &lt;header&gt;\n    &lt;Link to=\"\/\"&gt;\n      &lt;img src={logoSrc} alt=\"logo\" width=\"60px\" height=\"60px\" \/&gt;\n    &lt;\/Link&gt;\n    That is header\n  &lt;\/header&gt;\n);<\/pre>\n\n\n\n<p><em>\/src\/components\/sidebar.js<\/em><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import React from \"react\";\nimport { Link } from \"gatsby\";\n\nexport default () =&gt; (\n  &lt;div&gt;\n    &lt;ul&gt;\n      &lt;li&gt;\n        &lt;Link to=\"\/about\"&gt;about&lt;\/Link&gt;\n      &lt;\/li&gt;\n      &lt;li&gt;\n        &lt;Link to=\"\/tutorial\/part-zero\"&gt;Part #0&lt;\/Link&gt;\n      &lt;\/li&gt;\n      &lt;li&gt;\n        &lt;Link to=\"\/tutorial\/part-one\"&gt;Part #1&lt;\/Link&gt;\n      &lt;\/li&gt;\n      &lt;li&gt;\n        &lt;Link to=\"\/tutorial\/part-two\"&gt;Part #2&lt;\/Link&gt;\n      &lt;\/li&gt;\n      &lt;li&gt;\n        &lt;Link to=\"\/tutorial\/part-three\"&gt;Part #3&lt;\/Link&gt;\n      &lt;\/li&gt;\n      &lt;li&gt;\n        &lt;Link to=\"\/tutorial\/part-four\"&gt;Part #4&lt;\/Link&gt;\n      &lt;\/li&gt;\n    &lt;\/ul&gt;\n  &lt;\/div&gt;\n);<\/pre>\n\n\n\n<p>\u0456&nbsp;\u0434\u043e\u0434\u0430\u043c\u043e \u0457\u0445&nbsp;\u0432&nbsp;<em>\/src\/pages\/index.js<\/em><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import React from \"react\";\n\nimport Header from \"..\/components\/header\";\nimport Sidebar from \"..\/components\/sidebar\";\n\nexport default () =&gt; (\n  &lt;div&gt;\n    &lt;Header \/&gt;\n    &lt;Sidebar \/&gt;\n    &lt;h1&gt;Index page&lt;\/h1&gt;\n  &lt;\/div&gt;\n);<\/pre>\n\n\n\n<p>\u041f\u0435\u0440\u0435\u0432\u0456\u0440\u044f\u0454\u043c\u043e:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/s.dou.ua\/storage-files\/image5_s27vwxv.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p>\u0412\u0441\u0435 \u043f\u0440\u0430\u0446\u044e\u0454, \u0430\u043b\u0435 \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u0456\u043c\u043f\u043e\u0440\u0442\u0443\u0432\u0430\u0442\u0438 Header \u0456&nbsp;Sidebar \u043d\u0430&nbsp;\u043a\u043e\u0436\u043d\u0443 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443 \u043e\u043a\u0440\u0435\u043c\u043e, \u0449\u043e&nbsp;\u043d\u0435&nbsp;\u0434\u0443\u0436\u0435 \u0442\u043e&nbsp;\u0439&nbsp;\u0437\u0440\u0443\u0447\u043d\u043e. \u0429\u043e\u0431 \u0432\u0438\u0440\u0456\u0448\u0438\u0442\u0438 \u0446\u0435&nbsp;\u043f\u0438\u0442\u0430\u043d\u043d\u044f, \u0434\u043e\u0441\u0438\u0442\u044c \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u0438 layout-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0442\u0430&nbsp;\u043e\u0433\u043e\u0440\u043d\u0443\u0442\u0438 \u043d\u0438\u043c \u043a\u043e\u0436\u043d\u0443 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443.<\/p>\n\n\n\n<p><em>Gatsby layout == React container<br>\u0442\u0430\u043a-\u0442\u0430\u043a, \u0441\u0430\u043c\u0435 \u043d\u0435\u0442\u043e\u0447\u043d\u0430 \u0440\u0456\u0432\u043d\u0456\u0441\u0442\u044c, \u0442\u043e\u043c\u0443 \u0449\u043e&nbsp;\u0446\u0435&nbsp;\u00ab\u043c\u0430\u0439\u0436\u0435\u00bb \u043e\u0434\u043d\u0435 \u0456&nbsp;\u0442\u0435&nbsp;\u0441\u0430\u043c\u0435_<\/em><\/p>\n\n\n\n<p><em>\/src\/components\/layout.js<\/em><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import React from \"react\";\n\nimport Header from \".\/header\";\nimport Sidebar from \".\/sidebar\";\n\nexport default ({ children }) =&gt; (\n  &lt;&gt;\n    &lt;Header \/&gt;\n    &lt;div\n      style={{ margin: `0 auto`, maxWidth: 650, backgroundColor: `#eeeeee` }}\n    &gt;\n      &lt;Sidebar \/&gt;\n      {children}\n    &lt;\/div&gt;\n  &lt;\/&gt;\n);<\/pre>\n\n\n\n<p><em>\/src\/pages\/index.js<\/em>&nbsp;(\u0456&nbsp;\u0432\u0441\u0456 \u0456\u043d\u0448\u0456 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438)<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import React from \"react\";\n\nimport Layout from \"..\/components\/layout\";\n\nexport default () =&gt; (\n  &lt;Layout&gt;\n    &lt;h1&gt;Index page&lt;\/h1&gt;\n  &lt;\/Layout&gt;\n);<\/pre>\n\n\n\n<p>\u0413\u043e\u0442\u043e\u0432\u043e, \u0434\u0438\u0432\u0438\u043c\u043e\u0441\u044f \u0432&nbsp;\u0431\u0440\u0430\u0443\u0437\u0435\u0440:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/s.dou.ua\/storage-files\/image4.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p><em>\u0427\u043e\u043c\u0443 \u0432&nbsp;\u043f\u0440\u043e\u0435\u043a\u0442\u0456 \u0432\u0441\u0456 \u043d\u0430\u0437\u0432\u0438 \u0444\u0430\u0439\u043b\u0456\u0432 \u0437&nbsp;\u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0457 \u043b\u0456\u0442\u0435\u0440\u0438? \u0414\u043b\u044f \u043f\u043e\u0447\u0430\u0442\u043a\u0443 \u0432\u0438\u0437\u043d\u0430\u0447\u0438\u043c\u043e\u0441\u044f, \u0449\u043e&nbsp;naming convention \u0434\u043b\u044f&nbsp;<strong>React<\/strong>&nbsp;\u0432\u0438\u0445\u043e\u0434\u0438\u0442\u044c \u0437&nbsp;\u0442\u043e\u0433\u043e, \u0449\u043e&nbsp;\u00ab\u043a\u043e\u0436\u0435\u043d \u0444\u0430\u0439\u043b&nbsp;\u2014 \u0446\u0435&nbsp;\u043a\u043b\u0430\u0441, \u0430&nbsp;\u043a\u043b\u0430\u0441 \u0437\u0430\u0432\u0436\u0434\u0438 \u043d\u0430\u0437\u0438\u0432\u0430\u0454\u0442\u044c\u0441\u044f \u0437&nbsp;\u0432\u0435\u043b\u0438\u043a\u043e\u0457 \u043b\u0456\u0442\u0435\u0440\u0438\u00bb. \u0412&nbsp;<strong>Gatsby<\/strong>&nbsp;\u0444\u0430\u0439\u043b\u0438, \u044f\u043a&nbsp;\u0456&nbsp;\u0440\u0430\u043d\u0456\u0448\u0435, \u043c\u0456\u0441\u0442\u044f\u0442\u044c \u043a\u043b\u0430\u0441\u0438, \u0430\u043b\u0435 \u0454&nbsp;\u043e\u0434\u043d\u0435 \u00ab\u0430\u043b\u0435\u00bb: \u00ab\u043a\u043e\u0436\u0435\u043d \u0444\u0430\u0439\u043b \u0454&nbsp;\u043f\u043e\u0442\u0435\u043d\u0446\u0456\u0439\u043d\u043e\u044e \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u043e\u044e, \u0430&nbsp;\u0439\u043e\u0433\u043e \u043d\u0430\u0437\u0432\u0430 \u2015 URL \u0434\u043e&nbsp;\u0446\u0456\u0454\u0457 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438\u00bb. \u041a\u043e\u043c\u2019\u044e\u043d\u0456\u0442\u0456 \u043f\u0440\u0438\u0439\u0448\u043b\u043e \u0434\u043e&nbsp;\u0432\u0438\u0441\u043d\u043e\u0432\u043a\u0443 \u043f\u0440\u043e&nbsp;\u0442\u0435, \u0449\u043e&nbsp;\u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u0432\u0438\u0434\u0443&nbsp;<code>http:\/\/domain.com\/User\/Settings<\/code>&nbsp;\u2015 \u0446\u0435&nbsp;\u043d\u0435&nbsp;comme-il-faut\u0456, \u0456&nbsp;\u0437\u0430\u0442\u0432\u0435\u0440\u0434\u0438\u043b\u043e kebab-case \u0434\u043b\u044f \u043d\u0430\u0437\u0432 \u0444\u0430\u0439\u043b\u0456\u0432.<\/em>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0444\u0430\u0439\u043b\u0456\u0432<\/p>\n\n\n\n<h2 id=\"three\">\u0420\u043e\u0431\u043e\u0442\u0430 \u0437&nbsp;\u0434\u0430\u043d\u0438\u043c\u0438<\/h2>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440, \u043a\u043e\u043b\u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0441\u0430\u0439\u0442\u0443 \u0433\u043e\u0442\u043e\u0432\u0430, \u043c\u043e\u0436\u043d\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u0438 \u0434\u043e&nbsp;\u043d\u0430\u043f\u043e\u0432\u043d\u0435\u043d\u043d\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c. \u041a\u043b\u0430\u0441\u0438\u0447\u043d\u0438\u0439 \u00ab\u0445\u0430\u0440\u0434\u043a\u043e\u0434\u00bb \u043f\u0456\u0434\u0445\u0456\u0434 \u043d\u0435&nbsp;\u0432\u043b\u0430\u0448\u0442\u043e\u0432\u0443\u0432\u0430\u0432 \u0442\u0432\u043e\u0440\u0446\u0456\u0432 JAM-\u0441\u0442\u0435\u043a\u0443, \u0442\u0430\u043a \u0441\u0430\u043c\u043e, \u044f\u043a&nbsp;\u0456&nbsp;\u00ab\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0437&nbsp;AJAX-\u0437\u0430\u043f\u0438\u0442\u0456\u0432\u00bb. \u0422\u043e\u043c\u0443 \u0432\u043e\u043d\u0438 \u0437\u0430\u043f\u0440\u043e\u043f\u043e\u043d\u0443\u0432\u0430\u043b\u0438 \u0437\u0430\u043f\u043e\u0432\u043d\u044e\u0432\u0430\u0442\u0438 \u0441\u0430\u0439\u0442\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c \u043f\u0456\u0434 \u0447\u0430\u0441 \u043a\u043e\u043c\u043f\u0456\u043b\u044f\u0446\u0456\u0457. \u0423&nbsp;\u0432\u0438\u043f\u0430\u0434\u043a\u0443 \u0437&nbsp;<strong>Gatsby<\/strong>&nbsp;\u0437\u0430&nbsp;\u0446\u0435&nbsp;\u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u0430\u0454&nbsp;<strong>GraphQL<\/strong>, \u044f\u043a\u0438\u0439 \u0434\u043e\u0437\u0432\u043e\u043b\u044f\u0454 \u0437\u0440\u0443\u0447\u043d\u043e \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438 \u0437&nbsp;\u043f\u043e\u0442\u043e\u043a\u0430\u043c\u0438 \u0434\u0430\u043d\u0438\u0445 \u0437&nbsp;\u0431\u0443\u0434\u044c-\u044f\u043a\u0438\u0445 \u0434\u0436\u0435\u0440\u0435\u043b.<\/p>\n\n\n\n<p><em>\u0420\u043e\u0437\u043f\u043e\u0432\u0456\u0441\u0442\u0438 \u043f\u0440\u043e GraphQL&nbsp;\u0432 \u0434\u0432\u043e\u0445 \u0441\u043b\u043e\u0432\u0430\u0445 \u043d\u0435\u043c\u043e\u0436\u043b\u0438\u0432\u043e, \u0442\u043e\u043c\u0443 \u0431\u0430\u0436\u0430\u043d\u043e \u0432\u0438\u0432\u0447\u0438\u0442\u0438 \u0439\u043e\u0433\u043e \u0441\u0430\u043c\u043e\u0441\u0442\u0456\u0439\u043d\u043e \u0430\u0431\u043e \u043f\u043e\u0447\u0435\u043a\u0430\u0442\u0438 \u043c\u043e\u0454\u0457 \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u043e\u0457 \u0441\u0442\u0430\u0442\u0442\u0456. \u0414\u0435\u0442\u0430\u043b\u044c\u043d\u0456\u0448\u0435 \u043f\u0440\u043e \u0440\u043e\u0431\u043e\u0442\u0443 \u0437&nbsp;GraphQL \u043c\u043e\u0436\u043d\u0430 \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u0438&nbsp;<a href=\"https:\/\/www.howtographql.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u0442\u0443\u0442<\/a>.<\/em><\/p>\n\n\n\n<p>\u0414\u043b\u044f \u0440\u043e\u0431\u043e\u0442\u0438 \u0437&nbsp;<strong>GraphQL<\/strong>, \u0437&nbsp;\u0434\u0440\u0443\u0433\u043e\u0457 \u0432\u0435\u0440\u0441\u0456\u0457, \u0432&nbsp;\u043f\u0430\u043a\u0435\u0442\u0456&nbsp;<code>gatsby<\/code>&nbsp;\u0454 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442&nbsp;<a href=\"https:\/\/www.gatsbyjs.org\/docs\/static-query\/\" target=\"_blank\" rel=\"noreferrer noopener\">StaticQuery<\/a>, \u044f\u043a\u0438\u0439 \u043c\u043e\u0436\u0435 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438\u0441\u044f \u044f\u043a&nbsp;\u043d\u0430&nbsp;\u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0430\u0445, \u0442\u0430\u043a \u0456&nbsp;\u0432&nbsp;\u043f\u0440\u043e\u0441\u0442\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u0456&nbsp;\u0432&nbsp;\u0446\u044c\u043e\u043c\u0443 \u0439\u043e\u0433\u043e \u0433\u043e\u043b\u043e\u0432\u043d\u0430 \u0432\u0456\u0434\u043c\u0456\u043d\u043d\u0456\u0441\u0442\u044c \u0432\u0456\u0434 \u0439\u043e\u0433\u043e \u043f\u043e\u043f\u0435\u0440\u0435\u0434\u043d\u0438\u043a\u0430 \u2015&nbsp;<a href=\"https:\/\/www.gatsbyjs.org\/docs\/page-query\/\" target=\"_blank\" rel=\"noreferrer noopener\">page query<\/a>. \u041f\u043e\u043a\u0438 \u0449\u043e&nbsp;\u043d\u0430\u0448 \u0441\u0430\u0439\u0442 \u043d\u0435&nbsp;\u0437\u2019\u0454\u0434\u043d\u0430\u043d\u0438\u0439 \u0437&nbsp;\u044f\u043a\u0438\u043c\u0438\u0441\u044c \u0434\u0436\u0435\u0440\u0435\u043b\u0430\u043c\u0438 \u0434\u0430\u043d\u0438\u0445, \u0442\u043e\u043c\u0443 \u0441\u043f\u0440\u043e\u0431\u0443\u0454\u043c\u043e \u0432\u0438\u0432\u0435\u0441\u0442\u0438 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u0456 \u0441\u0442\u043e\u0440\u0456\u043d\u043e\u043a, \u0434\u043b\u044f \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u0443, \u0430&nbsp;\u043f\u043e\u0442\u0456\u043c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c\u043e \u0434\u043e&nbsp;\u0431\u0456\u043b\u044c\u0448 \u0441\u043a\u043b\u0430\u0434\u043d\u0438\u0445 \u0440\u0435\u0447\u0435\u0439.<\/p>\n\n\n\n<p>\u0429\u043e\u0431 \u043f\u043e\u0431\u0443\u0434\u0443\u0432\u0430\u0442\u0438&nbsp;<code>query<\/code>, \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u0432\u0456\u0434\u043a\u0440\u0438\u0442\u0438&nbsp;<a href=\"http:\/\/localhost:8000\/___graphql\" target=\"_blank\" rel=\"noreferrer noopener\">localhost:8000\/___graphql<\/a>&nbsp;\u0456, \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u044e\u0447\u0438\u0441\u044c \u0431\u0456\u0447\u043d\u043e\u044e \u043f\u0430\u043d\u0435\u043b\u043b\u044e \u0437&nbsp;\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0456\u0454\u044e, \u0437\u043d\u0430\u0439\u0442\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0456 \u0434\u0430\u043d\u0456 \u043f\u0440\u043e \u0441\u0430\u0439\u0442. \u0406&nbsp;\u043d\u0435&nbsp;\u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u043f\u0440\u043e \u0430\u0432\u0442\u043e\u0434\u043e\u043f\u043e\u0432\u043d\u0435\u043d\u043d\u044f.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/s.dou.ua\/storage-files\/image2_3Q37U4F.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p><em>\/src\/components\/sidebar.js<\/em><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import React from \"react\";\nimport { Link, StaticQuery, graphql } from \"gatsby\";\n\nexport default () =&gt; (\n  &lt;StaticQuery\n    query={graphql`\n      {\n        allSitePage {\n          edges {\n            node {\n              id\n              path\n            }\n          }\n        }\n      }\n    `}\n    render={({ allSitePage: { edges } }) =&gt; (\n      &lt;ul&gt;\n        {edges.map(({ node: { id, path } }) =&gt; (\n          &lt;li key={id}&gt;\n            &lt;Link to={path}&gt;{id}&lt;\/Link&gt;\n          &lt;\/li&gt;\n        ))}\n      &lt;\/ul&gt;\n    )}\n  \/&gt;\n);<\/pre>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440&nbsp;\u043c\u0438, \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0447\u0438&nbsp;<code>query<\/code>, \u043e\u0442\u0440\u0438\u043c\u0443\u0454\u043c\u043e \u0434\u0430\u043d\u0456 \u043f\u0440\u043e \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438, \u044f\u043a\u0456 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c\u043e \u0432&nbsp;\u043f\u0430\u043d\u0435\u043b\u0456 \u043d\u0430\u0432\u0456\u0433\u0430\u0446\u0456\u0457. \u0411\u0456\u043b\u044c\u0448\u0435 \u043d\u0435&nbsp;\u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u043f\u0435\u0440\u0435\u0436\u0438\u0432\u0430\u0442\u0438 \u0437&nbsp;\u043f\u0440\u0438\u0432\u043e\u0434\u0443 \u0442\u043e\u0433\u043e, \u0449\u043e&nbsp;\u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u043d\u0435&nbsp;\u0431\u0443\u0434\u0435 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u0430\u0442\u0438 \u043d\u0430\u0437\u0432\u0456, \u0442\u043e\u043c\u0443 \u0449\u043e&nbsp;\u0432\u0441\u0456 \u0434\u0430\u043d\u0456 \u0437\u0431\u0438\u0440\u0430\u044e\u0442\u044c\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u043e.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/s.dou.ua\/storage-files\/1_fEwwXWr.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p>\u041f\u043e&nbsp;\u0444\u0430\u043a\u0442\u0443 \u0446\u0435&nbsp;\u0432\u0441\u0456 \u0434\u0430\u043d\u0456, \u044f\u043a\u0456 \u043c\u043e\u0436\u0443\u0442\u044c \u0431\u0443\u0442\u0438 \u043d\u0430&nbsp;\u043d\u0430\u0448\u043e\u043c\u0443 \u0441\u0430\u0439\u0442\u0456 \u0431\u0435\u0437 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0456\u0445 \u043f\u043b\u0430\u0433\u0456\u043d\u0456\u0432 \u0456&nbsp;\u0431\u0435\u0437 \u0441\u0442\u0430\u0440\u043e\u0433\u043e \u0434\u043e\u0431\u0440\u043e\u0433\u043e \u00ab\u0445\u0430\u0440\u0434\u043a\u043e\u0434\u0443\u00bb, \u0442\u043e\u043c\u0443 \u043c\u0438&nbsp;\u043f\u043b\u0430\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c\u043e \u0432&nbsp;\u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0443 \u0442\u0435\u043c\u0443 \u043d\u0430\u0448\u043e\u0457 \u0441\u0442\u0430\u0442\u0442\u0456 \u2015 \u043f\u043b\u0430\u0433\u0456\u043d\u0438.<\/p>\n\n\n\n<h2 id=\"four\">\u041f\u043b\u0430\u0433\u0456\u043d\u0438<\/h2>\n\n\n\n<p>\u0417\u0430&nbsp;\u0441\u0432\u043e\u0454\u044e \u0441\u0443\u0442\u0442\u044e Gatsby&nbsp;\u2014 \u0446\u0435&nbsp;\u043a\u043e\u043c\u043f\u0456\u043b\u044f\u0442\u043e\u0440 \u0437&nbsp;\u043a\u0443\u043f\u043e\u044e \u0444\u0456\u0448\u043e\u043a, \u044f\u043a\u0438\u043c\u0438 \u044f\u043a\u0440\u0430\u0437 \u0456&nbsp;\u0454&nbsp;\u043f\u043b\u0430\u0433\u0456\u043d\u0438. \u0417\u0430&nbsp;\u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u043d\u0438\u0445 \u043c\u043e\u0436\u043d\u0430 \u043d\u0430\u043b\u0430\u0448\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u043e\u0431\u0440\u043e\u0431\u043a\u0443 \u0442\u0438\u0445 \u0447\u0438&nbsp;\u0456\u043d\u0448\u0438\u0445 \u0444\u0430\u0439\u043b\u0456\u0432, \u0442\u0438\u043f\u0456\u0432 \u0434\u0430\u043d\u0438\u0445 \u0456&nbsp;\u0440\u0456\u0437\u043d\u0438\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u0456\u0432.<\/p>\n\n\n\n<p>\u0421\u0442\u0432\u043e\u0440\u0438\u043c\u043e \u043d\u0430&nbsp;\u043a\u043e\u0440\u0435\u043d\u0435\u0432\u043e\u043c\u0443 \u0440\u0456\u0432\u043d\u0456 \u0434\u043e\u0434\u0430\u0442\u043a\u0443 \u0444\u0430\u0439\u043b&nbsp;<em>\/gatsby-config.js&lt;|em&gt;, \u044f\u043a\u0438\u0439 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u0430\u0454 \u0437\u0430&nbsp;\u043a\u043e\u043d\u0444\u0456\u0433\u0443\u0440\u0430\u0446\u0456\u044e \u043a\u043e\u043c\u043f\u0456\u043b\u044f\u0442\u043e\u0440\u0430 \u0432&nbsp;\u0446\u0456\u043b\u043e\u043c\u0443, \u0456&nbsp;\u0441\u043f\u0440\u043e\u0431\u0443\u0454\u043c\u043e \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u0442\u0438 \u043f\u0435\u0440\u0448\u0438\u0439 \u043f\u043b\u0430\u0433\u0456\u043d \u0434\u043b\u044f \u0440\u043e\u0431\u043e\u0442\u0438 \u0437&nbsp;\u0444\u0430\u0439\u043b\u0430\u043c\u0438.<\/em><\/p>\n\n\n\n<p>\u0412\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044f \u043f\u043b\u0430\u0433\u0456\u043d\u0443:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">yarn add gatsby-source-filesystem<\/pre>\n\n\n\n<p>\u041a\u043e\u043d\u0444\u0456\u0433\u0443\u0440\u0430\u0446\u0456\u044f \u0443&nbsp;\u0444\u0430\u0439\u043b\u0456&nbsp;<em>\/gatsby-config.js<\/em>:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">module.exports = {\n  plugins: [\n    {\n      resolve: `gatsby-source-filesystem`,\n      options: {\n        name: `images`,\n        path: `${__dirname}\/src\/images\/`,\n      }\n    }\n  ],\n}<\/pre>\n\n\n\n<p>\u0414\u0435\u0442\u0430\u043b\u044c\u043d\u0456\u0448\u0435 \u043f\u0440\u043e \u0444\u0430\u0439\u043b \u0432\u0438\u0449\u0435<\/p>\n\n\n\n<p>\u041f\u0430\u043c\u2019\u044f\u0442\u0430\u0439\u0442\u0435 \u043c\u0438&nbsp;\u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u043f\u0440\u043e \u00ab\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0438\u0439\u00bb \u0456\u043c\u043f\u043e\u0440\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0432&nbsp;<strong>Gatsby<\/strong>?<\/p>\n\n\n\n<p><em>\/src\/components\/header.js<\/em><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import React from \"react\";\nimport { Link, StaticQuery, graphql } from \"gatsby\";\n\nexport default () =&gt; (\n  &lt;StaticQuery\n    query={graphql`\n      {\n        allFile(filter: { name: { eq: \"logo\" } }) {\n          edges {\n            node {\n              publicURL\n            }\n          }\n        }\n      }\n    `}\n    render={({\n      allFile: {\n        edges: [\n          {\n            node: { publicURL }\n          }\n        ]\n      }\n    }) =&gt; (\n      &lt;header&gt;\n        &lt;Link to=\"\/\"&gt;\n          &lt;img src={publicURL} alt=\"logo\" width=\"60px\" height=\"60px\" \/&gt;\n        &lt;\/Link&gt;\n        That is header\n      &lt;\/header&gt;\n    )}\n  \/&gt;\n);<\/pre>\n\n\n\n<p>\u041d\u0430&nbsp;\u0441\u0430\u0439\u0442\u0456 \u043d\u0456\u0447\u043e\u0433\u043e \u043d\u0435&nbsp;\u0437\u043c\u0456\u043d\u0438\u043b\u043e\u0441\u044f, \u0430\u043b\u0435 \u0442\u0435\u043f\u0435\u0440 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043f\u0456\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0454\u0442\u044c\u0441\u044f \u0437\u0430&nbsp;\u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e GraphQL, \u0437\u0430\u043c\u0456\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e webpack-\u0456\u043c\u043f\u043e\u0440\u0442\u0443. \u0417&nbsp;\u043f\u0435\u0440\u0448\u043e\u0433\u043e \u043f\u043e\u0433\u043b\u044f\u0434\u0443 \u043c\u043e\u0436\u0435 \u0437\u0434\u0430\u0442\u0438\u0441\u044f, \u0449\u043e&nbsp;\u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0456\u0457 \u0437\u0430\u043d\u0430\u0434\u0442\u043e \u0441\u043a\u043b\u0430\u0434\u043d\u0456 \u0456&nbsp;\u0446\u0435&nbsp;\u043b\u0438\u0448\u0435 \u0434\u043e\u0434\u0430\u0454 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0430\u043b\u0435 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0435&nbsp;\u043f\u043e\u0441\u043f\u0456\u0448\u0430\u0442\u0438 \u0437&nbsp;\u0432\u0438\u0441\u043d\u043e\u0432\u043a\u0430\u043c\u0438, \u0431\u043e&nbsp;\u0441\u043f\u0440\u0430\u0432\u0430 \u0432&nbsp;\u0442\u0438\u0445&nbsp;\u0436\u0435 \u0441\u0430\u043c\u0438\u0445 \u043f\u043b\u0430\u0433\u0456\u043d\u0430\u0445. \u041d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u044f\u043a\u0431\u0438 \u043c\u0438&nbsp;\u0432\u0438\u0440\u0456\u0448\u0438\u043b\u0438 \u0440\u043e\u0437\u043c\u0456\u0449\u0443\u0432\u0430\u0442\u0438 \u043d\u0430&nbsp;\u0441\u0430\u0439\u0442\u0456 \u0442\u0438\u0441\u044f\u0447\u0456 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0456\u0439, \u0442\u043e&nbsp;\u043d\u0430\u043c \u0432&nbsp;\u0431\u0443\u0434\u044c-\u044f\u043a\u043e\u043c\u0443 \u0432\u0438\u043f\u0430\u0434\u043a\u0443 \u0434\u043e\u0432\u0435\u043b\u043e\u0441\u044f&nbsp;\u0431 \u0434\u0443\u043c\u0430\u0442\u0438 \u043f\u0440\u043e \u043e\u043f\u0442\u0438\u043c\u0456\u0437\u0430\u0446\u0456\u044e \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0435\u043d\u043d\u044f \u0432\u0441\u044c\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443. \u0429\u043e\u0431 \u043d\u0435&nbsp;\u0431\u0443\u0434\u0443\u0432\u0430\u0442\u0438 \u0441\u0432\u0456\u0439&nbsp;<a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/lazy-loading-guidance\/images-and-video\/\" target=\"_blank\" rel=\"noreferrer noopener\">lazy-load \u043f\u0440\u043e\u0446\u0435\u0441\u0441<\/a>&nbsp;\u0437&nbsp;\u043d\u0443\u043b\u044f, \u043c\u0438&nbsp;\u0431 \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0434\u0430\u043b\u0438&nbsp;<a href=\"https:\/\/www.gatsbyjs.org\/packages\/gatsby-image\/\" target=\"_blank\" rel=\"noreferrer noopener\">gatsby-image<\/a>&nbsp;\u043f\u043b\u0430\u0433\u0456\u043d, \u044f\u043a\u0438\u0439 \u0431\u0438&nbsp;\u043e\u043f\u0442\u0438\u043c\u0456\u0437\u0443\u0432\u0430\u0432 \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0435\u043d\u043d\u044f \u0432\u0441\u0456\u0445 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a, \u0449\u043e&nbsp;\u0456\u043c\u043f\u043e\u0440\u0442\u0443\u044e\u0442\u044c\u0441\u044f \u0437\u0430&nbsp;\u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e&nbsp;<code>query<\/code>.<\/p>\n\n\n\n<p>\u0412\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044f \u043f\u043b\u0430\u0433\u0456\u043d\u0456\u0432 \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0456\u0437\u0430\u0446\u0456\u0457:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">yarn add gatsby-plugin-typography react-typography typography typography-theme-noriega node-sass gatsby-plugin-sass gatsby-plugin-styled-components styled-components babel-plugin-styled-components<\/pre>\n\n\n\n<p><em>gatsby-config.js<\/em><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">module.exports = {\n  plugins: [\n    {\n      resolve: `gatsby-source-filesystem`,\n      options: {\n        name: `images`,\n        path: `${__dirname}\/src\/images\/`\n      }\n    },\n    <em>\/\/ add style plugins below<\/em>\n    `gatsby-plugin-typography`,\n    `gatsby-plugin-sass`,\n    `gatsby-plugin-styled-components`\n  ]\n};<\/pre>\n\n\n\n<p><em><a href=\"https:\/\/www.gatsbyjs.org\/plugins\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u041d\u0430&nbsp;\u043e\u0444\u0456\u0446\u0456\u0439\u043d\u043e\u043c\u0443 \u0441\u0430\u0439\u0442\u0456<\/a>&nbsp;\u043c\u043e\u0436\u043d\u0430 \u0437\u043d\u0430\u0439\u0442\u0438 \u043f\u043b\u0430\u0433\u0456\u043d \u043d\u0430&nbsp;\u0431\u0443\u0434\u044c-\u044f\u043a\u0438\u0439 \u0441\u043c\u0430\u043a.<\/em><\/p>\n\n\n\n<h2 id=\"five\">\u0421\u0442\u0438\u043b\u0456\u0437\u0430\u0446\u0456\u044f \u0441\u0430\u0439\u0442\u0443<\/h2>\n\n\n\n<p>\u041f\u043e\u0447\u043d\u0435\u043c\u043e \u0441\u0442\u0438\u043b\u0456\u0437\u0430\u0446\u0456\u044e \u0434\u043e\u0434\u0430\u0442\u043a\u0443, \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0447\u0438 \u0440\u0456\u0437\u043d\u0456 \u043f\u0456\u0434\u0445\u043e\u0434\u0438. \u0423&nbsp;\u043f\u043e\u043f\u0435\u0440\u0435\u0434\u043d\u044c\u043e\u043c\u0443 \u043a\u0440\u043e\u0446\u0456 \u043c\u0438&nbsp;\u0432\u0436\u0435 \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 \u043f\u043b\u0430\u0433\u0456\u043d\u0438 \u0434\u043b\u044f \u0440\u043e\u0431\u043e\u0442\u0438 \u0437&nbsp;<a href=\"https:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">SASS<\/a>,&nbsp;<a href=\"https:\/\/www.styled-components.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">styled-components<\/a>&nbsp;\u0442\u0430&nbsp;\u0431\u0456\u0431\u043b\u0456\u043e\u0442\u0435\u043a\u043e\u044e&nbsp;<a href=\"https:\/\/kyleamathews.github.io\/typography.js\/\" target=\"_blank\" rel=\"noreferrer noopener\">typography.js<\/a>. \u041f\u0440\u0438 \u0446\u044c\u043e\u043c\u0443 \u0432\u0430\u0436\u043b\u0438\u0432\u043e \u0432\u0456\u0434\u0437\u043d\u0430\u0447\u0438\u0442\u0438, \u0449\u043e&nbsp;css.modules \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u044e\u0442\u044c\u0441\u044f \u00ab\u0437&nbsp;\u043a\u043e\u0440\u043e\u0431\u043a\u0438\u00bb.<\/p>\n\n\n\n<p>\u041f\u043e\u0447\u043d\u0435\u043c\u043e \u0440\u043e\u0431\u043e\u0442\u0443 \u0437&nbsp;\u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0438\u0445 \u0441\u0442\u0438\u043b\u0456\u0432, \u044f\u043a\u0456, \u044f\u043a&nbsp;\u0456&nbsp;\u0456\u043d\u0448\u0456 \u0440\u0435\u0447\u0456, \u0449\u043e&nbsp;\u0432\u0456\u0434\u043d\u043e\u0441\u044f\u0442\u044c\u0441\u044f \u0434\u043e&nbsp;\u0432\u0441\u044c\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0443, \u043f\u043e\u0432\u0438\u043d\u043d\u0456 \u0431\u0443\u0442\u0438 \u043d\u0430\u043b\u0430\u0448\u0442\u043e\u0432\u0430\u043d\u0456 \u0432&nbsp;\u0444\u0430\u0439\u043b\u0456&nbsp;<em>\/gatsby-browser.js<\/em>:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import \".\/src\/styles\/global.scss\";<\/pre>\n\n\n\n<p><em>\u0414\u0435\u0442\u0430\u043b\u044c\u043d\u0456\u0448\u0435 \u043f\u0440\u043e&nbsp;<a href=\"https:\/\/www.gatsbyjs.org\/docs\/browser-apis\/\" target=\"_blank\" rel=\"noreferrer noopener\">gatsby-browser.js<\/a>.<\/em><\/p>\n\n\n\n<p><em>\/src\/styles\/global.scss<\/em><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">body {\n  background-color: lavenderblush;\n}<\/pre>\n\n\n\n<p>\u0417&nbsp;\u0440\u0456\u0437\u043d\u0438\u0445 \u043f\u0440\u0438\u0447\u0438\u043d \u0442\u0435\u043d\u0434\u0435\u043d\u0446\u0456\u0457 \u043e\u0441\u0442\u0430\u043d\u043d\u0456\u0445 \u0440\u043e\u043a\u0456\u0432 \u0441\u0445\u0438\u043b\u044f\u044e\u0442\u044c\u0441\u044f \u0432&nbsp;\u0431\u0456\u043a \u00abCSS in&nbsp;JS\u00bb \u043f\u0456\u0434\u0445\u043e\u0434\u0443, \u0442\u043e\u043c\u0443 \u043d\u0435&nbsp;\u0432\u0430\u0440\u0442\u043e \u0437\u043b\u043e\u0432\u0436\u0438\u0432\u0430\u0442\u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0438\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0456&nbsp;\u043a\u0440\u0430\u0449\u0435 \u043e\u0431\u043c\u0435\u0436\u0438\u0442\u0438\u0441\u044f \u0437\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f\u043c \u0448\u0440\u0438\u0444\u0442\u0443 \u0456&nbsp;\u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0438\u0445 \u043a\u043b\u0430\u0441\u0456\u0432. \u0423&nbsp;\u0446\u044c\u043e\u043c\u0443 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0456 \u043f\u043b\u0430\u043d\u0443\u0454\u0442\u044c\u0441\u044f \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f&nbsp;<strong>Typography.js<\/strong>&nbsp;\u0434\u043b\u044f \u0446\u0438\u0445 \u0446\u0456\u043b\u0435\u0439, \u0442\u043e\u043c\u0443 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0456 \u0441\u0442\u0438\u043b\u0456 \u0437\u0430\u043b\u0438\u0448\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0440\u043e\u0436\u043d\u0456\u043c\u0438.<\/p>\n\n\n\n<p>\u0412\u0438&nbsp;\u0432\u0436\u0435 \u043c\u043e\u0433\u043b\u0438 \u043f\u043e\u043c\u0456\u0442\u0438\u0442\u0438 \u0437\u043c\u0456\u043d\u0438 \u0437\u043e\u0432\u043d\u0456\u0448\u043d\u044c\u043e\u0433\u043e \u0432\u0438\u0433\u043b\u044f\u0434\u0443 \u0441\u0430\u0439\u0442\u0443 \u043f\u0456\u0441\u043b\u044f \u0434\u043e\u0434\u0430\u0432\u0430\u043d\u043d\u044f&nbsp;<code>gatsby-plugin-typography<\/code>&nbsp;\u0432 \u043a\u043e\u043d\u0444\u0456\u0433\u0443\u0440\u0430\u0446\u0456\u044e. \u0426\u0435&nbsp;\u0442\u043e\u043c\u0443, \u0449\u043e&nbsp;\u0431\u0443\u0432 \u0437\u0430\u0441\u0442\u043e\u0441\u043e\u0432\u0430\u043d\u0438\u0439 \u0439\u043e\u0433\u043e \u043f\u0440\u0435\u0441\u0435\u0442 \u0437\u0430&nbsp;\u0437\u0430\u043c\u043e\u0432\u0447\u0443\u0432\u0430\u043d\u043d\u044f\u043c, \u0430&nbsp;\u0437\u0430\u0440\u0430\u0437 \u043c\u0438&nbsp;\u0441\u043a\u043e\u043d\u0444\u0456\u0433\u0443\u0440\u0443\u0454\u043c\u043e \u0439\u043e\u0433\u043e \u043f\u0456\u0434 \u0441\u0435\u0431\u0435.<\/p>\n\n\n\n<p><em>\/src\/utils\/typography.js<\/em><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import Typography from \"typography\";\nimport theme from \"typography-theme-noriega\";\n\nconst typography = new Typography(theme);\n\nexport default typography;<\/pre>\n\n\n\n<p><em>\u041c\u043e\u0436\u043d\u0430 \u0432\u0438\u0431\u0440\u0430\u0442\u0438 \u0431\u0443\u0434\u044c-\u044f\u043a\u0438\u0439 \u0456\u043d\u0448\u0438\u0439 \u043f\u0440\u0435\u0441\u0435\u0442 \u0437\u0456&nbsp;<a href=\"https:\/\/github.com\/KyleAMathews\/typography.js#published-typographyjs-themes\" target=\"_blank\" rel=\"noreferrer noopener\">\u0441\u043f\u0438\u0441\u043a\u0443<\/a>&nbsp;\u0430\u0431\u043e \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u0438 \u0441\u0432\u0456\u0439 \u0432\u043b\u0430\u0441\u043d\u0438\u0439, \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0447\u0438 API \u043f\u0430\u043a\u0435\u0442\u0443 (<a href=\"https:\/\/github.com\/gatsbyjs\/gatsby\/blob\/master\/www\/src\/utils\/typography.js\" target=\"_blank\" rel=\"noreferrer noopener\">\u043f\u0440\u0438\u043a\u043b\u0430\u0434<\/a>&nbsp;\u043a\u043e\u043d\u0444\u0456\u0433\u0443\u0440\u0430\u0446\u0456\u0457 \u043e\u0444\u0456\u0446\u0456\u0439\u043d\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0443 Gatsby).<\/em><\/p>\n\n\n\n<p><em>\/gatsby-config.js<\/em><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">module.exports = {\n  plugins: [\n    {\n      resolve: `gatsby-source-filesystem`,\n      options: {\n        name: `images`,\n        path: `${__dirname}\/src\/images\/`\n      }\n    },\n    {\n      resolve: `gatsby-plugin-typography`,\n      options: {\n        pathToConfigModule: `src\/utils\/typography`\n      }\n    },\n    `gatsby-plugin-sass`,\n    `gatsby-plugin-styled-components`\n  ]\n};<\/pre>\n\n\n\n<p>\u0406&nbsp;\u0432&nbsp;\u0437\u0430\u043b\u0435\u0436\u043d\u043e\u0441\u0442\u0456 \u0432\u0456\u0434 \u043e\u0431\u0440\u0430\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u0441\u0435\u0442\u0443 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0438\u0439 \u0441\u0442\u0438\u043b\u044c \u0441\u0430\u0439\u0442\u0443 \u0431\u0443\u0434\u0435 \u0437\u043c\u0456\u043d\u0435\u043d\u0438\u0439. \u042f\u043a\u0438\u043c \u043f\u0456\u0434\u0445\u043e\u0434\u043e\u043c \u043d\u0430\u043b\u0430\u0448\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0456 \u0441\u0442\u0438\u043b\u0456, \u0432\u0438\u0440\u0456\u0448\u0443\u0439\u0442\u0435 \u0441\u0430\u043c\u0456, \u0431\u043e&nbsp;\u0432\u0456\u0434\u043c\u0456\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u0437&nbsp;\u0442\u0435\u0445\u043d\u0456\u0447\u043d\u043e\u0457 \u0442\u043e\u0447\u043a\u0438 \u0437\u043e\u0440\u0443 \u043d\u0435\u043c\u0430\u0454 \u0456&nbsp;\u0442\u043e\u043c\u0443 \u0446\u0435&nbsp;\u043f\u0438\u0442\u0430\u043d\u043d\u044f \u0441\u043c\u0430\u043a\u0443. \u0410&nbsp;\u043c\u0438&nbsp;\u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e&nbsp;\u0441\u0442\u0438\u043b\u0456\u0437\u0430\u0446\u0456\u0457 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432, \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0447\u0438&nbsp;<strong>styled-components<\/strong>.<\/p>\n\n\n\n<p>\u0414\u043e\u0434\u0430\u043c\u043e \u0444\u0430\u0439\u043b \u0437&nbsp;\u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0438\u043c\u0438 \u0437\u043c\u0456\u043d\u043d\u0438\u043c\u0438&nbsp;<em>\/src\/utils\/vars.js<\/em><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">export const colors = {\n  main: `#663399`,\n  second: `#fbfafc`,\n  main50: `rgba(102, 51, 153, 0.5)`,\n  second50: `rgba(251, 250, 252, 0.5)`,\n  textMain: `#000000`,\n  textSecond: `#ffffff`,\n  textBody: `#222222`\n};<\/pre>\n\n\n\n<p>\/src\/components\/header.js\/src\/components\/sidebar.js<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/s.dou.ua\/storage-files\/image3_8yYiOgZ.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p>\u0412\u0436\u0435 \u0456\u0441\u043d\u0443\u044e\u0447\u0456 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0438 \u0441\u0442\u0438\u043b\u0456\u0437\u043e\u0432\u0430\u043d\u0456, \u0456&nbsp;\u043d\u0430\u0441\u0442\u0430\u0432 \u0447\u0430\u0441 \u0437\u0432\u2019\u044f\u0437\u0430\u0442\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0437&nbsp;<a href=\"https:\/\/www.contentful.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Contentful<\/a>, \u043f\u0456\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u0438 Markdown-\u043f\u043b\u0430\u0433\u0456\u043d \u0456&nbsp;\u0437\u0433\u0435\u043d\u0435\u0440\u0443\u0432\u0430\u0442\u0438 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438, \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0447\u0438&nbsp;<strong>createPages API<\/strong>.<\/p>\n\n\n\n<p><em>\u0414\u0435\u0442\u0430\u043b\u044c\u043d\u0456\u0448\u0435 \u043f\u0440\u043e&nbsp;\u0442\u0435, \u044f\u043a&nbsp;\u0437\u0432\u2019\u044f\u0437\u0430\u0442\u0438 Gatsby \u0456&nbsp;Contentful, \u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0432&nbsp;<a href=\"https:\/\/dou.ua\/lenta\/articles\/creating-blog-with-jamstack\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u043f\u043e\u043f\u0435\u0440\u0435\u0434\u043d\u0456\u0439 \u0441\u0442\u0430\u0442\u0442\u0456<\/a>.<\/em>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043c\u043e\u0457\u0445 \u0434\u0430\u043d\u0438\u0445 \u0437&nbsp;Contentful<\/p>\n\n\n\n<p>\u0412\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044f \u043f\u0430\u043a\u0435\u0442\u0456\u0432:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">yarn add dotenv gatsby-source-contentful gatsby-transformer-remark<\/pre>\n\n\n\n<p><em>\/gatsby-config.js<\/em><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">if (process.env.NODE_ENV === \"development\") {\n  require(\"dotenv\").config();\n}\n\nmodule.exports = {\n  plugins: [\n    `gatsby-transformer-remark`,\n    {\n      resolve: `gatsby-source-filesystem`,\n      options: {\n        name: `images`,\n        path: `${__dirname}\/src\/images\/`,\n      }\n    },\n    {\n      resolve: `gatsby-plugin-typography`,\n      options: {\n        pathToConfigModule: `src\/utils\/typography`,\n      },\n    },\n    {\n      resolve: `gatsby-source-contentful`,\n      options: {\n        spaceId: process.env.CONTENTFUL_SPACE_ID,\n        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,\n      },\n    },\n    `gatsby-plugin-sass`,\n    `gatsby-plugin-styled-components`,\n  ],\n}<\/pre>\n\n\n\n<p>\u0412\u0438\u0434\u0430\u043b\u044f\u0454\u043c\u043e \u043f\u0430\u043f\u043a\u0443&nbsp;<em>\/src\/pages<\/em>&nbsp;\u0437&nbsp;\u0443\u0441\u0456\u043c\u0430 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u0432\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0456 \u0456&nbsp;\u0441\u0442\u0432\u043e\u0440\u044e\u0454\u043c\u043e \u043d\u043e\u0432\u0438\u0439 \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u043a\u0435\u0440\u0443\u0432\u0430\u043d\u043d\u044f \u0432\u0443\u0437\u043b\u0430\u043c\u0438 \u0432&nbsp;Gatsby:<\/p>\n\n\n\n<p><em>\/gatsby-node.js<\/em><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">const path = require(`path`);\n\n<em>\/**\n * \u0415\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u0432\u0430\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0456\u044f, \u044f\u043a\u0430 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0448\u0435 \u0456\u0441\u043d\u0443\u044e\u0447\u0443 \u0437\u0430 \u0437\u0430\u043c\u043e\u0432\u0447\u0443\u0432\u0430\u043d\u043d\u044f\u043c,\n * \u0442\u0430 \u0431\u0443\u0434\u0435 \u0432\u0438\u043a\u043b\u0438\u043a\u0430\u043d\u0430 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0456\u0457 \u0441\u0442\u043e\u0440\u0456\u043d\u043e\u043a\n *\/<\/em>\nexports.createPages = ({ graphql, actions }) =&gt; {\n  <em>\/**\n   * \u041e\u0442\u0440\u0438\u043c\u0443\u0454\u043c\u043e \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438 \u0437 \u0435\u043a\u0448\u0435\u043d\u0456\u0432,\n   * \u0449\u043e\u0431 \u0443\u043d\u0438\u043a\u043d\u0443\u0442\u0438 \u0437\u0430\u0439\u0432\u0438\u0445 \u0456\u043c\u043f\u043e\u0440\u0442\u0456\u0432 \u0456 \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u0442\u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\n   * \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438 \u0456 \u0444\u0443\u043d\u043a\u0446\u0456\u0457\n   *\/<\/em>\n  const { createPage } = actions;\n  return graphql(`\n    {\n      allContentfulArticle {\n        edges {\n          node {\n            title\n            link\n            content {\n              childMarkdownRemark {\n                html\n              }\n            }\n          }\n        }\n      }\n    }\n  `).then(({ data: { allContentfulArticle: { edges } } }) =&gt; {\n    <em>\/**\n     * \u0414\u043b\u044f \u043a\u043e\u0436\u043d\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0437 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u0456\n     * \u0432\u0438\u043a\u043b\u0438\u043a\u0430\u0454\u043c\u043e createPage () \u0444\u0443\u043d\u043a\u0446\u0456\u044e \u0456 \u043f\u0435\u0440\u0435\u0434\u0430\u0454\u043c\u043e\n     * \u0432\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0443 \u0434\u0430\u043d\u0456 \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443\n     *\/<\/em>\n    edges.forEach(({ node }) =&gt; {\n      createPage({\n        path: node.link,\n        component: path.resolve(`.\/src\/templates\/index.js`),\n        context: {\n          slug: node.link\n        }\n      });\n    });\n  });\n};<\/pre>\n\n\n\n<p><em>\u0414\u0435\u0442\u0430\u043b\u044c\u043d\u0456\u0448\u0435 \u043f\u0440\u043e&nbsp;<a href=\"https:\/\/www.gatsbyjs.org\/docs\/node-apis\/\" target=\"_blank\" rel=\"noreferrer noopener\">gatsby-node.js<\/a>.<\/em><\/p>\n\n\n\n<p>\u0421\u0442\u0432\u043e\u0440\u044e\u0454\u043c\u043e template-\u0444\u0430\u0439\u043b, \u044f\u043a\u0438\u0439 \u0431\u0443\u0434\u0435 \u043e\u0441\u043d\u043e\u0432\u043e\u044e \u0434\u043b\u044f \u0441\u0442\u043e\u0440\u0456\u043d\u043e\u043a, \u044f\u043a\u0456 \u0433\u0435\u043d\u0435\u0440\u0443\u044e\u0442\u044c\u0441\u044f<em>\/src\/templates\/index.js<\/em><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import React from \"react\";\nimport { graphql } from \"gatsby\";\nimport Layout from \"..\/components\/layout\";\n\nexport default ({\n  data: {\n    allContentfulArticle: {\n      edges: [\n        {\n          node: {\n            content: {\n              childMarkdownRemark: { html }\n            }\n          }\n        }\n      ]\n    }\n  }\n}) =&gt; {\n  return (\n    &lt;Layout&gt;\n      &lt;div dangerouslySetInnerHTML={{ __html: html }} \/&gt;\n    &lt;\/Layout&gt;\n  );\n};\n\nexport const query = graphql`\n  query($slug: String!) {\n    allContentfulArticle(filter: { link: { eq: $slug } }) {\n      edges {\n        node {\n          title\n          link\n          content {\n            childMarkdownRemark {\n              html\n            }\n          }\n        }\n      }\n    }\n  }\n`;<\/pre>\n\n\n\n<p><em>\u0427\u043e\u043c\u0443 \u0442\u0443\u0442 \u043d\u0435&nbsp;\u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454\u0442\u044c\u0441\u044f&nbsp;<code>&lt;StaticQuery \/&gt;<\/code>&nbsp;\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442? \u0412\u0441\u044f \u0441\u043f\u0440\u0430\u0432\u0430 \u0432&nbsp;\u0442\u043e\u043c\u0443, \u0449\u043e&nbsp;\u0432\u0456\u043d \u043d\u0435&nbsp;\u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0454 \u0437\u043c\u0456\u043d\u043d\u0456 \u0434\u043b\u044f \u043f\u043e\u0431\u0443\u0434\u043e\u0432\u0438 \u0437\u0430\u043f\u0438\u0442\u0443, \u0430&nbsp;\u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0437\u043c\u0456\u043d\u043d\u0443&nbsp;<code>$slug<\/code>&nbsp;\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438.<\/em>\u041e\u043d\u043e\u0432\u043b\u044e\u0454\u043c\u043e \u043b\u043e\u0433\u0456\u043a\u0443 \u0432&nbsp;\u043d\u0430\u0432\u0456\u0433\u0430\u0446\u0456\u0439\u043d\u0456\u0439 \u043f\u0430\u043d\u0435\u043b\u0456<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/s.dou.ua\/storage-files\/image7_BnTxonQ.gif\" alt=\"\"\/><\/figure>\n\n\n\n<h2 id=\"six\">SEO-\u043e\u043f\u0442\u0438\u043c\u0456\u0437\u0430\u0446\u0456\u044f \u0437&nbsp;\u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f\u043c react-helmet<\/h2>\n\n\n\n<p>\u0417&nbsp;\u0442\u0435\u0445\u043d\u0456\u0447\u043d\u043e\u0457 \u0442\u043e\u0447\u043a\u0438 \u0437\u043e\u0440\u0443 \u0441\u0430\u0439\u0442 \u043c\u043e\u0436\u043d\u0430 \u0432\u0432\u0430\u0436\u0430\u0442\u0438 \u0433\u043e\u0442\u043e\u0432\u0438\u043c, \u0442\u043e\u043c\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u0430\u0446\u044e\u0454\u043c\u043e \u0437&nbsp;\u0439\u043e\u0433\u043e \u043c\u0435\u0442\u0430-\u0434\u0430\u043d\u0438\u043c\u0438. \u0414\u043b\u044f \u0446\u044c\u043e\u0433\u043e \u043d\u0430\u043c \u0437\u043d\u0430\u0434\u043e\u0431\u043b\u044f\u0442\u044c\u0441\u044f \u0442\u0430\u043a\u0456 \u043f\u043b\u0430\u0433\u0456\u043d\u0438:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">yarn add gatsby-plugin-react-helmet react-helmet<\/pre>\n\n\n\n<p><em><a href=\"https:\/\/github.com\/nfl\/react-helmet\" target=\"_blank\" rel=\"noreferrer noopener\">react-helmet<\/a>&nbsp;\u0433\u0435\u043d\u0435\u0440\u0443\u0454&nbsp;<code>&lt;head&gt; ... &lt;\/ head&gt;<\/code>&nbsp;\u0434\u043b\u044f HTML \u0441\u0442\u043e\u0440\u0456\u043d\u043e\u043a \u0456&nbsp;\u0432&nbsp;\u0437\u0432\u2019\u044f\u0437\u0446\u0456 \u0437&nbsp;Gatsby \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c \u0454&nbsp;\u043f\u043e\u0442\u0443\u0436\u043d\u0438\u043c \u0456&nbsp;\u0437\u0440\u0443\u0447\u043d\u0438\u043c \u0456\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0434\u043b\u044f \u0440\u043e\u0431\u043e\u0442\u0438 \u0437&nbsp;SEO.<\/em><\/p>\n\n\n\n<p><em>\/src\/templates\/index.js<\/em><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import React from \"react\";\nimport { graphql } from \"gatsby\";\nimport { Helmet } from \"react-helmet\";\n\nimport Layout from \"..\/components\/layout\";\n\nexport default ({\n  data: {\n    allContentfulArticle: {\n      edges: [\n        {\n          node: {\n            title,\n            content: {\n              childMarkdownRemark: { html }\n            }\n          }\n        }\n      ]\n    }\n  }\n}) =&gt; {\n  return (\n    &lt;Layout&gt;\n      &lt;Helmet&gt;\n        &lt;meta charSet=\"utf-8\" \/&gt;\n        &lt;title&gt;{title}&lt;\/title&gt;\n      &lt;\/Helmet&gt;\n      &lt;div dangerouslySetInnerHTML={{ __html: html }} \/&gt;\n    &lt;\/Layout&gt;\n  );\n};\n\nexport const query = graphql`\n  query($slug: String!) {\n    allContentfulArticle(filter: { link: { eq: $slug } }) {\n      edges {\n        node {\n          title\n          link\n          content {\n            childMarkdownRemark {\n              html\n            }\n          }\n        }\n      }\n    }\n  }\n`;<\/pre>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440&nbsp;<code>title<\/code>&nbsp;\u0441\u0430\u0439\u0442\u0443 \u0431\u0443\u0434\u0435 \u0437\u0430\u0432\u0436\u0434\u0438 \u0437\u0431\u0456\u0433\u0430\u0442\u0438\u0441\u044f \u0437&nbsp;\u043d\u0430\u0437\u0432\u043e\u044e \u0441\u0442\u0430\u0442\u0442\u0456, \u0449\u043e&nbsp;\u0431\u0443\u0434\u0435 \u0456\u0441\u0442\u043e\u0442\u043d\u043e \u0432\u043f\u043b\u0438\u0432\u0430\u0442\u0438 \u043d\u0430&nbsp;\u0432\u0438\u0434\u0430\u0447\u0443 \u0441\u0430\u0439\u0442\u0443 \u0432&nbsp;\u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u0445 \u043f\u043e\u0448\u0443\u043a\u0443, \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u0437&nbsp;\u0446\u044c\u043e\u0433\u043e \u043f\u0438\u0442\u0430\u043d\u043d\u044f. \u0421\u044e\u0434\u0438&nbsp;\u0436 \u043c\u043e\u0436\u043d\u0430 \u043b\u0435\u0433\u043a\u043e \u0434\u043e\u0434\u0430\u0442\u0438&nbsp;<code>&lt;meta name=\"description\" content=\"\u041e\u043f\u0438\u0441 \u0441\u0442\u0430\u0442\u0442\u0456\"&gt;<\/code>&nbsp;\u0437 \u043e\u043f\u0438\u0441\u043e\u043c \u043a\u043e\u0436\u043d\u043e\u0457 \u0441\u0442\u0430\u0442\u0442\u0456 \u043e\u043a\u0440\u0435\u043c\u043e, \u043d\u0430\u0434\u0430\u044e\u0447\u0438 \u0446\u0438\u043c \u043c\u043e\u0436\u043b\u0438\u0432\u0456\u0441\u0442\u044c \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0435\u0432\u0456, \u0449\u0435&nbsp;\u043d\u0430&nbsp;\u0441\u0442\u043e\u0440\u0456\u043d\u0446\u0456 \u043f\u043e\u0448\u0443\u043a\u0443, \u0437\u0440\u043e\u0437\u0443\u043c\u0456\u0442\u0438, \u043f\u0440\u043e \u0449\u043e&nbsp;\u0439\u0434\u0435 \u043c\u043e\u0432\u0430 \u0432&nbsp;\u0441\u0442\u0430\u0442\u0442\u0456. \u0406&nbsp;\u0432\u0437\u0430\u0433\u0430\u043b\u0456 \u0432\u0441\u0456 \u043c\u043e\u0436\u043b\u0438\u0432\u043e\u0441\u0442\u0456 SEO \u0442\u0435\u043f\u0435\u0440 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0456, \u0456&nbsp;\u043d\u0438\u043c\u0438 \u043c\u043e\u0436\u043d\u0430 \u043a\u0435\u0440\u0443\u0432\u0430\u0442\u0438 \u0437&nbsp;\u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0456\u0441\u0446\u044f.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/s.dou.ua\/storage-files\/aVsG.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 id=\"seven\">\u041d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f PWA<\/h2>\n\n\n\n<p>Gatsby \u0440\u043e\u0437\u0440\u043e\u0431\u043b\u0435\u043d\u0438\u0439, \u0449\u043e\u0431 \u0437\u0430\u0431\u0435\u0437\u043f\u0435\u0447\u0438\u0442\u0438 \u043f\u0435\u0440\u0448\u043e\u043a\u043b\u0430\u0441\u043d\u0443 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0438\u0432\u043d\u0456\u0441\u0442\u044c \u00ab\u0437&nbsp;\u043a\u043e\u0440\u043e\u0431\u043a\u0438\u00bb. \u0412\u0456\u043d \u0431\u0435\u0440\u0435 \u043d\u0430&nbsp;\u0441\u0435\u0431\u0435 \u043f\u0438\u0442\u0430\u043d\u043d\u044f \u0449\u043e\u0434\u043e \u0440\u043e\u0437\u0434\u0456\u043b\u0435\u043d\u043d\u044f \u0456&nbsp;\u043c\u0456\u043d\u0456\u043c\u0456\u0437\u0430\u0446\u0456\u0457 \u043a\u043e\u0434\u0443, \u0430&nbsp;\u0442\u0430\u043a\u043e\u0436 \u043e\u043f\u0442\u0438\u043c\u0456\u0437\u0430\u0446\u0456\u0457 \u0443&nbsp;\u0432\u0438\u0433\u043b\u044f\u0434\u0456 \u043f\u043e\u043f\u0435\u0440\u0435\u0434\u043d\u044c\u043e\u0433\u043e \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0435\u043d\u043d\u044f \u0443&nbsp;\u0444\u043e\u043d\u043e\u0432\u043e\u043c\u0443 \u0440\u0435\u0436\u0438\u043c\u0456, \u043e\u0431\u0440\u043e\u0431\u043a\u0438 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u044c \u0456&nbsp;\u0456\u043d. \u041e\u0442\u0436\u0435, \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u043d\u0438\u0439 \u0432\u0430\u043c\u0438 \u0441\u0430\u0439\u0442 \u043c\u0430\u0454 \u0432\u0438\u0441\u043e\u043a\u0443 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0438\u0432\u043d\u0456\u0441\u0442\u044c \u0431\u0435\u0437 \u0431\u0443\u0434\u044c-\u044f\u043a\u0438\u0445 \u0434\u043e\u0434\u0430\u0442\u043a\u043e\u0432\u0438\u0445 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c. \u0426\u0456&nbsp;\u0444\u0443\u043d\u043a\u0446\u0456\u0457 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0456 \u0454&nbsp;\u0432\u0430\u0436\u043b\u0438\u0432\u043e\u044e \u0447\u0430\u0441\u0442\u0438\u043d\u043e\u044e \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0438 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u0456\u0434\u0445\u043e\u0434\u0443 \u0434\u043e&nbsp;\u0432\u0435\u0431-\u0434\u043e\u0434\u0430\u0442\u043a\u0456\u0432.<\/p>\n\n\n\n<p>\u0410\u043b\u0435 \u043a\u0440\u0456\u043c \u0443\u0441\u044c\u043e\u0433\u043e, \u043f\u0435\u0440\u0435\u0440\u0430\u0445\u043e\u0432\u0430\u043d\u043e\u0433\u043e \u0432\u0438\u0449\u0435, \u0456\u0441\u043d\u0443\u044e\u0442\u044c \u0442\u0440\u0438 \u0431\u0430\u0437\u043e\u0432\u0456 \u043a\u0440\u0438\u0442\u0435\u0440\u0456\u0457 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u0443, \u044f\u043a\u0456 \u0432\u0438\u0437\u043d\u0430\u0447\u0430\u044e\u0442\u044c \u0439\u043e\u0433\u043e \u044f\u043a&nbsp;<a href=\"https:\/\/developers.google.com\/web\/progressive-web-apps\/\" target=\"_blank\" rel=\"noreferrer noopener\">PWA<\/a>:<\/p>\n\n\n\n<ul><li>https-\u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b;<\/li><li>\u043d\u0430\u044f\u0432\u043d\u0456\u0441\u0442\u044c&nbsp;<a href=\"https:\/\/www.w3.org\/TR\/appmanifest\/\" target=\"_blank\" rel=\"noreferrer noopener\">manifest.json;<\/a><\/li><li>\u043e\u0444\u043b\u0430\u0439\u043d-\u0434\u043e\u0441\u0442\u0443\u043f \u0434\u043e&nbsp;\u0441\u0430\u0439\u0442\u0443 \u0437\u0430&nbsp;\u0440\u0430\u0445\u0443\u043d\u043e\u043a&nbsp;<a href=\"https:\/\/developers.google.com\/web\/fundamentals\/primers\/service-workers\/\" target=\"_blank\" rel=\"noreferrer noopener\">service workers.<\/a><\/li><\/ul>\n\n\n\n<p>\u041f\u0435\u0440\u0448\u0438\u0439 \u043f\u0443\u043d\u043a\u0442 \u043d\u0435&nbsp;\u043c\u043e\u0436\u0435 \u0431\u0443\u0442\u0438 \u0432\u0438\u0440\u0456\u0448\u0435\u043d\u0438\u0439 \u0441\u0438\u043b\u0430\u043c\u0438 Gatsby, \u043e\u0441\u043a\u0456\u043b\u044c\u043a\u0438&nbsp;<em>\u0434\u043e\u043c\u0435\u043d<\/em>,&nbsp;<em>\u0445\u043e\u0441\u0442\u0438\u043d\u0433<\/em>&nbsp;\u0456&nbsp;<em>\u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b&nbsp;\u2014<\/em>&nbsp;\u0446\u0435&nbsp;\u043f\u0438\u0442\u0430\u043d\u043d\u044f \u0434\u0435\u043f\u043b\u043e\u0439\u043c\u0435\u043d\u0442\u0443, \u0456&nbsp;\u043d\u0456\u044f\u043a \u043d\u0435&nbsp;\u0440\u043e\u0437\u0440\u043e\u0431\u043a\u0438. \u0410\u043b\u0435 \u043c\u043e\u0436\u0443 \u043f\u043e\u0440\u0430\u0434\u0438\u0442\u0438&nbsp;<a href=\"https:\/\/www.netlify.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Netlify<\/a>, \u044f\u043a\u0438\u0439 \u043b\u0435\u0433\u043a\u043e \u0432\u0438\u0440\u0456\u0448\u0443\u0454 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0437&nbsp;https.<\/p>\n\n\n\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e&nbsp;\u0456\u043d\u0448\u0438\u0445 \u043f\u0443\u043d\u043a\u0442\u0456\u0432. \u0414\u043b\u044f \u0446\u044c\u043e\u0433\u043e \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u043e \u0434\u0432\u0430 \u043f\u043b\u0430\u0433\u0456\u043d\u0438:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">yarn add gatsby-plugin-manifest gatsby-plugin-offline<\/pre>\n\n\n\n<p>\u0456&nbsp;\u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0454\u043c\u043e \u0457\u0445&nbsp;<em>\/src\/gatsby-config.js<\/em><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">if (process.env.NODE_ENV === \"development\") {\n  require(\"dotenv\").config();\n}\n\nmodule.exports = {\n  plugins: [\n    {\n      resolve: `gatsby-plugin-manifest`,\n      options: {\n        name: `GatsbyJS translated tutorial`,\n        short_name: `GatsbyJS tutorial`,\n        start_url: `\/`,\n        background_color: `#f7f0eb`,\n        theme_color: `#a2466c`,\n        display: `standalone`,\n        icon: `public\/favicon.ico`,\n        include_favicon: true\n      }\n    },\n    `gatsby-plugin-offline`,\n    `gatsby-transformer-remark`,\n    {\n      resolve: `gatsby-source-filesystem`,\n      options: {\n        name: `images`,\n        path: `${__dirname}\/src\/images\/`\n      }\n    },\n    {\n      resolve: `gatsby-plugin-typography`,\n      options: {\n        pathToConfigModule: `src\/utils\/typography`\n      }\n    },\n    {\n      resolve: `gatsby-source-contentful`,\n      options: {\n        spaceId: process.env.CONTENTFUL_SPACE_ID,\n        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN\n      }\n    },\n    `gatsby-plugin-sass`,\n    `gatsby-plugin-styled-components`,\n    `gatsby-plugin-react-helmet`\n  ]\n};<\/pre>\n\n\n\n<p>\u0412\u0438&nbsp;\u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u0442\u0438 \u0441\u0432\u0456\u0439 \u043c\u0430\u043d\u0456\u0444\u0435\u0441\u0442, \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0447\u0438&nbsp;<a href=\"https:\/\/www.w3.org\/TR\/appmanifest\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0456\u044e<\/a>, \u0430&nbsp;\u0442\u0430\u043a\u043e\u0436 \u043a\u0430\u0441\u0442\u043e\u043c\u0456\u0437\u0443\u0432\u0430\u0442\u0438 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0456\u044e service-workers,&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/gatsby-plugin-offline#overriding-options\" target=\"_blank\" rel=\"noreferrer noopener\">\u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0430\u0432\u0448\u0438 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u043f\u043b\u0430\u0433\u0456\u043d\u0443<\/a>.<\/p>\n\n\n\n<p>\u041d\u0456\u044f\u043a\u0438\u0445 \u0437\u043c\u0456\u043d \u0432&nbsp;\u0440\u0435\u0436\u0438\u043c\u0456 \u0440\u043e\u0437\u0440\u043e\u0431\u043a\u0438 \u0432\u0438&nbsp;\u043d\u0435&nbsp;\u043f\u043e\u043c\u0456\u0442\u0438\u0442\u0435, \u0430\u043b\u0435 \u0441\u0430\u0439\u0442 \u0432\u0436\u0435 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u0430\u0454 \u043e\u0441\u0442\u0430\u043d\u043d\u0456\u043c \u0432\u0438\u043c\u043e\u0433\u0430\u043c \u0441\u0432\u0456\u0442\u0443 web. \u0406&nbsp;\u043a\u043e\u043b\u0438 \u0432\u0456\u043d \u0431\u0443\u0434\u0435 \u0440\u043e\u0437\u043c\u0456\u0449\u0435\u043d\u0438\u0439 \u043d\u0430&nbsp;https:\/\/ \u0434\u043e\u043c\u0435\u043d\u0456, \u0439\u043e\u043c\u0443 \u043d\u0435&nbsp;\u0431\u0443\u0434\u0435 \u0440\u0456\u0432\u043d\u0438\u0445.<\/p>\n\n\n\n<h2>\u0412\u0438\u0441\u043d\u043e\u0432\u043e\u043a<\/h2>\n\n\n\n<p>\u041a\u0456\u043b\u044c\u043a\u0430 \u0440\u043e\u043a\u0456\u0432 \u0442\u043e\u043c\u0443, \u043a\u043e\u043b\u0438 \u044f&nbsp;\u0432\u043f\u0435\u0440\u0448\u0435 \u0437\u0456\u0442\u043a\u043d\u0443\u0432\u0441\u044f \u0437&nbsp;\u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c\u0438 \u0432\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044f \u0432&nbsp;\u0456\u043d\u0442\u0435\u0440\u043d\u0435\u0442 React-\u0434\u043e\u0434\u0430\u0442\u043a\u0443, \u0439\u043e\u0433\u043e \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0438 \u0456&nbsp;\u043e\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443, \u044f&nbsp;\u0456&nbsp;\u043d\u0435&nbsp;\u043c\u0456\u0433 \u0443\u044f\u0432\u0438\u0442\u0438, \u0449\u043e&nbsp;\u043d\u0430&nbsp;\u0440\u0438\u043d\u043a\u0443 \u0432\u0436\u0435 \u0456\u0441\u043d\u0443\u0432\u0430\u0432 JAM-stack \u043f\u0456\u0434\u0445\u0456\u0434, \u044f\u043a\u0438\u0439 \u0441\u043f\u0440\u043e\u0449\u0443\u0454 \u0432\u0441\u0456 \u0446\u0456&nbsp;\u043f\u0440\u043e\u0446\u0435\u0441\u0438. \u0406&nbsp;\u0437\u0430\u0440\u0430\u0437 \u044f&nbsp;\u043d\u0435&nbsp;\u043f\u0435\u0440\u0435\u0441\u0442\u0430\u044e \u0434\u0438\u0432\u0443\u0432\u0430\u0442\u0438\u0441\u044f \u0439\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0456. Gatsby \u0432\u0438\u0440\u0456\u0448\u0443\u0454 \u0431\u0456\u043b\u044c\u0448\u0456\u0441\u0442\u044c \u043f\u0438\u0442\u0430\u043d\u044c, \u044f\u043a\u0456 \u0432\u043f\u043b\u0438\u0432\u0430\u044e\u0442\u044c \u043d\u0430&nbsp;\u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0438\u0432\u043d\u0456\u0441\u0442\u044c \u0441\u0430\u0439\u0442\u0443 \u043f\u0440\u043e\u0441\u0442\u043e \u00ab\u0437&nbsp;\u043a\u043e\u0440\u043e\u0431\u043a\u0438\u00bb. \u0410&nbsp;\u044f\u043a\u0449\u043e \u0449\u0435&nbsp;\u0442\u0440\u043e\u0445\u0438 \u0440\u043e\u0437\u0456\u0431\u0440\u0430\u0432\u0448\u0438\u0441\u044c \u0432&nbsp;\u0442\u043e\u043d\u043a\u043e\u0449\u0430\u0445, \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u0442\u0438 \u0439\u043e\u0433\u043e \u043f\u0456\u0434 \u0441\u0432\u043e\u0457 \u043f\u043e\u0442\u0440\u0435\u0431\u0438, \u0442\u043e&nbsp;\u043c\u043e\u0436\u043d\u0430 \u043e\u0442\u0440\u0438\u043c\u0430\u0442\u0438 100% \u043f\u043e\u043a\u0430\u0437\u043d\u0438\u043a\u0438 \u0437\u0430&nbsp;\u0432\u0441\u0456\u043c\u0430 \u043f\u0443\u043d\u043a\u0442\u0430\u043c\u0438 \u0432&nbsp;<a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\/\" target=\"_blank\" rel=\"noreferrer noopener\">Lighthouse<\/a>, \u0447\u0438\u043c \u0441\u0443\u0442\u0442\u0454\u0432\u043e \u0432\u043f\u043b\u0438\u043d\u0443\u0442\u0438 \u043d\u0430&nbsp;\u0432\u0438\u0434\u0430\u0447\u0443 \u0441\u0430\u0439\u0442\u0443 \u0432&nbsp;\u043f\u043e\u0448\u0443\u043a\u043e\u0432\u0438\u0445 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445 (\u043f\u0440\u0438\u043d\u0430\u0439\u043c\u043d\u0456 \u0432&nbsp;Google).<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/alexandrtovmach\/gatsby-tutorial\" target=\"_blank\" rel=\"noreferrer noopener\">\u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0456\u0439 \u0437&nbsp;\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c<\/a><\/p>\n\n\n\n<h4>\u041d\u0430\u043e\u0441\u0442\u0430\u043d\u043e\u043a<\/h4>\n\n\n\n<p>\u042f\u043a&nbsp;\u0432\u0438&nbsp;\u043c\u043e\u0433\u043b\u0438 \u043f\u043e\u043c\u0456\u0442\u0438\u0442\u0438, \u0440\u043e\u0437\u0433\u043b\u044f\u043d\u0443\u0442\u0438\u0439 \u0432&nbsp;\u0441\u0442\u0430\u0442\u0442\u0456 \u043f\u0440\u043e\u0435\u043a\u0442 \u043a\u043e\u043f\u0456\u044e\u0454 \u043e\u0441\u043d\u043e\u0432\u043d\u0438\u0439 \u0441\u0430\u0439\u0442 \u0437&nbsp;\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0456\u0454\u044e Gatsby.js. \u0426\u0435&nbsp;\u043d\u0435\u0441\u043f\u0440\u043e\u0441\u0442\u0430, \u0442\u043e\u043c\u0443 \u0449\u043e&nbsp;\u044f&nbsp;\u0437\u0430\u043c\u0430\u0445\u043d\u0443\u0432\u0441\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u0430\u0441\u0442\u0438 \u0445\u043e\u0447\u0430 \u0431\u0438&nbsp;\u0432\u0441\u0442\u0443\u043f\u043d\u0438\u0439 \u0442\u0443\u0442\u043e\u0440\u0456\u0430\u043b \u0440\u043e\u0441\u0456\u0439\u0441\u044c\u043a\u043e\u044e \u0442\u0430&nbsp;\u0443\u043a\u0440\u0430\u0457\u043d\u0441\u044c\u043a\u043e\u044e \u043c\u043e\u0432\u0430\u043c\u0438, \u0449\u043e\u0431 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u0438\u0437\u0443\u0432\u0430\u0442\u0438 \u0446\u0435\u0439 \u0441\u0442\u0435\u043a \u0432&nbsp;\u0423\u043a\u0440\u0430\u0457\u043d\u0456 \u0442\u0430&nbsp;\u0421\u041d\u0414. \u041f\u043e\u0434\u0438\u0432\u0438\u0442\u0438\u0441\u044f \u043d\u0430&nbsp;\u043f\u043e\u0442\u043e\u0447\u043d\u0443 \u0432\u0435\u0440\u0441\u0456\u044e&nbsp;<a href=\"https:\/\/gatsbyjs-tutorial.alexandrtovmach.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u043c\u043e\u0436\u043d\u0430 \u0442\u0443\u0442<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u042f\u043a&nbsp;\u0432\u0456\u0434\u043e\u043c\u043e, \u043d\u0430&nbsp;\u043e\u0434\u043d\u0438\u0445 \u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u0430\u0445 \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435&nbsp;\u0437\u0430\u0457\u0434\u0435\u0448, \u0442\u043e\u043c\u0443 \u0434\u043e\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043b\u0456\u0437\u0442\u0438 \u0432\u0433\u043b\u0438\u0431 \u0431\u0443\u0434\u044c-\u044f\u043a\u043e\u0457 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0456\u0457, \u0449\u043e\u0431 \u043d\u0430\u0432\u0447\u0438\u0442\u0438\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u0438 \u0449\u043e\u0441\u044c \u0432\u0430\u0440\u0442\u0456\u0441\u043d\u0435. \u0423&nbsp;\u0446\u0456\u0439 \u0441\u0442\u0430\u0442\u0442\u0456 \u0440\u043e\u0437\u0433\u043b\u044f\u043d\u0435\u043c\u043e \u0434\u0435\u0442\u0430\u043b\u0456 Gatsby.js, \u0437\u043d\u0430\u043d\u043d\u044f \u044f\u043a\u0438\u0445 \u0434\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u0432\u0430\u043c \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 \u0456&nbsp;\u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0432\u0430\u0442\u0438 \u0441\u043a\u043b\u0430\u0434\u043d\u0456 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0438 \u0456&nbsp;\u0431\u043b\u043e\u0433\u0438.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[131],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1694"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1694"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1694\/revisions"}],"predecessor-version":[{"id":1695,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1694\/revisions\/1695"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1694"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1694"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}