|
| 1 | +# plugins.jquery.com |
| 2 | + |
| 3 | +Static archive of the old plugins registry at plugins.jquery.com. |
| 4 | + |
| 5 | +## Getting Started |
| 6 | + |
| 7 | +- [Want a more generic/detailed getting started guide?](https://www.11ty.dev/docs/getting-started/) |
| 8 | + |
| 9 | +1. Make a directory and navigate to it: |
| 10 | + |
| 11 | +``` |
| 12 | +mkdir my-blog-name |
| 13 | +cd my-blog-name |
| 14 | +``` |
| 15 | + |
| 16 | +2. Clone this Repository |
| 17 | + |
| 18 | +``` |
| 19 | +git clone https://github.com/11ty/eleventy-base-blog.git . |
| 20 | +``` |
| 21 | + |
| 22 | +_Optional:_ Review `eleventy.config.js` and `_data/metadata.js` to configure the site’s options and data. |
| 23 | + |
| 24 | +3. Install dependencies |
| 25 | + |
| 26 | +``` |
| 27 | +npm install |
| 28 | +``` |
| 29 | + |
| 30 | +4. Run Eleventy |
| 31 | + |
| 32 | +Generate a production-ready build to the `_site` folder: |
| 33 | + |
| 34 | +``` |
| 35 | +npx @11ty/eleventy |
| 36 | +``` |
| 37 | + |
| 38 | +Or build and host on a local development server: |
| 39 | + |
| 40 | +``` |
| 41 | +npx @11ty/eleventy --serve |
| 42 | +``` |
| 43 | + |
| 44 | +Or you can run [debug mode](https://www.11ty.dev/docs/debugging/) to see all the internals. |
| 45 | + |
| 46 | +## Features |
| 47 | + |
| 48 | +- Using [Eleventy v2.0](https://www.11ty.dev/blog/eleventy-v2/) with zero-JavaScript output. |
| 49 | + - Content is exclusively pre-rendered (this is a static site). |
| 50 | + - Can easily [deploy to a subfolder without changing any content](https://www.11ty.dev/docs/plugins/html-base/) |
| 51 | + - All URLs are decoupled from the content’s location on the file system. |
| 52 | + - Configure templates via the [Eleventy Data Cascade](https://www.11ty.dev/docs/data-cascade/) |
| 53 | +- **Performance focused**: four-hundos Lighthouse score out of the box! |
| 54 | + - [View the Lighthouse report for the latest build](https://eleventy-base-blog.netlify.app/reports/lighthouse/) courtesy of the [Netlify Lighthouse plugin](https://github.com/netlify/netlify-plugin-lighthouse). |
| 55 | + - _0 Cumulative Layout Shift_ |
| 56 | + - _0ms Total Blocking Time_ |
| 57 | +- Local development live reload provided by [Eleventy Dev Server](https://www.11ty.dev/docs/dev-server/). |
| 58 | +- Content-driven [navigation menu](https://www.11ty.dev/docs/plugins/navigation/) |
| 59 | +- [Image optimization](https://www.11ty.dev/docs/plugins/image/) via the `{% image %}` shortcode. |
| 60 | + - Zero-JavaScript output. |
| 61 | + - Support for modern image formats automatically (e.g. AVIF and WebP) |
| 62 | + - Prefers `<img>` markup if possible (single image format) but switches automatically to `<picture>` for multiple image formats. |
| 63 | + - Automated `<picture>` syntax markup with `srcset` and optional `sizes` |
| 64 | + - Includes `width`/`height` attributes to avoid [content layout shift](https://web.dev/cls/). |
| 65 | + - Includes `loading="lazy"` for native lazy loading without JavaScript. |
| 66 | + - Includes [`decoding="async"`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding) |
| 67 | + - Images can be co-located with blog post files. |
| 68 | + - View the [Image plugin source code](https://github.com/11ty/eleventy-base-blog/blob/main/eleventy.config.images.js) |
| 69 | +- Per page CSS bundles [via `eleventy-plugin-bundle`](https://github.com/11ty/eleventy-plugin-bundle). |
| 70 | +- Built-in [syntax highlighter](https://www.11ty.dev/docs/plugins/syntaxhighlight/) (zero-JavaScript output). |
| 71 | +- Blog Posts |
| 72 | + - Draft posts: use `draft: true` to mark a blog post as a draft. Drafts are **only** included during `--serve`/`--watch` and are excluded from full builds. View the [Drafts plugin source code](https://github.com/11ty/eleventy-base-blog/blob/main/eleventy.config.drafts.js). |
| 73 | + - Automated next/previous links |
| 74 | + - Accessible deep links to headings |
| 75 | +- Generated Pages |
| 76 | + - Home, Archive, and About pages. |
| 77 | + - [Feeds for Atom and JSON](https://www.11ty.dev/docs/plugins/rss/) |
| 78 | + - `sitemap.xml` |
| 79 | + - Zero-maintenance tag pages ([View on the Demo](https://eleventy-base-blog.netlify.app/tags/)) |
| 80 | + - Content not found (404) page |
| 81 | + |
| 82 | +## Demos |
| 83 | + |
| 84 | +- [Netlify](https://eleventy-base-blog.netlify.com/) |
| 85 | +- [GitHub Pages](https://11ty.github.io/eleventy-base-blog/) |
| 86 | +- [Remix on Glitch](https://glitch.com/~11ty-eleventy-base-blog) |
| 87 | + |
| 88 | +## Deploy this to your own site |
| 89 | + |
| 90 | +Deploy this Eleventy site in just a few clicks on these services: |
| 91 | + |
| 92 | +- [Get your own Eleventy web site on Netlify](https://app.netlify.com/start/deploy?repository=https://github.com/11ty/eleventy-base-blog) |
| 93 | +- If you run Eleventy locally you can drag your `_site` folder to [`drop.netlify.com`](https://drop.netlify.com/) to upload it without using `git`. |
| 94 | +- [Get your own Eleventy web site on Vercel](https://vercel.com/import/project?template=11ty%2Feleventy-base-blog) |
| 95 | +- Read more about [Deploying an Eleventy project](https://www.11ty.dev/docs/deployment/) to the web. |
| 96 | + |
| 97 | +### Implementation Notes |
| 98 | + |
| 99 | +- `content/about/index.md` is an example of a content page. |
| 100 | +- `content/blog/` has the blog posts but really they can live in any directory. They need only the `posts` tag to be included in the blog posts [collection](https://www.11ty.dev/docs/collections/). |
| 101 | +- Use the `eleventyNavigation` key (via the [Eleventy Navigation plugin](https://www.11ty.dev/docs/plugins/navigation/)) in your front matter to add a template to the top level site navigation. This is in use on `content/index.njk` and `content/about/index.md`. |
| 102 | +- Content can be in _any template format_ (blog posts needn’t exclusively be markdown, for example). Configure your project’s supported templates in `eleventy.config.js` -> `templateFormats`. |
| 103 | +- The `public` folder in your input directory will be copied to the output folder (via `addPassthroughCopy` in the `eleventy.config.js` file). This means `./public/css/*` will live at `./_site/css/*` after your build completes. |
| 104 | +- Provides two content feeds: |
| 105 | + - `content/feed/feed.njk` |
| 106 | + - `content/feed/json.njk` |
| 107 | +- This project uses three [Eleventy Layouts](https://www.11ty.dev/docs/layouts/): |
| 108 | + - `_includes/layouts/base.njk`: the top level HTML structure |
| 109 | + - `_includes/layouts/home.njk`: the home page template (wrapped into `base.njk`) |
| 110 | + - `_includes/layouts/post.njk`: the blog post template (wrapped into `base.njk`) |
| 111 | +- `_includes/postslist.njk` is a Nunjucks include and is a reusable component used to display a list of all the posts. `content/index.njk` has an example of how to use it. |
| 112 | + |
| 113 | +If your site enforces a Content Security Policy (as public-facing sites should), either, in `base.njk`, disable |
| 114 | + |
| 115 | +```html |
| 116 | +<style> |
| 117 | + {% getBundle "css" %} |
| 118 | +</style> |
| 119 | +``` |
| 120 | + |
| 121 | +and enable |
| 122 | + |
| 123 | +```html |
| 124 | +<link rel="stylesheet" href="{% getBundleFileUrl "css" %}"> |
| 125 | +``` |
| 126 | + |
| 127 | +or configure the server with the CSP directive `style-src: 'unsafe-inline'` (which is less secure). |
0 commit comments