/ensrationis.eth

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

Primary LanguageLiquid

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

Helpers

  1. youtube embed

helps to inject youtube video by just adding video link:

https://www.youtube.com/watch?v=WcEvaQ5TIj4&ab_channel=Robonomics.network

  1. twitter (x) embed

helps to inject twitter (x) post by just adding the link:

https://x.com/AIRA_Robonomics/status/1711265224567726247?s=20

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

Hosting on ENS domain

  1. You need to run the command:
  npm run build

to create the latest version of your website.

Small tip: delete _site folder before the command. It'll help get all new content.

  1. Next, you need to get to the newly created folder and run the command below:
  cd _site
  npx all-relative

The second command helps us with all the paths. Read more here and here

  1. Now, you need to post your site on IPFS. Guide

  2. And the last step is to link your IPFS website to ENS domain