This template is perfect for those who want to use Tailwind CSS and Astro to build a blog. You can easily setup MDX or Notion as CMS.
It is inspired by many other blogs (see the references bottom of this page), and I started this repository using Tailwind Astro Starter Project.
Feature request or Facing issue? Go to issue page to see if it has been brought up previously. Otherwise, feel free to start a new discussion thread. All ideas are welcome!
Live Demo - Deployed on Vercel.
- Astro with Typescript
- Astro MDX support
- Able to use notion as CMS
- Easy styling customization with Tailwind 3.3 and primary color attribute
- Mobile-friendly view
- Light and dark theme
- Automatic image optimization via Astro image component
- Reactions using Prisma and PlanetScale
- Combine local data with notion data
- Support for a series of content
- Support switch between list and grid view and keep the state
- Support for tags - each unique tag will be its own page
- Support for nested routing of blog posts
- Projects page
- Resume Page
- Dashboard Page; using wakatime and GitHub stats
- Resume and about me page
- RSS
Even though these features look the same as the original template, they are implemented differently, and there are more to come.
- OpenGraph
- Dashboard lazy loading
site-metadata.ts
contains a list of constants that you can customize to your liking, including the blog title, description, author, social media links, etc.
src/lib/providers.config.ts
contains the default data provider configuration; this means where the source of data comes from.
src/lib/data/local
contains a list of functions and maps to retrieve local information.
src/lib/data/remote
contains the functions to retrieve information from notion and other remote sources.
src/lib/data/..-provider.ts
each file represents how the information interacts with the app.
.env.example
rename to .env and add the environment variables
Change the default view between list and grid; search SwapViewButtons.astro
for blog or project and set the default view as param.
The file src/lib/providers.config.ts
contains the configuration for providers; if you open a provider file inside src/lib/data
you can see all providers can fetch data from local or remote you only need to change the configuration for notion or local and everything should be work as the template expected.
After deciding what configuration you want; feel free to delete the other code that is not used
Current configuration:
export const providersConfig: Provider = {
resume: 'notion',
about me: 'local',
uses: 'notion',
projects: 'notion',
blog: 'local'
}
1- Clone the notion template here: Notion Template
2- Create a Notion Api; follow the official guide here: API Setup
3- Choose what pages/databases will fetch information from the notion and set .env
4- Change src/lib/providers.config.ts
configuration for 'notion'
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:4321 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run astro ... |
Run CLI commands like astro add , astro check |
npm run astro -- --help |
Get help using the Astro CLI |
-
Fonts:
-
Scripts:
-
Theme
-
Tabs
-
Copy button
-
Skills icons -https://iconify.design/
-
Routing:
-
Headings:
-
Based on: