Supercharged web development!
Unleashing the Power of the Web: Combines Astro, Tailwind CSS and Alpine.js to Streamline Your Web Development Process.
Features
All the tools you need
Astro is a high-performance static site builder that seamlessly integrates with Tailwind CSS and Alpine.js. It allows you to build websites with ease and speed, without sacrificing on performance.
- Astro
Astro is the all-in-one web framework designed for speed. Pull your content from anywhere and deploy everywhere, all powered by your favorite UI components and libraries.
- Alpine
Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web. Plop in a script tag and get going.
- Tailwind
A utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.
- Localization
An astro integration of i18next + some utility components to help you translate your astro websites!
- Light/Dark Mode
Light/Dark mode based on tailwind classes
- Giscus
A comments system powered by GitHub Discussions. Let visitors leave comments and reactions on your website via GitHub!
- Decap CMS
Open source content management for your Git workflow
- RSS feed
RSS feed generato da @astrojs/rss
- Article generator (soon)
Use AI to generate your articles posts
Frequently Asked Questions
- This is a astro template that uses tailwindcss and alpinejs
- Alpine js is less than 17kb and it make javascript very fast to write, there are also various open source ready to use components like https://js.hyperui.dev, https://www.alpinetoolbox.com/examples, https://alpinejs.dev/components#components
- Of course, but some components use it and you'll have to edit these, more specifically you ll have to:
- First remove the package with the command
npm unistall @astrojs/alpinejs @types/alpinejs alpinejs - Adjust all components that uses alpine js:
faq.astro,themeselector.astro,navbar.astro
- First remove the package with the command
- I mean, you can, but you'll have to basically rewrite all the template, so I don't recommend it
- One way is to simply keep one language and remove the selector from the footer but in order to fully remove the localization you have to:
- Remove the i18next pacakage
npm unistall astro-i18next - Remove
astro-i18next.config.mjsfile - Remove
localesfolder from public - Remove
languageselector.astrofile and from footer - Find all reference to
i18nextandastro-i18nextand replace with your text
- Remove the i18next pacakage
- Dark mode is embedded into tailwindcss, so you can't remove it, but you can remove the switch from the navbar
- In order to remove decap CMS you need to:
- Remove the netlify-cms pacakage
npm unistall astro-netlify-cms - Remove NetlifyCMS configuration from
astro.config.mjs
- Remove the netlify-cms pacakage
- To configure decap CMS with cloudflare follow this guide https://github.com/i40west/netlify-cms-cloudflare-pages
- To configure decap CMS with netlify do the followings:
- Change NetlifyCMS config
config.backend.nameto git-gateway - Use integrated NetlifyCMS auth https://decapcms.org/docs/git-gateway-backend/#git-gateway-with-netlify
- Change NetlifyCMS config
- In order to change the languages you have to change the languages in the file
astro-i18next.config.mjsand in the netlifyCMS configuration on the fileastro.config.mjs
Then change the locales files folders inpublic/locales - These are cloudflare function that are used for the authentication to the decap CMS
- One of the problem could be that the Build system version is setted to version 1, make sure that version 2 is selected
Subscribe to our newsletter
Get notified for all updates