astrowind
1.0.0
? Tema Astro mais estrelado e bifurcado em 2022 e 2023 . ?
AstroWind é um modelo gratuito e de código aberto para criar seu site usando Astro 5.0 + Tailwind CSS . Pronto para iniciar um novo projeto e desenhado tendo em conta as melhores práticas web.
? https://astrowind.vercel.app/
Estamos embarcando em uma jornada emocionante com o AstroWind 2.0 e queremos que você faça parte dela! No momento, estamos dando os primeiros passos no desenvolvimento desta nova versão e seus insights são inestimáveis. Participe da discussão e compartilhe seus comentários, ideias e sugestões para ajudar a moldar o futuro do AstroWind . Vamos tornar o AstroWind 2.0 ainda melhor juntos!
Compartilhe seu feedback em nossa discussão!
AstroWind tenta fornecer acesso rápido à criação de um site usando Astro 5.0 + Tailwind CSS. É um tema gratuito que aposta na simplicidade, boas práticas e alto desempenho.
Muito pouco javascript vanilla é usado apenas para fornecer funcionalidades básicas para que cada desenvolvedor decida qual framework (React, Vue, Svelte, Solid JS...) usar e como abordar seus objetivos.
Nesta versão o template suporta todas as opções de configuração output , static , hybrid e server , mas o blog só funciona com prerender = true . Estamos trabalhando na próxima versão e pretendemos torná-la totalmente compatível com SSR.
Dentro do modelo AstroWind , você verá as seguintes pastas e arquivos:
/
├── public/
│ ├── _headers
│ └── robots.txt
├── src/
│ ├── assets/
│ │ ├── favicons/
│ │ ├── images/
│ │ └── styles/
│ │ └── tailwind.css
│ ├── components/
│ │ ├── blog/
│ │ ├── common/
│ │ ├── ui/
│ │ ├── widgets/
│ │ │ ├── Header.astro
│ │ │ └── ...
│ │ ├── CustomStyles.astro
│ │ ├── Favicons.astro
│ │ └── Logo.astro
│ ├── content/
│ │ ├── post/
│ │ │ ├── post-slug-1.md
│ │ │ ├── post-slug-2.mdx
│ │ │ └── ...
│ │ └-- config.ts
│ ├── layouts/
│ │ ├── Layout.astro
│ │ ├── MarkdownLayout.astro
│ │ └── PageLayout.astro
│ ├── pages/
│ │ ├── [...blog]/
│ │ │ ├── [category]/
│ │ │ ├── [tag]/
│ │ │ ├── [...page].astro
│ │ │ └── index.astro
│ │ ├── index.astro
│ │ ├── 404.astro
│ │ ├-- rss.xml.ts
│ │ └── ...
│ ├── utils/
│ ├── config.yaml
│ └── navigation.js
├── package.json
├── astro.config.ts
└── ...
O Astro procura arquivos .astro ou .md no diretório src/pages/ . Cada página é exposta como uma rota com base no nome do arquivo.
Não há nada de especial sobre src/components/ , mas é onde gostamos de colocar quaisquer componentes Astro/React/Vue/Svelte/Preact.
Quaisquer ativos estáticos, como imagens, podem ser colocados no diretório public/ se não exigirem nenhuma transformação ou no diretório assets/ se forem importados diretamente.
? Astronauta experiente? Exclua este arquivo
README.md. Atualizesrc/config.yamle conteúdo. Divirta-se!
Todos os comandos são executados na raiz do projeto, em um terminal:
| Comando | Ação |
|---|---|
npm install | Instala dependências |
npm run dev | Inicia o servidor de desenvolvimento local em localhost:4321 |
npm run build | Crie seu site de produção para ./dist/ |
npm run preview | Visualize seu build localmente, antes de implantar |
npm run check | Verifique se há erros em seu projeto |
npm run fix | Execute Eslint e formate códigos com Prettier |
npm run astro ... | Execute comandos CLI como astro add , astro preview |
Arquivo de configuração básica: ./src/config.yaml
site :
name : ' Example '
site : ' https://example.com '
base : ' / ' # Change this if you need to deploy to Github Pages, for example
trailingSlash : false # Generate permalinks with or without "/" at the end
googleSiteVerificationId : false # Or some value,
# Default SEO metadata
metadata :
title :
default : ' Example '
template : ' %s — Example '
description : ' This is the default meta description of Example website '
robots :
index : true
follow : true
openGraph :
site_name : ' Example '
images :
- url : ' ~/assets/images/default.png '
width : 1200
height : 628
type : website
twitter :
handle : ' @twitter_user '
site : ' @twitter_user '
cardType : summary_large_image
i18n :
language : en
textDirection : ltr
apps :
blog :
isEnabled : true # If the blog will be enabled
postsPerPage : 6 # Number of posts per page
post :
isEnabled : true
permalink : ' /blog/%slug% ' # Variables: %slug%, %year%, %month%, %day%, %hour%, %minute%, %second%, %category%
robots :
index : true
list :
isEnabled : true
pathname : ' blog ' # Blog main path, you can change this to "articles" (/articles)
robots :
index : true
category :
isEnabled : true
pathname : ' category ' # Category main path /category/some-category, you can change this to "group" (/group/some-category)
robots :
index : true
tag :
isEnabled : true
pathname : ' tag ' # Tag main path /tag/some-tag, you can change this to "topics" (/topics/some-category)
robots :
index : false
isRelatedPostsEnabled : true # If a widget with related posts is to be displayed below each post
relatedPostsCount : 4 # Number of related posts to display
analytics :
vendors :
googleAnalytics :
id : null # or "G-XXXXXXXXXX"
ui :
theme : ' system ' # Values: "system" | "light" | "dark" | "light:only" | "dark:only" Para personalizar famílias de fontes, cores ou mais elementos consulte os seguintes arquivos:
src/components/CustomStyles.astrosrc/assets/styles/tailwind.cssVocê pode criar uma construção de produção otimizada com:
npm run build Agora seu site está pronto para ser implantado. Todos os arquivos gerados estão localizados na pasta dist , onde você pode implantar a pasta em qualquer serviço de hospedagem de sua preferência.
Clone este repositório em sua própria conta GitHub e implante-o no Netlify:
Clone este repositório em sua própria conta GitHub e implante no Vercel:
Se você tiver alguma ideia, sugestão ou encontrar algum bug, fique à vontade para abrir uma discussão, um problema ou criar uma solicitação pull. Isso seria muito útil para todos nós e ficaríamos felizes em ouvir e agir.
Criado inicialmente por onWidget e mantido por uma comunidade de colaboradores.
AstroWind é licenciado sob a licença MIT – consulte o arquivo LICENSE para obter detalhes.
