Astro Boilerplate with TypeScript and Tailwind CSS

Overview

Astro Boilerplate with TypeScript and Tailwind CSS

🚀 Astro Boilerplate is starter code for your blog based on Astro with Tailwind CSS 3.0. ⚡️ Made with Astro, TypeScript, ESLint, Prettier, Tailwind CSS.

Clone this project and use it to create your own Astro blog. You can check a Astro templates demo.

Features

A complete Blog feature:

  • 🎈 Syntax Highlighting
  • 🤖 SEO friendly with sitemap.xml and robots.txt
  • ⚙️ RSS feed
  • 📖 Pagination
  • 🌈 Include a dark blog theme
  • ⬇️ Markdown
  • 📦 Image lazy loading

Developer experience first:

  • 🔥 Astro
  • 🎨 Tailwind CSS with aspect ratio and typography plugin
  • 🎉 TypeScript
  • ✏️ ESLint compatible with .astro files
  • 🛠 Prettier compatible with .astro files
  • 🦊 Husky
  • 🚫 lint-staged
  • 🚨 Commitlint

ESLint with:

  • Airbnb styled guide
  • TypeScript compatible
  • Astro compatible
  • Automatically remove unused imports
  • Import sorting
  • Tailwind CSS plugin

Philosophy

  • Minimal code
  • SEO-friendly
  • 🚀 Production-ready

Requirements

  • Node.js and npm

Getting started

Run the following command on your local environment:

git clone --depth=1 https://github.com/ixartz/Astro-boilerplate
cd my-project-name
npm install

Then, you can run locally in development mode with live reload:

npm run dev

Open http://localhost:3000 with your favorite browser to see your project.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command Action
npm install Installs dependencies
npm run dev Starts local dev server at localhost:3000
npm run build Build your production site to ./dist/
npm run preview Preview your build locally, before deploying
npm run clean Remove ./dist folder
npm run lint Run ESLint and report styling error

Contributions

Everyone is welcome to contribute to this project. Feel free to open an issue if you have question or found a bug.

License

Licensed under the MIT License, Copyright © 2022

