C
|Caroline Oliveira
Tutoriais

Como fazer um blog personalizavel com PayloadCMS e Supabase

Autor

Caroline Oliveira

Data de publicação

Ilustração 3D de um ambiente de desenvolvimento.

Visão geral

Neste tutorial vamos criar e publicar um blog pessoal completo, com Homepage customizável e deployment gratuito com a Vercel.

O projeto utiliza o template website do PayloadCMS, que contém pré-configurado posts, preview de rascunhos, controle de acesso e atualização do site em tempo real após publicação ou atualização de postagens.

Breve explicação sobre cada um

1. PayloadCMS

O Payload é um framework fullstack para Next.js que permite criar rapidamente um backend completo a partir de uma configuração estabelecida em código. Ao definir o Payload Config, você obtém automaticamente um painel administrativo em React, schema de banco de dados com migrações e transações, APIs REST e GraphQL, autenticação, controle de acesso avançado, gerenciamento de arquivos e preview em tempo real. Ele é open source, pode ser hospedado em qualquer ambiente Node.js (inclusive serverless como Vercel, como vamos fazer nesse tutorial).

2. Vercel

A Vercel é uma plataforma em nuvem criada para simplificar o desenvolvimento, deploy e escalabilidade de aplicações web modernas. Ofere um ambiente unificado, com deploy automático via Github, previews instantâneos para cada alteração e configuração praticamente zero (o que facilita muito aplicações standalone como é o caso do blog que vamos descrever nesse tutorial).

3. Supabase

Supabase é uma plataforma de Backend como Serviço (BaaS) open-source, projetada para acelerar o desenvolvimento de aplicações web e mobile.  Ele funciona como uma alternativa open-source ao Firebase, oferecendo uma stack completa de recursos PostgreSQL (que vamos utilizar nesse tutorial).

Stack utilizada

1. PayloadCMS —  backend, API REST/GraphQL e painel admin (React).

2. NextJS — front-end do projeto e hospedagem do Payload na mesma app.

3. Vercel — Cloud/Deployment do projeto

4. Supabase — BaaS com PostgreSQL

5. AWS S3 — Cloud para armazenamento de mídia/Blob.

Essa estrutura permite uma publicação gratuita e completamente customizável do seu conteúdo online.

Pré requisitos

Para seguir nesse tutorial, será necessário ter os seguintes pontos abaixo previamente:

1. Conhecimento básico de Nextjs

2. S3 Bucket previamente configurado

3. IAM Policy de acesso a write e read ao bucket. Vamos precisar da KEY_ID e ACCESS_KEY

Execução do projeto

Criando um projeto no Supabase

Para conseguir fazer esse passo a passo, é necessário ter uma conta no Supabase. Como inicialmente o projeto é pequeno, vamos nos aproveitar o free tier. Nesse plano temos 500MB de espaço no banco de dados para usar gratuitamente e não temos limitadores de requisições.

1. No dashboard, clique em New Project.

- Name (nome do projeto)

- Database Password (senha forte para o banco)

- Region (escolha a mais próxima dos seus usuários)

- Clique em Create new project.

- Aguarde alguns minutos até o provisionamento finalizar.

- Após o provisionamento, clique em connect. Vamos usar a string de conexão do método Transaction Pooler.

Tudo pronto com o Supabase!

Criando um projeto com o PayloadCMS

É uma sequencia bem simples, porém pode demorar alguns minutos para ser concluída. As opções que serão decididas setup vão decidir quais arquivos serão criados. Nesse tutorial vamos focar em criar um website/blog, porém o PayloadCMS tem várias outras opções que podem ser conferidas na documentação.

1. Crie o projeto rodando o comando no terminal:

Bash
npx create-payload-app

Ao rodar o comando, algumas opções vão aparecer para serem selecionadas. Neste projeto foram escolhidas:

Algum nome para o projeto > Website > PostgreSQL.

Após alguns minutos o projeto estará pronto. Para rodar basta seguir os comandos que serão informados no terminal.

⚠️ Atenção: é obrigatório ter uma instância do PostgreSQL rodando localmente (ou acessível no ambiente). Caso o banco não esteja ativo, a aplicação não irá iniciar, pois não conseguirá estabelecer conexão com o banco de dados.

Se tudo estiver funcionando corretamente:

  • A tela de Admin será exibida no navegador. Você deverá preencher os dados para criar o primeiro usuário.

⚠️ Atenção: Guarde a senha criada, pois ela será utilizada posteriormente para fazer login no painel administrativo.

Conectando o projeto do payload com o AWS S3

