Guia Rápido para Criar um Blog Hexo do Zero (Edição 2024)

#Criação de blog

Você já está cansado das interfaces sem graça dos blogs por aí? Farto das notificações incessantes? Sempre quis ter um blog próprio, mas se viu intimidado por tutoriais complexos e códigos que dão dor de cabeça? Então, parabéns! Este artigo vai te guiar passo a passo, da forma mais simples possível, para você montar o seu blog. Você só precisa de um pouco de paciência e seguir as instruções.

O Hexo, como um framework de blog rápido, simples e eficiente, é uma verdadeira bênção para iniciantes. E o GitHub nos poupa o trabalho de alugar e configurar servidores adicionais. Por isso, neste guia, vamos construir um blog usando Hexo e GitHub.

Em 2018, escrevi um Guia Rápido para Criar um Blog do Zero. Devido a atualizações de plugins, alguns detalhes precisaram ser ajustados. Por isso, estou relançando a versão 2024 deste guia simplificado.

Preparação

Configurando o blog estático Hexo localmente

$ npm install -g hexo-cli
$ hexo init
$ npm install

Isso mesmo! A parte principal do seu blog já está pronta. Vamos ver o resultado? Execute:

$ hexo server

Agora, abra seu navegador e digite localhost:4000 para ver como seu blog está. Aproveite a emoção e, em seguida, pressione Ctrl + C para continuar com as próximas etapas.

Personalização (Primeiros Passos)

Trocando o Tema

$ git clone https://github.com/theme-next/hexo-theme-next themes/next
theme: next
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini
hexo g #ou hexo generate
hexo server

Configurações do Site

# Site
title: O Mundo Desconhecido        // Nome do blog
subtitle:
description:  Do something cool // Uma frase de impacto
author: LulalaP                 // Autor
language: zh-Hans               // Idioma do site
timezone:

Configurando a Foto de Perfil na Barra Lateral

avatar:
    url: /uploads/avatar.jpg

Aprimorando as Páginas do Blog

Adicionando Menus

menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive

Criando a Página de Categorias

$ hexo new page categories
   title: Categories
   date: 2024-04-10 23:40:31
   type: "categories"
   comments: false
 ---

Criando a Página de Tags

$ hexo new page "tags"
---
   title: Tags
   date: 2024-04-10 23:41:25
   type: "tags"
   comments: false
---

Criando a Página “Sobre Mim”

$ hexo new page "about"
   title: About
   date: 2024-04-10 23:41:56
   comments: false
---
# Social links
social:
 GitHub: https://github.com/your-user-name || fab fa-github
 E-Mail: mailto:[email protected] || fa fa-envelope
 #Weibo: https://weibo.com/yourname || fab fa-weibo
 #Google: https://plus.google.com/yourname || fab fa-google
 Twitter: https://x.com/your-user-name || fab fa-twitter
social_icons:
  enable: true
  GitHub: github
  Twitter: twitter

Conectando o Blog ao GitHub

deploy:
  type: git
  repository: https://github.com/your-name/your-name.github.io.git
  branch: main
npm install hexo-deployer-git --save
hexo g
hexo d

Neste ponto, abra seu navegador e acesse http://your-name.github.io. Parabéns! Seu blog está agora completo e online.

Vinculando um Domínio

Até agora, seu blog está totalmente configurado e acessível pelo domínio do GitHub. Para deixá-lo ainda mais perfeito, vamos vincular um domínio personalizado a ele.

Comprando um Domínio

Configuração de DNS

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

Após configurar o DNS, navegue até o diretório do seu blog. Dentro da pasta source, crie um novo arquivo chamado CNAME (atenção: deve ser em maiúsculas e sem extensão). Abra-o com um editor de texto e insira o domínio que você comprou, por exemplo: www.philoli.com

hexo g
hexo d

Agora, abra seu navegador, digite seu domínio e pressione Enter. Parabéns, você agora tem um blog com seu próprio domínio personalizado!

Publicando um Novo Artigo

title Título do artigo
date Data de criação (data de criação do arquivo)
updated Data de atualização (data de modificação do arquivo)
comments Ativar comentários true
tags Tags
categories Categorias
permalink Nome na URL (nome do arquivo)
hexo g
hexo d

Personalização (Avançado)

A seguir, apresentamos algumas configurações avançadas para personalizar o estilo do seu blog. Iniciantes podem pular esta seção por enquanto.

Adicionando RSS

$ npm install hexo-generator-feed --save
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
rss: /atom.xml || fa fa-rss

Recorte de Artigos na Página Inicial

    <!--more-->