Comments
  • Input File Missing

    Input File Missing

    Helo,

    When i run npm run build, i got this error

    D:\Landing\Astro-boilerplate>npm run build
    
    > [email protected] build
    > astro build
    
    08:35:27 PM [build] Collecting build information...
    08:35:37 PM [build] src/pages/index.astro is taking a bit longer to import. This is common for larger "Astro.glob(...)" or "import.meta.globEager(...)" calls, for instance. Hang tight!
    08:35:41 PM [build] Completed in 14.50s.
    
     building client
    vite v2.9.12 building for production...
    ✓ 23 modules transformed.
    dist/entry.663e93a5.js   138.21 KiB / gzip: 44.18 KiB
    Completed in 2.31s.
    
    08:35:43 PM [build] Building entrypoints for prerendering...
    08:35:47 PM [build] Completed in 3.81s.
    
     generating static routes
    ▶ src/pages/index.astro
      └─ /index.html (+92ms)
    λ src/pages/rss.xml.ts
      └─ /rss.xml/index.html (+18ms)
    ▶ src/pages/posts/hello-world.md
      └─ /posts/hello-world/index.html (+19ms)
    ▶ src/pages/posts/second-post.md
      └─ /posts/second-post/index.html (+14ms)
    ▶ src/pages/posts/fifth-post.md
      └─ /posts/fifth-post/index.html (+16ms)
    ▶ src/pages/posts/first-post.md
      └─ /posts/first-post/index.html (+11ms)
    ▶ src/pages/posts/forth-post.md
      └─ /posts/forth-post/index.html (+11ms)
    ▶ src/pages/posts/sixth-post.md
     error   Input file is missing
    

    please help.

    Thanks

    question 
    opened by hrace009 10
  • fix: lint now works and added node version recommendation

    fix: lint now works and added node version recommendation

    • Note that comments are not valid in json for tsconfig.json should you decide to adopt jsonlint.
    • npm run lint now returns without error
    • Recommended node version (16.15.1) will be set for nvm and/or volta users
    opened by bingalls 3
  • astro-imagetools issue on blog images

    astro-imagetools issue on blog images

    When browsing https://creativedesignsguru.com/demo/astro-boilerplate/posts/ you can see on the network requests that the images are not being processed by astro-imagetools as the stock images get downloaded into the client.

    The only image being transformed is located here: https://creativedesignsguru.com/demo/astro-boilerplate/posts/sixth-post/ so it seems to only be able to parse embedded images in a markdown file.

    Any clues?

    question 
    opened by barrenechea 1
  • Crashing on Heroku

    Crashing on Heroku

    Hi,

    It is crashing.

    Heroku log:

    2022-05-31T14:27:15.071913+00:00 app[web.1]: at ESMLoader.resolve (node:internal/modules/esm/loader:580:30) 2022-05-31T14:27:15.071913+00:00 app[web.1]: at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18) 2022-05-31T14:27:15.071914+00:00 app[web.1]: at ModuleWrap. (node:internal/modules/esm/module_job:80:40) 2022-05-31T14:27:15.071914+00:00 app[web.1]: at link (node:internal/modules/esm/module_job:78:36) { 2022-05-31T14:27:15.071914+00:00 app[web.1]: code: 'ERR_MODULE_NOT_FOUND' 2022-05-31T14:27:15.071915+00:00 app[web.1]: } 2022-05-31T14:27:15.202525+00:00 heroku[web.1]: Process exited with status 1 2022-05-31T14:27:15.246512+00:00 heroku[web.1]: State changed from starting to crashed 2022-05-31T14:27:16.471684+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=png-blog.herokuapp.com request_id=ce919adb-5fdf-4ee1-a3ad-c688de24a158 fwd="3.141.28.136" dyno= connect= service= status=503 bytes= protocol=https 2022-05-31T14:27:16.750784+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=png-blog.herokuapp.com request_id=e6b9cc6e-3707-4e14-8147-55418567e3d0 fwd="3.141.28.136" dyno= connect= service= status=503 bytes= protocol=https 2022-05-31T14:29:07.775284+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=png-blog.herokuapp.com request_id=e9071cf0-87e9-4a56-9d23-60ea56aa3141 fwd="3.141.28.136" dyno= connect= service= status=503 bytes= protocol=https 2022-05-31T14:29:07.524376+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=png-blog.herokuapp.com request_id=9ec3b380-a478-4560-8782-6fb4c9d77ae3 fwd="3.141.28.136" dyno= connect= service= status=503 bytes= protocol=https 2022-05-31T14:33:49.384151+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/robots.txt" host=png-blog.herokuapp.com request_id=a25df73e-6367-40c6-b324-72a534e39271 fwd="94.130.167.87" dyno= connect= service= status=503 bytes= protocol=http 2022-05-31T14:33:50.597249+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=png-blog.herokuapp.com request_id=95a43440-0cfb-4211-8be6-4152f85fa8e8 fwd="94.130.167.87" dyno= connect= service= status=503 bytes= protocol=http

    question 
    opened by paulponraj 1
  • Design not completely fluid and no option to add styles to components

    Design not completely fluid and no option to add styles to components

    1. Adding extra Categories Tags breaks the UI fluidity on mobile apps.
    2. Hero banner Avatar looks fine with provided image but its breaking other images that do not have transparent padding by default.

    Also components do not take any style props or it could have been fixed by adding the right css style.

    image image good first issue 
    opened by imixtron 6
Demo of a micro frontend application with mixed React and SolidJS frameworks using Astro.

Micro Frontends with Astro This is a demo of a SolidJS and React mixed micro-frontend application using Astro as the base MPA framework. You can view

Enoch 5 Sep 5, 2022
Boilerplate and Starter for Next JS 12+, Tailwind CSS 3 and TypeScript

?? Boilerplate and Starter for Next.js, Tailwind CSS and TypeScript ⚡️ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Jest, Testing Library, Commitlint, VSCode, Netlify, PostCSS, Tailwind CSS.

Hocky Yudhiono 6 Dec 31, 2022
This boilerplate is meant to be a quick start for creating chrome extensions using React, Typescript and Tailwind CSS.

This boilerplate is meant to be a quick start for creating chrome extensions using React, Typescript and Tailwind CSS.

Bronathan 66 Dec 22, 2022
💨 A boilerplate for Vite.js, React TypeScript, & Tailwind CSS

VR2T Boilerplate ?? VR2T [ VR-TT ] stands for Vite - React - TypeScript - Tailwind CSS Installation Choose an option: Download as .ZIP then extract/un

Josh Daniel 4 Nov 25, 2021
A boilerplate generator for VR2T → Vite.js, React TypeScript, & Tailwind CSS.

