starter-extended-blog v10

A starter repository showing how to build a blog with the Eleventy site generator.

Getting Started

• Want a more generic/detailed getting started guide?

1. Make a directory and navigate to it:

mkdir my-blog-name
cd my-blog-name

2. Clone this Repository

git clone https://github.com/GoogleChrome/starter-extended-blog.git .

Optional: Review eleventy.config.js and _data/metadata.js to configure the site’s options and data.

3. Install dependencies

npm install

4. Run Eleventy

Generate a production-ready build to the _site folder:

npx @11ty/eleventy

Or build and host on a local development server:

npx @11ty/eleventy --serve

Or you can run debug mode to see all the internals.

Admin Page: Create Blog Posts

This project includes a dedicated Admin Page at /{locale}/blog/admin/?admin=true (for example, /en/blog/admin/?admin=true) for composing new blog posts directly in the browser. It features a Markdown editor with a live preview and advanced asset handling.

Usage

• Load your blog's admin page at /{locale}/blog/admin/?admin=true (for example, /en/blog/admin/?admin=true).
• Open the Settings pane and link the editor with your blog's GitHub repository to enable publishing to GitHub.
• Optionally enable AI features and choose your AI backend. If available, the editor will use built-in AI APIs that work with a local model directly in the browser. Otherwise, you can use cloud or local AI backends.
  • For cloud backends, enter your AI API keys in the Settings section of the admin Page.
  • For local backends, no API keys are required.
• Create new blog posts, or edit existing ones by clicking the "Edit" button in the Archive or on the Home page.

Features

• Draft Management: Work on multiple drafts simultaneously. Drafts are saved automatically to your browser's local storage.
• Rich Asset Support:
  • Drag and drop or paste images directly into the editor.
  • Images are stored locally in IndexedDB for persistent offline editing.
• Intelligent Housekeeping: Automatically identifies and removes unused images from local storage when drafts are updated or deleted.
• PWA Support: The Admin Page is installable as a Progressive Web App (PWA). Once installed, it requests persistent storage, making it significantly less likely that your drafts and images will be evicted by the browser under disk pressure.
• Smart Pasting: Paste rich text from other websites; the Admin Page automatically converts HTML to Markdown and attempts to download and locally host external images. If this isn't possible due to CORS, it falls back to the original remote URL.
• Export & Sync:
  • Save as .zip: Export your finished post and its images as a structured .zip file ready for manual deployment.
  • GitHub Integration: Create a Pull Request directly from the UI. The Admin Page handles branch creation, image uploads, and Markdown submission to your repository.
  • Edit Existing Blog Posts: Directly load and update existing posts from your GitHub repository by clicking the "Edit" button in the Archive or the Home page.

Optional Built-in AI Features

The Admin Page offers several assistive features powered by the Built-in AI APIs. These APIs are also polyfilled to work in browsers that do not support them natively.

To use the polyfilled AI features with cloud AI providers, you need to provide your AI API keys in the Settings section of the Admin Page. The following backends are supported:

• Local: Transformers.js.
• Cloud: Firebase AI Logic (Developer/Vertex), OpenAI, Gemini API.

For more information on supported backends and configuration, see the Prompt API Polyfill README.

Available AI features:

• AI Writing Assistant: Expand bullet points into full paragraphs or rewrite existing content to adjust the tone.
• Smart Summarization: Generate suggestions for blog post titles and meta descriptions from your content that you can then refine.
• Multimodal Alt-Text: Automatically generate suggestions for accessible alt-text and creative captions for uploaded or pasted images.
• Tag Suggestions: Receive relevant tag recommendations based on the topics discussed in your post.
• Advertising Categories: Generate suggestions for advertising categories based on the topics discussed in your post.
• Post Translation: Translate your blog post to other languages, based on the locales you list in _data/locales.js.

Note: These features are privacy-focused and run entirely locally on your device when using the built-in AI APIs. They can be completely turned off in the Admin Page settings.

Features

• Using Eleventy v4 with zero-JavaScript output.
  • Content is exclusively pre-rendered (this is a static site).
  • Can easily deploy to a subfolder without changing any content
  • All URLs are decoupled from the content’s location on the file system.
  • Configure templates via the Eleventy Data Cascade
• Performance focused: four-hundos Lighthouse score out of the box!
  • 0 Cumulative Layout Shift
  • 0ms Total Blocking Time
• Local development live reload provided by Eleventy Dev Server.
• Content-driven navigation menu
• Fully automated Image optimization
  • Zero-JavaScript output.
  • Support for modern image formats automatically (e.g. AVIF and WebP)
  • Processes images on-request during --serve for speedy local builds.
  • Prefers <img> markup if possible (single image format) but switches automatically to <picture> for multiple image formats.
  • Automated <picture> syntax markup with srcset and optional sizes
  • Includes width/height attributes to avoid content layout shift.
  • Includes loading="lazy" for native lazy loading without JavaScript.
  • Includes decoding="async"
  • Images can be co-located with blog post files.
• Per page CSS bundles via eleventy-plugin-bundle.
• Built-in syntax highlighter (zero-JavaScript output).
• Draft content: use draft: true to mark any template as a draft. Drafts are only included during --serve/--watch and are excluded from full builds. This is driven by the addPreprocessor configuration API in eleventy.config.js. Schema validator will show an error if non-boolean value is set in data cascade.
• Blog Posts
  • Automated next/previous links
  • Accessible deep links to headings
• Generated Pages
  • Home, Archive, and About pages
  • Atom feed included (with easy one-line swap to use RSS or JSON)
  • sitemap.xml
  • Zero-maintenance tag pages/
  • Content not found (404) page

Demos

• Netlify
• Vercel
• Cloudflare Pages
• GitHub Pages

Deploy this to your own site

Deploy this Eleventy site in just a few clicks on these services:

• Read more about Deploying an Eleventy project to the web.
• Deploy this to Netlify
• Deploy this to Vercel
• Look in .github/workflows/gh-pages.yml.sample for information on Deploying to GitHub Pages.
• Try it out on Stackblitz

Implementation Notes

• content/{locale}/about/index.njk is an example of a content page.
• content/blog/{locale}/ 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.
• Use the eleventyNavigation key (via the Eleventy Navigation plugin) in your front matter to add a template to the top level site navigation. This is in use on content/{locale}/index.njk and content/{locale}/about/index.njk.
• 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.
• 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.
• This project uses three Eleventy Layouts:
  • _includes/layouts/base.njk: the top level HTML structure
  • _includes/layouts/home.njk: the home page template (wrapped into base.njk)
  • _includes/layouts/post.njk: the blog post template (wrapped into base.njk)
• _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.

Content Security Policy

If your site enforces a Content Security Policy (as public-facing sites should), you have a few choices (pick one):

1. In base.njk, remove <style>{% getBundle "css" %}</style> and uncomment <link rel="stylesheet" href="{% getBundleFileUrl "css" %}">
2. Configure the server with the CSP directive style-src: 'unsafe-inline' (less secure).

Disclaimer

This is not an officially supported Google product. This project is not eligible for the Google Open Source Software Vulnerability Rewards Program.