Introdução
Além de conteúdos relacionados à inteligência de dados, finanças, startups, iremos dar nossa contribuição também com relação à tecnologia em geral.
Vê a necessidade criar, alterar um blog, seja o de sua empresa ou um blog pessoal por algum motivo específico: facilidade de gerenciamento; performance em renderização; agilidade de desenvolvimento/manutenção ?
Nesse post, passaremos por alguns tópicos com o objetivo de criar um blog, à custo zero, utilizando tecnologias de ponta: Vercel, Next.js, Notion, sem a necessidade de saber como programar.
Acompanhe esse material que, no final, você terá um blog igualzinho ao nosso, pronto para adicionar conteúdos.
Dentre as etapas para concluir esse tutorial, destacamos:
- Instalação de Node.js
- Criação de conta no Notion
- Fork/Download de repositório no git
- Integração do seu blog com o Notion
- Adaptação do blog com sua identidade visual
- Criação de conta no Vercel
- Deploy (colocar o blog no ar)
Caso não conheça algum termo ou tecnologia, não se preocupe, explicaremos em detalhes cada um dos pontos e, em uma hora, você terá o seu blog no ar.
Instalação de Node.js e NPM
Node.js e npm são tecnologias usadas para possibilitar a instalação execução do blog. Não é foco desse post entrar nos detalhes sobre como instalar node.js em seu computador. Por isso, caso você ainda não tenha instalado, segue abaixo um guia de instalação. Entre no link, selecione o seu sistema operacional (linux, windows, mac) e siga com a instalação.
Conta no Notion
O notion é uma ótima ferramenta para gerenciamento e compartilhamento de conteúdos, gestão de projetos, entre outras funcionalidades.
Entre na página do notion e crie uma conta gratis clicando em sign-up.
Guarde suas credenciais (login e senha) em um local seguro.
Download de repositório no Git
Aqui, não entraremos em detalhes sobre o que é o git ou como usa-lo. Se quiser saber mais, leia nesse link.
Se já tiver familiaridade, faça um fork do repositório original e clone o novo repositório gerado em seu computador. Se não, na página do repositório, selecione 'Code' e em seguida 'Download ZIP', como na imagem abaixo:
Isso vai fazer com que uma cópia do repositório seja baixada em seu computador. Clique duas vezes no arquivo baixado para extrair o repositório do ZIP.
Integrando seu blog com o Notion
A partir desse passo, caso você não tenha nenhuma experiência com programação, prepare-se para aprender alguns comandos.
Antes de testar o blog, devemos integrar com sua conta no notion.
Integração com página no notion
Crie uma pagina no notion, digitando o comando '/Page'. É da tabela contida nessa página que o blog vai coletar e atualizar os conteúdos. Siga o exemplo dessa página: https://www.notion.so/Blog-template-4fd6cedbedf54da2ad82b011ad3c6a41. (Não altere o nome das colunas da tabela - esses nomes são utilizado em nível de código)
Na página que foi criada no seu notion existe uma sequência de caracteres no final da url como abaixo:
Esse é o seu NOTION_BLOG_ID.
Precisamos também do NOTION_TOKEN
- Na sua página do Notion, no google chrome, clique com o botão direito e selecione inspecionar (inspect)
- Na aba que abrir, à direita, localize Application e selecione Cookies
- Copie e cole o valor ao lado de 'token_v2' - Esse é seu NOTION_TOKEN
Com esses dois valores em mãos, abra o arquivo BlogThreeGrid.js que está dentro da pasta components/blog e substitua os valores na oitava e nona linha. Deve ficar dessa forma:
const NOTION_TOKEN = '38823e204b4c08778f5fb2a344f0da0fd58de3098622b7714189bb7501eb745d13eade0ed4b76730d8e000f4dfceea89cc7ad703432a87188d39bc7fba'
const NOTION_BLOG_ID = 'f8cf0c8645db47286fee2'Agora é hora de ver o blog funcionando.
Testando o Blog
Abra seu terminal e navegue até a pasta onde está o projeto que acabou de fazer o download.
Para navegar no terminal, siga o tutorial para windows ou para mac e linux: em ambos os casos, é preciso usar o comando cd, para navegar até o diretório.
Agora é hora de fazer o primeiro teste no blog. 🙌🏼
Lembra que você instalou o node e npm, agora é hora de usa-los:entro da pasta correta, no terminal, execute o comando:
npm installEsse comando vai instalar todas as dependências necessárias para executar o projeto.
Ao finalizar a execução desse comando, execute:
npm run devSe tudo correu bem até aqui, navegue até localhost:3000 em seu navegador, e lá você deve ver seu blog funcionando.
Agora, vamos adaptar para as cores e logo que você precisa.
Identidade visual
Para esse momento, vamos alterar a cor principal que no caso está azul e o logo. Se ver a necessidade de mais alterações, estou a disposição pelo telegram (contato no fim do post).
Alterando a cor principal
Dentro do arquivo /assets/style.scss você vai encontrar, a seguinte declaração:
$main-color: #01579B;Altere o valor depois dos 'dois pontos' para a cor que desejar. Branco, por exemplo, ficaria:
$main-color: #FFF;Salve o arquivo.
Alterando o logo
Dentro da pasta imagens, existe um arquivo chamado logo.png. Substitua esse logo pelo logo que preferir.
No arquivo Navbar.js, dentro da pasta /components/Layouts na linha 59, substitua o texto ao lado do logo pelo texto que desejar.
Atualizando o Blog
Na página criada no notion, deve-se ter uma tabela, como no exemplo apresentado acima.
As colunas são dados que serão apresentados no blog e, o conteúdo do post em si, deve ser adicionado dentro da página da linha na tabela, abaixo da seção de comentários.
Ah, o post só aparecerá no blog quando a opção na coluna 'Published' for selecionada.
Criar conta no Vercel e Deploy
Por fim, bora por seu blog no ar.
O Vercel é uma tecnologia incrível desenvolvida pela Zeit, a qual usamos na Madai para front (interface) e back end (servidores).
Crie uma conta e, pelo terminal, instale e faça o login
npm i -g vercelvercel loginPronto, agora é só fazer o deploy (colocar no ar):
vercel --prodO seu site estará disponível para o publico pela url exibida.
Conclusão
Pelo Vercel é tranquilo também conectar seu blog à um domínio específico: ex: meublog.com.br.
Basta, para isso, seguir esse tutorial.
Esperamos que tenham gostado.
Se ficou alguma dúvida, fiquem a vontade para enviar uma mensagem pelo telegram: @vlimag ou pelo email: vitor@madai.com.br
