All Projects → theNewDynamic → Thenewdynamic.org

theNewDynamic / Thenewdynamic.org

Resources for Designers and Developers using the JAMstack

Projects that are alternatives of or similar to Thenewdynamic.org

Netlify Cms
A Git-based CMS for Static Site Generators
Stars: ✭ 14,776 (+61466.67%)
Mutual labels:  static-site-generator, static, jamstack
trailing-slash-guide
Understand and fix your static website trailing slash issues!
Stars: ✭ 255 (+962.5%)
Mutual labels:  static-site-generator, static, jamstack
startbootstrap-stylish-portfolio-jekyll
Jekyll theme based on Stylish Portfolio Bootstrap theme
Stars: ✭ 20 (-16.67%)
Mutual labels:  jekyll, static-site-generator, static
Skeleventy
A skeleton boilerplate built with Eleventy.
Stars: ✭ 318 (+1225%)
Mutual labels:  static-site-generator, jamstack
Jamstackthemes
A list of themes and starters for JAMstack sites.
Stars: ✭ 298 (+1141.67%)
Mutual labels:  jekyll, jamstack
Bridgetown
A Webpack-aware, Ruby-powered static site generator for the modern Jamstack era
Stars: ✭ 317 (+1220.83%)
Mutual labels:  static-site-generator, jamstack
PlainSite
PlainSite:A Truely Hackable Static Site Generator.
Stars: ✭ 31 (+29.17%)
Mutual labels:  jekyll, static-site-generator
Elm Pages
A statically typed site generator for Elm.
Stars: ✭ 363 (+1412.5%)
Mutual labels:  static-site-generator, jamstack
Gridsome Portfolio Starter
A simple portfolio theme for Gridsome powered by Tailwind CSS v1
Stars: ✭ 329 (+1270.83%)
Mutual labels:  static-site-generator, jamstack
Made Mistakes Jekyll
Source for my website and blog (Jekyll + Gulp + Netlify)
Stars: ✭ 436 (+1716.67%)
Mutual labels:  jekyll, jamstack
Pretzel
A site generation tool (and then some) for .NET platforms
Stars: ✭ 592 (+2366.67%)
Mutual labels:  jekyll, static-site-generator
Sidey
Sidey is a simple and minimalistic jekyll blogging theme.
Stars: ✭ 274 (+1041.67%)
Mutual labels:  jekyll, jamstack
graphql-ssg
GraphQL data based Static Site Generator.
Stars: ✭ 30 (+25%)
Mutual labels:  static-site-generator, static
Beautiful Jekyll
✨ Build a beautiful and simple website in literally minutes. Demo at https://beautifuljekyll.com
Stars: ✭ 3,778 (+15641.67%)
Mutual labels:  jekyll, static-site-generator
eventually-jekyll-theme
A Jekyll version of the "Eventually" theme by HTML5 UP.
Stars: ✭ 26 (+8.33%)
Mutual labels:  jekyll, static
Eleventy Netlify Boilerplate
A template for building a simple website with the Eleventy static site generator
Stars: ✭ 359 (+1395.83%)
Mutual labels:  static-site-generator, jamstack
Jekyll Lunr Js Search
[UNSUPPORTED] Jekyll + lunr.js = static websites with powerful full-text search using JavaScript
Stars: ✭ 536 (+2133.33%)
Mutual labels:  jekyll, static-site-generator
Staticgen
Static website generator that lets you use HTTP servers and frameworks you already know
Stars: ✭ 628 (+2516.67%)
Mutual labels:  static-site-generator, static
astro
Build fast websites, faster. 🚀🧑‍🚀✨
Stars: ✭ 11,024 (+45833.33%)
Mutual labels:  static-site-generator, static
Zola
A fast static site generator in a single binary with everything built-in. https://www.getzola.org
Stars: ✭ 7,823 (+32495.83%)
Mutual labels:  static-site-generator, static

The New Dynamic

Build Better Faster Websites

We use a Changelog on all of our projects. Please see that file for updates.

tools

  • Hugo - A general-purpose website framework—written in Go—that generates static webpages.
  • Parcel - A "blazing" fast, zero configuration web application bundler.
  • PostCSS | TailwindsCSS (library of JS-based CSS classes ) | PurgeCSS (removes unused CSS)
  • KyleAMathews/typefaces (load OS fonts locally with one little require)

Hugo Asset Pipline

This set up utilizes Parcel for Javascript and open source font processing, Hugo Pipes + PostCSS for CSS processing, and npm-run-all to run Parcel and Hugo in parallel (see note below). We use the Yarn package manager, but you can use NPM if you like.

This asset pipeline is a shift for us from using Webpack to process JS/Fonts/CSS. Parcel is a bundler like Webpack, yet as a tradeoff for slightly less flexibility it has a smaller configuration and file footprint and builds faster; in fact, there is no Parcel configuration file. The shift to using Hugo to build CSS allows Hugo sites to be developed outside of an external build process. There are drawbacks to this approach, as outlined below.

Notes:

  • This configuration is built around the assumption that JS/Fonts are processed in development, not production, though it would take minimal effort to do so.
  • The scripts in package.json include loading of environment variables with cross-env which is optional for some systems (not windows) and can safely be removed. Just replace cross-env NODE_ENV=development with NODE_ENV=development

JS

  • Uses Parcel Bundler.
  • Parcel outputs to assets/output/index.js.
  • Hugo is used to fingerprint and make a secure hash for Subresource Integrity.
    • If fileExists "./assets/output/index.js Hugo creates a hash of that file from layouts/_head/scripts.html.
  • Hugo outputs the processed JS file to public/output/index.min.[hash].js.

CSS

  • Uses Hugo Pipes, utlizing PostCSS. NOTE: we use this method because we use utility-class CSS. I otherwise recommend you use Parcel to process your CSS. See "How to Switch to running JS-based PostCSS" below.
  • Uses Parcel/PostCSS as default. See "How to Switch to Hugo-based PostCSS" below.

CSS via Hugo

  • Hugo processes assets/css/styles.css with assets/postcss.config.js, utilizing Imports, TailwindCSS, Autoprefixer, and PurgeCSS.
  • If NODE_ENV=development is present in the build command, PostCSS will NOT process the file through PurgeCSS.
  • Hugo outputs the processed CSS file to public/css/styles.min.[hash].css.

CSS via Parcel

  • Parcel processes assets/css/styles.css with assets/postcss.config.js, utilizing Imports, TailwindCSS, Autoprefixer, and PurgeCSS.
  • If NODE_ENV=development is present in the build command, PostCSS will NOT process the file through PurgeCSS.
  • Hugo outputs the processed CSS file to assets/output/index.[hash].css.

Fonts

  • Open source fonts via Typefaces uses Parcel Bundler.
  • Parcel outputs CSS to assets/output/index.css and also puts the font files, hashed, in the same directory.
  • Hugo Pipes processes files into public directory and create Prefetch links.
    • If fileExists "./assets/output/index.css Hugo creates the prefetch links from layouts/_head/stylesheets.html.
  • Hugo outputs the processed fonts and CSS file to public/output/index.min.[hash].css and public/output/font-name.[hash].woff[2].

Images

  • Assets stored in an S3 bucket or local to the repo, transformed via Imgix.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].