Como hospedar um blog em um subdiretório em vez de um subdomínio com Cloudflare Workers

Neste guia, você aprenderá como hospedar seu blog em um subdiretório (por exemplo, exemplo.com/blog) em vez de um subdomínio (por exemplo, blog.example.com). Cada etapa aqui foi testada e verificada para funcionar.

Introdução

Hospedar seu blog em um subdiretório pode melhorar o SEO e aprimorar a experiência do usuário.

Embora existam muitos artigos que defendem os benefícios do uso de subdiretórios em vez de subdomínios, poucos recursos fornecem um guia passo a passo sobre como realmente configurar isso.

Por que hospedar em um subdiretório?

Os benefícios de hospedar em um subdiretório são principalmente para melhorar o SEO.

Existem muitos outros artigos sobre esse assunto, mas todos dizem algo semelhante ao seguinte:

• Hospedar seu blog em um subdiretório é melhor para SEO porque consolida a autoridade e o poder de classificação do seu site.

• O Google declarou que não trata os subdomínios como uma entidade separada.

• Apesar do que o Google afirmou, os dados empíricos sugerem que os subdiretórios superam os subdomínios nas classificações de busca.

• Se você deseja maximizar seus esforços de SEO, hospedar em um subdiretório é a melhor opção.

Se quiser saber mais, você pode ler este artigo do ButterCMS: Subdomínio ou subdiretório do blog? Dica: um é 40% melhor.

Minha experiência pessoal foi semelhante. Quando mudei um blog de um subdomínio para um subdiretório, vi um aumento notável no tráfego orgânico e nas classificações dos mecanismos de pesquisa. O aumento aconteceu depois de algumas semanas. Durante esse período, não lancei nenhum conteúdo novo e nem promovi o blog.

Por que não hospedar em um subdiretório?

A configuração é mais complexa. Muitas plataformas de blog e CMSs são projetadas para funcionar em subdomínios, e configurá-los para funcionar em um subdiretório pode ser complicado.

Pessoalmente, achei o processo de configuração bastante demorado. É um processo complicado e você deve seguir as instruções cuidadosamente. Depois de ter mudado anteriormente um blog de subdomínio para subdiretório, achei difícil justificar o tempo para fazer isso no taikohub.com.

Se você ainda acha que vale a pena, continue lendo.

Etapas para hospedar seu blog em um subdiretório

Suponhamos que você tenha dois sites agora. Um é example.com e o outro é blog.example.com. Você deseja hospedar o blog em example.com/blog em vez de blog.example.com.

Suponhamos também que seu blog (blog.example.com) seja um aplicativo Next.js hospedado no Vercel e seu site principal (example.com) seja um site estático hospedado no Render.

Embora Vercel e Render sejam usados ​​como exemplos aqui, as etapas são quase idênticas para outros provedores de hospedagem. Você não precisa configurar nada para o seu provedor de hospedagem. Tudo pode ser feito no Cloudflare Dashboard e no conforto do seu editor de texto.

Importante: observe que a Cloudflare frequentemente altera a interface do usuário e as rotas do painel. Se você achar que as etapas aqui não correspondem ao que você vê no painel Cloudflare, basta usar a função de pesquisa no painel para encontrar a seção relevante.

Etapa 1: configurar registros DNS para o site principal

Primeiro, configure os registros DNS do seu site principal (example.com). Novamente, se você não usa o Render, siga as etapas equivalentes para o seu provedor de hospedagem. Geralmente isso deve estar em sua documentação.

• Vá para o seu painel Cloudflare. Clique em seu domínio, em SSL/TLS e em Visão geral. Em seguida, clique em “Configurar”.

• Em seguida, selecione “SSL/TLS personalizado” e selecione “Completo”.

• Vá para os registros DNS na barra lateral clicando em “DNS” e depois em “Registros DNS”. Em seguida, clique em “Adicionar registro”.

• Adicione os seguintes registros DNS. Substituir my-site.onrender.com com o URL de serviço do seu site principal. Se você tiver outros aplicativos, como uma API, também poderá adicioná-los. Observe que é importante definir o “status do proxy” como “Proxied”. Também é importante que você NÃO adicione um registro curinga (por exemplo. *.example.com).

  Tipo	Nome	Alvo	Status do proxy	TTL
  CNAME	@	meu-site.onrender.com	Procurado	Auto
  CNAME	www	meu-site.onrender.com	Procurado	Auto
  CNAME	API	my-api.onrender.com	Procurado	Auto

Etapa 2: configurar registros DNS para o blog

• Certifique-se de que seu blog já esteja acessível em um subdomínio (por exemplo, blog.example.com).

• Adicione outro registro DNS para o blog. Substituir cname.vercel-dns.com com o destino CNAME fornecido pelo provedor de hospedagem do seu blog.

  Tipo	Nome	Alvo	Status do proxy	TTL
  CNAME	exemplo.com	meu-site.onrender.com	Procurado	Auto
  CNAME	www	meu-site.onrender.com	Procurado	Auto
  CNAME	API	my-api.onrender.com	Procurado	Auto
  CNAME	blog	cname.vercel-dns.com	Procurado	Auto

Etapa 3. Configure seu blog Next.js

Garanta o roteamento correto para ativos estáticos

• Certifique-se de que o roteador do seu blog Next.js aponte para / e não /blog. Você NÃO deve ter rotas que contenham /blog. Edite o next.config.js ou next.config.mjs arquivo e adicione basePath: "https://www.davidma.org/blog" para a configuração.

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    basePath: "https://www.davidma.org/blog",  // Add this line
    images: {
      remotePatterns: [
        {
          protocol: "https",
          hostname: "imagedelivery.net",
        },
      ],
    },
    redirects: async () => {
      return [];
    },
  };
  
  export default nextConfig;

