Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/denar90/smiling-potato
Jamstack site created with Stackbit
https://github.com/denar90/smiling-potato
eleventy git headless jamstack ssg stackbit static
Last synced: 23 days ago
JSON representation
Jamstack site created with Stackbit
- Host: GitHub
- URL: https://github.com/denar90/smiling-potato
- Owner: denar90
- License: mit
- Created: 2020-12-23T17:17:39.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2020-12-23T17:17:49.000Z (about 4 years ago)
- Last Synced: 2024-10-19T00:30:16.393Z (3 months ago)
- Topics: eleventy, git, headless, jamstack, ssg, stackbit, static
- Language: JavaScript
- Homepage: https://jamstack.new
- Size: 19.9 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# eleventy-high-performance-blog
A starter repository showing how to build a blog with the Eleventy static site generator implementing a wide range of performance best practices.
Based on the awesome [eleventy-base-blog](https://github.com/11ty/eleventy-base-blog).
## Demo
* [Netlify Demo](https://eleventy-high-performance-blog-sample.industrialempathy.com/)
## Getting Started
### 1. Generate a new repository from this repository template
Click the [Use this template button](https://github.com/google/eleventy-high-performance-blog/generate).
### 2. Clone your new repository
```
git clone https://github.com/YOUR_REPO
```
### 3. Navigate to the directory
```
cd my-blog-name
```
### 4. Install dependencies
```
npm install
```
### 5. Build, serve, watch and test
```
npm run watch
```
### 6. Build and test
```
npm run build
```
## Customize
- Search for "Update me" across files in your editor to find all the site specific things you should update.
- Update the favicons in 'img/favicon/'.
- If you don't want the (same-origin) Google Analytics integration, rip it out 😛.
- Otherwise: Knock yourself out. This is a template repository.
- For a simple color override, adjust these CSS variables at the top of `css/main.css`.
```css
:root {
--primary: #E7BF60;
--primary-dark: #f9c412;
}
```
## Features
### Performance outcomes
- Perfect score in applicable lighthouse audits (including accessibility).
- Single HTTP request to [First Contentful Paint](https://web.dev/first-contentful-paint/).
- Very optimized [Largest Contentful Paint](https://web.dev/lcp/) (score depends on image usage, but images are optimized).
- 0 [Cumulative Layout Shift](https://web.dev/cls/).
- ~0 [First Input Delay](https://web.dev/fid/).
### Performance optimizations
#### Images
- Immutable URLs.
- Downloads remote images and stores/serves them locally.
- Generates multiple sizes of each image and uses them in **`srcset`**.
- Generates a **blurry placeholder** for each image (without adding an HTML element or using JS).
- **Lazy loads** images (using [native `loading=lazy`](https://web.dev/native-lazy-loading/)).
- **Async decodes** images (using `decoding=async`).
- **Avoids CLS impact** of images by inferring and providing width and height (Supported in Chrome, Firefox and Safari 14+).
#### CSS
- Defaults to the compact "classless" [Bahunya CSS framework](https://kimeiga.github.io/bahunya/).
- Inlines CSS.
- Dead-code-eliminates / tree-shakes / purges (pick your favorite word) unused CSS on a per-page basis with [PurgeCSS](https://purgecss.com/).
- Minified CSS with [csso](https://www.npmjs.com/package/csso).
#### Miscellaneous
- Immutable URLs for JS.
- Sets immutable caching headers for images, fonts, and JS (CSS is inlined). Currently implements for Netflify `_headers` file.
- Minifies HTML and optimizes it for compression. Uses [html-minifier](https://www.npmjs.com/package/html-minifier) with aggressive options.
- Uses [rollup](https://rollupjs.org/) to bundle JS and minifies it with [terser](https://terser.org/).
- Prefetches same-origin navigations when a navigation is likely.
- If an AMP files is present, [optimizes it](https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/optimize_amp/).
#### Fonts
- Serves fonts from same origin.
- Preloads fonts.
- Makes fonts `display:swap`.
#### Analytics
- Supports locally serving Google Analytics's JS and proxying it's hit requests to a Netlify proxy (other proxies could be easily added).
- Support for noscript hit requests.
- Avoids blocking onload on analytics requests.
### DX features
- Uses 🚨 as favicon during local development.
- Supports a range of default tests.
- Runs build and tests on `git push`.
- Sourcemap generated for JS.
### SEO & Social
- Share button prefering `navigator.share()` and falling back to Twitter. Using OS-like share-icon.
- Support for OGP metadata.
- Support for Twitter metadata.
- Support for schema.org JSON-LD.
- Sitemap.xml generation.
### Largely useless glitter
- Read time estimate.
- Animated scroll progress bar…
- …with an optimized implementation that should never cause a layout.
### Security
Generates a strong CSP for the base template.
- Default-src is self.
- Disallows plugins.
- Generates hash based CSP for the JS used on the site.
### Build performance
- Downloaded remote images, and generated sizes are cached in the local filesystem…
- …and SHOULD be committed to git.
- `.persistimages.sh` helps with this.
### Opportunities (not-yet-implemented)
- Transcode images to webp.
- Transcode images to avif.
## Disclaimer
This is not an officially supported Google product, but rather [Malte's](https://twitter.com/cramforce) private best-effort open-source project.