Blog

Personal blog using 11ty.

Development env

• npm > 6.14.13
• Node 14

Node version is set in node version manager .nvmrc

nvm use

Setup

git clone git@github.com:pietrop/pietrop.github.io.git

npm install

Usage

For local development

npm start

System Architecture

Static blog in markdown using 11ty.

• _data/site.json is where site wide info goes.
• _includes is where you can find the layout and other partials for templating.
• _site is the output of build (excluded from git)
• categories is where the markdown blogposts go, organized in folders.
• public public folder for static assets
• images where image assets are stored

Documentation

• 11ty
• Turn Jekyll up to Eleventy
• syntaxhighlight
• global data
• Directory for global data files
• Liquid shopify cheat sheet
• How to create drafts in Eleventy
• collections and glob syntax
• liquid tag, formatting dates
• addPassthroughCopy eg for pdfs and other static files
• Add edit on github links to all pages
• How to Deploy Eleventy to GitHub Pages With GitHub Actions
• Add CNAME file cname
• Workflow syntax for GitHub Actions
• navigation plugin
• Getting Started with Eleventy
• twitter card validator
• How to Make All External Links Open in a New Tab in 11ty with MarkdownIt
• Adding DuckDuckGo Search to Your Website
• deploy to a subdirectory with a path prefix
• How to Make All External Links Open in a New Tab in 11ty with MarkdownIt
• Deploy to a subdirectory with a path prefix

Images

• How to optimize and lazy-loading images on eleventy (11ty)
• images
• Improving upon my image processing with Eleventy

Dark mode

• dark mode
• detect darkmode system change
• How to detect if the OS is in dark mode in browsers?

Experimental

• eleventy-plugin-jsx ❌

Visual code extension

• :emojisense:
• Paste URL - Visual Studio Marketplace
• GitHub - mcecot/markdown-it-checkbox: Plugin to create checkboxes for markdown-it markdown parser.

Build

npm run build

Tests

NA

Deployment

Github actions

There's a github action configured to build and deploy automatically when pushing to master.

"manual deploy"

npm run build:deploy

Deployment, deploys to github pages.