We built most of this project LIVE over on Twitch. Visit the announcement post to learn more.
This repo is now ready as an Eleventy starter! Review the recordings and customization section below to learn more about how it was built and how it works.
Subscribe to my newsletter to receive my weekly streaming schedule (and other news about my various projects + CSS tips).
Final edited recordings will eventually be published to the 11ty Rocks YouTube Channel
📺 = moved to YouTube
- 📺 Project intro and creating the feature list
- 📺 Begin the 11ty architecture + add feedparser
- 📺 Reorganize, adjust feed output, and create dynamic views
- 📺 Enable method to determine "new", link views
- 📺 Filters and templating
- Part one of CSS styling
- Part two of CSS styling
Note that additional styling and further organization was completed outside of the streams to get the starter fully release-ready. Check the commit history if you're interested in the difference between streamed dev and post-stream dev.
Edit src/_data/meta.js to update the siteTitle value.
Update the CSS custom properties values within src/sass/_theme.scss to quickly retheme the app.
Modify, add, or remove the JSON files within src/feeds/ following the schema of:
{
"category": "Category Name",
"items": ["https://permalink.to/feed"]
}npm start
Run 11ty with hot reload at localhost:8080, including reload based on Sass changes
npm run build
Production build includes minified, autoprefixed CSS
Use this as the "Publish command" if needed by hosting such as Netlify.
New to Eleventy? Get started with my written tutorial for beginners
Learn to build an 11ty site in 20 mins with my egghead video course and see how to add a blog and custom data.
Explore advanced setup of custom data through my tutorial on building a community site
Even more resources are available from 11ty.Rocks