alexpeattie.com

This is the code for my personal site - alexpeattie.com - it's a static site built with Eleventy and hosted on Netlify.

Features

• 🎨 Style preprocessing with SASS/SCSS, PostCSS and Autoprefixer
• 📦 Webpack for asset bundling
• 🌐 ES6 support with Babel
• 🔍 SEO friendly pages (including Open Graph and Twitter meta)
• 🗺 Automatic RSS feed & sitemap generation
• 💡 light-server as local dev server
• 💻 Netlify CLI for local replication of the prod environment
• ⚡️ Build-time style optimization (with cssnano) and Turbolinks for snappy performance
• ✨ Stimulus as a JS micro-framework
• 🧮 Shiki for syntax highlighting, KaTeX for math rendering

🛠 Installation & dev setup

1. Install and use the correct version of Node using NVM

nvm install

2. Install dependencies

yarn

3. Start the development server

yarn run dev

The site should be running on http://localhost:4000 ✅.

📦 Building for production

To generate a full static production build

NODE_ENV=production yarn run build

You can preview the generated site as it will appear on Netlify, using Netlify Dev:

yarn global add netlify-cli # if not already installed
yarn run netlify dev

The production site can be previewed on http://localhost:4001 ✅.

🎨 Color Reference

Color	Hex
Text	#212529
Headings	#000000
Light text	#738a94
Logo	#fff255
Code BG	#f6f8fa
Separators	#e9ecef
Link	#007bff
Link hover	#0056b3

(The colors used across the site are stored as SASS variables in _variables.scss)

Contributing

As you might imagine, I'm only after contributions for actual bugs or typos (maybe refactoring) - please don't open an issue because you think the site's content is rubbish 😅!

Of course, feel free to fork this repo if you want to use it as the base for your own site.

License

Copyright © 2021 Alex Peattie. MPLv2 Licensed, see LICENSE for details.