{"id":57469,"date":"2023-02-23T08:15:48","date_gmt":"2023-02-23T11:15:48","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=57469&#038;preview=true&#038;preview_id=57469"},"modified":"2025-09-01T12:42:12","modified_gmt":"2025-09-01T15:42:12","slug":"docusaurus","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/","title":{"rendered":"Crie e Personalize um Site Docusaurus (Com Recurso de Blog)"},"content":{"rendered":"<p>Para sites leves, aplicativos e outros pequenos projetos, mais e mais desenvolvedores est\u00e3o se voltando para <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-vs-html-estatico\/\">geradores de sites est\u00e1ticos atrav\u00e9s do WordPress<\/a> ou <a href=\"https:\/\/kinsta.com\/pt\/blog\/softwares-cms\/\">outros sistemas de gerenciamento de conte\u00fado (CMS)<\/a>. Sites est\u00e1ticos oferecem uma maneira simples e eficaz de criar sites e aplicativos que s\u00e3o r\u00e1pidos, seguros e f\u00e1ceis de manter.<\/p>\n<p>Docusaurus \u00e9 um desses geradores de sites est\u00e1ticos &#8211; e est\u00e1 ganhando rapidamente popularidade na comunidade de desenvolvimento.<\/p>\n<p>Neste artigo, faremos uma an\u00e1lise detalhada dos benef\u00edcios de usar o Docusaurus como seu gerador de site est\u00e1tico e por que ele est\u00e1 se tornando um favorito crescente entre os desenvolvedores.<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>O que \u00e9 Docusaurus?<\/h2>\n<p>Docusaurus \u00e9 um <a href=\"https:\/\/kinsta.com\/pt\/blog\/geradores-de-site-estatico\/\">gerador de sites est\u00e1ticos<\/a> popular que utiliza <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-react-js\/\">React<\/a>, uma das <a href=\"https:\/\/kinsta.com\/pt\/blog\/bibliotecas-javascript\/\">principais bibliotecas JavaScript<\/a>, como sua biblioteca de interface do usu\u00e1rio (UI) para cria\u00e7\u00e3o de p\u00e1ginas. Como outros geradores desse tipo, \u00e9 f\u00e1cil de configurar e modificar e, o mais importante, fornece tudo o que voc\u00ea precisa para come\u00e7ar a trabalhar com seu site est\u00e1tico.<\/p>\n<p>Al\u00e9m disso, o que diferencia o Docusaurus \u00e9 que ele \u00e9 especialmente voltado para a cria\u00e7\u00e3o e gerenciamento de sites onde o <em><a href=\"https:\/\/kinsta.com\/pt\/topicos\/estrategia-de-conteudo\/\">conte\u00fado \u00e9 o protagonista<\/a><\/em>. Ele permite que voc\u00ea crie um site completo, com recursos como blog, de forma r\u00e1pida e f\u00e1cil, destacando seu conte\u00fado desde o in\u00edcio.<\/p>\n<p>Como o conte\u00fado \u00e9 o foco com Docusaurus, \u00e9 perfeito para criar sites de documenta\u00e7\u00e3o como <a href=\"https:\/\/kinsta.com\/pt\/blog\/wiki-wordpress\/\">wikis<\/a>. Ele tamb\u00e9m utiliza <a href=\"https:\/\/kinsta.com\/pt\/blog\/editores-markdown\/\">markdown<\/a>, que \u00e9 ideal tanto para colabora\u00e7\u00e3o quanto para armazenamento em um reposit\u00f3rio git. Al\u00e9m disso, ele tem uma tonelada de recursos incr\u00edveis como i18n, pesquisa e temas personalizados, que discutiremos em mais detalhes mais adiante.<\/p>\n<p>Aqui est\u00e3o apenas alguns dos destaques que fazem do Docusaurus uma op\u00e7\u00e3o s\u00f3lida:<\/p>\n<ul>\n<li>Constru\u00eddo usando React<\/li>\n<li>Suporte para MDX v1<\/li>\n<li>Suporte para incorpora\u00e7\u00e3o de componentes React via markdown<\/li>\n<li>Versionamento de documentos<\/li>\n<li>Compatibilidade com Git, Crowdin e outros gerenciadores de tradu\u00e7\u00e3o para tradu\u00e7\u00e3o de documentos e implanta\u00e7\u00e3o em massa ou individual.<\/li>\n<\/ul>\n<h3>Quem usa Docusaurus?<\/h3>\n<p>O Docusaurus foi criado pelo Facebook, ent\u00e3o n\u00e3o \u00e9 surpresa que ele esteja sendo usado atualmente por muitas grandes marcas e empresas em toda a internet.<\/p>\n<p>Aqui est\u00e3o apenas algumas das maiores marcas que usam Docusaurus hoje (com mais em breve, pois a popularidade do Docusaurus continua a crescer):<\/p>\n<ul>\n<li><a href=\"https:\/\/docsearch.algolia.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Algolia DocSearch<\/a><\/li>\n<li><a href=\"https:\/\/jestjs.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jest<\/a><\/li>\n<li><a href=\"https:\/\/reactnative.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">React Native<\/a><\/li>\n<li><a href=\"https:\/\/supabase.com\/docs\" target=\"_blank\" rel=\"noopener noreferrer\">Supabase<\/a><\/li>\n<\/ul>\n<div class=\"w-full border-b border-black\/10 dark:border-gray-900\/50 text-gray-800 dark:text-gray-100 group bg-gray-50 dark:bg-[#444654]\">\n<div class=\"text-base gap-4 md:gap-6 m-auto md:max-w-2xl lg:max-w-2xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0\">\n<div class=\"relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]\">\n<div class=\"flex flex-grow flex-col gap-3\">\n<div class=\"min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap\">\n<div class=\"markdown prose w-full break-words dark:prose-invert dark\">\n<p>E outros est\u00e3o se juntando \u00e0s suas fileiras todos os dias<span style=\"font-size: 1rem\">.<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2>Como instalar o Docusaurus<\/h2>\n<p>O Docusaurus \u00e9 muito simples de instalar e requer apenas alguns minutos. Neste tutorial, estaremos construindo um site de documenta\u00e7\u00e3o com um blog, e personalizaremos o visual do site.<\/p>\n<p>E aqui est\u00e1 a parte mais legal: Levaremos menos de uma hora para fazer tudo funcionar.<\/p>\n<p>Vamos come\u00e7ar!<\/p>\n<h3>Requisitos<\/h3>\n<p>Docusaurus requer o <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-node-js\/\">Node.js<\/a> 16.14 ou mais recente. \u00c9 um SSG de arquivo plano, o que significa que voc\u00ea n\u00e3o precisar\u00e1 de um <a href=\"https:\/\/sevalla.com\/database-hosting\/\">banco de dados adicional<\/a>.<\/p>\n<p>Se voc\u00ea ainda n\u00e3o tem o Node.js 16.14+ dispon\u00edvel, voc\u00ea precisar\u00e1 come\u00e7ar <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-instalar-o-node-js\/\">instalando o Node.js<\/a> ou atualizando sua vers\u00e3o atual. Ent\u00e3o voc\u00ea pode passar para o processo de instala\u00e7\u00e3o do Docusaurus abaixo.<\/p>\n<p>Tamb\u00e9m vamos usar o site Docusaurus de amostra <a href=\"https:\/\/github.com\/kinsta\/hello-world-docusaurus\">deste reposit\u00f3rio GitHub<\/a>. Voc\u00ea pode us\u00e1-lo ou uma instala\u00e7\u00e3o limpa do Docusaurus para este tutorial.<\/p>\n<h3>Processo de instala\u00e7\u00e3o<\/h3>\n<p>Para iniciar o processo de instala\u00e7\u00e3o do Docusaurus, voc\u00ea precisa primeiro executar o seguinte comando:<\/p>\n<pre><code class=\"bash\">npx create-docusaurus@latest  classic<\/code><\/pre>\n<p>Isso ir\u00e1 criar uma pasta para o seu projeto e esbo\u00e7ar o <a href=\"https:\/\/docusaurus.io\/docs\/api\/themes\/@docusaurus\/theme-classic\">tema cl\u00e1ssico<\/a> dentro dela. O tema cl\u00e1ssico j\u00e1 cont\u00e9m alguns recursos pr\u00e9-configuradas, como um blog, p\u00e1ginas personalizadas e um framework CSS.<\/p>\n<p>Ap\u00f3s a instala\u00e7\u00e3o, voc\u00ea precisa ent\u00e3o executar o seguinte comando para iniciar o servidor local:<\/p>\n<pre><code class=\"bash\">npm start<\/code><\/pre>\n<p>Se voc\u00ea quiser construir uma vers\u00e3o otimizada que esteja pronta para ser implantada, voc\u00ea deve executar esta vers\u00e3o no lugar:<\/p>\n<pre><code class=\"bash\">npm run build<\/code><\/pre>\n<h3>Estrutura<\/h3>\n<p>Uma vez instalada sua inst\u00e2ncia Docusaurus, voc\u00ea conseguir\u00e1 abrir seu diret\u00f3rio de projetos e dar uma olhada no &#8220;esqueleto&#8221; do seu novo site.<\/p>\n<p>Aqui est\u00e1 como \u00e9 a estrutura do arquivo:<\/p>\n<pre><code class=\"bash\">my-website\n\u251c\u2500\u2500 blog\n\u2502 \u251c\u2500\u2500 2019-05-28-hola.md\n\u2502 \u2514\u2500\u2500 2020-05-30-welcome.md\n\u251c\u2500\u2500 docs\n\u2502 \u251c\u2500\u2500 doc1.md\n\u2502 \u2514\u2500\u2500 mdx.md\n\u251c\u2500\u2500 src\n\u2502 \u251c\u2500\u2500 css\n\u2502 \u2502 \u2514\u2500\u2500 custom.css\n\u2502 \u2514\u2500\u2500 pages\n\u2502 \u251c\u2500\u2500 styles.module.css\n\u2502 \u2514\u2500\u2500 index.js\n\u251c\u2500\u2500 static\n\u2502 \u2514\u2500\u2500 img\n\u251c\u2500\u2500 docusaurus.config.js\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 README.md\n\u251c\u2500\u2500 sidebars.js\n\u2514\u2500\u2500 yarn.lock<\/code><\/pre>\n<p>H\u00e1 alguns detalhes a serem observados em rela\u00e7\u00e3o a alguns desses arquivos e pastas:<\/p>\n<ul>\n<li><strong><code>\/blog<\/code>:<\/strong> Cont\u00e9m todos os arquivos relacionados ao seu blog.<\/li>\n<li><strong><code>\/docs<\/code>:<\/strong> Cont\u00e9m todos os arquivos relacionados aos seus documentos. Voc\u00ea pode personalizar a ordem deles no arquivo <strong>sidebar.js<\/strong>.<\/li>\n<li><strong><code>\/src<\/code>:<\/strong> Cont\u00e9m todos os arquivos n\u00e3o documentais como p\u00e1ginas ou componentes personalizados.<\/li>\n<li><strong><code>\/src\/pages<\/code>:<\/strong> Todos os arquivos JSX\/TSX\/MDX ser\u00e3o transformados em p\u00e1ginas.<\/li>\n<li><strong><code>\/static<\/code>:<\/strong> Arquivos est\u00e1ticos que ser\u00e3o copiados para a pasta de compila\u00e7\u00e3o final.<\/li>\n<li><strong><code>docusaurus.config.js<\/code>:<\/strong> Arquivo de configura\u00e7\u00e3o do Docusaurus.<\/li>\n<li><strong><code>packaged.json<\/code>:<\/strong> Cada site Docusaurus \u00e9 um aplicativo React, ent\u00e3o aqui voc\u00ea encontrar\u00e1 todas as depend\u00eancias e scripts que ele usa para o React.<\/li>\n<li><strong><code>sidebar.js<\/code>:<\/strong> Aqui voc\u00ea pode especificar a ordem dos documentos na barra lateral.<\/li>\n<\/ul>\n<h2>Personalizando sua instala\u00e7\u00e3o Docusaurus<\/h2>\n<p>Como voc\u00ea pode ver pela simplicidade de sua estrutura de arquivos, Docusaurus \u00e9 f\u00e1cil de usar e navegar. Da mesma forma, personalizar o seu site Docusaurus \u00e9 uma tarefa f\u00e1cil. Voc\u00ea pode abrir e editar estes arquivos usando seu <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-editores-texto\/\">editor de texto<\/a> favorito ou IDE.<\/p>\n<p>Vamos revisar algumas das op\u00e7\u00f5es de personaliza\u00e7\u00e3o que voc\u00ea ter\u00e1 logo de in\u00edcio.<\/p>\n<h3>P\u00e1gina inicial<\/h3>\n<p>A primeira coisa que voc\u00ea provavelmente estar\u00e1 louco para fazer \u00e9 personalizar a p\u00e1gina inicial padr\u00e3o para exibir o seu pr\u00f3prio projeto. Felizmente, n\u00e3o \u00e9 complicado fazer qualquer altera\u00e7\u00e3o que voc\u00ea queira na p\u00e1gina inicial do Docusaurus.<\/p>\n<p>Para alterar a p\u00e1gina inicial, abra o arquivo <strong>src\/pages\/index.js<\/strong> e fa\u00e7a ajustes ali mesmo. \u00c9 uma p\u00e1gina React t\u00edpica, ent\u00e3o voc\u00ea pode alter\u00e1-la ou reconstru\u00ed-la alterando o conte\u00fado ou criando <a href=\"https:\/\/kinsta.com\/pt\/blog\/bibliotecas-de-componentes-react\/\">componentes React<\/a> personalizados.<\/p>\n<h3>Arquivo de configura\u00e7\u00e3o<\/h3>\n<p>Pr\u00f3ximo, vamos analisar o arquivo <strong>docusaurus.config.js<\/strong> e fazer algumas altera\u00e7\u00f5es importantes para \u00e0 nossa inst\u00e2ncia.<\/p>\n<h4>Nome e descri\u00e7\u00e3o<\/h4>\n<p>No arquivo de configura\u00e7\u00e3o, voc\u00ea vai encontrar:<\/p>\n<pre><code class=\"language-markdown\">const config = {\ntitle: 'My Site',\ntagline: 'Dinosaurs are cool',\nurl: 'https:\/\/your-docusaurus-site.com',\nbaseUrl: '\/',<\/code><\/pre>\n<p>Basta alterar estes detalhes para atender \u00e0s necessidades do seu site, e ent\u00e3o salvar o arquivo.<\/p>\n<h4>Barra de navega\u00e7\u00e3o<\/h4>\n<p>Para editar sua barra de navega\u00e7\u00e3o, localize o item <code>navbar<\/code>.<\/p>\n<p>Para nosso exemplo aqui, queremos adicionar um link para Kinsta, renomear o item &#8220;Tutorial&#8221; para &#8220;Documenta\u00e7\u00e3o inicial&#8221;, e adicionar a logo da Kinsta.<\/p>\n<p>Veja como far\u00edamos:<\/p>\n<pre><code class=\"language-markdown\">navbar: {\n  title: 'Kinsta starters',\n  logo: {  \n    alt: 'Kinsta Logo',\n    src: 'img\/kinsta-logo-alpha-purple.png',\n  },\n  items: [\n    {\n      label: 'Kinsta starters',\n      to: '\/docs\/intro',\n    },\n    {to: '\/blog', label: 'Blog', position: 'left'},\n    {\n      href: 'https:\/\/github.com\/kinsta',\n      label: 'GitHub',\n      position: 'right',\n    },\n  ],\n},<\/code><\/pre>\n<h4>Rodap\u00e9<\/h4>\n<p>A personaliza\u00e7\u00e3o do rodap\u00e9 no Docusaurus \u00e9 composta de duas se\u00e7\u00f5es: o pr\u00f3prio conte\u00fado do rodap\u00e9, e os links do rodap\u00e9.<\/p>\n<h5>Conte\u00fado do rodap\u00e9<\/h5>\n<p>A maior parte do seu conte\u00fado de rodap\u00e9 (n\u00e3o incluindo a lista de links) pode ser colocada no seu arquivo de rodap\u00e9 do <strong>temaConfig.footer<\/strong>. Este \u00e9 o local ideal para adicionar uma logo e um aviso de direitos autorais.<\/p>\n<p>Aqui est\u00e1 como modificamos a configura\u00e7\u00e3o do rodap\u00e9:<\/p>\n<pre><code class=\"language-markdown\">module.exports = {\n  themeConfig: {\n    footer: {\n      logo: {\n        alt: 'Kinsta Logo',\n        src: 'img\/kinsta-logo.png',\n        href: 'https:\/\/kinsta.com',\n        width: 160,\n        height: 51,\n      },\n      copyright: `Copyright \u00a9 ${new Date().getFullYear()} Kinsta. Built with Docusaurus.`,\n    },\n  },\n};<\/code><\/pre>\n<h5>Links para rodap\u00e9s<\/h5>\n<p>Voc\u00ea pode modificar os links do rodap\u00e9 da mesma forma que a barra de navega\u00e7\u00e3o superior: encontre a se\u00e7\u00e3o &#8220;<code>footer<\/code>&#8221; no arquivo <strong>docusaurus.config.js<\/strong> e edite para atender \u00e0s suas necessidades.<\/p>\n<p>Confira como fizemos a mudan\u00e7a na nossa se\u00e7\u00e3o <code>footer<\/code> :<\/p>\n<pre><code class=\"language-markdown\">footer: {\n  style: 'dark',\n  links: [\n    {\n      title: 'Docs',\n      items: [\n        {\n          label: 'Kinsta starters',\n          to: '\/docs\/intro',\n        },\n      ],\n    },\n    {\n      title: 'Talk with us',\n      items: [\n        {\n          label: 'Discord',\n          href: 'https:\/\/discord.gg\/vjRPMhFaBA',\n        },\n        {\n          label: 'Support',\n          href: 'https:\/\/kinsta.com\/kinsta-support\/',\n        },\n        {\n          label: 'Twitter',\n          href: 'https:\/\/twitter.com\/kinsta',\n        },\n      ],\n    },\n    {\n      title: 'More',\n      items: [\n        {\n          label: 'Application Hosting',\n          href: 'https:\/\/sevalla.com\/application-hosting\/',\n        },\n        {\n          label: 'Database Hosting',\n          href: 'https:\/\/sevalla.com\/database-hosting\/',\n        },\n        {\n          label: 'WordPress Hosting',\n          href: 'https:\/\/kinsta.com\/wordpress-hosting\/',\n        },\n        {\n          label: 'DevKinsta',\n          href: 'https:\/\/kinsta.com\/devkinsta\/',\n        },\n      ],\n    },\n  ],\n};<\/code><\/pre>\n<h4>Cores e CSS<\/h4>\n<p>O cl\u00e1ssico preset para Docusaurus usa a estrutura Infima CSS. Com isto em mente, os criadores do Docusaurus fizeram uma <a href=\"https:\/\/docusaurus.io\/docs\/styling-layout#styling-your-site-with-infima\">ferramenta web muito \u00fatil<\/a> para ajud\u00e1-lo a mudar as cores e outros elementos e declara\u00e7\u00f5es do CSS.<\/p>\n<p>Uma vez que voc\u00ea tenha inserido suas prefer\u00eancias na p\u00e1gina, a ferramenta ir\u00e1 gerar um arquivo <strong>custom.css<\/strong> &#8211; completo com um ador\u00e1vel conjunto de tons complementares &#8211; em quest\u00e3o de segundos. Voc\u00ea pode ent\u00e3o copiar este novo arquivo CSS para o diret\u00f3rio <strong>\/src\/css<\/strong> do seu projeto para refer\u00eancia.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/02\/docusaurus-css-tool.jpg\" alt=\"Uma parte da documenta\u00e7\u00e3o oficial do Docusaurus, exibindo sua ferramenta CSS personalizada com campos para inserir ajustes de c\u00f3digo hexadecimal para cada elemento individual no projeto do Docusaurus.\" width=\"1600\" height=\"871\"><figcaption class=\"wp-caption-text\">Uma parte da documenta\u00e7\u00e3o oficial do Docusaurus, exibindo sua ferramenta CSS personalizada com campos para inserir ajustes de c\u00f3digo hexadecimal para cada elemento individual no projeto do Docusaurus.<\/figcaption><\/figure>\n<h4>Documenta\u00e7\u00e3o<\/h4>\n<p>Toda a documenta\u00e7\u00e3o em seu novo site \u00e9 armazenada na pasta <strong>\/docs<\/strong>. \u00c9 claro, voc\u00ea pode mudar o nome da pasta em <strong>docusaurus.config.js<\/strong>.<\/p>\n<p>Basta criar os arquivos markdown no seu <a href=\"https:\/\/kinsta.com\/pt\/blog\/editores-html-gratuitos\/\">editor de texto ou HTML<\/a> e coloc\u00e1-los naquela pasta. Cada arquivo deve ser parecido com isso:<\/p>\n<pre><code class=\"language-markdown\">---\nid: the-id\ntitle: Title\n---\n# Rest of the document<\/code><\/pre>\n<p>Baseado no ID, Docusaurus constr\u00f3i as URLs para os artigos dessa subpasta: <code>yourdomain.com\/docs\/{id}<\/code><\/p>\n<p>Tamb\u00e9m podemos criar subpastas se quisermos dividir nossa documenta\u00e7\u00e3o em se\u00e7\u00f5es diferentes e l\u00f3gicas. Entretanto, precisaremos fazer um pequeno trabalho adicional para que esses subdiret\u00f3rios funcionem da maneira que esperar\u00edamos.<\/p>\n<p>Digamos que tenhamos criado uma nova pasta de documentos chamada <strong>Starters<\/strong>. Se atualizarmos a p\u00e1gina inicial e clicarmos no novo link &#8220;Starters&#8221; que foi automaticamente adicionado \u00e0 nossa barra lateral, receberemos um erro porque ainda n\u00e3o h\u00e1 uma p\u00e1gina de \u00edndice em nossa nova pasta.<\/p>\n<p>A maneira mais f\u00e1cil de corrigir isso \u00e9 criando um arquivo <strong>_category_.json<\/strong>\u00a0que gerar\u00e1 o \u00edndice de todas as p\u00e1ginas armazenadas nesta pasta. Tudo o que precisamos fazer \u00e9 adicionar o seguinte c\u00f3digo:<\/p>\n<pre><code class=\"language-markdown\">{\n  \"label\": \"Starters\",\n  \"position\": 2,\n  \"link\": {\n    \"type\": \"generated-index\",\n    \"description\": \"All Kinsta Starters\"\n  },\n};<\/code><\/pre>\n<p>Como voc\u00ea pode ver, a barra lateral se regenera para combinar com a estrutura dos seus arquivos. Isso \u00e9 porque o arquivo <strong>sidebar.js<\/strong> cont\u00e9m este <code>tutorialSidebar<\/code>: <code>[{type: 'autogenerated', dirName: '.'}],<\/code><\/p>\n<p>Se voc\u00ea preferir cuidar disso por conta pr\u00f3pria, voc\u00ea pode simplesmente mudar isso para algo como:<\/p>\n<pre><code class=\"language-markdown\">tutorialSidebar: [\n  'intro',\n  'hello',\n  {\n    type: 'category',\n    label: 'Tutorial',\n    items: ['tutorial-basics\/create-a-document'],\n  },\n],<\/code><\/pre>\n<h4>Blog<\/h4>\n<p>Docusaurus inclui um m\u00f3dulo de blog elegante. Ter um blog junto com o seu site principal pode ser muito \u00fatil para informar sua base de usu\u00e1rios sobre as mudan\u00e7as que est\u00e3o acontecendo em seu projeto, ou para manter notas de projeto em andamento como um tipo de changelog.<\/p>\n<p>Cada artigo consiste em uma parte de frontmatter, assim como esta:<\/p>\n<pre><code class=\"language-markdown\">---\nslug: docusaurus-starter\ntitle: Docusaurus Starter\nauthors: palmiak\ntags: [starters, docusaurus]\n---<\/code><\/pre>\n<p>&#8230;e, claro, o pr\u00f3prio conte\u00fado. Ele tamb\u00e9m possui uma tag muito \u00fatil &lt;!&#8211;truncate&#8211;&gt; que ajuda a limitar o resumo do artigo exibido em todas as listagens de artigos.<\/p>\n<p>Tamb\u00e9m \u00e9 uma \u00f3tima ideia criar um arquivo <strong>authors.yml<\/strong> para os cr\u00e9ditos. O arquivo parece com isso:<\/p>\n<pre><code class=\"language-markdown\">palmiak:\nname: Maciek Palmowski\ntitle: DevRel\nurl: https:\/\/github.com\/palmiak\nimage_url: https:\/\/github.com\/palmiak.png<\/code><\/pre>\n<p>Gra\u00e7as a este arquivo, voc\u00ea ter\u00e1 todos os dados do autor em um s\u00f3 lugar para f\u00e1cil refer\u00eancia.<\/p>\n<h2>Como implantar seu site Docusaurus na Kinsta<\/h2>\n<p>Al\u00e9m de <a href=\"https:\/\/kinsta.com\/pt\/hospedagem-wordpress\/\">sites WordPress<\/a>, <a href=\"https:\/\/sevalla.com\/application-hosting\/\">aplicativos<\/a> aut\u00f4nomos\u00a0e <a href=\"https:\/\/sevalla.com\/database-hosting\/\">bancos de dados<\/a>, a Kinsta pode <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">hospedar sites est\u00e1ticos<\/a>.<\/p>\n<p>Isso significa que ela \u00e9 perfeita para os seus sites Docusaurus \u2014 e para gerenciar todos os seus projetos web \u2014 diretamente do seu painel MyKinsta.<\/p>\n<p>Certifique-se primeiro de enviar seu c\u00f3digo para um provedor Git de sua prefer\u00eancia (<a href=\"https:\/\/docs.sevalla.com\/applications\/git\/bitbucket#grant-access-to-the-kinsta-bitbucket-application\">Bitbucket<\/a>, <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">GitHub<\/a> ou <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\">GitLab<\/a>), e ent\u00e3o siga estes passos para implantar seu site est\u00e1tico na Kinsta:<\/p>\n<ol>\n<li>Fa\u00e7a login ou crie uma conta para acessar o painel <a href=\"https:\/\/my.kinsta.com\/?lang=pt\">MyKinsta<\/a>.<\/li>\n<li>Autorize a Kinsta com o seu provedor Git.<\/li>\n<li>Clique em &#8220;<strong>Sites Est\u00e1ticos<\/strong>&#8221; na barra lateral \u00e0 esquerda, e depois clique em &#8220;<strong>Adicionar Site<\/strong>&#8220;.<\/li>\n<li>Selecione o reposit\u00f3rio e o branch de onde deseja fazer a implanta\u00e7\u00e3o.<\/li>\n<li>Atribua um nome \u00fanico ao seu site.<\/li>\n<li>Adicione as configura\u00e7\u00f5es de build no seguinte formato:\n<ul>\n<li><strong>Comando build:<\/strong> <code>npm run build<\/code><\/li>\n<li><strong>Vers\u00e3o do Node:<\/strong> <code>18.16.0<\/code><\/li>\n<li><strong>Diret\u00f3rio de publica\u00e7\u00e3o:<\/strong> <code>build<\/code><\/li>\n<\/ul>\n<\/li>\n<li>Por fim, clique em &#8220;<strong>Criar site<\/strong>&#8220;.<\/li>\n<\/ol>\n<p>Se voc\u00ea chegou at\u00e9 aqui sem erros, ent\u00e3o parab\u00e9ns \u2014 voc\u00ea <a href=\"https:\/\/docs.sevalla.com\/templates\/overview\">implantou com sucesso seu site Docusaurus atrav\u00e9s da Kinsta<\/a>!<\/p>\n<p>Aqui est\u00e1 nossa primeira visita ao nosso site de amostra na Kinsta:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/02\/deployed-docusaurus-site.png\" alt=\"A p\u00e1gina inicial do Docusaurus implantado, no topo da qual h\u00e1 um banner verde com o t\u00edtulo \"Meu Site\" e o slogan \"Dinossauros s\u00e3o legais\" em texto branco.\" width=\"1600\" height=\"777\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial do Docusaurus implantado, no topo da qual h\u00e1 um banner verde com o t\u00edtulo &#8220;Meu Site&#8221; e o slogan &#8220;Dinossauros s\u00e3o legais&#8221; em texto branco.<\/figcaption><\/figure>\n<p>Como alternativa \u00e0 Hospedagem de Site Est\u00e1tico, voc\u00ea pode optar por implantar seu site est\u00e1tico com a <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Hospedagem de Aplicativos<\/a> da Kinsta, que oferece maior flexibilidade de hospedagem, uma gama mais ampla de benef\u00edcios e acesso a recursos mais robustos. Por exemplo, escalonamento, implanta\u00e7\u00e3o personalizada usando um Dockerfile e <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\">an\u00e1lises abrangentes<\/a> que englobam dados em tempo real e hist\u00f3ricos.<\/p>\n<h2>Resumo<\/h2>\n<p>Com suas funcionalidades surpreendentemente poderosas, <a href=\"https:\/\/kinsta.com\/pt\/blog\/conceitos-de-web-design\/\">design amig\u00e1vel<\/a>, navega\u00e7\u00e3o intuitiva e foco no conte\u00fado, n\u00e3o \u00e9 dif\u00edcil entender por que o Docusaurus \u00e9 considerado uma ferramenta excelente para qualquer desenvolvedor que busca implantar e manter um site de documenta\u00e7\u00e3o est\u00e1tica e\/ou blog organizado de forma simplificada.<\/p>\n\n<p>Assim que voc\u00ea preencher seu site com conte\u00fado de valor para seus visitantes, voc\u00ea notar\u00e1 recursos adicionais integrados que podem ajudar bastante. Por exemplo, as capacidades de SEO do Docusaurus s\u00e3o perfeitas para ajud\u00e1-lo a ganhar maior visibilidade com uma audi\u00eancia mais ampla, enquanto voc\u00ea trabalha em <a href=\"https:\/\/kinsta.com\/pt\/blog\/conceitos-de-web-design\/\">outras t\u00e9cnicas para avan\u00e7ar nos rankings de SEO<\/a>.<\/p>\n<p><em>J\u00e1 construiu algo com o Docusaurus? Compartilhe seus projetos e experi\u00eancias conosco na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Para sites leves, aplicativos e outros pequenos projetos, mais e mais desenvolvedores est\u00e3o se voltando para geradores de sites est\u00e1ticos atrav\u00e9s do WordPress ou outros sistemas &#8230;<\/p>\n","protected":false},"author":283,"featured_media":57470,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1009,1002,978],"class_list":["post-57469","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-geradores-sites-estaticos","topic-react","topic-tutoriais-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Crie e Personalize um Site Docusaurus (Com Recurso de Blog) - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Precisa de um site e blog f\u00e1cil de implementar e focado no conte\u00fado? Aprenda a criar e implantar um site Docusaurus em minutos, seguindo este tutorial.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crie e Personalize um Site Docusaurus (Com Recurso de Blog)\" \/>\n<meta property=\"og:description\" content=\"Precisa de um site e blog f\u00e1cil de implementar e focado no conte\u00fado? Aprenda a criar e implantar um site Docusaurus em minutos, seguindo este tutorial.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-23T11:15:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-01T15:42:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/02\/docusarus.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3042\" \/>\n\t<meta property=\"og:image:height\" content=\"1521\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Maciek Palmowski\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Precisa de um site e blog f\u00e1cil de implementar e focado no conte\u00fado? Aprenda a criar e implantar um site Docusaurus em minutos, seguindo este tutorial.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/02\/docusarus.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Maciek Palmowski\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/\"},\"author\":{\"name\":\"Maciek Palmowski\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072\"},\"headline\":\"Crie e Personalize um Site Docusaurus (Com Recurso de Blog)\",\"datePublished\":\"2023-02-23T11:15:48+00:00\",\"dateModified\":\"2025-09-01T15:42:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/\"},\"wordCount\":2218,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/02\/docusarus.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/\",\"name\":\"Crie e Personalize um Site Docusaurus (Com Recurso de Blog) - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/02\/docusarus.jpg\",\"datePublished\":\"2023-02-23T11:15:48+00:00\",\"dateModified\":\"2025-09-01T15:42:12+00:00\",\"description\":\"Precisa de um site e blog f\u00e1cil de implementar e focado no conte\u00fado? Aprenda a criar e implantar um site Docusaurus em minutos, seguindo este tutorial.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/02\/docusarus.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/02\/docusarus.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutoriais de JavaScript\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/tutoriais-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Crie e Personalize um Site Docusaurus (Com Recurso de Blog)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072\",\"name\":\"Maciek Palmowski\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g\",\"caption\":\"Maciek Palmowski\"},\"description\":\"Maciek is a web developer working at Kinsta as a Development Advocate Analyst. After hours, he spends most of his time coding, trying to find interesting news for his newsletters, or drinking coffee.\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/maciekpalmowski\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Crie e Personalize um Site Docusaurus (Com Recurso de Blog) - Kinsta\u00ae","description":"Precisa de um site e blog f\u00e1cil de implementar e focado no conte\u00fado? Aprenda a criar e implantar um site Docusaurus em minutos, seguindo este tutorial.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/","og_locale":"pt_PT","og_type":"article","og_title":"Crie e Personalize um Site Docusaurus (Com Recurso de Blog)","og_description":"Precisa de um site e blog f\u00e1cil de implementar e focado no conte\u00fado? Aprenda a criar e implantar um site Docusaurus em minutos, seguindo este tutorial.","og_url":"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2023-02-23T11:15:48+00:00","article_modified_time":"2025-09-01T15:42:12+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/02\/docusarus.jpg","type":"image\/jpeg"}],"author":"Maciek Palmowski","twitter_card":"summary_large_image","twitter_description":"Precisa de um site e blog f\u00e1cil de implementar e focado no conte\u00fado? Aprenda a criar e implantar um site Docusaurus em minutos, seguindo este tutorial.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/02\/docusarus.jpg","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Maciek Palmowski","Tempo estimado de leitura":"15 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/"},"author":{"name":"Maciek Palmowski","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072"},"headline":"Crie e Personalize um Site Docusaurus (Com Recurso de Blog)","datePublished":"2023-02-23T11:15:48+00:00","dateModified":"2025-09-01T15:42:12+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/"},"wordCount":2218,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/02\/docusarus.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/docusaurus\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/","url":"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/","name":"Crie e Personalize um Site Docusaurus (Com Recurso de Blog) - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/02\/docusarus.jpg","datePublished":"2023-02-23T11:15:48+00:00","dateModified":"2025-09-01T15:42:12+00:00","description":"Precisa de um site e blog f\u00e1cil de implementar e focado no conte\u00fado? Aprenda a criar e implantar um site Docusaurus em minutos, seguindo este tutorial.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/docusaurus\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/02\/docusarus.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/02\/docusarus.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/docusaurus\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Tutoriais de JavaScript","item":"https:\/\/kinsta.com\/pt\/topicos\/tutoriais-javascript\/"},{"@type":"ListItem","position":3,"name":"Crie e Personalize um Site Docusaurus (Com Recurso de Blog)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072","name":"Maciek Palmowski","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g","caption":"Maciek Palmowski"},"description":"Maciek is a web developer working at Kinsta as a Development Advocate Analyst. After hours, he spends most of his time coding, trying to find interesting news for his newsletters, or drinking coffee.","url":"https:\/\/kinsta.com\/pt\/blog\/author\/maciekpalmowski\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/57469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/283"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=57469"}],"version-history":[{"count":13,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/57469\/revisions"}],"predecessor-version":[{"id":72720,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/57469\/revisions\/72720"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/57469\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/57469\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/57469\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/57469\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/57469\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/57469\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/57469\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/57469\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/57469\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/57469\/translations\/dk"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/57469\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/57470"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=57469"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=57469"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=57469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}