Um modelo inicial para construir sites extremamente rápidos com Ghost (como CMS sem cabeça neste caso) e Gatsby, usando o excelente tema Simply Ghost. Reescrito do tema Handlebars para React/Gatsby.
Demonstração: https://gatsby-ghost-simply.netlify.app/
custom_template
!)custom_template
!)custom_template
!)custom_template
!) # With Gatsby CLI
gatsby new gatsby-starter-ghost https://github.com/anarion80/gatsby-ghost-simply.git
# From Source
git clone https://github.com/anarion80/gatsby-ghost-simply.git
cd gatsby-ghost-simply
Em seguida, instale as dependências
yarn
Inicie o servidor de desenvolvimento. Agora você tem um site Gatsby extraindo conteúdo do Ghost sem cabeça. Você não precisa ter o tema Simply Ghost original instalado em sua instância do Ghost, nem ter nenhuma rota adicional configurada lá.
gatsby develop
Por padrão, o starter preencherá o conteúdo de uma instalação padrão do Ghost localizada em https://gatsby.ghost.io.
Para usar sua própria instalação, você precisará editar o arquivo de configuração .ghost.json
com suas credenciais. Altere o valor apiUrl
para o URL do seu site Ghost. Para clientes do Ghost (Pro), este é o URL do Ghost que termina em .ghost.io
e, para pessoas que usam a versão auto-hospedada do Ghost, é o mesmo URL usado para acessar seu site.
Em seguida, atualize o valor contentApiKey
para uma chave associada ao site Ghost. Uma chave pode ser fornecida criando uma integração no Ghost Admin. Navegue até Integrações e clique em “Adicionar nova integração”. Nomeie a integração apropriadamente e clique em criar.
{
"apiUrl" : " https://gatsby.ghost.io " ,
"contentApiKey" : " 9cc5c67c358edfdd81455149d0 "
}
Por fim, configure a URL desejada em siteConfig.js
, para que os links (por exemplo, links canônicos) sejam gerados corretamente. Você também deve atualizar outros valores necessários para menu, compartilhamento social e pesquisa.
{
menuDropdown : [
{
label : `About` ,
url : `/about` ,
} ,
.
.
.
] ,
followSocialMedia : [
{
service : `youtube` ,
title : `YOUR_TITLE` ,
url : `YOUR_URL` ,
} ,
.
.
.
] ,
searchSettings : {
key : `YOUR_GHOST_API_KEY` ,
url : `YOUR_GHOST_URL` ,
/* This is optional */
options : {
keys : [ `title` , `plaintext` ] ,
limit : 10 ,
} ,
/* This is optional to perform filtering of the ghost api */
api : {
resource : `posts` ,
parameters : {
limit : `all` ,
fields : [ `title` , `slug` , `plaintext` ] ,
filter : `` ,
include : `` ,
order : `` ,
formats : `` ,
} ,
} ,
} ,
}
Para usar modelos de postagem personalizados, adicione uma tag interna específica à postagem (ou seja, #custom-post-wide
, #custom-kusi-doc
, etc).
A demonstração e o repositório são a "versão máxima" com todos os tipos possíveis de variantes de página inicial, modelos de postagem, portfólio, documentos, etc. Ajuste/remova conforme necessário.
O starter contém três arquivos de configuração especificamente para implantação com Netlify. Um arquivo netlify.toml
para configurações de compilação, um arquivo /static/_headers
com cabeçalhos de segurança padrão definidos para todas as rotas e /static/_redirects
para definir redirecionamentos de domínio personalizados do Netlify.
Para implantar em sua conta Netlify, clique no botão abaixo.
As chaves da API de conteúdo geralmente não são consideradas informações confidenciais; elas existem para que possam ser alteradas em caso de abuso; então a maioria das pessoas o envia diretamente para o arquivo de configuração .ghost.json
. Se preferir manter essas informações fora do seu repositório, você pode remover esta configuração e definir variáveis Netlify ENV para compilações de produção.
Depois de implantado, você pode configurar uma integração Ghost + Netlify para usar ganchos de implantação do Ghost para acionar reconstruções do Netlify. Dessa forma, sempre que os dados forem alterados no Ghost, seu site será reconstruído no Netlify.
Você pode desativar o front-end padrão do Ghost Handlebars Theme ativando o sinalizador Make this site private
nas configurações do Ghost. Isso permite a proteção por senha antes da instalação do Ghost e define <meta name="robots" content="noindex" />
para que seu front-end Gatsby se torne a fonte da verdade para SEO.
# Run a production build, locally
gatsby build
# Serve a production build, locally
gatsby serve
develop
de Gatsby usa a configuração development
em .ghost.json
- enquanto build
de Gatsby usa a configuração production
.
Copyright (c) 2021 anarion80 – Lançado sob a licença GPLv3.