Fluxo de Trabalho Básico com Hexo

A gestão de um blog Hexo envolve um fluxo de trabalho direto para criação, pré-visualização e publicação de conteúdo. A sequência mais comum para desenvolvimento e implantação inclui:

• Pré-visualização Local: Para gerar o site localmente e inspecionar as alterações antes da publicação, execute hexo generate (ou hexo g) seguido por hexo server (ou hexo s). O servidor local permite uma pré-visualização em tempo real das suas modificações no navegador.
• Implantação Remota: Após validar o conteúdo localmente e garantir que tudo está como desejado, utilize hexo deploy (ou hexo d) para publicar seu blog no servidor configurado (por exemplo, GitHub Pages). É uma prática comum gerar primeiro com hexo g e depois implantar.

Criação de Novas Postagens

Para iniciar uma nova postagem ou página em seu blog Hexo, utilize o comando hexo new. Você pode especificar o tipo de layout (geramlente 'post' para artigos) e o título desejado:

hexo new post "Meu Primeiro Artigo Tecnico"

Este comando criará um novo arquivo Markdown (.md) na pasta source/_posts/, preenchido com o front-matter padrão.

Gerenciando Múltiplas Tags

Para associar várias tags a uma única postagem, edite o front-matter do seu arquivo Markdown e defina a propriedade tags como uma lista (array), onde cada tag é um item. O separador é uma vírgula dentro do formato de lista YAML:

---
title: Título do Artigo
date: 2023-11-01 10:00:00
tags: [Hexo, Dicas, Configuração, Desenvolvimento Web]
---

Reexecutando Implantações no GitHub Pages

Se você utiliza o GitHub Pages para hospedar seu blog Hexo, as implantações são frequentemente automatizadas por GitHub Actions. Em cenários onde uma implantação falhou ou para forçar uma nova publicação, você pode reexecutar os jobs de workflow diretamente na interface do GitHub:

1. Navegue até o repositório do seu blog no GitHub.
2. Clique na aba "Actions".
3. Selecione o workflow de implantação mais recente ou o desejado na lista.
4. Dentro dos detalhes da execução, localize a opção "Re-run jobs" (Reexecutar jobs).

Inserção de Blocos de Código

