DevBlog é um modelo de blog totalmente personalizável projetado para desenvolvedores (ou qualquer outra pessoa) que desejam entrar no mundo dos blogs. Ele vem pronto para ser implantado (com facilidade) ou pode ser editado e estendido como você quiser. O blog é totalmente gerado estaticamente via GatsbyJS, vem com destaque de sintaxe (via PrismJS) pronto para uso e possui renderização no lado do servidor integrada, entre outras coisas.
Para ver uma demonstração ao vivo, clique aqui.
config.js
A primeira etapa é instalar a CLI do GatsbyJS localmente. Isso pode ser feito executando o comando npm install --global gatsby-cli
Ao criar um novo site Gatsby, a CLI permite que você especifique um starter, neste caso basta fornecer a URL deste repositório. Isso pode ser feito executando o comando gatsby new YOUR_BLOG_NAME https://github.com/RyanFitzgerald/devblog
Agora que você está configurado, pode simplesmente usar o blog ou fazer as edições conforme necessário. Por exemplo, execute gatsby develop
para iniciar um ambiente de desenvolvimento recarregado a quente disponível em localhost:8000 ou execute gatsby build
para criar uma compilação de produção otimizada. Para obter uma lista completa de comandos CLI para Gatsby, dê uma olhada na documentação.
Alternativamente, se você deseja simplesmente bifurcar este repositório ou cloná-lo, basta executar npm install
e depois gatsby develop
e você estará pronto e funcionando.
A configuração básica pode ser feita por meio do arquivo config.js
na raiz do repositório do projeto. Através deste arquivo você pode fazer edições na cor primária do blog, adicionar o autor e a descrição do blog e muito mais. Os padrões são os seguintes:
export default {
title : 'Dev Blog' , // Required
author : 'Ryan Fitzgerald' , // Required
description : 'Full-stack Web Developer' ,
primaryColor : '#3498db' , // Required
showHeaderImage : true ,
showShareButtons : true ,
postsPerPage : 5 , // Required
social : {
website : 'https://ryanfitzgerald.ca' ,
github : 'https://github.com/ryanfitzgerald' ,
twitter : 'https://twitter.com/ryanafitzgerald' ,
linkedin : 'https://ca.linkedin.com/in/ryanafitzgerald'
}
} ;
Nota: Qualquer opção de configuração rotulada como “Obrigatória” é necessária para fins básicos de apresentação. Qualquer coisa sem o comentário "Obrigatório" pode ser removida caso você não queira que seja usado.
As variáveis de configuração mencionadas acima são usadas da seguinte forma:
Variável | Descrição do uso |
---|---|
título | O título do blog. Isso é usado principalmente para o título da página. |
autor | O autor do blog. Isso é usado para o nome do cabeçalho e o título da página. |
descrição | A descrição do autor. Isso é usado para o cabeçalho do autor. |
cor primária | A cor principal do blog. |
mostrarHeaderImage | Sinalizador para mostrar ou não a imagem do cabeçalho. |
mostrarShareButtons | Sinalize para mostrar botões de compartilhamento de mídia social em cada postagem do blog ou não. |
postagensPerPage | O número de postagens por página na página inicial do blog. Isso é usado para paginação. |
social | Perfis de mídia social do autor do blog. Atualmente, apenas sites pessoais, GitHub, Twitter e LinkedIn são suportados. |
Para alterar a imagem de cabeçalho padrão, simplesmente substitua o arquivo main.jpg
na pasta /src
.
Para alterar o favicon padrão, simplesmente substitua o arquivo favicon.ico
na pasta /src
.
Todas as postagens do blog podem ser encontradas em /src/pages
e são construídas estaticamente assim que o comando gatsby build
é executado. Para criar uma nova postagem, basta criar uma nova pasta em /src/pages
com o nome da URL que você gostaria de ter. Por exemplo, se desejar que o URL apareça como myblog.com/hello-world
você criaria a pasta como hello-world
. Depois que a pasta for criada, basta criar um arquivo index.md
dentro dela.
O topo das páginas deve conter a mesma marcação que informa a Gatsby as informações necessárias sobre a postagem específica. O modelo básico é:
---
title : New Beginnings
date : " 2018-07-01 "
featuredImage : ' ./featured.jpg '
---
This top portion is the beginning of the post and will show up as the excerpt on the homepage.
<!-- end -->
No trecho de código acima, tudo o que é necessário é o título e a data . A imagem em destaque é opcional e pode ser adicionada simplesmente adicionando uma imagem à pasta da página que você acabou de criar e referenciando como no exemplo acima. A parte do trecho também é opcional e se você não usar o marcador <!-- end -->
, o primeiro bit da postagem será usado como trecho automaticamente.
Este modelo vem com 3 exemplos de postagens de blog que contêm tudo, desde o uso de trechos de código, inserção de imagens, uso de imagens e trechos em destaque e muito mais.
Quando estiver pronto para implantar o blog e colocá-lo no ar, você terá algumas opções disponíveis.
A implantação manual do blog requer simplesmente que você execute uma gatsby build
para criar uma compilação de produção. Depois disso, você pode usar qualquer servidor para o qual normalmente usaria um aplicativo React, como um droplet Digital Ocean ou uma instância AWS. Tudo o que é necessário é alguma forma de servir os arquivos estáticos.
Se você não está familiarizado com a implantação de aplicativos React, há várias outras opções.
Para implantar nas páginas do GitHub, você precisa primeiro definir o prefixo do caminho em gatsby-config.js
. O padrão é pathPrefix: '/devblog'
no entanto, deve ser alterado para qualquer nome do repositório que você escolher. Por exemplo, se você tiver o blog localizado em https://github.com/YOURUSERNAME/myblog
e quiser implantá-lo em https://YOURUSERNAME.github.io/myblog
, você definiria o prefixo do caminho como pathPrefix: '/myblog'
.
Em seguida, basta executar npm run deploy
e seu blog será implantado.
Alternativamente, se você deseja implantá-lo em https://YOURUSERNAME.github.io
(ou seja, o site do seu usuário/organização e não um site do projeto), serão necessárias algumas alterações adicionais. A documentação oficial de Gatsby os descreve bem aqui.
Um dos métodos mais fáceis de implantar o blog seria usar o Netlify. Para implantar no Netlify, basta clicar no botão abaixo e seguir as instruções.
As opções descritas acima não são as únicas opções disponíveis para implantar o blog. A documentação oficial do Gatsby detalha uma série de outras opções. Para ler mais sobre as opções de implantação, clique aqui.
Licenciado sob licença MIT. Consulte LICENSE.md para obter mais informações.