Centralizando Citações nos Artigos

{% centerquote %}
Texto da citação
{% endcenterquote %}

{% centerquote %} Texto da citação {% endcenterquote %}

Alterando o Estilo dos Blocos de Código

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night eighties
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style:

Definindo a Data de Criação do Site

since: 2024
// link style
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

Adicionando Imagem de Fundo ao Blog

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   // Se a imagem não preencher todo o espaço, define se e como ela deve se repetir
    background-attachment:fixed;    // Define se a imagem rola junto com a página
    background-size: cover;         // Cobre a área
    background-position:50% 50%;    // Posição da imagem
}

Fundo Semitransparente para o Conteúdo do Blog


// Conteúdo do blog com transparência
// Configuração de transparência para o conteúdo do artigo
if (hexo-config('motion.transition.post_block')) {
  .post-block {
    background: rgba(255,255,255,0.9);
    opacity: 0.9;
    radius: 10px;
    margin-top: 15px;
    margin-bottom: 20px;
    padding: 40px;
    -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
    -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }
  .pagination, .comments {
    opacity: 0;
  }

  +tablet() {
    margin: 20px;
    padding: 10px;
  }

  +mobile() {
    margin: 15px;
    padding: 15px;
  }
}


// Configuração de transparência para a barra lateral
.sidebar {
  opacity: 0.9;
}

// Configuração de transparência para a barra de menu
.header-inner {
  background: rgba(255,255,255,0.9);
}

// Configuração de transparência para a caixa de pesquisa (local-search)
.popup {
  opacity: 0.9;
}

Otimizando o Estilo dos Blocos de Código Inline

// Estilização para tags de código inline
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Adicionando Contador de Visitantes no Rodapé do Site

# Localize a seção copyright e adicione o código dentro dela

<div class="copyright">
# ......Aqui já existem algumas configurações
# Adicione o novo código aqui
</div>

# Depois de adicionar, ficará assim:
<div class="copyright">
  # ......Aqui já existem algumas configurações
  # Adicione o novo código aqui
  {%- if true %}
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-user-md"></i>
    </span>
    Visitors: <span id="busuanzi_value_site_uv"></span>
  {%- endif %}
</div>
hexo g
hexo s
# Após confirmar que está tudo certo, publique
hexo d

Adicionando o Arquivo README.md ao Repositório

Cada projeto geralmente tem um arquivo README.md. No entanto, ao implantar com Hexo em um repositório, o README.md do projeto pode ser sobrescrito. Para evitar isso, precisamos configurar o arquivo de configuração.

No diretório raiz source do seu projeto Hexo, adicione um arquivo README.md. Em seguida, modifique o arquivo de configuração do site _config.yml, definindo o valor do parâmetro skip_render para:

skip_render: README.md

Salve e saia. Ao usar o comando hexo d para implantar o blog novamente, o arquivo README.md não será renderizado.

Alguns Plugins Úteis

Backup dos Arquivos Fonte

# Adicione o endereço do repositório do blog que você configurou anteriormente
git remote add https://github.com/your-name/your-name.github.io.git

# Adicione e salve as alterações atuais, registrando um comentário
git add .
git commit -m "Atualização dos arquivos fonte"

# Crie e mude para uma nova branch
git checkout -b source

# Envie todo o conteúdo da branch source local para a branch source do repositório remoto
git push origin source:source

Escrevendo no Blog de Diferentes Computadores

npm install -g hexo-cli
# Clone o repositório para o local
git clone https://github.com/your-name/your-name.github.io.git

# Se já tiver clonado localmente, sempre puxe o conteúdo mais recente da branch antes de atualizar o blog
git pull origin

# Troque para a branch correspondente
git checkout source

# Após instalar todos os plugins configurados no Hexo, você pode começar a atualizar e editar o conteúdo do blog.
npm install

# Após modificar o conteúdo, lembre-se de fazer um backup completo imediatamente.
git add .
git commit -m "Atualização do blog xxx"
git push origin source:source

# Publique e envie o conteúdo mais recente do blog para o site do domínio
hexo clean
hexo g  # Gera arquivos estáticos
hexo s  # Pré-visualiza o blog localmente
hexo d  # Publica o conteúdo mais recente do blog

Resumo de Comandos Úteis

hexo g
#ou hexo generate, gera as páginas estáticas a partir dos arquivos fonte
hexo d
#ou hexo deploy, publica e envia para o GitHub Pages
hexo s
#ou hexo server, implanta localmente para teste
hexo clean
# Limpa o cache das páginas estáticas, e então hexo d para gerar novamente