All Projects → kohrongying → 11ty-blog-starter

kohrongying / 11ty-blog-starter

Licence: other
11ty v1.0, Tailwind v3. Works when JS is disabled

Programming Languages

Liquid
124 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to 11ty-blog-starter

eleventy solo starter njk
Further development suspended as of 2021-09-11. Please refer instead to https://www.11ty.dev/docs/starter/ for a wide selection of other Eleventy starter sets.
Stars: ✭ 22 (-60%)
Mutual labels:  tailwind, eleventy
eleventy-duo
Eleventy Duo is a minimal and beautiful Eleventy theme for personal blogs.
Stars: ✭ 146 (+165.45%)
Mutual labels:  eleventy, eleventy-theme
11straps
11straps is a static website boilerplate. It combines Eleventy with Bootstrap 5. 🎉
Stars: ✭ 85 (+54.55%)
Mutual labels:  eleventy, eleventy-theme
frontenso-11ty-starter
Production-ready 11ty+Gulp+Webpack Starter that features Nunjucks, SASS, TailwindCSS (with JIT complier), and ESNext.
Stars: ✭ 24 (-56.36%)
Mutual labels:  tailwind, eleventy
eleventy-plugin-cloudinary
An Eleventy shortcode that allows you to add an image from your cloudinary account
Stars: ✭ 28 (-49.09%)
Mutual labels:  eleventy
portfolio
This is my portfolio which is also a template. Feel free to fork, star, and use it.
Stars: ✭ 86 (+56.36%)
Mutual labels:  tailwind
tailwindcss-dash-docset
TailwindCSS Dash Docset, built with the Dash Docset Builder in PHP. We needed it. 🌈️
Stars: ✭ 37 (-32.73%)
Mutual labels:  tailwind
dsmtech
🚀 The best tech companies and startups in the Greater Des Moines area.
Stars: ✭ 21 (-61.82%)
Mutual labels:  tailwind
tailwindcss-modularscale
Modular scale plugin for TailwindCSS.
Stars: ✭ 19 (-65.45%)
Mutual labels:  tailwind
nextjs-prism-markdown
Example using Prism / Markdown with Next.js including switching syntax highlighting themes.
Stars: ✭ 87 (+58.18%)
Mutual labels:  tailwind
demo-eleventy-serverless
Run Eleventy in a serverless function
Stars: ✭ 53 (-3.64%)
Mutual labels:  eleventy
data-11ty
An open source 11ty theme designed for reporting & data-visualization
Stars: ✭ 19 (-65.45%)
Mutual labels:  eleventy
eleventy-plugin-unfurl
Unfurl links into rich cards, as seen in places like Slack and Twitter
Stars: ✭ 37 (-32.73%)
Mutual labels:  eleventy
tailwind
Website clones/examples using Tailwind CSS.
Stars: ✭ 49 (-10.91%)
Mutual labels:  tailwind
pokemon-icons
Fan art inspired by Pokémon
Stars: ✭ 85 (+54.55%)
Mutual labels:  eleventy
black-dashboard
Elegant black dashboard
Stars: ✭ 43 (-21.82%)
Mutual labels:  tailwind
code-type
Practice code-typing with top 1000 keywords of the most popular programming languages.
Stars: ✭ 31 (-43.64%)
Mutual labels:  tailwind
nextjs-typescript-and-mongodb
NextJS template for development with MongoDB.
Stars: ✭ 17 (-69.09%)
Mutual labels:  tailwind
ngx-tailwind
💨 Simple Angular schematic that initializes Tailwind CSS in your project and adds a custom webpack config to your build process.
Stars: ✭ 120 (+118.18%)
Mutual labels:  tailwind
windstrap
Tailwind CSS with Bootstrap JS
Stars: ✭ 63 (+14.55%)
Mutual labels:  tailwind

Blog starter

Netlify Status

View the live demo here, hosted on Netlify

homepage darkmode

Aims

A blog that still runs without javascript. Hence, no bundlers.

Features

  • Static Site Gen - Eleventy

  • Tailwind CSS v2.0 / Tailwind Typography / Dark Mode

  • Create excerpts using the <!-- excerpt -->

  • Custom ReadTime filter

  • 404 page

  • Tags page to view posts related to tag

    • Use of a tagList collection defined in .eleventy.js
    • /tags - show all available tags (excluding all and posts) as buttons (tags.md)
    • /tags/tag-name - shows all posts related to that tag (tagList.md)
  • Sitemap and Robots.txt

    • Change site url in _data/site.json
  • Shortcode to handle images

    • Add image under src/assets/img/posts and use the asset_img short code
    • {% asset_img 'filename' 'alt_text' %} eg. {% asset_img 'mailbox.jpg' 'mailbox' %}
  • Draft posts using the published frontmatter
  • Posts pagination in index.html
    • change the size frontmatter variable
  • ESLint
  • Bash script to create new post (based on YYYY and MM)
$ ./create new blog post
Created new post at src/posts/2021/01/new-blog-post.md

Running locally

Create your blogpost under src/posts. I like to have mine sorted by YY/MM.

Navigate to localhost:8080 after starting the server.

npm start

Deployment

On Netlify / Surge / Firebase hosting / etc hosting providers

Build Command: npm run build

Output folder: _site

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].