swordfight.me

This site uses Eleventy, GitHub, and Netlify.

Start creating your site

Create and edit your site right from this readme file!.

Step 1: Creating and editing site pages and content

Pages

Create your site's main content! Pages can be written in HTML or Markdown!

Or edit your entire site in a web-based editor by clicking here. Your changes will be automatically saved to this GitHub repository and published to your site.

Step 2: Look and Feel

Navigation

Your site's navigation is how your users will get around! Edit the site's navigation menu in JSON format!

Edit the navigation

Styles

Colors, spacing, and fonts, oh my! You can edit your branding and styles here using CSS, SCSS, and CSS variables! Remember adding styles on MySpace? Same thing!

Learning CSS can be daunting but there are a ton of useful resources on the web. Check out SmolCSS to get started!

Javascript

Optional! Add javascript functionality to your site

Add Javascript

Step 3: Deploy swordfight.me

Launch swordfight.me on Netlify for Free!

Get to Know swordfight.me

Ready to go deeper? Here's how swordfight.me is laid out:

example.com                 # → Root of your swordfight.me-based project
├── src/                    # → Source directory
│   ├── assets/             # → Site assets
│   │   ├── fonts/
│   │   ├── images/
│   │   ├── scripts/
│   │   ├── styles/
│   │   ├── views/
│   │   │   └── layouts/
│   │   │   └── partials/
│   │   └── assets.json     # → Shared attributes for files in the assets directory
│   ├── config/             # → Eleventy configuration
│   │   ├── collections.js  # → Add and configure collections (https://www.11ty.dev/docs/collections/)
│   │   ├── filters.js      # → Add and configure filters (https://www.11ty.dev/docs/filters/)
│   │   ├── passthroughs.js # → Add and configure passthroughs (https://www.11ty.dev/docs/copy/)
│   │   ├── plugins.js      # → Add and configure plugins (https://www.11ty.dev/docs/plugins/)
│   │   ├── shortcodes.js   # → Add and configure shortcodes (https://www.11ty.dev/docs/shortcodes/)
│   │   ├── templateLanguages.js   # → Configure custom template languages (HINT: this is where swordfight.me's Sass and Javascript pipelines are set up!) (https://www.11ty.dev/docs/languages/custom/)
│   │   ├── watchtargets.js # → Add and configure watch targets (https://www.11ty.dev/docs/watch-serve/)
│   │   └── config.json     # → Shared attributes for files in the config directory
│   ├── content             # → A nice, organized, recommended place for all site content
│   │   └── pages           # → Add "pages" collection items here
│   └── data                # → Customize site data (https://www.11ty.dev/docs/data/)
│       ├── navigation.json # → Site navigation configuration
│       └── site.json       # → Site branding configuration
├── .eleventy.js            # → Core Eleventy config file
├── netlify.toml            # → Netlify deployment and plugin configuration (optional)
├── README.template.md      # → swordfight.me readme
└── README.md               # → Your project's readme (automatically generated when this template is used)

Eleventy Configuration

Eleventy configuration is abstracted from the typical .eleventy.js file and moved to /src/config/ for easy organization and configuration of collections, filters, passthroughs, etc.

Install project dependencies

npm i

Run the project locally

npm run dev

Build for staging

(The same as production except every page is flagged noindex)

npm run staging

Build for production

npm run production

MWDelaney/swordfight.me