一件事引发另一件事，今天我构建了自己的静态站点生成器

useMarked() 钩子

现场演示

我最初是为我弟弟建一个静态网站，作为一个小型的业余项目——但后来我想要部分代码……以及回归测试。我想到部分代码可以帮助我内联 CSS 和 JS 标签，同时将代码拆分成不同的文件，以便在开发过程中方便组织。我喜欢内联资源，以避免在网络不稳定的简单落地页上出现渲染阻塞延迟。

一开始我真的不认为我需要发电机，但是一件事引发了另一件事，我自己建造了一个基本的发电机。

build.rb它由一个如下所示的文件组成...

prod_build = ARGV[0] == "for_prod"

# Read files
meta_html =       File.open("workspace/meta.partial.html").read
style_css =       File.open("workspace/style.partial.css").read
body_html =       File.open("workspace/body.partial.html").read
json_data =       File.open("workspace/data.json").read
scaffold_js =     File.open("workspace/scaffold.partial.js").read
dynamic_js =      File.open("workspace/dynamic.partial.js").read
analytics_html =  File.open("workspace/analytics.partial.html").read
base_html =       File.open("workspace/base.html").read
test_html = ""

unless prod_build
  test_html = File.open("workspace/test.dev.html").read
end

# Create built page
build_string = base_html
  .gsub("{{ meta }}", meta_html)
  .gsub("{{ style }}", style_css)
  .gsub("{{ html }}", body_html)
  .gsub("{{ data }}", json_data)
  .gsub("{{ scaffold_script }}", scaffold_js)
  .gsub("{{ dynamic_script }}", dynamic_js)
  .gsub("{{ analytics }}", analytics_html)
  .gsub("{{ test }}", test_html)

# Write to target page

if prod_build
  puts "Production build.... index.html"
  File.write("index.html", build_string)
else
  puts "Development build.... wip-index.html"
  File.write("wip-index.html", build_string)
end

我可以让这段代码变得 DRY，但在这个阶段我更喜欢它变得愚蠢和超级明确。

如你所见，这只是基本的字符串查找和替换。{{也可以很容易地被替换成💩💩或[cromulent >>。它完全是任意的，但{{}}看起来很花哨。

base.html看起来像这样...

<html lang="en">
  <head>
    {{ meta }}
    <style>
      {{ style }}
    </style>
  </head>
  <body>
    {{ html }}
    <script>
      // Data
      var data = {{ data }}

      // Code
      {{ scaffold_script }}
      {{ dynamic_script }}
    </script>
    {{ analytics }}
    {{ test }}
  </body>
</html>