html/css/js + markdown + gulp automation + hot-reloading to create lightweight static sites
- Features
- Roadmap
- Install
- Development environment
- Production builds
- Deploying to Vercel
- Technologies Used
- Helpful code editor packages
- Fast reload on all edits
- QR code for physical mobile web app development (also with fast reload)
- HTML + Nunjucks Templating with Layouts
- SCSS => CSS
- CSS & JS Minified
- Dark Mode check with JavaScript (adds
.dark-mode
to body) - Markdown support + Front Matter for page data
- Meta supported: title, description, canonical, robots, etc.
- Next / Previous Posts generated (within it's category)
- Relative / Absolute pathing handled for you
- Sitemap.xml created
- Build stats
- Page count
- CSS before and after minification
- eslint/prettier
- Local WYSIWYG Editor
- Category support
- Show HTML before and after sizes in build report
- Use purgecss?
- Theming (+ predefined palettes, scss variables and root css usage)
run: yarn
or yarn install
- start local server, run:
yarn dev
- stop local server: ctl + c
- run:
yarn prod
- creates: /static_prod/
- Make sure you have Vercel CLI installed globally on your machine
- then run:
yarn prod
to make sure you have all static files generated and ready for deployment - then run:
vercel
(this will prompt a login if you are not already) - going through the setup flow, make sure to set the directory your code is located to be: ./static_prod
- side note, i've added a custom domain, (feather-ssg.dev) so to push to that domain i run:
vercel --prod
- Gulp v.4
- task()
- watch()
- series()
- parallel()
- forward() with Gulp v.4, they removed the ability for forward reference a task, to help performance, so you must define a task before it is called.
- SCSS & CSS Minification
- Nunjucks & HTML Minification
- BrowserSync with Gulp
- for hot-reloading after a change is made to, sccs/js/nunjucks
- QR Code Plugin for quick development on a physical mobile device (same wifi network required).
- Notification/Error handling:
- node-notifier
- error handling is happening at the compile state for both scss & nunjucks
- Cleaning up directories before a new compile: del
- CLI helpful coloring using chalk
- For Atom:
- Syntax highlighting for nunjucks templates
- Displays Colors used in project (even scss variables)