A curated list of the tech I use, built with Astro and Tailwind CSS

https://uses.craftz.dog/

Watch how I built this website on YouTube:

https://youtu.be/3_JE76PKBWE

• Astro - Static Website Framework
• Tailwind CSS - CSS Framework
• React - Component-based UI framework for JS
• Headless UI - Unstyled interactive components
• React Icons - Icon set
• Inkdrop - Markdown note-taking app, for writing the blog content (optional)

Inside of your Astro project, you'll see the following folders and files:

PROJECT_ROOT
├── public              # static assets
│   └── posts           # images of posts
├── src
│   ├── components      # Astro & React components
│   │   └── icons
│   ├── layouts         # page layouts
│   ├── pages           # page files
│   │   ├── categories  # category pages
│   │   └── posts       # .md files
│   └── styles          # global stylesheets
└── tools               # Inkdrop integration

First, please check out the live-export documentation.

Create .env file as following:

DEBUG='inkdrop:export:info,inkdrop:export:error'
INKDROP_USERNAME='***'
INKDROP_PASSWORD='***'
INKDROP_PORT=***
INKDROP_BOOKID='***'

Then, run the following command:

npm run live-import

MIT License.

You can create your own homepage for free without notifying me by forking this project under the following conditions:

• Delete my blog content and assets
• Add a link to my homepage

Looking for a Markdown note-taking app? Check out my app called Inkdrop: