An Interest In:
Web News this Week
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
Some of Our Sources
- Techcrunch
- You The Designer
- Crazy Leaf Design
- Fudge Graphics
- Web Design Ledger
- Wal You
- CSS Tricks
- Daily Now
- Hashedout
- The Verge
Help Webnuz
Referal links:
One thing led to another and I built my own static site generator today
I started by building a static site as a small side project for my brotherbut then I wanted partials... and regression tests. I thought partials which could help me inline the CSS and JS tags while breaking the code up into different files for organizational purposes in development. I like to inline the assets to avoid render-blocking latency on simple landing pages which will likely be served over unreliable network conditions.
At first I really didn't think I needed a generator at all, but one thing led to another and I kind built a basic one myself.
It consists of a build.rb file that looks like this...
prod_build = ARGV[0] == "for_prod"# Read filesmeta_html = File.open("workspace/meta.partial.html").readstyle_css = File.open("workspace/style.partial.css").readbody_html = File.open("workspace/body.partial.html").readjson_data = File.open("workspace/data.json").readscaffold_js = File.open("workspace/scaffold.partial.js").readdynamic_js = File.open("workspace/dynamic.partial.js").readanalytics_html = File.open("workspace/analytics.partial.html").readbase_html = File.open("workspace/base.html").readtest_html = ""unless prod_build test_html = File.open("workspace/test.dev.html").readend# Create built pagebuild_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 pageif 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)endI could DRY up this code, but I prefer it to be dumb and super explicit at this stage.
As you can see, this is just basic string find and replace. {{ could just as easily have been or [cromulent >>. It's completely arbitrary, but {{}} looked fancy.
base.html looks like this...
<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>...I even wrote my own dependency-free JavaScript test suite. I'll share more once it's further along.
I probably should have reached for an existing static site generator instead of doing this from scratch, so why did I take this approach?
In all seriousness, I generally like to avoid dependencies when doing projects like this so it's easier to hop in for a quick change in the future without having to install a bunch of old dependencies. Building a whole toolchain myself is sort of silly, but fun!
If you don't want to be like me, you may want to check out this great thread...
Happy coding!
Original Link: https://dev.to/ben/one-thing-led-to-another-and-i-built-my-own-static-site-generator-today-5enj
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To