{"id":250931,"date":"2017-02-06T05:59:38","date_gmt":"2017-02-06T12:59:38","guid":{"rendered":"http:\/\/css-tricks.com\/?p=250931"},"modified":"2017-02-06T05:59:38","modified_gmt":"2017-02-06T12:59:38","slug":"really-makes-static-site-generator","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/really-makes-static-site-generator\/","title":{"rendered":"What Really Makes a Static Site Generator?"},"content":{"rendered":"<p>I talk a lot about static site generators, but always about <em>using<\/em> static site generators. In most cases, it may seem like a black box. I create a template and some Markdown and out comes a fully formed HTML page. Magic!<\/p>\n<p>But what exactly <em>is<\/em> a static site generator? What goes on inside that black box? What kind of voodoo is this?<\/p>\n<p>In this post, I want to explore all of the parts that make up a static site generator. First, we&#8217;ll discuss these in a general fashion, but then we&#8217;ll take a closer look at some actual code by delving deep inside <a href=\"https:\/\/harpjs.com\/\" rel=\"noopener\">HarpJS<\/a>. So, put your adventurer&#8217;s cap on and let&#8217;s start exploring.<\/p>\n<p><!--more--><\/p>\n<p><strong>Why Harp?<\/strong> For two reasons. The first is that HarpJS is, by design, a very simple static site generator. It doesn&#8217;t have a lot of the features that might cause us to get lost exploring a more comprehensively full-featured static site generator (like <a href=\"http:\/\/jekyllrb.com\/\" rel=\"noopener\">Jekyll<\/a> for instance). The second, much more practical, reason is that I know JavaScript and don&#8217;t know Ruby very well.<\/p>\n<h3>The Basics of a Static Site Generator<\/h3>\n<p>The truth is, a static site generator is a pretty simple concept. The key ingredients to a static site generator are typically:<\/p>\n<ul>\n<li>A template language(s) for creating page\/post templates<\/li>\n<li>A lightweight markup language (typically Markdown) for authoring content<\/li>\n<li>A structure and markup (often YAML) for providing configuration and metadata (e.g. &#8220;<a href=\"https:\/\/jekyllrb.com\/docs\/frontmatter\/\" rel=\"noopener\">front matter<\/a>&#8220;)<\/li>\n<li>A set of rules or structure for organizing and naming files that are exported\/compiled, files that are not and how these files will be handled (e.g. frequently prefacing a file or folder with an underscore means that it is not exported into the final site files or all posts go in a posts folder)<\/li>\n<li>A means of compiling templates and markup into HTML (frequently support for CSS or JavaScript preprocessors is also included)<\/li>\n<li>A local server for testing.<\/li>\n<\/ul>\n<p>That&#8217;s it. If you&#8217;re thinking, &#8220;Hey&#8230; I could build that!&#8221; you are probably correct. Things start to get complicated though when you start to expand the functionality, as most static site generators do.<\/p>\n<p>So, let&#8217;s look at how Harp handles this.<\/p>\n<h3>Getting to the Harp of the Matter<\/h3>\n<p>Let&#8217;s look at the basics of how Harp handles the key ingredients described above. Harp offers more than this handful of functionality, but, for the sake of our examination, we&#8217;ll stick to those items.<\/p>\n<p>First, let&#8217;s discuss the basics of Harp.<\/p>\n<h3>Harp Basics<\/h3>\n<p>Harp supports <a href=\"https:\/\/pugjs.org\" rel=\"noopener\">Jade<\/a> and <a href=\"http:\/\/www.embeddedjs.com\/\" rel=\"noopener\">EJS<\/a> (for templating) and Markdown as its lightweight markup language (for content). Note that while Jade is now called Pug, Harp has not officially transitioned in their documentation or code, so we&#8217;ll stick with Jade here. Harp also offers support for other preprocessing such as Less, Sass, and Stylus for CSS and CoffeeScript for JavaScript.<\/p>\n<p>By default Harp does not require much in the way of configuration or metadata. It tends to favor <a href=\"https:\/\/harpjs.com\/docs\/development\/rules\" rel=\"noopener\">convention over configuration<\/a>. However, it allows for specific metadata and configuration using JSON. It differs from many other static site generators in that file metadata is contained outside of the actual file within a `_data.json` file.<\/p>\n<p>While it is configurable to a degree, Harp has certain established guidelines for how to structure files. For example, in a typical application, the files that are served fall within a <code>public<\/code> directory. Also, any file or folder prefaced by an underscore will not be served.<\/p>\n<p>Lastly, Harp offers a basic local web server for testing that includes some configurable options. And, of course, it will compile the finished HTML, CSS and JavaScript files for deployment.<\/p>\n<h4>Let&#8217;s Look at Harp&#8217;s Actual Source Code<\/h4>\n<p>Since much of what makes a static site generator are rules and conventions, the code centers around the actual serving and compiling (for the most part). Let&#8217;s dig in.<\/p>\n<h4>The Server Function<\/h4>\n<p>In Harp, serving your project is usually done by executing <code>harp server<\/code> from the command line. Let&#8217;s look at the <a href=\"https:\/\/github.com\/sintaxi\/harp\/blob\/master\/lib\/index.js\" rel=\"noopener\">code for that function<\/a>:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">exports.server = function(dirPath, options, callback){\r\n  var app = connect()\r\n  app.use(middleware.regProjectFinder(dirPath))\r\n  app.use(middleware.setup)\r\n  app.use(middleware.basicAuth)\r\n  app.use(middleware.underscore)\r\n  app.use(middleware.mwl)\r\n  app.use(middleware.static)\r\n  app.use(middleware.poly)\r\n  app.use(middleware.process)\r\n  app.use(middleware.fallback)\r\n\r\n  return app.listen(options.port || 9966, options.ip, function(){\r\n    app.projectPath = dirPath\r\n    callback.apply(app, arguments)\r\n  })\r\n}<\/code><\/pre>\n<p>While the function looks simple, obviously there is a ton going on within <a href=\"https:\/\/github.com\/sintaxi\/harp\/blob\/master\/lib\/middleware.js\" rel=\"noopener\">middleware<\/a> that isn&#8217;t illustrated here.<\/p>\n<p>The rest of this function opens up a server with the options you specify (if any). Those options include a port, an IP to bind to and a directory. By default the port is 9000 (not 9966 as you might guess by the code), the directory is the current one (i.e. the one Harp is running in) and the IP is <code>0.0.0.0<\/code>.<\/p>\n<div class=\"explanation\">The details for these defaults are in the <a href=\"https:\/\/github.com\/sintaxi\/harp\/blob\/master\/bin\/harp\" rel=\"noopener\">command line application source<\/a>.<\/div>\n<h4>The Compiler Function<\/h4>\n<p>Staying within <a href=\"https:\/\/github.com\/sintaxi\/harp\/blob\/master\/lib\/index.js\" rel=\"noopener\">index.js<\/a>, let&#8217;s take a look at the <code>compile<\/code> function next.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">exports.compile = function(projectPath, outputPath, callback){\r\n\r\n  \/**\r\n   * Both projectPath and outputPath are optional\r\n   *\/\r\n\r\n  if(!callback){\r\n    callback   = outputPath\r\n    outputPath = \"www\"\r\n  }\r\n\r\n  if(!outputPath){\r\n    outputPath = \"www\"\r\n  }\r\n\r\n\r\n  \/**\r\n   * Setup all the paths and collect all the data\r\n   *\/\r\n\r\n  try{\r\n    outputPath = path.resolve(projectPath, outputPath)\r\n    var setup  = helpers.setup(projectPath, \"production\")\r\n    var terra   = terraform.root(setup.publicPath, setup.config.globals)\r\n  }catch(err){\r\n    return callback(err)\r\n  }\r\n\r\n\r\n  \/**\r\n   * Protect the user (as much as possible) from compiling up the tree\r\n   * resulting in the project deleting its own source code.\r\n   *\/\r\n\r\n  if(!helpers.willAllow(projectPath, outputPath)){\r\n    return callback({\r\n      type: \"Invalid Output Path\",\r\n      message: \"Output path cannot be greater then one level up from project path and must be in directory starting with `_` (underscore).\",\r\n      projectPath: projectPath,\r\n      outputPath: outputPath\r\n    })\r\n  }\r\n\r\n\r\n  \/**\r\n   * Compile and save file\r\n   *\/\r\n\r\n  var compileFile = function(file, done){\r\n    process.nextTick(function () {\r\n      terra.render(file, function(error, body){\r\n        if(error){\r\n          done(error)\r\n        }else{\r\n          if(body){\r\n            var dest = path.resolve(outputPath, terraform.helpers.outputPath(file))\r\n            fs.mkdirp(path.dirname(dest), function(err){\r\n              fs.writeFile(dest, body, done)\r\n            })\r\n          }else{\r\n            done()\r\n          }\r\n        }\r\n      })\r\n    })\r\n  }\r\n\r\n  \/**\r\n   * Copy File\r\n   *\r\n   * TODO: reference ignore extensions from a terraform helper.\r\n   *\/\r\n  var copyFile = function(file, done){\r\n    var ext = path.extname(file)\r\n    if(!terraform.helpers.shouldIgnore(file) &amp;&amp; [\".jade\", \".ejs\", \".md\", \".styl\", \".less\", \".scss\", \".sass\", \".coffee\"].indexOf(ext) === -1){\r\n      var localPath = path.resolve(outputPath, file)\r\n      fs.mkdirp(path.dirname(localPath), function(err){\r\n        fs.copy(path.resolve(setup.publicPath, file), localPath, done)\r\n      })\r\n    }else{\r\n      done()\r\n    }\r\n  }\r\n\r\n  \/**\r\n   * Scan dir, Compile Less and Jade, Copy the others\r\n   *\/\r\n\r\n  helpers.prime(outputPath, { ignore: projectPath }, function(err){\r\n    if(err) console.log(err)\r\n\r\n    helpers.ls(setup.publicPath, function(err, results){\r\n      async.each(results, compileFile, function(err){\r\n        if(err){\r\n          callback(err)\r\n        }else{\r\n          async.each(results, copyFile, function(err){\r\n            setup.config['harp_version'] = pkg.version\r\n            delete setup.config.globals\r\n            callback(null, setup.config)\r\n          })\r\n        }\r\n      })\r\n    })\r\n  })\r\n\r\n}<\/code><\/pre>\n<p>The first portion defines the output path as specified by the call to <code>harp compile<\/code> via the command line (<a href=\"https:\/\/github.com\/sintaxi\/harp\/blob\/master\/bin\/harp\" rel=\"noopener\">source here<\/a>). The default, as you can see, is <code>www<\/code>. The callback is a callback function passed by the command line utility which is not configurable.<\/p>\n<p>The next part starts by calling the <code>setup<\/code> function in the <a href=\"https:\/\/github.com\/sintaxi\/harp\/blob\/master\/lib\/helpers.js\" rel=\"noopener\">helpers module<\/a>. For the sake of brevity, we won&#8217;t go into the specific code of the function (feel free to look for yourself), but essentially it reads the site configuration (i.e. <code>harp.json<\/code>).<\/p>\n<p>You may also notice a call to something called <code>terraform<\/code>. This will come up again within this function. <a href=\"https:\/\/github.com\/sintaxi\/terraform\" rel=\"noopener\">Terraform<\/a> is actually a separate project required by Harp that is the basis of its <a href=\"https:\/\/launchschool.com\/blog\/rails-asset-pipeline-best-practices\" rel=\"noopener\">asset pipeline<\/a>. The asset pipeline is where the hard work of compiling and building the finished site gets done (we&#8217;ll look at Terraform code in a little bit).<\/p>\n<p>The next portion of code, as it states, tries to prevent you from specifying an output directory that would inadvertently overwrite your source code (which would be bad as you&#8217;d lose any work since your last commit).<\/p>\n<p>The <code>compileFile<\/code> and <code>copyFile<\/code> functions are fairly self-explanatory. The <code>compileFile<\/code> function relies on Terraform to do the actual compilation. Both of these functions drive the <code>prime<\/code> function which uses a helper function (<code>fs<\/code>) to walk the directories, compiling or copying files as necessary in the process.<\/p>\n<h4>Terraform<\/h4>\n<p>As I discussed, Terraform does the grunt work for compiling the Jade, Markdown, Sass and CoffeeScript into HTML, CSS and JavaScript (and assembling these pieces as defined by Harp). Terraform is made up of a number of files that define its processors for JavaScript, CSS\/stylesheets, and templates (which, in this case, includes Markdown).<\/p>\n<figure id=\"post-250967\" class=\"align-none media-250967\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/02\/terraform-1.jpg?ssl=1\" alt=\"\" style=\"width: 250px;\" data-recalc-dims=\"1\" \/><\/figure>\n<p>Within each of these folders is a <code>processors<\/code> folder that contains the code for each specific processor that Terraform (i.e. Harp) supports. For example, in the templates folder are files that form the basis for compiling EJS, Jade, and Markdown files.<\/p>\n<figure id=\"post-250936\" class=\"align-none media-250936\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/02\/terraform_processors.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>I won&#8217;t delve into the code for each of these, but, for the most part, they rely upon external npm modules that handle the supported processor. For example, for Markdown support, it depends upon <a href=\"https:\/\/www.npmjs.com\/package\/marked\" rel=\"noopener\">Marked<\/a>.<\/p>\n<p>The core logic of Terraform is contained in its <code>render<\/code> function.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">\/**\r\n    * Render\r\n    *\r\n    * This is the main method to to render a view. This function is\r\n    * responsible to for figuring out the layout to use and sets the\r\n    * `current` object.\r\n    *\r\n    *\/\r\n\r\nrender: function(filePath, locals, callback){\r\n\r\n    \/\/ get rid of leading slash (windows)\r\n    filePath = filePath.replace(\/^\\\\\/g, '')\r\n\r\n    \/\/ locals are optional\r\n    if(!callback){\r\n    callback = locals\r\n    locals   = {}\r\n    }\r\n\r\n\r\n    \/**\r\n    * We ignore files that start with underscore\r\n    *\/\r\n\r\n    if(helpers.shouldIgnore(filePath)) return callback(null, null)\r\n\r\n\r\n    \/**\r\n    * If template file we need to set current and other locals\r\n    *\/\r\n\r\n    if(helpers.isTemplate(filePath)) {\r\n\r\n    \/**\r\n        * Current\r\n        *\/\r\n    locals._ = lodash\r\n    locals.current = helpers.getCurrent(filePath)\r\n\r\n\r\n    \/**\r\n        * Layout Priority:\r\n        *\r\n        *    1. passed into partial() function.\r\n        *    2. in `_data.json` file.\r\n        *    3. default layout.\r\n        *    4. no layout\r\n        *\/\r\n\r\n    \/\/ 1. check for layout passed in\r\n    if(!locals.hasOwnProperty('layout')){\r\n\r\n        \/\/ 2. _data.json layout\r\n        \/\/ TODO: Change this lookup relative to path.\r\n        var templateLocals = helpers.walkData(locals.current.path, data)\r\n\r\n        if(templateLocals &amp;&amp; templateLocals.hasOwnProperty('layout')){\r\n        if(templateLocals['layout'] === false){\r\n            locals['layout'] = null\r\n        } else if(templateLocals['layout'] !== true){\r\n\r\n            \/\/ relative path\r\n            var dirname = path.dirname(filePath)\r\n            var layoutPriorityList = helpers.buildPriorityList(path.join(dirname, templateLocals['layout'] || \"\"))\r\n\r\n            \/\/ absolute path (fallback)\r\n            layoutPriorityList.push(templateLocals['layout'])\r\n\r\n            \/\/ return first existing file\r\n            \/\/ TODO: Throw error if null\r\n            locals['layout'] = helpers.findFirstFile(root, layoutPriorityList)\r\n\r\n        }\r\n        }\r\n\r\n        \/\/ 3. default _layout file\r\n        if(!locals.hasOwnProperty('layout')){\r\n        locals['layout'] = helpers.findDefaultLayout(root, filePath)\r\n        }\r\n\r\n        \/\/ 4. no layout (do nothing)\r\n    }\r\n\r\n    \/**\r\n        * TODO: understand again why we are doing this.\r\n        *\/\r\n\r\n    try{\r\n        var error  = null\r\n        var output = template(root, templateObject).partial(filePath, locals)\r\n    }catch(e){\r\n        var error  = e\r\n        var output = null\r\n    }finally{\r\n        callback(error, output)\r\n    }\r\n\r\n    }else if(helpers.isStylesheet(filePath)){\r\n    stylesheet(root, filePath, callback)\r\n    }else if(helpers.isJavaScript(filePath)){\r\n    javascript(root, filePath, callback)\r\n    }else{\r\n    callback(null, null)\r\n    }\r\n\r\n}<\/code><\/pre>\n<p>(If you were reading all this code closely, you likely noticed TODO&#8217;s, typos, and even a funny &#8220;understand again why we are doing this&#8221; comment. That&#8217;s real life coding!)<\/p>\n<p>The majority of the code in the <code>render<\/code> function is about handling templates. Things like CoffeeScript and Sass fundamentally render on a one-to-one basis. For example, <code>style.scss<\/code> will render to <code>style.css<\/code>. Even if it has includes, that is handled by the renderer. The very end of the <code>render<\/code> function deals with these types of files.<\/p>\n<p><a href=\"https:\/\/harpjs.com\/docs\/development\/layout\" rel=\"noopener\">Layouts in Harp<\/a>, on the other hand, are nested within each other in a variety of manners that can even depend upon configuration. For example, <code>about.md<\/code> might be rendered within the default <code>_layout.jade<\/code> (where, exactly, is determined by the use of <code>!= yield<\/code> within that layout). However, <code>_layout.jade<\/code> might include multiple other layouts within itself by way of the <a href=\"https:\/\/harpjs.com\/docs\/development\/partial\" rel=\"noopener\">partial support<\/a> in Harp.<\/p>\n<p>Partials are a way of splitting up a template into multiple files. They are especially useful for code reuse. For instance, I might put the site header inside a partial. Partials are important for making layouts within a static site generator maintainable but they also add a good deal of complexity to the logic of compiling templates. This complexity is handled within the <code>partial<\/code> function of the <a href=\"https:\/\/github.com\/sintaxi\/terraform\/blob\/master\/lib\/template\/index.js\" rel=\"noopener\">templates processor<\/a>.<\/p>\n<p>Finally, you could override the default layout by specifying a specific layout or no layout at all for a particular file within the <code>_data.json<\/code> configuration file. All of these scenarios are handled (and even numbered) within the logic of the <code>render<\/code> function.<\/p>\n<h3>That&#8217;s Not So Complicated, Is It?<\/h3>\n<p>To make this digestible, I&#8217;ve skipped over a ton of additional detail. At its core, every static site generator I&#8217;ve ever used (and I&#8217;ve used <a href=\"https:\/\/github.com\/remotesynth\/Static-Site-Samples\" rel=\"noopener\">a bunch<\/a>) functions similarly: a set of rules, conventions, and configuration that is run through compilers for the various supported markups. Perhaps that is why there are a <a href=\"https:\/\/staticsitegenerators.net\/\" rel=\"noopener\">ridiculous number<\/a> of static site generators out there.<\/p>\n<p>That being said, I wouldn&#8217;t want to build my own!<\/p>\n<h3>My Report &#038; Book<\/h3>\n<p>If you are interested in learning how to build sites using a static site generator, I&#8217;ve authored a report and co-authored a book for O&#8217;Reilly that might interest you. My report, simply titled <a href=\"http:\/\/www.oreilly.com\/web-platform\/free\/static-site-generators.csp\" rel=\"noopener\">Static Site Generators<\/a> is free and attempts to establish the history, landscape, and basics behind static site generators. <\/p>\n<figure id=\"post-250974\" class=\"align-none media-250974\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/02\/books-1.jpg?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>The book that I co-authored with <a href=\"https:\/\/twitter.com\/raymondcamden\" rel=\"noopener\">Raymond Camden<\/a> is called <a href=\"http:\/\/shop.oreilly.com\/product\/0636920051879.do\" rel=\"noopener\">Working with Static Sites<\/a> and is available as an early release, but should be available in print soon.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I talk a lot about static site generators, but always about using static site generators. In most cases, it may seem like a black box. I create a template and some Markdown and out comes a fully formed HTML page. Magic! But what exactly is a static site generator? What goes on inside that black [&hellip;]<\/p>\n","protected":false},"author":247653,"featured_media":250975,"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":false,"jetpack_social_options":[]},"categories":[4],"tags":[1116,1025],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/css-tricks.com\/wp-content\/uploads\/2017\/02\/ssg.svg","jetpack-related-posts":[{"id":296937,"url":"https:\/\/css-tricks.com\/jamstack-tools-and-the-spectrum-of-classification\/","url_meta":{"origin":250931,"position":0},"title":"JAMstack Tools and The Spectrum of Classification","date":"October 17, 2019","format":false,"excerpt":"With the wonderful world of JAMstack getting big, all the categories of services and tools that help it along are as important as ever. There are static site generators, headless CMSs, and static file hosts. I think those classifications are handy, and help conversations along. But there is a point\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/services.png?fit=1200%2C693&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":351586,"url":"https:\/\/css-tricks.com\/static-site-generators-vs-cms-powered-websites-how-to-keep-marketers-and-devs-happy\/","url_meta":{"origin":250931,"position":1},"title":"Static Site Generators vs. CMS-powered Websites: How to Keep Marketers and Devs Happy","date":"September 16, 2021","format":false,"excerpt":"Many developers love working with static site generators like Gatsby and Hugo. These powerful yet flexible systems help create beautiful websites using familiar tools like Markdown and React. Nearly every popular modern programming language has at least one actively developed, fully-featured static site generator. Static site generators boast a number\u2026","rel":"","context":"In &quot;Sponsored&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/Developer-Header.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":356134,"url":"https:\/\/css-tricks.com\/does-the-next-generation-of-static-site-generators-make-building-sites-better\/","url_meta":{"origin":250931,"position":2},"title":"Does the Next Generation of Static Site Generators Make Building Sites Better?","date":"November 8, 2021","format":false,"excerpt":"Just ran across \u00eeles, a new static site generator mostly centered around Vue. The world has no particular shortage of static site generators, but it's interesting to see what this \"next generation\" of SSGs seem to focus on or try to solve. \u00eeles looks to take a heaping spoonful of\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-05-at-5.48.56-AM.png?fit=1200%2C396&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":358672,"url":"https:\/\/css-tricks.com\/confused-about-ssgs\/","url_meta":{"origin":250931,"position":3},"title":"I&#8217;m confused about Static Site Generators. Are they only for informational sites where I can&#8217;t log in or display any dynamic data?","date":"December 14, 2021","format":false,"excerpt":"I got this question from a listener the other day. Fair question, I'd say. The word \"Static\" in \"Static Site Generator\" is at-odds with the word \"Dynamic.\" It seems to imply that the website created with a Static Site Generator (SSG) is locked in stone, only to be changed when\u2026","rel":"","context":"In &quot;Sponsored&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/static-dynamic.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":324084,"url":"https:\/\/css-tricks.com\/comparing-static-site-generator-build-times\/","url_meta":{"origin":250931,"position":4},"title":"Comparing Static Site Generator Build Times","date":"October 28, 2020","format":false,"excerpt":"There are so many static site generators (SSGs). It\u2019s overwhelming trying to decide where to start. While an abundance of helpful articles may help wade through the (popular) options, they don\u2019t magically make the decision easy. I\u2019ve been on a quest to help make that decision easier. A colleague of\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/ssg-logo-tiles.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":307185,"url":"https:\/\/css-tricks.com\/static-or-not\/","url_meta":{"origin":250931,"position":5},"title":"Static or Not?","date":"April 27, 2020","format":false,"excerpt":"A quick opinion piece by Kev Quirk:\u00a0Why I Don\u2019t Use A Static Site Generator. Kev uses WordPress: Want to\u00a0blog on my iPad? I can. Want to do it on my phone? No problem. On a machine I don\u2019t normally use? Not an issue, as long as it has a browser.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/css-tricks.com\/wp-content\/uploads\/2017\/02\/ssg.svg","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/250931"}],"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\/247653"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=250931"}],"version-history":[{"count":13,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/250931\/revisions"}],"predecessor-version":[{"id":250976,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/250931\/revisions\/250976"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/250975"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=250931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=250931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=250931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}