All Projects → scottishstoater → Jamstack Web Starter

scottishstoater / Jamstack Web Starter

Licence: mit
Static website workflow utilising Eleventy, Tailwind CSS, Webpack and PostCSS.

Projects that are alternatives of or similar to Jamstack Web Starter

Eleventy Starter Boilerplate
🚀 Eleventy Starter is production-ready with SEO-friendly for quickly starting a blog. ⚡ Built with Eleventy, ESLint, Prettier, Webpack, PostCSS, Tailwind CSS and Netlify CMS (optional).
Stars: ✭ 139 (-29.8%)
Mutual labels:  webpack, netlify, static-site-generator
Static Site Boilerplate
A better workflow for building modern static websites.
Stars: ✭ 1,633 (+724.75%)
Mutual labels:  webpack, netlify, postcss
Skeleventy
A skeleton boilerplate built with Eleventy.
Stars: ✭ 318 (+60.61%)
Mutual labels:  webpack, netlify, static-site-generator
Deventy
A minimal 11ty starting point for building static websites with modern tools.
Stars: ✭ 157 (-20.71%)
Mutual labels:  webpack, static-site-generator, postcss
Next Js Blog Boilerplate
🚀 Nextjs Blog Boilerplate is starter code for your blog based on Next framework. ⚡️ Made with Nextjs, TypeScript, ESLint, Prettier, PostCSS, Tailwind CSS.
Stars: ✭ 134 (-32.32%)
Mutual labels:  netlify, static-site-generator
React Redux Graphql Apollo Bootstrap Webpack Starter
react js + redux + graphQL + Apollo + react router + hot reload + devTools + bootstrap + webpack starter
Stars: ✭ 127 (-35.86%)
Mutual labels:  webpack, postcss
X0
Document & develop React components without breaking a sweat
Stars: ✭ 1,706 (+761.62%)
Mutual labels:  webpack, static-site-generator
Gatsby Starter Netlify Cms
Example gatsby + netlify cms project
Stars: ✭ 1,932 (+875.76%)
Mutual labels:  netlify, static-site-generator
Book
《现代化前端工程师权威指南》https://guoyongfeng.github.io/book/
Stars: ✭ 141 (-28.79%)
Mutual labels:  webpack, postcss
Webpack Encore
A simple but powerful API for processing & compiling assets built around Webpack
Stars: ✭ 1,975 (+897.47%)
Mutual labels:  webpack, postcss
Gopablo
🐺 Static site generator.
Stars: ✭ 166 (-16.16%)
Mutual labels:  static-site-generator, postcss
Frasco
Quick starter for Jekyll including full setup for Sass, PostCSS, Autoprefixer, stylelint, Webpack, ESLint, imagemin, Browsersync, etc.
Stars: ✭ 123 (-37.88%)
Mutual labels:  webpack, postcss
Profileio
Static site and resume generator from YAML based profile for students and researchers. Generates ready to deploy branches via github actions.
Stars: ✭ 122 (-38.38%)
Mutual labels:  netlify, static-site-generator
Hops
Universal Development Environment
Stars: ✭ 158 (-20.2%)
Mutual labels:  webpack, postcss
Baumeister
👷 The aim of this project is to help you to build your things. From Bootstrap themes over static websites to single page applications.
Stars: ✭ 171 (-13.64%)
Mutual labels:  webpack, static-site-generator
Todolist Frontend Vuejs
Front-end application for Todolist Web application built with Laravel and Vue.js
Stars: ✭ 120 (-39.39%)
Mutual labels:  webpack, netlify
Reactql
Universal React+GraphQL starter kit: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR
Stars: ✭ 1,833 (+825.76%)
Mutual labels:  webpack, postcss
Elm Batteries
Learn how Elm, Parcel, Cypress and Netlify work together. Get started with Elm navigation, routes, remote data and decoder.
Stars: ✭ 108 (-45.45%)
Mutual labels:  netlify, postcss
React Static Boilerplate
A boilerplate for building static sites with Webpack 2, React and React Router
Stars: ✭ 108 (-45.45%)
Mutual labels:  webpack, static-site-generator
Polymer Skeleton
💀 Skeleton for Polymer 3 app with Webpack, PostCSS and Service Workers ready.
Stars: ✭ 185 (-6.57%)
Mutual labels:  webpack, postcss

Rocket icon

JAMStack Web Starter

Eleventy · Tailwind CSS · HTML · CSS · Javascript

Contents


Project Overview

  • The project uses Eleventy as a static site generator
  • Default templating is Nunjucks (can be changed if you want)
  • PostCSS set up to handle:
    • TailwindCSS
    • CSS Imports
    • Autoprefixer
  • PurgeCSS to remove unused CSS (set up for TailwindCSS by default) in production
  • HTML minified in production
  • CSS inlined and minified in production
  • Webpack used to bundle scripts
  • Scripts optimised for production
  • Document <head> crafted using htmlhead.dev

Getting Started

Install dependencies

npm install

Working locally

Starts watch tasks to compile when changes detected

npm start

Creating a production build

Minify HTML, compress JS, inline and minify CSS.

npm run build

Deployment

You can host the production output on any web server or service you like and upload it via any method, it'll work.

If you don't have an existing place to host your site you should have a look at Netlify, I can't recommend it enough. To get started you can hit the button below.

Deploy to Netlify


Credits

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].