{"id":102843,"date":"2025-03-23T20:25:49","date_gmt":"2025-03-23T15:55:49","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/11ty-static-site-generator-tutorial-11ty-v3-15g3\/"},"modified":"2025-03-23T20:25:49","modified_gmt":"2025-03-23T15:55:49","slug":"11ty-static-site-generator-tutorial-11ty-v3-15g3","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/11ty-static-site-generator-tutorial-11ty-v3-15g3\/","title":{"rendered":"\u0698\u0646\u0631\u0627\u062a\u0648\u0631 \u0633\u0627\u06cc\u062a \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 &#8211; \u0622\u0645\u0648\u0632\u0634 11ty v3"},"content":{"rendered":"<div data-article-id=\"2351396\" id=\"article-body\">\n<p>\u0645\u0646 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u0631\u0627\u0647\u06cc \u0633\u0631\u06cc\u0639\u062a\u0631 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0633\u0627\u06cc\u062a \u0647\u0627\u06cc \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u0628\u0648\u062f\u0645. \u0645\u0646 \u0628\u0647 Nuxt \u0648 \u0633\u0627\u06cc\u0631 \u0686\u0627\u0631\u0686\u0648\u0628 \u0647\u0627\u06cc JS \u0646\u06af\u0627\u0647 \u06a9\u0631\u062f\u0647 \u0627\u0645 &#8211; \u0647\u0645\u0647 \u0622\u0646\u0647\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0632\u06cc\u0627\u062f\u06cc \u0631\u0627 \u062f\u0631 \u0635\u0627\u062f\u0631\u0627\u062a \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0645\u06cc \u06a9\u0646\u0646\u062f \u0648 \u0628\u0647 \u0647\u0645\u0647 \u0633\u0626\u0648 \u062f\u0648\u0633\u062a\u0627\u0646\u0647 \u0646\u06af\u0627\u0647 \u0646\u0645\u06cc \u06a9\u0646\u0646\u062f \u0648 \u0627\u0632 \u0622\u0646\u0647\u0627 \u0633\u0627\u062f\u0647 \u0646\u06cc\u0633\u062a\u0646\u062f. \u0647\u0648\u06af\u0648 \u062e\u06cc\u0644\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f \u0648 \u0645\u0646 \u062c\u06a9\u06cc\u0644 \u0631\u0627 \u0627\u0645\u062a\u062d\u0627\u0646 \u0646\u06a9\u0631\u062f\u0645.<\/p>\n<p>Eleventy \u0686\u0646\u06cc\u0646 \u0628\u0633\u062a\u0647 \u0627\u06cc \u0628\u0635\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0633\u0627\u06cc\u062a \u0647\u0627\u06cc \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/11ty-static-site-generator-tutorial-11ty-v3-15g3\/#%D9%86%D8%B5%D8%A8\" >\u0646\u0635\u0628<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/11ty-static-site-generator-tutorial-11ty-v3-15g3\/#%D8%B5%D9%81%D8%AD%D9%87_%D8%A7%D9%88%D9%84\" >\u0635\u0641\u062d\u0647 \u0627\u0648\u0644<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/11ty-static-site-generator-tutorial-11ty-v3-15g3\/#Multiple_pages_and_routes\" >Multiple pages and routes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/11ty-static-site-generator-tutorial-11ty-v3-15g3\/#Base_layouts\" >Base layouts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/11ty-static-site-generator-tutorial-11ty-v3-15g3\/#%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_%D8%AF%D8%A7%D8%B1%D8%A7%DB%8C%DB%8C_%D9%87%D8%A7%DB%8C_%D8%A7%D8%B3%D8%AA%D8%A7%D8%AA%DB%8C%DA%A9_%D9%85%D8%A7%D9%86%D9%86%D8%AF_CSS_%D8%8C_JS_%D8%8C_%D8%AA%D8%B5%D8%A7%D9%88%DB%8C%D8%B1_%D8%8C_%D9%81%DB%8C%D9%84%D9%85_%D9%87%D8%A7\" >\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062f\u0627\u0631\u0627\u06cc\u06cc \u0647\u0627\u06cc \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u0645\u0627\u0646\u0646\u062f CSS \u060c JS \u060c \u062a\u0635\u0627\u0648\u06cc\u0631 \u060c \u0641\u06cc\u0644\u0645 \u0647\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/11ty-static-site-generator-tutorial-11ty-v3-15g3\/#%DA%86%DA%AF%D9%88%D9%86%D9%87_%D9%85%DB%8C_%D8%AA%D9%88%D8%A7%D9%86_%DA%86%D9%86%D8%AF%DB%8C%D9%86_%DB%8C%D8%A7_%DA%86%D9%86%D8%AF_%D8%B3%D8%A7%DB%8C%D8%AA_%D8%A7%D8%B3%D8%AA%D8%A7%D8%AA%DB%8C%DA%A9_%D8%B1%D8%A7_%D8%AF%D8%B1_VPS_%D9%85%D8%B3%D8%AA%D9%82%D8%B1_%DA%A9%D8%B1%D8%AF%D8%9F\" >\u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0686\u0646\u062f\u06cc\u0646 \u06cc\u0627 \u0686\u0646\u062f \u0633\u0627\u06cc\u062a \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u0631\u0627 \u062f\u0631 VPS \u0645\u0633\u062a\u0642\u0631 \u06a9\u0631\u062f\u061f<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%B5%D8%A8\"><\/span>\n<p>  \u0646\u0635\u0628<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u06cc\u06a9 \u067e\u0648\u0634\u0647 \u062f\u0631\u0633\u062a \u06a9\u0646\u06cc\u062f \u06cc\u0627 \u06cc\u06a9 repo \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0633\u067e\u0633 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062d\u0644\u06cc \u06a9\u0644\u0648\u0646 \u06a9\u0646\u06cc\u062f. \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u06af\u0631\u0647 \u0631\u0627 \u0628\u0627:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm init <span class=\"nt\">-y<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0646\u0635\u0628 \u0628\u0627\u0644\u0627\u06cc\u06cc:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm <span class=\"nb\">install<\/span> @11ty\/eleventy\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>2 \u067e\u0648\u0634\u0647 \u0631\u0627 \u062f\u0631 \u06a9\u0646\u0627\u0631 \u0628\u0633\u062a\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. json: <code>site<\/code> \u0648\u062a <code>public<\/code>\u0628\u0634\u0631<\/p>\n<p>\u062f\u0631 <code>package.json<\/code> \u0646\u0648\u0639 \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0628\u0647 \u0645\u0627\u0698\u0648\u0644 (<code>\"type\": \"module\"<\/code>) \u0648 \u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a Scripts \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"nl\">\"scripts\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"dev\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"npx @11ty\/eleventy --input=.\/site --output=.\/public --serve --port=3000 --incremental\"<\/span><span class=\"w\">\n<\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0627 <code>npm run dev<\/code> 11tly \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f <code>site<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0648 \u0635\u0627\u062f\u0631 \u06a9\u0631\u062f\u0646 \u0633\u0627\u06cc\u062a \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u062f\u0631 <code>public<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc <\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B5%D9%81%D8%AD%D9%87_%D8%A7%D9%88%D9%84\"><\/span>\n<p>  \u0635\u0641\u062d\u0647 \u0627\u0648\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 <code>site<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f <code>index.md<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u06cc \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0646 \u0639\u0644\u0627\u0645\u062a \u06af\u0630\u0627\u0631\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight markdown\"><code><span class=\"gh\"># This will be parsed into an h1 tag<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062d\u0627\u0644\u0627 \u0628\u0631\u0648 \u0628\u0647 <code>localhost:3000<\/code> \u0648 \u0635\u0641\u062d\u0647 HTML \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f.<\/p>\n<p><\/p>\n<p>\u0622\u0646\u0686\u0647 \u062f\u06cc\u0648\u0627\u0646\u0647 \u0627\u0633\u062a \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f HTML \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0646\u062f\u0647 .md \u0628\u0627 \u0633\u0628\u06a9 CSS \u0648 \u0628\u0631\u0686\u0633\u0628 \u0647\u0627\u06cc \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code># \u0627\u06cc\u0646 \u0628\u0647 \u06cc\u06a9 \u0628\u0631\u0686\u0633\u0628 H1 \u062a\u062c\u0632\u06cc\u0647 \u0645\u06cc \u0634\u0648\u062f\n\n<span class=\"nt\"\/>\n\n<span class=\"c\"><!-- add css styles like this --><\/span>\n\n<span class=\"nt\"\/>\n    <span class=\"nt\">H1<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">\u0631\u0646\u06af<\/span><span class=\"p\">:<\/span> <span class=\"no\">\u0642\u0631\u0645\u0632<\/span><span class=\"p\">\u061b<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"nt\"\/>\n\n<span class=\"nt\"><script\/><\/span>\n\n    <span class=\"kd\">let<\/span> <span class=\"nx\">header<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">header<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"nx\">header<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">click<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nf\">function <\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nf\">alert<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">You clicked the header!<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">DOMContentLoaded<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nf\">function <\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nf\">alert<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Hello, World!<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">});<\/span>\n<span class=\"nt\"\/>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>Enter fullscreen mode<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>Exit fullscreen mode<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg>\n<\/div>\n<\/div>\n<\/div>\nvscode intelisense will not be great you&#8217;ll need to change extension name to <code>.html<\/code> then back to <code>.md<\/code>. You are not forced to use only .md files you can mix .md with .html files.\n<h2><span class=\"ez-toc-section\" id=\"Multiple_pages_and_routes\"><\/span>\n  Multiple pages and routes\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\nA static site will have multiple pages. To add a new page, next to <code>index.md<\/code> file create another .md file let&#8217;s say <code>about.md<\/code>. Add some header in it like <code># this is the about page<\/code>. Now go to browser at <code>localhost:3000\/about<\/code> and see the changes (11tly has hot reload as well). \nYeah, but we don&#8217;t want to go manually between pages &#8211; we need to create a link. Super easy and intuitive:\nIn <code>index.md<\/code> file:\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight markdown\"><code><span class=\"gh\"># the home page<\/span>\n<span class=\"p\">[<\/span><span class=\"nv\">go to about<\/span><span class=\"p\">](<\/span><span class=\"sx\">\/about<\/span><span class=\"p\">)<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>Enter fullscreen mode<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>Exit fullscreen mode<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg>\n<\/div>\n<\/div>\n<\/div>\nIn <code>about.md<\/code> file:\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight markdown\"><code><span class=\"gh\"># this is the about page<\/span>\n<span class=\"p\">[<\/span><span class=\"nv\">go home<\/span><span class=\"p\">](<\/span><span class=\"sx\">\/<\/span><span class=\"p\">)<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>Enter fullscreen mode<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>Exit fullscreen mode<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg>\n<\/div>\n<\/div>\n<\/div>\nCreating more nested routes is super simple. You just need to create directories and files. The <code>index.*<\/code> file will act as a root path for the url.\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>site\n\u251c\u2500\u2500 about.md            : \/about \n\u251c\u2500\u2500 index.md            : \/\n\u2514\u2500\u2500 posts               \n    \u251c\u2500\u2500 authors\n    \u2502   \u251c\u2500\u2500 author1.md   : \/posts\/authors\/author1\n    \u2502   \u251c\u2500\u2500 author2.md   : \/posts\/authors\/author2\n    \u2502   \u251c\u2500\u2500 author3.md   : \/posts\/authors\/author3\n    \u2502   \u2514\u2500\u2500 index.md     : \/posts\/authors\n    \u251c\u2500\u2500 index.md         : \/posts\n    \u251c\u2500\u2500 post1.md         : \/posts\/post1\n    \u2514\u2500\u2500 post2.md         : \/posts\/post2\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>Enter fullscreen mode<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>Exit fullscreen mode<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg>\n<\/div>\n<\/div>\n<\/div>\nOne thing I noticed is that the public folder (the folder which contains the exported html files) does not delete the exported files which you delete in the source directory (the site dir with .md files). So when you do the final export make sure to cleanup the public dir.\n<h2><span class=\"ez-toc-section\" id=\"Base_layouts\"><\/span>\n  Base layouts\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\nLet&#8217;s say you have a blog &#8211; the layout (html+css+js) of that page will be the same for all blogs. The only thing what will change will be the content (images, text, links etc.).\nTo create a layout in <code>site<\/code> dir create a folder named <code>_includes<\/code> and a file named <code>base.njk<\/code> we&#8217;ll use nunjucks as our templating language (it will help us with placing variables, making for loops, if else, adding some basic template logic more specifically).\nVScode doesn&#8217;t know <code>.njk<\/code> and I didn&#8217;t found a proper extension which keeps the intelisense of the .html file &#8211; so as a &#8220;hack&#8221; you can go in the right lower corner and configure file association language to html.\n<img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1nj854i1608tzy404kdb.png\" alt=\"\u0633\u0648\u0626\u06cc\u0686 \u0633\u0648\u0626\u06cc\u0686 VScode \u0641\u0627\u06cc\u0644\" loading=\"lazy\" width=\"146\" height=\"42\"\/>\n<img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffgj51v1wu9awh7ckwor5.png\" alt = \"VScode HTML \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f\" loading=\"lazy\" width=\"404\" height=\"111\"\/>\n\u062f\u0631 <code>site\/_includes\/base.njk<\/code> \u0637\u0631\u062d \u0631\u0627 \u0628\u0631\u0627\u06cc \u0635\u0641\u062d\u0627\u062a \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0686\u0646\u062f\u06cc\u0646 \u0637\u0631\u062d \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 &#8220;\u0648\u0631\u0627\u062b\u062a&#8221; \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0686\u06cc\u062f\u0645\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.\n\u0627\u06cc\u0646 \u0631\u0627 \u062f\u0631 <code>base.njk<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647:\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code>---\ntitle: this is the default title unless is overwritten in another file\n---\n\n<span class=\"cp\"\/>\n<span class=\"nt\"> <span class=\"na\">lang=<\/span><span class=\"s\">\"en\"<\/span><span class=\"nt\">&gt;<\/span>\n\n<span class=\"nt\"\/>\n    <span class=\"nt\"><meta\/> <span class=\"na\">charset=<\/span><span class=\"s\">\"UTF-8\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\"><meta\/> <span class=\"na\">name=<\/span><span class=\"s\">\"viewport\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"width=device-width, initial-scale=1.0\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\"><link\/> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"https:\/\/cdn.jsdelivr.net\/npm\/@picocss\/pico@2\/css\/pico.min.css\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\"><title\/><\/span>{{ title }}<span class=\"nt\"\/>\n<span class=\"nt\"\/>\n\n<span class=\"nt\"\/>\n\n    {{ content | safe }}\n\n<span class=\"nt\"\/>\n\n<span class=\"nt\"\/>\n<\/span><\/span><\/span><\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg>\n<\/div>\n<\/div>\n<\/div>\n\u0622\u0646\u0686\u0647 \u062f\u0631 \u0622\u0646\u062c\u0627 \u0645\u06cc \u0628\u06cc\u0646\u06cc\u062f \u0645\u062a\u0641\u0627\u0648\u062a \u0627\u0632 HTML \u0645\u0639\u0645\u0648\u0644 \u0627\u0633\u062a \u060c \u0627\u0644\u06af\u0648\u06cc Nunjucks Syntax \u0648 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0646\u062d\u0648 Frontmatter \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0645\u0627 \u062f\u0631 \u0645\u0642\u0627\u0628\u0644\u0647 \u0628\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f. \u0645\u06cc \u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 \u0645\u0627 \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 CSS \u062e\u0627\u0631\u062c\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645 \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f Bootstrap \u060c Bulma \u06cc\u0627 \u0633\u0627\u06cc\u0631 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u06a9\u0644\u0627\u0633\u06cc\u06a9 CSS \u0631\u0627 \u0628\u062f\u0648\u0646 \u0647\u06cc\u0686 \u06af\u0648\u0646\u0647 \u062a\u0646\u0638\u06cc\u0645 \u0641\u0627\u0646\u062a\u0632\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.\n\u062f\u0627\u062f\u0647 \u0647\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0647 \u0633\u0631 \u067e\u0631\u0648\u0646\u062f\u0647 HTML \u0645\u06cc \u0631\u0648\u0646\u062f \u0648 \u0628\u0631\u062e\u06cc \u0627\u0632 \u062f\u0627\u062f\u0647 \u0647\u0627 \u062a\u0648\u0633\u0637 11 \u0628\u0647 \u0645\u0646\u0638\u0648\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062f\u0627\u0645 \u0637\u0631\u062d \u0648 \u0633\u0627\u06cc\u0631 \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f.\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code>---\ntitle: this is the default title unless is overwritten in another file\n---\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg>\n<\/div>\n<\/div>\n<\/div>\n\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 11lty \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 nunjucks \u062f\u0631 \u0628\u0631\u06cc\u0633 \u0647\u0627\u06cc \u0641\u0631\u0641\u0631\u06cc \u0645\u062d\u062a\u0648\u0627\u06cc index.md \u0631\u0627 \u062f\u0631\u062c \u0645\u06cc \u06a9\u0646\u062f.\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code>{{ content | safe }}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg>\n<\/div>\n<\/div>\n<\/div>\n\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 <code>layout: base.njk<\/code> 11tly \u0645\u06cc \u062f\u0627\u0646\u062f \u0627\u0632 \u06a9\u062f\u0627\u0645 \u0627\u0644\u06af\u0648\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u062f\u0631 <code>title: overwritten title<\/code> \u0639\u0646\u0648\u0627\u0646 \u0645\u0648\u062c\u0648\u062f \u0631\u0627 \u062f\u0631 \u0633\u0631 \u0628\u0627\u0632\u0646\u0648\u06cc\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f <code>base.njk<\/code>\u0628\u0634\u0631\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code>---\nlayout: base.njk\ntitle: overwritten title\n---\n\n# the home page\n\n[go to about](\/about)\n[go to posts](\/posts)\n[go to authors](\/posts\/authors)\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg>\n<\/div>\n<\/div>\n<\/div>\n\u062f\u0631 \u0635\u0648\u0631\u062a \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0627\u0632 \u0637\u0631\u062d \u062f\u0631 \u06cc\u06a9 \u0637\u0631\u062d \u062f\u06cc\u06af\u0631 \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0628\u0631\u0686\u0633\u0628 \u0647\u0627\u06cc \u0645\u062a\u0627 Frontmatter \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f \u0627\u0632 \u06a9\u062f\u0627\u0645 \u0627\u0644\u06af\u0648 \u0628\u0631\u0627\u06cc \u0627\u0631\u062b \u0628\u0631\u062f\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.\n\u0637\u0631\u062d \u062f\u06cc\u06af\u0631\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>dashboard.njk<\/code> \u062f\u0631 <code>site\/_includes<\/code> \u067e\u0648\u0634\u0647 \u0648 \u0645\u0637\u0627\u0644\u0628 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:\n\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u06cc \u0628\u06cc\u0646\u06cc\u062f \u0645\u0627 \u0627\u0632 \u0622\u0646 \u0628\u0647 \u0627\u0631\u062b \u0628\u0631\u062f\u06cc\u0645 <code>base.njk<\/code> \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u0627 \u0628\u0631\u062e\u06cc \u0627\u0632 \u06a9\u062f \u0647\u0627\u06cc \u062a\u06a9\u0631\u0627\u0631\u06cc \u0631\u0627 \u0627\u0632 \u0627\u06cc\u0646 \u0637\u0631\u06cc\u0642 \u062d\u0630\u0641 \u06a9\u0631\u062f\u06cc\u0645. \u0627\u06a9\u0646\u0648\u0646 \u0628\u0631\u0627\u06cc \u062f\u06cc\u062f\u0646 \u0622\u0646 \u062f\u0631 \u0639\u0645\u0644 \u0628\u0647 \u0622\u0646\u062c\u0627 \u0628\u0631\u0648\u06cc\u062f <code>site\/index.md<\/code> \u0648 \u0637\u0631\u062d \u0645\u0648\u062c\u0648\u062f \u0631\u0627 \u0628\u0647 <code>layout: dashboard.njk<\/code>\u0628\u0634\u0631\n\u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0622\u0646 \u0639\u0646\u0635\u0631 \u0631\u0627 \u06a9\u0646\u0627\u0631 \u0628\u06af\u0630\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u0627\u0632 \u0645\u062c\u0645\u0648\u0639\u0647 \u0647\u0627\u06cc 11th \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u062f. \u0642\u0633\u0645\u062a \u062e\u0627\u0635 <code>tags<\/code> \u062a\u062d\u062a \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u062e\u0627\u0635 \u0628\u0647 \u0646\u0627\u0645 \u062c\u0645\u0639 \u0645\u06cc \u0634\u0648\u062f <code>collections<\/code> \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u062a\u06a9\u0631\u0627\u0631 \u06a9\u0646\u06cc\u0645 <code>collections.all<\/code> \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc \u062c\u0645\u0639 \u0622\u0648\u0631\u06cc \u0634\u062f\u0647 \u06cc\u0627 \u062a\u0648\u0633\u0637 TAG (\u0645\u062b\u0627\u0644: \u0628\u06cc\u0634 \u0627\u0632 \u0647\u0645\u0647 \u067e\u0633\u062a \u0647\u0627 \u062a\u06a9\u0631\u0627\u0631 \u06a9\u0646\u06cc\u062f)\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code>---\ntags:\n  - post\n---\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg>\n<\/div>\n<\/div>\n<\/div>\n\u0627\u06cc\u0646 \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0646\u0642\u0634\u0647 \u0633\u0627\u06cc\u062a \u0647\u0627 \u060c \u0646\u0627\u0648\u0628\u0631\u06cc \u0648 \u063a\u06cc\u0631\u0647 \u0645\u0641\u06cc\u062f \u0627\u0633\u062a.\n\u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc \u067e\u0631\u062f\u0627\u062e\u062a \u0646\u0648\u0639 \u0645\u0634\u0627\u0628\u0647\u06cc \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0645\u062c\u0645\u0648\u0639\u0647 \u0647\u0627 \u0627\u0633\u062a.\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_%D8%AF%D8%A7%D8%B1%D8%A7%DB%8C%DB%8C_%D9%87%D8%A7%DB%8C_%D8%A7%D8%B3%D8%AA%D8%A7%D8%AA%DB%8C%DA%A9_%D9%85%D8%A7%D9%86%D9%86%D8%AF_CSS_%D8%8C_JS_%D8%8C_%D8%AA%D8%B5%D8%A7%D9%88%DB%8C%D8%B1_%D8%8C_%D9%81%DB%8C%D9%84%D9%85_%D9%87%D8%A7\"><\/span>\n  \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062f\u0627\u0631\u0627\u06cc\u06cc \u0647\u0627\u06cc \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u0645\u0627\u0646\u0646\u062f CSS \u060c JS \u060c \u062a\u0635\u0627\u0648\u06cc\u0631 \u060c \u0641\u06cc\u0644\u0645 \u0647\u0627\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\u0627\u0628\u062a\u062f\u0627 \u067e\u0648\u0634\u0647 \u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627\u06cc \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u0631\u0627 \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u062f. \u062f\u0631 \u06a9\u0646\u0627\u0631 Pack.json \u067e\u0648\u0634\u0647 \u0627\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>assets<\/code> \u0648 \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627\u06cc \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u062e\u0648\u062f \u0631\u0627 .css \u060c .js \u060c .png \u060c .jpg \u0648 \u063a\u06cc\u0631\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f. \u0627\u06a9\u0646\u0648\u0646 \u062f\u0631 \u06a9\u0646\u0627\u0631 \u0647\u0645\u0627\u0646 \u067e\u0631\u0648\u0646\u062f\u0647 Package.json (\u062f\u0631 \u067e\u0648\u0634\u0647 root) \u06cc\u06a9 \u067e\u0631\u0648\u0646\u062f\u0647 \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>eleventy.config.js<\/code> \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nf\">function <\/span><span class=\"p\">(<\/span><span class=\"nx\">eleventyConfig<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">eleventyConfig<\/span><span class=\"p\">.<\/span><span class=\"nf\">addPassthroughCopy<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">.\/assets<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg>\n<\/div>\n<\/div>\n<\/div>\n\u0628\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0647 11 \u0645\u0623\u0645\u0648\u0631 \u0645\u06cc \u06af\u0648\u06cc\u062f \u06a9\u0647 \u067e\u0648\u0634\u0647 \u062f\u0627\u0631\u0627\u06cc\u06cc \u0647\u0627 \u0631\u0627 \u062f\u0631 \u067e\u0648\u0634\u0647 \u0639\u0645\u0648\u0645\u06cc \u062f\u0631 \u0633\u0627\u062e\u062a \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f.\n\u0627\u06a9\u0646\u0648\u0646 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627 \u062f\u0631 \u0628\u0631\u0686\u0633\u0628 \u0633\u0631 \u0637\u0631\u062d \u060c \u0622\u0646\u0647\u0627 \u0631\u0627 \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code>\n<span class=\"nt\"\/>\n    <span class=\"nt\"><meta\/> <span class=\"na\">charset=<\/span><span class=\"s\">\"UTF-8\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\"><meta\/> <span class=\"na\">name=<\/span><span class=\"s\">\"viewport\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"width=device-width, initial-scale=1.0\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\"><link\/> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"https:\/\/cdn.jsdelivr.net\/npm\/@picocss\/pico@2\/css\/pico.min.css\"<\/span><span class=\"nt\">&gt;<\/span>\n\n    <span class=\"nt\"><link\/> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"\/assets\/styles.css\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\"><link\/> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"\/assets\/some_other_styles.css\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\"><script><![CDATA[<span class=\"na\">src=]]><\/script><\/span><span class=\"s\">\"\/assets\/scripts.js\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\"><script><![CDATA[<span class=\"na\">src=]]><\/script><\/span><span class=\"s\">\"\/assets\/some_other_scripts.js\"<\/span><span class=\"nt\">&gt;<\/span>\n\n    <span class=\"nt\"><title\/><\/span>{{ title }}<span class=\"nt\"\/>\n<span class=\"nt\"\/>\n\n<\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06af\u0631 \u062a\u0635\u0627\u0648\u06cc\u0631 \u06cc\u0627 \u0641\u06cc\u0644\u0645 \u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u062f\u0627\u0631\u06cc\u062f \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627\u06cc HTML \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>![the image](\/assets\/elevently.jpg) \n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u06cc\u0627 \u0627\u06cc\u0646:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\"><img\/> <span class=\"na\">src=<\/span><span class=\"s\">\"\/assets\/elevently.jpg\"<\/span> <span class=\"na\">alt=<\/span><span class=\"s\">\"\"<\/span><span class=\"nt\">&gt;<\/span>\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F797ll4accr0zjykok01y.jpg\" alt=\"11th \u0628\u0647\u062a\u0631\u06cc\u0646 SSG \u062f\u0631 \u062c\u0647\u0627\u0646\" loading=\"lazy\" width=\"651\" height=\"383\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%DA%86%DA%AF%D9%88%D9%86%D9%87_%D9%85%DB%8C_%D8%AA%D9%88%D8%A7%D9%86_%DA%86%D9%86%D8%AF%DB%8C%D9%86_%DB%8C%D8%A7_%DA%86%D9%86%D8%AF_%D8%B3%D8%A7%DB%8C%D8%AA_%D8%A7%D8%B3%D8%AA%D8%A7%D8%AA%DB%8C%DA%A9_%D8%B1%D8%A7_%D8%AF%D8%B1_VPS_%D9%85%D8%B3%D8%AA%D9%82%D8%B1_%DA%A9%D8%B1%D8%AF%D8%9F\"><\/span>\n<p>  \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0686\u0646\u062f\u06cc\u0646 \u06cc\u0627 \u0686\u0646\u062f \u0633\u0627\u06cc\u062a \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u0631\u0627 \u062f\u0631 VPS \u0645\u0633\u062a\u0642\u0631 \u06a9\u0631\u062f\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Docker \u0648 Caddy \u0686\u0646\u062f\u06cc\u0646 \u0633\u0627\u06cc\u062a 11tly \u0631\u0627 \u062f\u0631 VPS \u0645\u0633\u062a\u0642\u0631 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u067e\u0648\u0634\u0647 \u0627\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0647\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0622\u0646 \u067e\u0648\u0634\u0647 \u062f\u06cc\u06af\u0631\u06cc \u0628\u0627 \u0646\u0627\u0645 \u062f\u0627\u0645\u0646\u0647 \u0633\u0627\u06cc\u062a \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0622\u0646 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f. \u0645\u062d\u062a\u0648\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 11 \u0631\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f <code>websites\/my-static-site<\/code><\/p>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>Caddyfile<\/code> \u0648 \u0645\u0637\u0627\u0644\u0628 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>mystaticsite.localhost {\n    tls your-email-used-to-buy-domain@gmail.com\n    root * \/srv\/websites\/my-static-site\n    push\n    file_server browse\n}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 <code>.localhost<\/code> \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0648\u0628 \u0633\u0627\u06cc\u062a \u0631\u0627 \u062f\u0631 LocalHost \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u062f\u0631 VPS \u0622\u0646 \u0631\u0627 \u0628\u0647 \u062f\u0627\u0645\u0646\u0647 \u0627\u06cc \u06a9\u0647 \u062e\u0631\u06cc\u062f\u0627\u0631\u06cc \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f (\u0645\u062b\u0627\u0644: mystaticsite.com).<\/p>\n<p>\u06cc\u06a9 \u067e\u0631\u0648\u0646\u062f\u0647 docker-compose.yml \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight yaml\"><code>\n<span class=\"na\">services<\/span><span class=\"pi\">:<\/span>\n\n  <span class=\"na\">proxy<\/span><span class=\"pi\">:<\/span>\n    <span class=\"na\">container_name<\/span><span class=\"pi\">:<\/span> <span class=\"s\">multisite-apps-caddy-proxy<\/span>\n    <span class=\"na\">image<\/span><span class=\"pi\">:<\/span> <span class=\"s\">caddy:2-alpine<\/span>\n    <span class=\"na\">restart<\/span><span class=\"pi\">:<\/span> <span class=\"s\">unless-stopped<\/span>\n    <span class=\"na\">ports<\/span><span class=\"pi\">:<\/span>\n      <span class=\"pi\">-<\/span> <span class=\"s2\">\"<\/span><span class=\"s\">80:80\"<\/span>\n      <span class=\"pi\">-<\/span> <span class=\"s2\">\"<\/span><span class=\"s\">443:443\"<\/span>\n    <span class=\"na\">volumes<\/span><span class=\"pi\">:<\/span>\n      <span class=\"pi\">-<\/span> <span class=\"s\">.\/websites:\/srv\/websites<\/span> <span class=\"c1\"># here we mount the static sites<\/span>\n      <span class=\"pi\">-<\/span> <span class=\"s\">$PWD\/Caddyfile:\/etc\/caddy\/Caddyfile<\/span>\n      <span class=\"pi\">-<\/span> <span class=\"s\">caddy_data:\/data<\/span>\n      <span class=\"pi\">-<\/span> <span class=\"s\">caddy_config:\/config<\/span>\n    <span class=\"na\">networks<\/span><span class=\"pi\">:<\/span>\n      <span class=\"pi\">-<\/span> <span class=\"s\">web<\/span>\n\n<span class=\"na\">volumes<\/span><span class=\"pi\">:<\/span>\n  <span class=\"na\">caddy_data<\/span><span class=\"pi\">:<\/span>\n  <span class=\"na\">caddy_config<\/span><span class=\"pi\">:<\/span>\n\n<span class=\"na\">networks<\/span><span class=\"pi\">:<\/span>\n  <span class=\"na\">web<\/span><span class=\"pi\">:<\/span>\n    <span class=\"na\">driver<\/span><span class=\"pi\">:<\/span> <span class=\"s\">bridge<\/span>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0627\u062d\u0627\u0644 \u062d\u0627\u0644\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f <code>docker compose up -d<\/code> \u0635\u0628\u0631 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0622\u0646 \u0631\u0627 \u0628\u0633\u0627\u0632\u062f \u0648 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0633\u0627\u06cc\u062a (\u0647\u0627\u06cc) \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0622\u0646 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>mystaticsite.localhost<\/code><\/p>\n<p>\u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062d\u062a\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0628\u0627 11tly \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f: \u0635\u0641\u062d\u0627\u062a\u06cc \u0627\u0632 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc JSON \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u060c \u0627\u0632 \u0686\u0646\u062f\u06cc\u0646 \u0632\u0628\u0627\u0646 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f \u060c \u062a\u0627\u0631\u06cc\u062e \u0647\u0627 \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0645\u0646\u0637\u0642\u0647 \u0632\u0645\u0627\u0646\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f \u060c \u0627\u0641\u0632\u0648\u0646\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631 \u0648 \u0645\u0648\u0627\u0631\u062f \u062f\u06cc\u06af\u0631 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0627\u0633\u0646\u0627\u062f \u0628\u06cc\u0634\u062a\u0631 \u0631\u0627 \u062f\u0631 11ty.dev \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0646 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u0631\u0627\u0647\u06cc \u0633\u0631\u06cc\u0639\u062a\u0631 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0633\u0627\u06cc\u062a \u0647\u0627\u06cc \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u0628\u0648\u062f\u0645. \u0645\u0646 \u0628\u0647 Nuxt \u0648 \u0633\u0627\u06cc\u0631 \u0686\u0627\u0631\u0686\u0648\u0628 \u0647\u0627\u06cc JS \u0646\u06af\u0627\u0647 \u06a9\u0631\u062f\u0647 \u0627\u0645 &#8211; \u0647\u0645\u0647 \u0622\u0646\u0647\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0632\u06cc\u0627\u062f\u06cc \u0631\u0627 \u062f\u0631 \u0635\u0627\u062f\u0631\u0627\u062a \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0645\u06cc \u06a9\u0646\u0646\u062f \u0648 \u0628\u0647 \u0647\u0645\u0647 \u0633\u0626\u0648 \u062f\u0648\u0633\u062a\u0627\u0646\u0647 \u0646\u06af\u0627\u0647 \u0646\u0645\u06cc \u06a9\u0646\u0646\u062f \u0648 \u0627\u0632 \u0622\u0646\u0647\u0627 \u0633\u0627\u062f\u0647 \u0646\u06cc\u0633\u062a\u0646\u062f. \u0647\u0648\u06af\u0648 \u062e\u06cc\u0644\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f &hellip;<\/p>\n","protected":false},"author":2,"featured_media":102844,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-102843","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/102843","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=102843"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/102843\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/102844"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=102843"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=102843"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=102843"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}