![]() _includes # □ Templates and SVG graphics *imported into* pages _layouts # □ Templates, styles, and scripts *wrapping around* pages _data # □ Data globally available to all pages Here's a breakdown of the folder hierarchy + naming conventions:Īssets # Dump for images, fonts, and icons eleventy.js file if you're so inclined, but that's beyond the scope of this README □ □ General file structure You can check out that configuration in the. Hot reloading during development using browsersyncįrom this baseline, I set up a new system for layouts, styles, and JS that works nicely with their (experimental!) addExtension helper.Global data available to all my templates from a _data folder.It has some nice out-of-the-box features that I can piggyback off of: ![]() In the end, it's clear that 11ty can save me from this chaos. This had a nasty consequence: every time I revisited the repo to tweak something, I needed to re-read my own docs to remember how it fit together □ well, I reinvented every wheel in existence. There were custom solutions for data fetching at build time, layout rendering, JS bundling. My first iteration on this portfolio concept didn't use any existing frameworks at all. And lastly, I have the need for speed □ Pages (and transitions between those pages) needed to stay crisp, and load times for styles, scripts, and assets should stay low.So dynamic JS imports, ES modules, CSS grid. I wanted to stay on the bleeding edge of modern browser APIs.I wanted a single page app feel with sexy page transitions to boot ✨ This was not easy to pull off given the first goal, but not impossible!.So no React, Vue, Svelte, or even JQuery to be found. I did not want to lean on existing frameworks to make it work, mostly as a learning exercise.I built this project with a few goals in mind: Well, this certainly ain't your grandma's Gatsby site! This thing is lightweight, framework-free, and full of custom configuration. ![]() You can check out DEV's API docs to pull from your personal account and see what happens □ □ Goals of this project This is totally normal! Since blog posts previewed on the homepage are pulled from DEV, you'll need an environment variable to render them properly. You should also notice a softly thrown exception in your console. This will spin up a local development server using Browsersync with live reloading on file changes.
0 Comments
Leave a Reply. |