Git Product home page Git Product logo

xity-starter's Introduction

XITY Starter

A blog-ready 11ty starter based on PostCSS and Parcel, 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 Parcel bundler.

🎚 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


Prerequisites

Usage

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

npx degit https://github.com/equinusocio/xity-starter

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 parcel and the local server (with Browsersync) with auto reload.

yarn dev

Building the production version

To generate your static site/blog you can run the following command. It will prepare the content assets and run optimisations for a production release.

yarn build

Configurations

You can easily configure your site by changing the settings inside src/_data/config.json.

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

{
  // Site name used as default site title
  "name": "Eleventy blog/site starter",

  // Short description used as default page description
  "shortDesc": "A starting point to make blogs and sites. It’s not a template.",

  // Default document language
  "lang": "en",

  // The default website base url
  "url": "localhost",

  // Social shares author username
  "authorHandle": "@equinusocio",

  // Social shares author name
  "authorName": "Mattia Astorino",

  // Tip payment url, if you want to monetize your site
  "paymentPointer": "$twitter.xrptipbot.com/equinusocio",

  // Code highlight theme, must reflect the file name inside /assets/css.
  // Remove to disable it
  "syntaxTheme": "prism-material-light.css",

  // CSS class applied to the "#" anchor elements inside headings
  "permalinkClass": "permalink",

  // CSS class applied to the iframes wrapper
  "iframesClass": "iframes-wrapper",

  // CSS class applied to highlighted code snippets
  "codeClass": "code-wrapper",

  // Filesystem folders. "blogdir" and "includes" must be relative to "src"
  "paths": {
    "src": "src",
    "blogdir": "blog",
    "includes": "components",
    "output": "dist"
  }
}

xity-starter's People

Contributors

d2s avatar equinusocio avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.