Craftzdog Uses

Craftzdog Uses is an open-source 'uses' website template built with Astro and Tailwind CSS that turns Markdown posts into a categorized static site listing the tech its author uses. The template is created by Takuya Matsuyama (craftzdog), a developer who also makes the Inkdrop note-taking app, and it powers his live site at uses.craftz.dog. It is a learning resource: a YouTube tutorial walks through building the site from scratch.

What is Craftzdog Uses?

This template is a personal 'uses' page starter that displays a curated list of the technology tools its author uses, organized as blog posts under category pages. It takes Markdown files as input and outputs a static website using the Astro framework, styled with Tailwind CSS, with React and Headless UI powering interactive components. The project is authored by Takuya Matsuyama, the creator of Inkdrop, and is published under an MIT license.

Key Features

• Astro static site framework — generates a fast, static website with partial hydration for the React components.
• Tailwind CSS styling — the entire site is styled with Tailwind utility classes, so no custom CSS files are needed.
• React + Headless UI — interactive components like menus and dialogs come from Headless UI, with React Icons providing the icon set.
• Category pages — posts are grouped into categories by files placed in the categories folder under src/pages.
• Inkdrop live import — a npm run live-import command pulls notes from an Inkdrop local server via the live-export tool, converting them into Markdown posts.
• Project structure — clear separation: public/posts for images, src/components for Astro and React components, src/layouts, src/pages, and src/styles.
• MIT license — you can fork and create your own homepage free, provided you delete the original blog content/assets and add a link to the author's homepage.

Who is it for?

• Developers who want to share their personal tech stack on a clean, static 'uses' site without managing a server.
• Astro learners — the included YouTube tutorial and full project structure teach how to build a real Astro site with Tailwind and React.
• Inkdrop users — if you take notes in Inkdrop, the live-import workflow turns your notes directly into site content.

What can you do with it?

• Showcase your toolkit: list the hardware, software, and gadgets you use every day, each as a Markdown post sorted into categories.
• Publish a tech blog: use the same Astro setup to write longer Markdown posts and have them rendered as static pages.
• Learn modern Jamstack development: study how Astro, Tailwind, React, and Headless UI cooperate in a small, real-world project.

How does Craftzdog Uses work?

The site is a static Astro project. Posts live as Markdown files under src/pages/posts, and category pages are generated in src/pages/categories. For Inkdrop integration, you create a .env file with the Inkdrop server credentials (username, password, port, and book ID) and run npm run live-import to fetch notes from the local server. The YouTube tutorial at https://youtu.be/3_JE76PKBWE walks through the full build.

FAQ

Is Craftzdog Uses free?

Yes, the template is free under the MIT License. You can fork the repository and create your own homepage without notifying the author, as long as you delete the original blog content and assets and add a link to Takuya's homepage.

What stack does it use?

The template uses Astro for static site generation, Tailwind CSS for styling, and React with Headless UI for interactive components. React Icons is included for icons. Posts are written in Markdown and processed by Astro.

How do I import my Inkdrop notes?

First set up Inkdrop's live-export tool, then create a .env file with INKDROP_USERNAME, INKDROP_PASSWORD, INKDROP_PORT, and INKDROP_BOOKID. Run npm run live-import to pull notes from your local Inkdrop server and convert them into Markdown posts.

Do I need to give attribution?

Yes, the license requires you to add a link to Takuya's homepage (https://www.craftz.dog/) on your site. You also need to delete the original blog content and assets from the repository before publishing your own version.