gatsby starter gcn

gatsby-starter-gcn

Um modelo inicial para construir sites estáticos incríveis com Gatsby, Contentful e Netlify. Inspirado em gatsby-contentful-starter.

Características

• Integração de conteúdo com conteúdo de espaço reservado pronto para uso
• Integração Netlify incluindo um formulário de contato pré-construído
• Design responsivo mínimo - feito para personalizar ou desmontar
• Lógica de paginação
• IU do tema
• Componente SEO amigável
  • Suporte para compartilhamento OpenGraph
  • Geração de Sitemap
• Google Analytics
• Aplicativo da Web progressivo
• Suporte off-line
• Módulo Gatsby Standard para linting Javascript com StandardJS
• Suporte Stylelint para Styled Components para lintar o CSS em JS

Demonstração

https://gcn.netlify.app/

Começando

Instalar

 git clone https://github.com/ryanwiemer/gatsby-starter-gcn.git
yarn install

Ou através da CLI Gatsby

 gatsby new gatsby-starter-gcn https://github.com/ryanwiemer/gatsby-starter-gcn.git

Configurar conteúdo

1. Inscreva-se no Contentful e crie um novo espaço vazio

2. yarn run setup

3. Insira as informações solicitadas para o seu espaço Contentful encontradas aqui: app.contentful.com → Configurações do espaço → Chaves de API . Você precisará fornecer uma chave de API padrão (primeira guia) e uma chave de gerenciamento (segunda guia).

Personalização

Dados do site

Edite os dados do siteMeta em /src/gatsby-config.js

  siteMetadata: {
    title : 'GCN' , // Title of the website
    description : // Description of the website
      'A starter template to build amazing static websites with Gatsby, Contentful and Netlify' ,
    siteUrl : 'https://gcn.netlify.app' , // Website URL. Do not include trailing slash
    image : '/images/share.jpg' , // Path to default image for SEO
    menuLinks : [ // The links used in the top menu
      {
        name : 'Home' ,
        slug : '/' ,
      } ,
      {
        name : 'About' ,
        slug : '/about/' ,
      } ,
      {
        name : 'Contact' ,
        slug : '/contact/' ,
      } ,
    ] ,
    postsPerFirstPage : 7 , // Number of posts on the first page
    postsPerPage : 6 , // Number of posts used on all other pages
    /*
      Root URL for posts and tags
      For example: 'blog' will result in:
        - www.example.com/blog/
        - www.example.com/blog/post-name/
        - www.example.com/blog/tag/tag-name/
    */
    basePath : '/' , // Defaults to the homepage
  }

Nota: Se você não vir suas alterações refletidas ao desenvolver localmente, pode ser necessário executar yarn clean seguido de reiniciar o servidor por meio do yarn develop .

IU do tema

Edite /src/gatsby-plugin-theme-ui/index.js

 export default {
  colors : {
    background : '#ffffff' ,
    text : '#121212' ,
    primary : '#121212' ,
    secondary : '#e9e9e9' ,
    tertiary : '#f3f3f3' ,
    highlight : '#5b8bf7' ,
  } ,
  fonts : {
    body : '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' ,
  } ,
  sizes : {
    maxWidth : '1050px' ,
    maxWidthCentered : '650px' ,
  } ,
  responsive : {
    small : '35em' ,
    medium : '50em' ,
    large : '70em' ,
  } ,
}

Usando o padrão Gatsby

1. Verifique rapidamente se há erros em seu código com o script yarn test
2. Você pode visualizar o README do Gatsby Standard para obter detalhes sobre como integrar os módulos Gatsby Standard, Stylelint e Prettier incluídos neste projeto em seu editor de texto

Conteúdo e SEO

1. Você pode substituir os arquivos share.jpg e favicon.png no diretório static/images .
2. As meta descrições são definidas em Contentful. Se você optar por deixar este campo em branco em novas postagens, um trecho de 320 caracteres da postagem/página será usado.

Implantação

Implantação manual do Netlify

1. Execute gatsby build

2. Arraste e solte a pasta /public/ no Netlify

Implantação Netlify do Git (recomendado)

1. Novo site Netlify do Git

2. Conecte-se ao GitHub e selecione seu repositório

3. Navegue até Netlify: Configurações → Construir e implantar → Construir variáveis ​​de ambiente . Adicione as seguintes variáveis ​​de ambiente usando o Space ID e a API Content Delivery - token de acesso do Contentful. Além disso, se desejar, você pode inserir um ID do Google Analytics. As variáveis ​​​​devem ser nomeadas exatamente assim para funcionarem corretamente.

 ACCESS_TOKEN
SPACE_ID
GOOGLE_ANALYTICS

4. Navegue até Netlify: Implantações . Clique em Trigger deploy para acionar manualmente uma implantação para confirmar se o site está sendo construído com sucesso usando suas variáveis ​​de ambiente de construção. Neste ponto, esteja ciente de que toda vez que você pressionar para master uma implantação será iniciada automaticamente e publicada na produção.

Configurações adicionais

Webhook com conteúdo (opcional)

1. Navegue até Netlify: Configurações → Construir e implantar → Construir ganchos . Crie um novo gancho de construção.

2. Navegue até Contentful: app.contentful.com → Configurações de espaço → Webhooks . Crie um webhook usando a URL de compilação do Netlify que você acabou de criar e configure quais eventos devem acionar a compilação na produção. Por exemplo, o seguinte irá reconstruir o site de produção sempre que uma postagem ou página for publicada, cancelada ou excluída:

Notificações de formulário Netlify (opcional)

1. Navegue até Netlify: Formulários → Notificações

2. Clique no menu suspenso adicionar notificação e selecione o método de notificação desejado.

Dicas úteis

• Se você fizer edições em seu espaço Contentful enquanto executa yarn develop você precisará interrompê-lo e executar novamente o comando para ver as alterações refletidas. Por exemplo, uma nova postagem ou página não aparecerá automaticamente até que o site seja reconstruído.
• NÃO armazene seus tokens de acesso de conteúdo ou IDs de espaço em qualquer lugar do GitHub. Trate-os como senhas.