Jekyll Webpack Boilerplate
A boilerplate with Jekyll and Webpack to make the most performant static websites
Overview:
This Jekyll boilerplate is enhanced with Webpack to create modern and high-performing websites, including Progressive Web Apps. It offers a range of features to improve workflow, optimize styles and code, set up analytics and other configurations, and enable easy deployment.
Features:
- Improved workflow with Webpack working alongside Jekyll
- BrowserSync live reload for a seamless development experience
- Optimized styles and SASS, with automatic CSS minification and PostCSS Auto Prefixer
- ES6 support with Babel, minification, and uglification
- Images optimization with Imagemin
- Theme color customization in the config file
- Automatic favicon generation
- Google Analytics setup (optional)
- Doorbell setup (optional)
- Cookie consent setup (optional)
- SEO ready with Jekyll SEO plugin and generated sitemap
- Accelerated Mobile Pages enabled for posts
- Internationalization plugin for multilingual websites
- Progressive Web Apps support, including generation of the manifest and service worker
- CMS admin panel integration, specifically works with Netlify CMS
- Easy deployment with Netlify
Summary:
This Jekyll boilerplate supercharged with Webpack offers an improved workflow for building modern and performant websites. It includes features like optimized styles, ES6 support, internationalization, PWA generation, and CMS integration. It also provides easy deployment options with Netlify. The installation process is straightforward and requires basic prerequisites. Overall, this boilerplate simplifies the development process and enhances website performance.
- Jekyll
Jekyll is a static site generator written in Ruby that allows you to create simple, fast, and secure websites without the need for a database.
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Pwa
A Progressive Web App (PWA) is a type of web application that uses modern web technologies to provide a native app-like experience to users, including offline functionality, push notifications, and device hardware access. PWAs can be installed on a user's home screen and launched like a traditional app, but do not require a separate app store listing or download.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.