Ao invés de enviar arquivos de mídia diretamente para o Supabase (no qual o free tier é de apenas 1GB), podemos enviar para o AWS S3. Para isso, temos o pacote @payloadcms/storage-s3.

A configuração é bem simples, como no snippet de código abaixo:

Typescript
//src/plugins/index.ts
export const plugins: Plugin[] = [
...
  s3Storage({
    collections: {
      media: {
        prefix: 'media',
      },
    },
    bucket: process.env.S3_BUCKET ?? '',
    config: {
      forcePathStyle: true,
      credentials: {
        accessKeyId: process.env.S3_ACCESS_KEY_ID ?? '',
        secretAccessKey: process.env.S3_SECRET_ACCESS_KEY ?? '',
      },
      region: process.env.S3_REGION,
    }
  })
]

⚠️ Atenção: Não remova plugins já existentes, a menos que seja realmente necessário. Apenas adicione o s3Storage junto aos outros plugins configurados anteriormente.

Para fazer a conexão com o S3, vamos precisar das credenciais da AWS (descritas na sessão de pré-requisitos).

No arquivo .env adicione:

Bash
S3_BUCKET=nome-do-bucket
S3_ACCESS_KEY_ID=sua-access-key
S3_SECRET_ACCESS_KEY=sua-secret-key
S3_REGION=regiao-do-bucket

Definindo uma Global para Homepage

O objetivo é ter uma Homepage personalizada, com os campos que vão atender as expectativas que temos em relação ao site. Sendo assim, não será necessário alterar código no caso de alguma mudança de informação, para isso conseguimos nos apoiar em Globals.

As Globals no PayloadCMS são um recurso projetado para gerenciar documentos únicos em todo o site, que são acessados em todo o aplicativo. Ao contrário das Coleções, que armazenam vários documentos do mesmo tipo (por exemplo, postagens de blog ou produtos), um Global corresponde a apenas um documento.

Ou seja, Globals são ideais para:

  • Homepage
  • Configurações do site
  • Footer
  • Header
  • SEO global

Sendo assim, vamos criar uma Globals de Homepage, para conseguir editar futuramente sempre que for necessário. Personalize da forma como achar necessário. O código que foi usado nesse site está detalhado nesse arquivo no Github.

Adicione o código semelhante ao abaixo. Os campos inseridos no código aparecerão no admin para serem editados, na sessão de Globals.

Typescript
export const HomePage: GlobalConfig = {
  slug: 'homePage',
  access: { read: () => true },
  fields: [
    ...
  ],
  hooks: {
    afterChange: [revalidateHomePage], //hook que será executado em caso de mudança na Global
  },
}

O que esse código faz:

  • slug: 'homePage' → identifica a Global
  • fields → define os campos editáveis no Admin
  • afterChange → executa um hook sempre que houver alteração

Os campos adicionados dentro de fields aparecerão automaticamente no painel administrativo.

Além disso, precisamos invalidar o cache para que na próxima consulta o Nextjs busque os dados atualizados.

Typescript
// src/HomePage/hooks/revalidateHomePage.ts
import type { GlobalAfterChangeHook } from 'payload'
import { revalidateTag } from 'next/cache'


export const revalidateHomePage: GlobalAfterChangeHook = ({ doc, req: { payload, context } }) => {
  if (!context?.disableRevalidate) {
    payload.logger.info('Revalidating home page')
    revalidateTag('global_homePage')
  }
  return doc
}

O que esse código faz:

  • O hook é executado
  • A tag global_homePage tem seu cache invalidado
  • Na próxima requisição, o Next.js busca os dados atualizados
  • O conteúdo novo é exibido automaticamente no site

Isso garante atualização dinâmica sem necessidade de rebuild manual.

Deployment na Vercel

  1. Crie um projeto na Vercel:
  • Acesse o dashboard da Vercel
  • Clique em Add New → Project
  • Importe o repositório do GitHub
  • Clique em Deploy

A Vercel detectará automaticamente que é um projeto Next.js.

  1. Variáveis de ambiente:

Essa etapa é imprescindível para o funcionamento do projeto, uma vez que elas vão definir conexão com o Supabase, credenciais do PayloadCMS e credenciais da AWS.

No painel do projeto na Vercel:

  1. Vá em Settings → Environment Variables
  2. Adicione todas as variáveis usadas no seu .env, por exemplo:
Bash
DATABASE_URL=
PAYLOAD_SECRET=
S3_BUCKET=
S3_ACCESS_KEY_ID=
S3_SECRET_ACCESS_KEY=
S3_REGION=

Após essa fase, será possível acessar o website e já publicar suas primeiras postagens e páginas.