{"pageProps":{"title":"Como usar esse blog minimalista na vercel","description":"Vou mostrar como utilizar e configurar esse blog simples e mimalista","thumbnailUrl":"https://blogdomat.vercel.app/api/thumbnail.png?title=Como usar esse blog minimalista na vercel&icon=https://cdn.worldvectorlogo.com/logos/nodejs-icon.svg","slug":"1-como-usar-esse-blog-minimalista-na-vercel","content":"<h2 id=\"blogdomat-🌠\">blogdomat 🌠</h2>\n<p>Blog simples e minimalista desenvolvido usando Next.js, Reactjs, styled-components e MarkDown.</p>\n<p>Utilizado como base a aula no <a href=\"https://www.youtube.com/watch?v=qvetoR6V5ic\">YouTube da Rockeseat</a>, valeu Diego.</p>\n<h2 id=\"clone-e-instalação\">Clone e instalação</h2>\n<p>Vou mostrar de forma simples como baixar, configurar e hospedar este blog na vercel.</p>\n<p>Primeiro você vai clonar o repositório do <a href=\"https://github.com/iaematt/blogdomat\">github</a>, você vai precisar de uma conta da <a href=\"https://vercel.com\">vercel</a> e esta logado nela:</p>\n<pre><code># faça o clone do repositório, e escolha o nome de sua preferência\ngit clone https://github.com/iaematt/blogdomat.git nomedoseublog\n\n# acesse a pasta\ncd nomedoseublog\n\n# instale as dependencias\nyarn\n\n# rode a aplicação como desenvolvimento usando a vercel\nvercel dev</code></pre>\n<p>Após isso, você deverá ver um blog identico a esse acessando: <a href=\"http://localhost:3000\">localhost:3000</a>.</p>\n<h2 id=\"arquivos-a-serem-editados\">Arquivos a serem editados</h2>\n<p>Acesse a pasta componentes e visualize a pasta Footer e Header, você deverá alterar o arquivo index.tsx de cada uma, para alterar o nome do blog e links. Faça uma busca por <em>blogdomat</em> e altere para o nome que desejar.</p>\n<p>Para alterar os icones de links do header, abra o arquivo index.tsx dentro da pasta Header (em componentes), logo acesse o <a href=\"https://react-icons.github.io/react-icons/\">react-icons</a> e escolha os icones de sua preferencia e faça o importe do mesmo no arquivo e faça a substituição:</p>\n<pre><code># padrão\nimport { FaGithub, FaInstagram } from &#39;react-icons/fa&#39;\n[...]\n&lt;FaInstagram size={24} /&gt;\n\n# alterações feitas\nimport { FaGithub, FaSnapchatGhost } from &#39;react-icons/fa&#39;\n[...]\n&lt;FaSnapchatGhost size={24}&gt;\n\n# * não esqueça de editar também os links\n[...]\nhref=&quot;https://github.com/iaematt/blogdomat&quot;</code></pre>\n<p>A última alteração que precisa ser feita é dentro do arquivo <em>src/pages/api/posts.ts</em>, você vai precisar alterar a url do seu blog, primeiramente você precisa fazer o deploy dele na vercel para saber qual a url que será disponibilizada.</p>\n<pre><code># faça o deploy da sua aplicação\nvercel --prod</code></pre>\n<p>Agora acesse o arquivo <em>next.config.js</em> e altere as variáveis globais, inclusive a url disponibilizada na vercel:</p>\n<pre><code>[...]\n  env: {\n    BLOG_NAME: &#39;blogdomat&#39;,\n    BLOG_TITLE: &quot;Simples e minimalista, como deve ser.&quot;,\n    BLOG_DESCRIPTION: &quot;Blog desenvolvido usando Next.js, Typescript, ...&quot;,\n    BLOG_URL: &#39;https://blog.devbsb.com.br&#39;,\n  }\n[...]</code></pre>\n<p>Para alterar o favicon do site, abra o arquivo <em>src/pages/_document.tsx</em></p>\n<pre><code>[...]\n&lt;link\n  rel=&quot;icon&quot;\n  type=&quot;image/png&quot;\n  href=&quot;https://devbsb.com.br/favicon.png&quot;\n/&gt;\n[...]</code></pre>\n<h2 id=\"posts-do-blog\">Posts do blog</h2>\n<p>Os posts do blog usam <a href=\"https://pt.wikipedia.org/wiki/Markdown\">MarkDown</a>, e ficam localizados dentro da pasta <em>src/_posts</em>.</p>\n<p>São ordenados em ordem decrecente, de acordo com o número colocado antes do post.\nNa listagem o post 2 vem antes do post 1 e assim sucessivamente. Então sempre que criar um post novo lembre de colocar um número maior que o anterior seguido do nome do post.\nLembre-se de não usar espaços na criação do post, separe palavras usando traços (-).</p>\n<p>Cada post deve conter: título, descrição e um icone (não obrigatório). Essas informações geram a imagem statica de cada post. <a href=\"https://github.com/iaematt/blogdomat/tree/main/src/_posts\">Veja exemplos</a> ou acesse a pasta <em>src/_posts</em> e abra qualquer arquivo.</p>\n<pre><code>---\ntitle: &#39;Título do post&#39;\ndescription: &#39;Descrição do post&#39;\nicon: &#39;url da imagem&#39;\n---\n\n[...]</code></pre>\n<h2 id=\"considerações-finais\">Considerações finais</h2>\n<p>Pronto, é só publicar novamente seu blog usando <em>vercel --prod</em> e seu blog estara online com os posts.</p>\n<p>Qualquer duvida ou sugestão entre em contato pelo <a href=\"https://devbsb.com.br/contato\">formulário</a> ou por <a href=\"mailto:matheusbastos@outlook.com\">e-mail</a>.</p>\n<h2 id=\"licença\">Licença</h2>\n<p><em>Distribuído sob a licença MIT.</em></p>\n"},"__N_SSG":true}