Etapa 4. Adicionar um trabalhador Cloudflare

• Vá para o painel Cloudflare. Clique em “Trabalhadores e páginas”. Clique em “Criar” e depois em “Criar Trabalhador”.

• Para os fins desta postagem do blog, escolheremos a opção mais fácil, selecionando “Começar com Hello World!”. Para aplicativos de produção, considere usar o Git. Parece o seguinte. Vamos nomeá-lo blog-worker. Em seguida, clique em “Implantar”.

  // worker.js
  /**
  * Welcome to Cloudflare Workers! This is your first worker.
  *
  * - Run "npm run dev" in your terminal to start a development server
  * - Open a browser tab at http://localhost:8787/ to see your worker in action
  * - Run "npm run deploy" to publish your worker
  *
  * Learn more at https://developers.cloudflare.com/workers/
  */
  export default {
    async fetch(request, env, ctx) {
      return new Response('Hello World!');
    },
  };

• Agora substitua o código pelo seguinte:

  export default {
    async fetch(request, env, ctx) {
      async function MethodNotAllowed(request) {
        return new Response(`Method ${request.method} not allowed.`, {
          status: 405,
          headers: {
            Allow: "GET",
          },
        });
      }
      // Only GET requests work with this proxy.
      if (request.method !== "GET") return MethodNotAllowed(request);
  
      // Get the URL that was just requested.
      const url = new URL(request.url);
  
      // Swap out the subdirectory with the subdomain to request the actual URL.
      const originUrl = url.toString().replace(
        'https://example.com/blog',
        'https://blog.example.com/blog'
      ).replace(
        'https://www.example.com/blog',
        'https://blog.example.com/blog'
      );
  
      // Fetch the origin.
      const originPage = await fetch(originUrl);
  
      // Return the subdomain, as the subdirectory.
      const newResponse = new Response(originPage.body, originPage);
      return newResponse;
    },
  };

• Altere os URLs conforme necessário. Para salvar, clique no hash do ID da versão (ex. b30983e0) e clique em “Aplicar”.

• Para implantar as alterações, acesse o painel do trabalhador. Clique em “Implantações”. Procure em “Histórico de versões”. Clique em ”…” e depois em “Implantar” na versão mais recente.

  ID da versão	Criado	Versão e mensagem Git	Fonte
  vb29485e0	3 minutos…	Atualizar para…	Painel	”…“
  vf859f2e0	2h…	Script atualizado	Painel	”…”

Etapa 5. Conecte o site Next.js ao Cloudflare Worker

• Vá para “Rotas de trabalho” na barra lateral do painel Cloudflare. Clique em “Adicionar rota”.

• Adicione a seguinte rota para o conteúdo do blog:

  • Rota: example.com/blog*
  • Trabalhador: blog-worker. Este é o trabalhador que você acabou de criar.

• Adicione outra rota para os ativos estáticos:

  • Rota: example.com/blog/_next/static*
  • Trabalhador: blog-worker

Agora você deve conseguir acessar seu blog em example.com/blog. Se isso funcionar, parabéns! Você hospedou seu blog com sucesso em um subdiretório usando Cloudflare Workers.

Configure Search Engine Robots.txt em seu aplicativo Next.js

• Agora que hospedou o blog com sucesso no subdiretório, você precisa garantir que os mecanismos de pesquisa não indexem o subdomínio. Isso ocorre porque o blog já está indexado no subdiretório. Se os mecanismos de pesquisa indexarem ambos, você poderá ter problemas de SEO devido ao conteúdo duplicado.

• Atualize seu next.config.js ou next.config.mjs arquivo.

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    basePath: "https://www.davidma.org/blog",
    images: {
      remotePatterns: [
        {
          protocol: "https",
          hostname: "imagedelivery.net",
        },
      ],
    },
    redirects: async () => {                      // Add this block
      return [];
    },
    async headers() {                             // Add this block
      return [
        {
          source: '/:path*',
          headers: [
            {
              key: 'X-Robots-Tag',
              value: 'noindex, nofollow',
            },
          ],
        },
      ];
    },
  };
  
  export default nextConfig;

• Agora atualize seu trabalhador cloudflare.

  export default {
    async fetch(request, env, ctx) {
      async function MethodNotAllowed(request) {
        return new Response(`Method ${request.method} not allowed.`, {
          status: 405,
          headers: {
            Allow: "GET",
          },
        });
      }
      // Only GET requests work with this proxy.
      if (request.method !== "GET") return MethodNotAllowed(request);
  
      // Get the URL that was just requested.
      const url = new URL(request.url);
  
      // Swap out the subdirectory with the subdomain to request the actual URL.
      const originUrl = url.toString().replace(
        'https://example.com/blog',
        'https://blog.example.com/blog'
      ).replace(
        'https://www.example.com/blog',
        'https://blog.example.com/blog'
      );
  
      // Fetch the origin.
      const originPage = await fetch(originUrl);
  
      // Return the subdomain, as the subdirectory.
      let newResponse = new Response(originPage.body, originPage);
  
      // Remove "noindex" from the origin domain.
      newResponse.headers.delete("x-robots-tag");
  
      return newResponse;
    },
  };

Etapa 6. Verifique se seu subdomínio não está indexado

• Abra o URL de implantação do seu aplicativo. Isto pode parecer algo como https://vercel.com/my-projects-30d8ek3n/my-blog/d934nfid9823sbsNgoMnOOnsiKxn.

• Abra a guia Rede do navegador em Ferramentas do desenvolvedor.

• Verifique a existência de um cabeçalho “X-Robots-Tag”. Se for não lá, então seu aplicativo Next.js está configurado corretamente para não ser indexado.

Etapa 7. Verifique se o seu subdiretório está indexado