Para incluir trechos de código formatados e com realce de sintaxe em suas postagens Markdown, utilize três crases (```) para delimitar o início e o fim do bloco. Opcionalmente, você pode especificar a linguagem de programação imediatamente após as três crases iniciais para um realce de sintaxe adequado:

# Exemplo de um comando Bash
sudo apt update
sudo apt install git

Incorporando Imagens no Conteúdo

Existem diferentes métodos para adicionar imagens às suas postagens, oferecendo flexibilidade de acordo com suas necessidades:

1. Sintaxe Markdown Padrão: Para uma inclusão simples, use a sintaxe Markdown.

![Texto Alternativo para a Imagem](https://exemplo.com/caminho/para/imagem.jpg "Título opcional da imagem")

3. Tag HTML <img>: Para maior controle sobre atributos como tamanho (largura e altura) e estilo, utilize a tag HTML diretamente.

<img src="https://exemplo.com/caminho/para/outra_imagem.png" alt="Exemplo de Imagem" width="400" height="300" style="border: 1px solid #ccc;">

Para imagens locais, certifique-se de que o caminho relativo esteja correto em relação ao seu arquivo Markdown ou configure um gerador de ativos de imagem no Hexo.

Exibindo Trechos de Artigos na Página Inicial

Para que a página inicial do seu blog ou as listagens de categorias e tags exibam apenas um resumo de cada artigo em vez do conteúdo completo, você pode definir a propriedade description no front-matter do seu post. Muitos temas Hexo utilizarão este texto como prévia. Alternativamente, você pode usar a tag \<!-- more --> em seu Markdown para indicar onde o resumo deve terminar.

---
title: Meu Artigo Detalhado
description: Este é um breve resumo sobre os tópicos abordados no meu artigo. Ele será exibido nas listagens.
---

Este é o primeiro parágrafo do artigo, que também aparecerá antes do "more".
<!-- more -->
O restante do conteúdo da postagem será visível apenas na página do artigo completo.

Criação de Tabelas em Markdown

As tabelas em Markdown são estruturadas usando barras verticais (|) para separar colunas e hífens (-) para criar a linha de separação do cabeçalho. Você pode alinhar o texto das colunas usando dois pontos (:) nos hífens.

| Recurso       | Descrição Breve        | Status    |
|:--------------|:-----------------------|:----------|
| Configuração  | Opções gerais do blog  | Concluído |
| Tema          | Aparência e estilo     | Em Andamento |
| Plugins       | Funcionalidades extras | Pendente  |

Instalando e Configurando Plugins Hexo

A funcionalidade do Hexo pode ser significativamente expandida com a adição de plugins. O processo de instalação geralmente envolve o gerenciador de pacotes npm, seguido pela configuração no arquivo principal do seu blog _config.yml.

1. Instalação via npm: Abra seu terminal na raiz do projeto Hexo e execute o comando de instalação.

npm install hexo-generator-search --save

3. Configuração: Após a instalação, adicione as configurações necessárias ao arquivo _config.yml do seu blog (ou ao _config.next.yml se for uma configuração específica do tema NexT), conforme a documentação do plugin.

Configuração de Permalinks (URLs de Artigos)

O Hexo oferece flexibilidade na estrutura de URL das suas postagens através da propriedade permalink no arquivo _config.yml principal. Escolher uma estrutura duradoura e amigável para SEO é fundamental. Algumas opções comuns incluem:

• Baseado na data: permalink: :year/:month/:day/:title/ (Ex: /2023/11/01/meu-artigo-tecnico/)
• Apenas título: permalink: :title/ (Ex: /meu-artigo-tecnico/)
• Com ID de postagem: permalink: :id/ (Ex: /12345/)

Recomenda-se um formato que inclua o título para maior clareza e persistência das URLs, evitando alterações futuras que possam quebrar links.

Vantagens do Hexo para Blogs

Adotar o Hexo para a criação e manutenção do seu blog estático oferece diversos benefícios:

• Atualizações Contínuas: A simplicidade do Markdown e o fluxo de trabalho git facilitam a atualização e iteração sobre o conteúdo das postagens.
• Pré-visualização em Tempo Real: Com hexo server, as alterações de estilo e conteúdo são pré-visualizadas instantaneamente, suportando recarregamento automático.
• Independência de Servidor: Não é necessário um VPS (Virtual Private Server) ou servidor dedicado; blogs Hexo podem ser hospedados gratuitamente em serviços como GitHub Pages ou GitLab Pages.
• Simplicidade e Portabilidade: O conteúdo é escrito em Markdown, um formato leve, legível e altamente portátil, facilitando a migração ou o backup.

Adicionando Informações de Licença e Link do Artigo (Tema NexT)

Para incluir informações de licença Creative Commons e um link para o artigo atual no final das postagens ao usar o tema NexT, você pode configurar as opções pertinentes no arquivo de configuração do tema (geralmente _config.next.yml para sobrescrever as configurações padrão).

creative_commons:
  license: by-nc-sa # Tipo de licença: Atribuição-NãoComercial-CompartilhaIgual
  size: small       # Tamanho do ícone da licença (big ou small)
  post: true        # Exibir nos artigos

Exibindo Data de Criação e Atualização (Nunjucks no NexT)

A personalização da exibição das datas de criação e última atualização das postagens é feita modificando os templates Nunjucks do seu tema. No tema NexT, arquivos como themes/next/layout/_partials/post/post-meta.njk (o caminho pode variar ligeiramente) controlam a exibição desses metadados.

Um exemplo simplificado de como as datas podem ser acessadas e exibidas dentro de um template Nunjucks:

{%- if theme.post_meta.created_at %}
  <span class="post-date-created">
    <i class="far fa-calendar"></i>
    Publicado em: <time datetime="{{ moment(post.date).format() }}">{{ date(post.date, 'DD/MM/YYYY') }}</time>
  </span>
{%- endif %}
{%- if theme.post_meta.updated_at.enable and post.updated %}
  <span class="post-date-updated">
    <i class="far fa-calendar-check"></i>
    Atualizado em: <time datetime="{{ moment(post.updated).format() }}">{{ date(post.updated, 'DD/MM/YYYY') }}</time>
  </span>
{%- endif %}

Esta lógica verifica as configurações do tema e, se habilitado, formata e exibe as datas de criação e última modificação da postagem.

Configurando uma Página 404 com Redirecionamento

Uma página 404 personalizada melhora a experiência do usuário quando um link quebrado é acessado. Para adicionar um redirecionamento automático em sua página 404 (tipicamente localizada em source/404/index.md), você pode incorporar um script JavaScript simples no arquivo Markdown:

---
layout: false
---

<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="0; url=https://seublog.github.io/">
    <title>Página Não Encontrada - Redirecionando</title>
    <script>
        // Fallback JavaScript para redirecionamento
        window.location.replace('https://seublog.github.io/');
    </script>
</head>
<body>
    <p>A página solicitada não foi encontrada. Redirecionando para a página inicial...</p>
</body>
</html>

Lembre-se de substituir https://seublog.github.io/ pelo URL base do seu blog.

Integrando Sistemas de Comentários

Para adicionar um sistema de comentários ao seu blog Hexo, como o Artalk ou Disqus, você geralmente precisa de um plugin ou de integração direta no seu tema. O processo típico envolve:

1. Instalação/Configuração do Serviço: Instale o plugin Hexo correspondente ou configure o código do serviço de comentários no seu tema.
2. Configuração das Credenciais: Adicione as credenciais, IDs de aplicativo ou endpoints do serviço de comentários no arquivo _config.yml do seu blog ou do tema.

Sistemas de comentários enriquecem a interação, mas requerem configuração cuidadosa e, muitas vezes, dependem de um serviço externo.

Precaução com Plugins Antigos ou Descontinuados

Ao buscar e instalar plugins para o Hexo, é prudente verificar a data da última atualização do plugin e sua compatibilidade com a versão atual do Hexo e do seu tema. Plugins muito antigos podem não funcionar corretamente, causar conflitos ou conter vulnerabilidades. Muitos pacotes desatualizados podem permanecer disponíveis em registros como o npm, por isso, uma pesquisa cuidadosa é recomendada.

Adicionando Seção de Postagens Recentes (Tema NexT)

Para exibir uma lista das postagens mais recentes na barra lateral do seu tema NexT, você pode criar ou modificar um arquivo Nunjucks, por exemplo, em source/_data/sidebar.njk. Este arquivo pode então ser incluído na estrutura principal da barra lateral do tema.

Um exemplo de como buscar e listar as últimas postagens em Nunjucks:

{%- if theme.recent_posts and theme.recent_posts.enable %}
  <div class="sidebar-block recent-posts-widget">
    <h3 class="sidebar-title">{{ theme.recent_posts.title | default('Artigos Recentes') }}</h3>
    <ul class="recent-posts-list">
        {%- set recent_articles = site.posts.sort('-date').limit(theme.recent_posts.limit | default(5)).toArray() %}
        {%- for article in recent_articles %}
            <li class="recent-posts-item">
              <a href="{{ url_for(article.path) }}" title="{{ article.title }}">
              {{ article.title }}
              </a>
            </li>
        {%- endfor %}
    </ul>
  </div>
{%- endif %}

Este snippet busca um número configurável (padrão 5) das postagens mais recentes e as exibe como uma lista. Certifique-se de habilitar e configurar a opção recent_posts no arquivo de configuração do seu tema NexT.

Gerenciando Ativos Estáticos Persistentes

O comando hexo clean remove a pasta public/, que contém todos os arquivos gerados do seu blog. Se você tem imagens ou outros ativos estáticos (como ícones personalizados, logos) que não são inseridos via Markdown e precisam persistir, mova-os para uma pasta dentro da estrutura do seu tema que não é limpa, como themes/next/source/images/. Dessa forma, eles serão copiados para a pasta public/ novamente durante a próxima geração do site (hexo g).

Ajustando a Paginação no Tema NexT

Para modificar o número de links de página visíveis na paginação do seu blog Hexo com o tema NexT, você precisará editar o arquivo JavaScript responsável pela lógica da paginação. Geralmente, este arquivo está localizado em themes/next/scripts/helpers/next-paginator.js (o caminho exato pode variar ligeiramente entre as versões do tema).

Dentro desse arquivo, procure pela função this.paginator e altere o valor da propriedade mid_size para o número desejado de links de página a serem exibidos ao redor da página atual:

let paginator_options = {
      prev_text: '<i class="fa fa-angle-left"></i>',
      next_text: '<i class="fa fa-angle-right"></i>',
      mid_size : 5, // Aumente este valor para exibir mais links de página na paginação
      escape   : false
    };

let paginator = this.paginator(paginator_options);

Neste exemplo, mid_size: 5 configurará para exibir um total de 5 links de página (incluindo a página atual) no grupo central da paginação, se houver páginas suficientes disponíveis.