|
| 1 | +# Eleventy + Stylus Blog theme |
| 2 | + |
| 3 | +[](https://app.netlify.com/sites/eleventy-stylus-blog-theme/deploys) |
| 4 | +[](https://travis-ci.com/ar363/eleventy-stylus-blog-theme) |
| 5 | +[](https://github.com/ar363/eleventy-stylus-blog-theme/deployments/activity_log?environment=Production) |
| 6 | + |
| 7 | +A theme repository that contains a blog built with [Eleventy](https://github.com/11ty/eleventy) and [Stylus](https://stylus-lang.com/) |
| 8 | + |
| 9 | +## Features |
| 10 | + - 100% Lighthouse scores |
| 11 | + - Toggleable dark theme (PS. theme preference is also stored in `localStorage`) |
| 12 | + - Tags as taxonomy |
| 13 | + - Stylus CSS preprocessor |
| 14 | + - Integrated with Eleventy's official [navigation plugin](https://www.11ty.dev/docs/plugins/navigation/) |
| 15 | + - Also generates Atom RSS Feed with Eleventy's official [RSS plugin](https://www.11ty.dev/docs/plugins/rss/) |
| 16 | + - Sitemap generation |
| 17 | + - Non-post pages support (eg. About page, Contact page) |
| 18 | + - Modular type scale implemented in with Stylus |
| 19 | + |
| 20 | +## Demos |
| 21 | + |
| 22 | + - Vercel: https://eleventy-stylus-blog-theme.vercel.app/ |
| 23 | + - Netlify: https://eleventy-stylus-blog-theme.netlify.app/ |
| 24 | + - Github Pages: https://ar363.github.io/eleventy-stylus-blog-theme/ |
| 25 | + |
| 26 | +## Screenshots |
| 27 | + |
| 28 | +Light theme |
| 29 | + |
| 30 | + |
| 31 | +Dark theme |
| 32 | + |
| 33 | + |
| 34 | +## Deploy this template to your own site |
| 35 | + |
| 36 | +Get your site up and running with a few clicks |
| 37 | + |
| 38 | + - [Deploy on Netlify](https://app.netlify.com/start/deploy?repository=https://github.com/ar363/eleventy-stylus-blog-theme) |
| 39 | + - [Deploy on Vercel](https://vercel.com/import/project?template=ar363%2Feleventy-stylus-blog-theme) |
| 40 | + |
| 41 | +## Prerequisites for local development |
| 42 | +[Node.js LTS](https://nodejs.org/en/) |
| 43 | + |
| 44 | +## Getting started locally |
| 45 | + |
| 46 | +1. Clone this repo |
| 47 | +``` |
| 48 | +git clone https://github.com/ar363/eleventy-stylus-blog-theme my-blog |
| 49 | +``` |
| 50 | + |
| 51 | +2. Navigate to the blog directory |
| 52 | +``` |
| 53 | +cd my-blog |
| 54 | +``` |
| 55 | + |
| 56 | +3. Install dependencies |
| 57 | +``` |
| 58 | +npm i |
| 59 | +``` |
| 60 | +4. Edit `_data/site.js` according to your site preferences |
| 61 | + |
| 62 | +5. Also optionally modify `stylus/abstracts/variables.styl` according to your preference |
| 63 | + |
| 64 | +To watch for changes in Eleventy and Stylus, use `npm run dev` |
| 65 | + |
| 66 | +To build without watching for changes, use `npm run build` |
0 commit comments