Introdução ao Gridsome

     
 < modelo >   < navLayout >  Adicione o conteúdo da página aqui   navLayout > 
  modelo >   < script >  
 importar  navLayout  de  '~/layouts/navLayout.vue'  exportar   padrão     { componentes: { navLayout }   
}
   script >  
 

Cada layout requer um componente . É aqui que o conteúdo proveniente de páginas e modelos será inserido. Os layouts podem ter vários slots :

    
 < modelo >   < div >   < cabeçalho />   < slot >    slot >      < rodapé />    div > 
  modelo > 
 

Cada componente no diretório pages/ torna-se uma página no site. Cada página obterá seu caminho com base na localização do arquivo .vue . Por exemplo, src/pages/Index.vue se tornará a homepage/, enquanto src/pages/Blog.vue será localhost: 8080/blog ou example.com/blog , que será renderizado como a página do blog.

templates/ são usados ​​para visualizações de postagens únicas para coleções GraphQL. Para adicionar um modelo, crie um arquivo .vue com o mesmo nome de uma coleção GraphQL para src/templates .

Se você estiver importando uma fonte de dados externa, como postagens de um blog do WordPress, para o seu projeto, cada postagem procurará um componente neste diretório para seu modelo. O nome do arquivo do componente deve corresponder ao tipo de nó em seu esquema GraphQL.

Sites para iniciantes da Gridsome

Os sites iniciais do Gridsome são projetos predefinidos que qualquer pessoa pode usar para criar seus próprios sites. A Gridsome tem mais de 40 sites iniciais que abrangem toneladas de plataformas como Markdown, Strapi, WordPress, Auth0 e muito mais. Para este artigo, irei instalar o oficial Gridsome Blog Starter .

O Gridsome Blog Starter é um iniciador simples, hackeável e minimalista para o Gridsome que usa Markdown para conteúdo. Ele também tem um recurso de modo claro/escuro.

Esta é a aparência do seu site após a instalação deste site inicial- https://gridsome-starter-blog.netlify. com/

Etapas para instalação

Primeiro, instale a ferramenta Gridsome CLI: npm install--global @ gridsome/cli .

Se você não tiver certeza se o possui, pode usar gridsome-v para confirmar se o Gridsome CLI já está instalado.

Em seguida, instale o site inicial:

1. Digite gridsome create my-blog https://github.com/gridsome/gridsome-starter-blog.git
2. Execute cd my-blog para mover para o diretório do projeto
3. Execute gridsome developers para iniciar um servidor de desenvolvimento local em http://localhost: 8080

Parabéns, agora criamos um site estadual para modificarmos de acordo com nosso gosto!

Visite http://localhost: 8080 para acessar este site:

Agora você pode abrir o vsCode ou seu editor de código preferido para ajustar este site a seu gosto. Por exemplo, você pode criar uma nova página inicial, convertê-la em um blog e usá-la como o site de seu portfólio.

Plug-ins Gridsome

Os plug-ins permitem funcionalidades adicionais que podem ser vinculadas ao seu aplicativo Gridsome. Gridsome tem um ecossistema próspero de plug-ins para integrações complexas com muitas coisas. Normalmente, são bibliotecas JavaScript que você instala usando npm e depois configura de acordo com as necessidades do seu projeto.

No momento em que este artigo foi escrito, o Gridsome tinha 194 plug-ins, que você pode acessar aqui . Para instalar qualquer plugin Gridsome, você pode usar npm ou Yarn.

Qualquer plugin que comece com @ gridsome/ significa que é um plugin oficial dos criadores do Gridsome. Para instalar um plug-in, basta visitar a página geral de plug-ins, procurar o plug-in desejado e seguir as etapas de instalação.

Criação de um blog que busca conteúdo Markdown

A primeira etapa para construir um blog com Markdown é criar e configurar um projeto Gridsome conforme explicado anteriormente usando gridsome create gridsome-blog .

Neste tutorial, farei uso de dois plug-ins:

1. plugin @ gridsome/source-filesystem para transformar arquivos em conteúdo que pode ser obtido com GraphQL em seus componentes
2. @ gridsome/transformer Observação , um transformador Markdown para Gridsome com Remark

Remarcação

Markdown é uma linguagem de marcação leve que você pode usar para adicionar elementos de formatação a documentos de texto simples. Criado por John Gruber em 2004, Markdown é agora uma das linguagens de marcação mais populares do mundo. O Markdown pode ser usado para quase tudo, como sites, documentos, notas, livros, apresentações, mensagens de e-mail e documentação técnica.

Instalando plug-ins

Conforme explicado anteriormente, você pode usar Yarn ou npm para instalar plug-ins. Vamos instalar os dois de uma vez com o npm usando o seguinte:

   npm  i-S @ gridsome/source-filesystem @ gridsome/transformador-observação
 

Assim que a instalação for bem-sucedida, você precisará configurar o plug-in @ gridsome/source-filesystem dentro do arquivo gridsome.config.js . Assim, o Gridsome procura a pasta blog e adiciona todas as postagens a serem consultadas posteriormente:

 //gridsome.config.js module.exports={ siteName: 'Gridsome', plugins: [ { use: '@ gridsome/source-filesystem', opções: { typeName: 'BlogPost', caminho: './blog/**/*. md', }, }, ], modelos: { BlogPost: '/blog/: title', },
};
 

A configuração acima é o que precisamos para definir o plug-in source-filesystem .

• typeName é o tipo GraphQL e o nome do modelo

Um arquivo .vue em src/templates deve corresponder ao typeName para ter um modelo para ele.

• path é a localização do conteúdo markdown que iremos consumir nas postagens/blog
• templates.BlogPost é a rota que cada postagem seguirá, ou seja, localhost:8080/blog/new-post

Para que isso não fique muito complicado mais tarde, vamos criar nossos arquivos/postagens Markdown. Eles servirão como postagens de blog fictícias. Primeiro, crie a pasta blog que conterá as postagens do nosso blog:

blog/welcome.md

  ---
 title:  'Bem-vindo ao blog'
 data:   2020  -04  -20 
---  ## Bem-vindo ao blog  Esta é a primeira postagem neste novo blog.
Claro que temos todo o poder de Markdown aqui,
para que possamos tornar as coisas ** negrito ** ou _itálico_.
 

blog/happy-easter.md

  ---
 título:  'Feliz Páscoa'
 data:   2020  -04  -12 