VR2T Boilerplate Generator ?? VR2T [ VR-TT ] stands for Vite - React - TypeScript - Tailwind CSS Why Use VR2T? Without VR2T, setting up a project woul

Josh Daniel 13 Jul 22, 2022
🥳 Really simple React + Ant Design + Tailwind CSS + Typescript + Vite + Mobx boilerplate.

?? Really simple React + Ant Design + Tailwind CSS + Typescript + Vite + Mobx boilerplate.

KinXpeng 15 Dec 29, 2022
⏪ Rewinds – Remix Tailwind Starter Kit with Tailwind CSS, Headless UI, Radix UI, and more

⏪ Rewinds – Remix Tailwind Starter Kit Rewinds is a Remix starter kit with Tailwind CSS v3 family of libraries. This is an example demo to combine the

M Haidar Hanif 81 Dec 24, 2022
⏪ Rewinds – Remix Tailwind Starter Kit with Tailwind CSS v3, Headless UI, Radix UI, and more

⏪ Rewinds — Remix Tailwind Starter Kit Rewinds is a Remix starter kit with Tailwind CSS v3 family of libraries and the TypeScript ecosystem. This is a

M Haidar Hanif 88 Feb 11, 2023
Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.

Mocking up web app with Vital(speed) Live Demo Features ⚡️ React 17 ?? TypeScript, of course ?? Jest - unitary testing made easy ?? Tailwind with JIT

Josep Vidal 141 Dec 29, 2022
An Electron boilerplate featuring typescript, react, webpack, tailwind and redux - ready to use!

A secure, modular, and easy to use Electron Forge boilerplate featuring Typescript, React, Webpack, TailwindCSS, Redux and persistance (with redux-persist support)

Daniel 43 Jan 1, 2023
A React boilerplate using CRA5 + Craco, Typescript, Tailwind, Eslint + Prettier, Jest and Husky

Getting Started with Create React App This project was bootstrapped with Create React App. It contains the following additions: Typescript Tailwind St

Marvin de Bruin 20 Dec 7, 2022
This is a react portfolio template build using react, typescript and tailwind css. It help developers and designers to showcase their work

React Portfolio Using Tailwind UI This project include a portfolio template which is built using React and Tailwind CSS. It help developer and designe

Umer Yasin 0 Oct 30, 2021
TNT, Nextjs boilerplate powered by Typescript, Tailwind

This is TNT, Nextjs boilerplate powered by Typescript, Tailwind. This template also has customized ESLint + Prettier configuration for better code structuring and lesser bugs and errors. This template first was created for personal uses but then made public by the author to be used by other developers around the world.

Arvîn mostafaei 15 Aug 7, 2022
🚀 A web extension starter built with React, Typescript, and Tailwind CSS.

A web extension starter, built with React, Typescript, and Tailwind CSS. Build once, and run on multiple browsers: Google Chrome, Mozilla Firefox, Microsoft Edge, and Brave.

BCIT Design & Development Club (BCIT-DDC) 28 Dec 28, 2022
A personal resume website template built with React.js, Typescript, Next.js, and styled with Tailwind css

React JS Resume Website Template View a live demo here. If this template has helped you and you'd like to support my work, feel free to ♥️ Sponsor the

Tim Baker 1.2k Jan 3, 2023
A project template for Vite + TypeScript + React + Tailwind CSS + Blueprint apps :rocket:

itzmono-vite A project template for Vite + TypeScript + React + Tailwind CSS + Blueprint apps ?? Batteries Included ⚡ Vite 2 ??️ TypeScript ?? React ?

Hidekazu Kobayashi 43 Dec 14, 2022
Next.js + Tailwind CSS + TypeScript starter packed with useful development features.

?? ts-nextjs-tailwind-starter Next.js + Tailwind CSS + TypeScript starter packed with useful development features. Made by Theodorus Clarence Features

Cornelius Denninger 7 Nov 12, 2022
🔋 Next.js + Tailwind CSS + TypeScript starter packed with useful development features

?? ts-nextjs-tailwind-starter Next.js + Tailwind CSS + TypeScript starter packed with useful development features. Made by Theodorus Clarence Features

Theodorus Clarence 1.4k Jan 8, 2023
Client for @Ifycode's buuks API (react, typescript, tailwind css)

@Ifycode/buuks-react-client Hosted on Netlify: https://buuks.netlify.app This is the frontend client for the buuks-express-api, built with react, type

Obiagba Mary Ifeoma 3 Apr 21, 2022