equinusocio / xity-starter

A blog-ready 11ty starter based on PostCSS, with RSS feed and Native Elements!

Home Page:https://xity-starter.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

XITY Starter

A blog-ready 11ty starter based on PostCSS and Snowpack, with a RSS feed and Native Elements.

Key features

📰 Integrated RSS Feed.

💅 PostCSS with PostCSS Preset Env and cssnano to enhance and clean your css.

🏅 No CSS or JS frameworks to remove. Just add what you need.

📝 Basic blog structure.

📦 Basic building with Snowpack.

🎚 Configuration file to set meta data and global settings.

🎨 Code highlights which you can disable with a flag.

⚡️ Superpowered HTML elements with Native Elements.

⚠️ Custom 404 page layout

🤖 Custom blog posts parser to create <figure> and wrap iframes

⚙️ Service Worker generated by eleventy-plugin-pwa

Preconfigured tools



You can download the scaffolding to create a new project structure with one command:

npx degit equinusocio/xity-starter#main

This command will download the project to your current working directory and remove the .github and .vscode folders. After the project structure has been downloaded, you should install the required dependencies:

yarn install

Running the local development mode

This command will run eleventy and the snowpack with auto reload.

yarn start

Building the production version

To generate your static site you can run the following command. It will build the project and run optimisations for a production release inside the /build folder.

yarn build

More commands

XITY provides also two more commands useful to update dependencies and the cssdb used by Browserslist and PostCSS:

# Update dependencies interactively
yarn update:deps

# Update the cssdb definitions. Run it every month.
yarn update:cssdb

# Run prettier against md, css, and js files
yarn lint


You can easily configure your site by changing the settings inside the xity.config.js configuration file.

Here are the default settings you will get with this project structure:

   * Site data
  name: 'XITY - Eleventy blog/site starter',
  shortDesc: "I'm Mattia Astorino, UX Engineer in Milan and member of Open Source Design.",
  url: 'https://xity-starter.netlify.app',
  lang: 'en',
   * Socials and monetisation
  authorHandle: '@equinusocio',
  authorName: 'Mattia Astorino',
  paymentPointer: '$ilp.uphold.com/9ebKEYaNiGUf',
   * Content settings
  syntaxTheme: 'prism-material-light.css',
  permalinkClass: ['permalink'],
  iframeClass: ['iframes-wrapper'],
  codeClass: ['code-wrapper'],
  figureClass: ['figure'],
   * Main navigation items.
   * Used by components/header.njk
  navigation: [
      text: 'Home',
      url: '/',
      external: false,
      text: 'Blog',
      url: '/blog/',
      external: false,
      text: 'Sample Page',
      url: '/sample-page/',
      external: false,
      text: 'GitHub',
      url: 'https://github.com/equinusocio/xity-starter',
      external: true,
ezoic increase your site revenue


A blog-ready 11ty starter based on PostCSS, with RSS feed and Native Elements!



Language:JavaScript 56.7%Language:Nunjucks 37.4%Language:CSS 5.8%