jamstack.org

Jamstack

Este é o repositório para https://jamstack.org

Um ponto de entrada para aprender sobre este modelo arquitetônico. Um lugar para aprender o que é Jamstack, para compartilhar ferramentas, dicas, exemplos e artigos. Este também é um lugar para encontrar um encontro da comunidade local ou para buscar apoio para iniciar o seu próprio.

Contribuindo com recursos

Reunimos um conjunto de vídeos, apresentações, artigos e outros recursos de aprendizagem sobre o Jamstack. Você pode contribuir com conteúdo para esse conjunto de recursos!

Aceitamos contribuições enviadas como solicitações pull.

Contribuir com links para recursos

Para contribuir com um link para um recurso:

1. Crie um novo arquivo md na pasta src/site/resources com um nome exclusivo e descritivo. Preencha esse arquivo de acordo com a estrutura mostrada abaixo.
2. Para apresentações e vídeos, adicione uma imagem em miniatura opcional à pasta src/site/img/cms . (A imagem deve ser um jpeg de 600px de largura e 400px de altura)
3. Envie uma solicitação pull

referência md do recurso:

---
title : Resource title
date : Publish date (YYYY-MM-DD)
link : the URL of this resource
thumbnailurl : /img/cms/resources/resource-thumbnail.jpg
type :
  - article (Help us group and sort the resources by type article|video|presentation)
---

Antes de enviar uma solicitação pull, ou se você estiver sugerindo/contribuindo com alterações de código ou conteúdo, é aconselhável visualizar sua alteração em uma compilação local. Tentamos tornar o processo de execução de uma compilação local o mais baixo possível.

Executando uma compilação local

Pré-requisitos

• Nó e NPM

Instalando e executando a compilação

 # Clone this repository to your local environment
git clone [email protected]:jamstack/jamstack.org.git

# move in to your local site folder
cd jamstack.org

# install the dependencies
npm install

# run the build and dev server locally
npm start

Estilizando com TailwindCSS

Este site usa TailwindCSS para oferecer classes CSS utilitárias e fornecer um meio rápido de estilizar o site. Isso significa que a maior parte do estilo pode ser feita sem escrever nenhum CSS adicional. Em vez disso, classes utilitárias podem ser adicionadas diretamente ao HTML. Isso pode proporcionar um desenvolvimento muito rápido e também oferecer níveis surpreendentes de familiaridade para aqueles acostumados a trabalhar dessa forma (já que as convenções e aulas não são por local ).

Durante a execução/desenvolvimento local, o comando npm run start irá gerar o site incluindo o pipeline CSS do Tailwind.

Utilitários CSS globais.

Um pequeno número de regras CSS personalizadas são fornecidas para eficiência de classes repetidas ou globais. Eles residem em src/css/tailwind.css mas devem ser usados ​​com moderação, com a maioria dos estilos ocorrendo no HTML por meio das classes utilitárias do Tailwind.

Desenvolvimento vs produção

Durante uma construção de produção, o pipeline CSS inclui uma etapa para remover todas as instruções CSS não utilizadas e compactar o CSS resultante. Para eficiência do desenvolvimento, esta etapa não é executada durante o desenvolvimento local por meio do comando npm run start . Você pode visualizar uma compilação de produção otimizada executando estes comandos:

 # Run a production build
npm run build

# Serve the build locally
npm run start

Clone e implante com um clique

Você pode clonar este repositório e inicializá-lo como seu próprio site de teste, completo com o pipeline de construção de CI/CD no Netlify clicando no botão abaixo. (Requer contas gratuitas do GitHub e Netlify)