{"id":303133,"date":"2020-02-04T09:10:25","date_gmt":"2020-02-04T16:10:25","guid":{"rendered":"https:\/\/css-tricks.com\/?p=303133"},"modified":"2020-02-06T06:08:36","modified_gmt":"2020-02-06T13:08:36","slug":"possibly-the-easiest-way-to-run-an-ssg","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/possibly-the-easiest-way-to-run-an-ssg\/","title":{"rendered":"Possibly The Easiest Way to Run an SSG"},"content":{"rendered":"\n<p>&#8220;Static Site Generator,&#8221; that is. We&#8217;ll get to that in a second. <\/p>\n\n\n\n<p><a href=\"https:\/\/www.netlify.com\/\" rel=\"noopener\">Netlify<\/a> is a sponsor of this site (thank you very much), and I see Zach Leatherman has <a href=\"https:\/\/www.zachleat.com\/web\/netlify\/\" rel=\"noopener\">gone to work<\/a> over there now. Very cool. Zach is the creator of <a href=\"https:\/\/www.11ty.dev\/\" rel=\"noopener\">Eleventy<\/a>, an SSG for Node. One thing of the many notable things about Eleventy is that you <em>don&#8217;t even have to install it<\/em> if you don&#8217;t want to. Lemme set the stage.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Say you have a three-page website, and one of the reasons you want to reach for an SSG is because you want to repeat the navigation on all three pages. An &#8220;HTML include,&#8221; one of the oldest needs in web development, is in there! <a href=\"https:\/\/css-tricks.com\/the-simplest-ways-to-handle-html-includes\/\">We&#8217;ve covered many ways to do it<\/a> in the past. So we have&#8230;<\/p>\n\n\n\n<pre rel=\"Project Structure\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">\/my_project\n- index.html\n- about.html\n- contact.html<\/code><\/pre>\n\n\n\n<p>And each of those HTML files needs this repeated chunk of navigation.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n  &lt;head>\n    &lt;title>Southside Laundromat&lt;\/title>\n  &lt;\/head>\n  &lt;body>\n    {{ INCLUDE NAVIGATION HERE }}\n\n    Unique content to this page.\n\n  &lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p>Well why don&#8217;t we chuck that block of navigation into a file, so&#8230;<\/p>\n\n\n\n<pre rel=\"Project Structure\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">\/my_project\n- \/_includes\n  - nav.html\n- index.html\n- about.html\n- contact.html<\/code><\/pre>\n\n\n\n<p>Which is something like&#8230;<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;nav>\n  &lt;a href=\"\/\">Home&lt;\/a>\n  &lt;a href=\"\/about\/\">About&lt;\/a>\n  &lt;a href=\"\/contact\/\">Contact&lt;\/a>\n&lt;\/nav><\/code><\/pre>\n\n\n\n<p>So how do we actually do the include? This is where Eleventy comes in. Eleventy supports a bunch of templating languages, but the default one is <a href=\"https:\/\/shopify.github.io\/liquid\/\" rel=\"noopener\">Liquid<\/a>. Liquid supports file includes! Like this&#8230;<\/p>\n\n\n\n<pre rel=\"Liquid\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">{% include .\/nav.html %}<\/code><\/pre>\n\n\n\n<p>So that&#8217;s the line I put in each of the three HTML files. How do I process it then? Isn&#8217;t this the moment where I have to <em>install<\/em> Eleventy to get that all going? Nope, I can run a single command on the command line to make this happen (assuming I have npm installed):<\/p>\n\n\n\n<pre rel=\"Command Line\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">npx @11ty\/eleventy<\/code><\/pre>\n\n\n\n<p>Here&#8217;s a 30-second video showing it work:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video width=\"2304\" height=\"1322\" controls src=\"https:\/\/res.cloudinary.com\/css-tricks\/video\/upload\/f_auto,q_auto\/v1580762301\/11ty_e2tuqu.mp4\"><\/video><\/figure>\n\n\n\n<p>There is no <code>package.json<\/code>. There is no <code>npm install<\/code>. In a sense, this is a zero-dependency way to processes a static site, which I think is very cool. Eleventy processes it all into a <code>_site<\/code> folder by default. <\/p>\n\n\n\n<p>Say I want to deploy this static site&#8230; over on the Netlify side, I can tell it that what I want deployed is that <code>_site<\/code> folder. I don&#8217;t need to commit it either (and you shouldn&#8217;t), so I can put that in a <code>.gitignore<\/code> file. Netlify can build it with the same exact command.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/i1.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/netlify-settings.png?fit=1024%2C1003&amp;ssl=1\" alt=\"\" class=\"wp-image-303143\"\/><\/figure>\n\n\n\n<p>I could chuck those settings into a file if that is easier to manage than the site itself. Here&#8217;s what would go into a <code>netlify.yml<\/code> file:<\/p>\n\n\n\n<pre rel=\"netlify.yml\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">build:\n  command: \"npx @11ty\/eleventy\"\n  publish: _site<\/code><\/pre>\n\n\n\n<p class=\"explanation\">The point of this article is <em>Check out how cool this is that you don&#8217;t even have to install anything to run an SSG!<\/em> That involves a speed tradeoff. It will be faster, both locally and for cloud computers running your builds, to install packages. <\/p>\n\n\n\n<p>As I was working on this baby demo, I ended up wanting a smidge of configuration for Eleventy in that I wanted my CSS files to come over to the processed site, so&#8230;<\/p>\n\n\n\n<pre rel=\".eleventy.js\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">module.exports = function(eleventyConfig) {\n  eleventyConfig.addPassthroughCopy(\".\/styles\");\n};<\/code><\/pre>\n\n\n\n<p>That&#8217;s all.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;Static Site Generator,&#8221; that is. We&#8217;ll get to that in a second. Netlify is a sponsor of this site (thank you very much), and I see Zach Leatherman has gone to work over there now. Very cool. Zach is the creator of Eleventy, an SSG for Node. One thing of the many notable things about [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[508],"tags":[1416,1639,1415],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/303133"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=303133"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/303133\/revisions"}],"predecessor-version":[{"id":303283,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/303133\/revisions\/303283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=303133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=303133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=303133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}