---  ## Feliz Páscoa  Acontece que eu  estou escrevendo isso na Páscoa,
então por que não incluir uma foto de um ovo de páscoa aqui. ! \ [easter egg \] (https://images.unsplash.com/photo-1457301353672-324d6d14f471?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80) 
 

Para evitar confusão, esta é a aparência da minha estrutura de arquivos e pastas agora:

Sempre que você fizer alterações em seu arquivo gridsome.config.js ou adicionar novas postagens de blog, você precisará pressionar (Ctrl + c) para reiniciar o servidor de desenvolvimento Gridsome para que ele pegue o novo configuração e os arquivos que você acabou de criar.

Consulta de dados com GraphQL

Existem tantas maneiras de inserir dados em seu site no Gridsome, mas um meio muito popular e simples é o GraphQL. Já que configuramos o plug-in e criamos postagens fictícias, vamos dar uma olhada no playground do GraphQL.

Os dados podem ser consultados da camada de dados GraphQL em qualquer página, modelo ou componente. As consultas são adicionadas com um bloco nas páginas e modelos ou bloco nos componentes.

Execute gridsome developers e navegue para http://localhost: 8080/___ explore :

   # Escreva sua consulta ou mutação aqui 
consulta { posts: allBlogPost { arestas {  nó   { id  título  data  (formato: "MMMM D, AAAA") caminho } } }
}
 

Quando você clica no grande botão Reproduzir , obtemos o resultado abaixo mostrando que as duas postagens de blog que criamos como arquivos Markdown agora estão disponíveis por meio do terminal GraphQL:

  { "data": { "posts": { "bordas": [ { "node": { "id": "46ea6f212d1378a5dcc360216e17dbc4", "title": "Bem-vindo ao blog", "date": "20 de abril de 2020", "path": "/blog/welcome-to-the-blog/" } }, { "node": { "id": "54c8892e9cf791f134c7ace95dcbcf5e", "title": "Feliz Páscoa", "date": "12 de abril de 2020", "path": "/blog/happy-easter/" } } ] } }
}
 

A próxima etapa é consultar e exibir os dados em nossos componentes ou páginas. Anteriormente, criamos um arquivo Blog.vue em nossa pasta de páginas. Agora que temos algum conteúdo, vamos adicioná-lo a essa página.

Vamos criar um componente BlogPostList em src/components/ para tornar nosso projeto mais fácil de manter e testar. No arquivo BlogPostList.vue , use o código abaixo:

  //src/components/BlogPostList.vue  < modelo >   < div   classe ="post-list">   < artigo   classe ="post"  v-for ="postar nos posts" : key ="post.node.id">   < h4 >    {{post.node.title}}     h4 >   < p >  Publicado em   { {post.node.date}}     p >   < g-link  : para ="post.node.path">  Leia o artigo   g-link >    artigo >    div > 
  modelo >   < script >  
 exportar   padrão  {  adereços : ['posts']
}
   script >   < estilo >  
. pós-lista  {  margin-top :  12px ;
} . postagem  {  preenchimento :  12px   0 ;
}
   estilo >  
 

Este arquivo está apenas recebendo dados como adereços do arquivo Blog.vue no qual estamos prestes a buscar as postagens do nosso blog.

Usaremos para obter a lista de postagens de blog do endpoint GraphQL, pois é uma página:

  //src/pages/Blog.vue  < modelo >   < Layout >   < h1 >  Blog   h1 >   < p >  Esta é a página do blog.   p >   < BlogPostList  : posts ="$ page.posts.edges"/>    Layout > 
  modelo >   < script >  
 importar  BlogPostList  de  '~/components/BlogPostList.vue';  exportar   padrão     { metaInfo: { título:'Blog' }   , componentes:    { BlogPostList }   
}
   script >   < consulta de página > 
consulta   { posts: allBlogPost { arestas { nó { identificação título data (formato:"MMMM D, AAAA") caminho }   } }
}
  page-query >  
 

Agora, ao acessar a página do blog por meio de http://localhost: 8081/blog/ devemos ver a lista de postagens do blog:

Creating a post page

Now it’s time to create a post page. At this point, if you try to click the read article link below each post it will refer you to a 404 error page. This is because we have not yet created a page for each individual blog post.

The 404 page can easily be customized.

As a reminder, the typeName is the GraphQL type and template name and a .vue file in src/templates must match the typeName to have a template for it.

To create single pages for nodes in a collection (in this case the collection is BlogPost), let’s create a new file, src/templates/BlogPost.vue, where we define how the blog posts should look.

We’ll need to add a page query again to get the post itself out of the GraphQL endpoint, this time we’ll also need the field content as it contains the body of the post in HTML:

//src/templates/BlogPost.vue <template> <Layout> <article> <header> <h2>{{$page.post.title}}h2> <p>Published on {{$page.post.date}}p> <p><i>{{$page.post.timeToRead}}min to readi>p> header> <main class="content" v-html="$page.post.content">main> article> Layout>
template> <style>
article > header { text-align: center;
} .content { margin-top: 48px;
}
style> <page-query>
query Post ($path: String!) { post: blogPost (path: $path) { identificação título date (format:"MMMM D, YYYY") timeToRead contente }
}
page-query>

With these we have been able to create a blog that fetches Markdown content and files as posts. Feel free to add additional content and features to your website here.

You can find my source code here

Building a site for student profiles

In this tutorial, I will be using the gridsome/source-fakerplugin to get data for the site. This data will be queried using GraphQL.

Installing the plugin

As explained earlier, you can either make use of yarn or npm to run this installation:

yarn add @gridsome/source-faker

or

npm install @gridsome/source-faker

Once you are done with the installation, the next step is to register the plugin in gridsome.config.js:

export default { plugins: [ { use: '@gridsome/source-faker', options: { numNodes: 100 } } ]
}

Using TailwindCSS for styling

To make this site attractive, I will be using TailwindCSS. There are many options you can use to install TailwindCSS in Gridsome but I will be using their CDN.

In the main.js file, we will be adding the head metadata and then include the external CSS/CDN link:

import DefaultLayout from '~/layouts/Default.vue'
export default function (Vue, { router, head, isClient }) { //Set default layout as a global component Vue.component('Layout', DefaultLayout) head.link.push({ rel: 'stylesheet', href: 'https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css' })
}

Creating a profile page and linking

After successfully setting up the plugin and TailwindCSS, the next step is to create a new page and then link it in our default layout:

After creating the new page, go to layouts/Default.vue to include this new link in the navbar, knowing that Default.vue appears on all pages as it’s used to wrap page components:

<template> <div class="layout"> <header class="header"> <strong> <g-link to="/">{{ $static.metadata.siteName }}g-link> strong> <nav class="nav"> <g-link class="nav__link" to="/">Homeg-link> <g-link class="nav__link" to="/profile/">Profileg-link> <g-link class="nav__link" to="/about/">Aboutg-link> nav> header> <slot/> div>
template>

To ensure that the new page makes use of defualt.vue, we will need to wrap our code with the name given to it in main.js, which is in layout as explained earlier.

Querying data with GraphQL

We’ve covered this topic earlier in this article, so you can follow along there for this part of the tutorial. You can find my source code here, and the live site here.

Deploying Live

When working with Gridsome, the best way to deploy your site is to make use of a Git-service like GitHub, then connect a deploy service (Netlify, AWS Amplify, Vercel, Github Pages, Surge.sh etc.) that builds your site from a selected repository. Some of these services (Vercel and Surge.sh, for example) let you deploy your static Gridsome site from the Terminal.

Gridsome comes with a set of useful commands, both for development and production purposes:

Deploying to Netlify

Two major things are needed to use Netlify to deploy you projects or websites:

1. A GitHub account
2. A Netlify account (you can use your GitHub details to sign up on Netlify)

If you have a GitHub and a Netlify account, then you can push your code to GitHub via Git.

Once you have pushed to GitHub, visit your Netlify dashboard via netlify.com and login:

Once you have logged in, you can now click the New site from Git button, then select GitHub as the Git provider where your site’s source code is hosted for continuous deployment:

You can now search for the repository so you can begin to deploy your website as seen in the image above.

Add the build command (gridsome build) for Gridsome. It might take some time to deploy, but once its done you will be able to access your site via the link Netlify generates for you.

The Netlify Drop can also be used by making use of the generated dist folder after running the gridsome build command.

FTP Deploying

FTP stands for File Transfer Protocol, which is a set of rules that computers follow for the transferring of files from one system to another over the internet. To host your Gridsome site on a traditional hosting via FTP, you need to manually build your project from the Terminal by running gridsome build in your project folder so as to generate a dist folder where your generated site is located.

The generated folder can now be uploaded to any FTP.

Conclusão

As static site generators gain popularity, you must be able to understand building with SSGs like Gridsome to deliver content to your users by comfortably building static websites.

This article is just an introduction to Gridsome. You can check the official Gridsome documentation to learn more here.

To read more about Gridsome, here are some links you can check out:

• A Step-by-Step Guide: Deploying on Netlify, Netlify Docs
• Git & GitHub: Explained Like I’m Five, Joel Olawanle, DevCommunity
• The GraphQL data layer, Gridsome Docs

If you have any questions, you can leave them in the comments section and I’ll be happy to answer every single one! Thanks for reading!

Resources

• Gridsome documentation
• Netlify documentation

The post Getting started with Gridsome appeared first on LogRocket Blog.

Source link