ryosuke gatsby blog

Portfólio pessoal e blog de Ryosuke

Um portfólio pessoal e um blog criados com a estrutura Gatsbyjs para gerar um site estático de reação. É um raio rápido, SEO e PWA amigável e implanta diretamente em uma CDN como páginas do Github ou Netlify.

Esta é uma alternativa JavaScript às soluções de gerador de local estático escritos em Go ou Ruby. Também é mais desenvolvido do que o blog de partida Gatsby com recursos como arquivos de blog, manuseio de imagens, otimização de SEO e mais alguns.

Estrutura

• Lar
• Projetos
• • Arquivo de paginação
• Blog
• • Arquivo de paginação
• Tags
• • Arquivos de tags
• Sobre

Pós -formato / campos

 ---
title : Deploy a Static React Blog using GatsbyJS and Github
date : " 2018-03-21 "
section : blog
cover_image : " ./[email protected] "
tags : [ 'design', 'development', 'react', 'github', 'gatsbyjs', 'ssg', 'static site generator' ]
---

Your post here

• A seção pode ser blog ou project .
• Tags devem ser matrizes
• O conteúdo corporal pode incluir o Markdown ou HTML.

Plugins

Codepen

Para incorporar módulos Codepen, basta copiar o código de incorporação e remover o script JS que é importado.

Twitter

Incorporar tweets perfeitamente em postagens copiando a parte do BlockQuote do código de incorporação ao seu arquivo de marcação. Não copie o arquivo JS vinculado, o plug -in lida que automaticamente.

Manifesto

Configure em gatsby-config.js .

RSS Feed

Configure em gatsby-config.js .

Desenvolvimento

Em execução no Gatsbyjs, um SSG que cria aplicativos de reação estática.

1. npm install
2. npm run develop

Implantação

Páginas do Github

Construímos localmente os arquivos e implantamos usando um script NPM que atualiza uma filial específica de repo git chamada gh-pages .

Para ativar isso, basta inicializar um repositório Git no projeto, cometer suas alterações e adicionar seu repositório do GitHub como um repositório remoto. Certifique -se de rotular o controle remoto como origin , caso contrário, o Gatsby implantar não saberá para qual repo pressionar.

Implantar o Site para origin Remote Remote Repo:

npm run deploy

Criando ou editando conteúdo

1. git pull da origem remota para garantir que você tenha as postagens mais recentes e para mesclar quaisquer conflitos.
2. Adicione uma nova pasta ao src/content/projects ou src/content/blog nomeado após sua postagem. Isso será convertido para a lesma do artigo-você não precisa "case de kebab", mas lembre-se do formato.
3. Crie um arquivo de marcação na pasta. Certifique -se de usar os arquivos anteriores como modelo para incluir todos os campos apropriados (listados acima).
4. Preencha a postagem, inclua uma imagem de capa (consulte a próxima etapa para lidar com imagens)
5. Para quaisquer imagens, inclua-as na mesma pasta que a remarca do post e link localmente usando <img src="./my-image.jpg" /> .
6. Execute npm run deploy na raiz do projeto para implantar para as páginas do GitHub.

Netlify

Este site também é capaz de implantar no Netlify. Basta fazer login para netlify, criar um novo aplicativo e apontar para este repositório. Siga as etapas, verifique se o Netlify está executando gatsby build e apontando para o diretório /public . Isso também permite que você use o Netlify CMS, pois requer um servidor para suporte e hospedagem OAuth2 no Netlify permite que você reconstrua em cada edição (em vez de construir a sua máquina pessoal e implantar a partir daí).

Créditos

• Gatsbyjs
• Reactjs
• Ícones de Davide Pacilio