Configurar Servidor Hugo-

Histórico

A proposta desse artigo é mostrar como criar um blog de uma base de conhecimento contendo minhas experiências na area de infraestrutura de TI. Aprendi muito sobre diversos assuntos e continuo aprendendo e como muitos outros, resolvi compartilhar esse conhecimento. Acabei estentendo a proposta para registrar todas as minhas descobertas e assim facilitar minhas consultas de eventos passados.

Começei com o WordPress mas ele se mostrou muito lento e complexo para fazer uma proposta tão simples. Um colega que atua como desenvolvedor, recomendou um gerador de site estatico. Testei alguns e entre eles, o Hugo chamou minha atenção pelo desempenho e pela simplicidade na produção dos artigos. Hugo é um sistema gerador de arquivos estáticos gratuito desenvolvido com a linguagem Go (Google). O guia oficial do servidor Hugo é setup guide.

O primeiro passo foi instalar o servidor Hugo no Linux e precisa de um tema para meu blog. Fiquei indeciso com a variedade de temas. No final, o escolhido foi o tema chamado CleanWhite. Ele é um bom tema para blog, tem um bom designer e muito funcional. O site do desenvolvedor do tema Zhaohuabing tem um exemplo no seu site configurado com o tema CleanWhite.

Para quem não quer perder tempo, pode criar o próprio site em minutos com todas as facilidades para edição dos seus artigos. O site JamStackThemes oferece um mecanismo para criação e edição de um dos temas do Hugo. Ele usa sua conta no site Github e Netlify para gerar sites com diversas tecnologias.

Para quem gosta da linha de comando e quer entender passo a passo da configuração, sugiro instalar um servidor Hugo localmente no seu desktop. O Windows 10 tem um recurso muito interessante que permite a integração com Linux de modo transparente, sem precisar de dois computadores ou criação de maquina virtual ou VM. Esse recurso é chamado WSL que é Subsistema Windows para Linux e está detalhado em outro artigo aqui no site.

Podemos dizer que é uma aplicação de prompt de comando Linux dentro do Windows 10 (como ser fosse um prompt de comando do Windows), no meu caso,foi usada a distribuição Ubuntu baixada da Microsoft Store. Hoje está na versão 2. A Microsoft tenciona permitir o uso de aplicações graficas e mais complexas na versão 3 do WSL.

Instalação do Hugo

Considerando a solução WSL do Windows 10 ativada e configurada com o Linux Ubuntu, o próximo passo é instalar o servidor Hugo:

Primeiro passo, atualizar o servidor:

    $ sudo apt-get update

Instalar o servidor Hugo:

    $ sudo apt-get install hugo

Verificar a versão:

    $ sudo hugo version

A versão do hugo por esse metodo padrão para qualquer aplicativo Linux no Ubuntu pode fazer que voce mantenha uma versão mais antiga. Mas é um caminho bem mais simples de instalar o servidor hugo. Para quem preferir instalar a ultima versão é necessário verificar a arquitetura do seu sistema, normalmente é de 64 bits pelo comando:

    $ sudo uname -i

Baixar a ultima versão do hugo:

    $ wget https://github.com/gohugoio/hugo/releases/download/v0.70.0/hugo_0.70.0_Linux-64bit.deb

Instalar o hugo:

$ sudo dpkg -i hugo_0.70.0_Linux-64bit.deb

Se houver qualquer erro de dependência, executar o comando:

    $ apt-get install -f

Verificar a versão:

    $ sudo hugo version

Se precisar remover o pacote:

    $ sudo apt-get remove --auto-remove hugo

Instalar o Tema

Existem diversos temas para o servidor Hugo e a troca não altera os artigos ou posts já incluidos no site.

Atualizar o sistema:

    $ sudo apt-get update

Instalar o aplicativo git para facilitar o download do tema:

    $ sudo apt-get install git

Baixar o tema CleanWhite:

    $ sudo git submodule add https://github.com/zhaohuabing/hugo-theme-cleanwhite.git

Ou diretamente da Internet pelo comando wget:

    $ wget https://github.com/zhaohuabing/hugo-theme-cleanwhite/archive/refs/heads/master.zip

    $ unzip master.zip

Renomear tema:

    $ mv hugo-strata-theme-master hugo-strata-theme

Definir o tema no arquivo config.toml que é o arquivo configurador do hugo:

    $ cat hugo-theme-cleanwhite/exampleSite/config.toml > ../config.toml

Ou simplesmente com o paramentro -t de tema:

$ hugo -t NomeTema

Executar o Hugo

Aqui voce cria o site e executa o servidor hugo.

Criar a pasta dpara o servidor hugo:

    $ cd /var/www/

    $ sudo mkdir hugo-sites

Mudar o diretório:

    $ cd hugo-sites

Criar um novo site Hugo como brwiki:

    $ hugo new site brwiki

Pronto!!! Foi criado um novo site hugo em /var/www/hugo-sites/brwiki.

Entre no diretório /var/www/hugo-sites/brwiki:

    $ cd /var/www/hugo-sites/brwiki

Verificar a estrutura de pastas e arquivos do site hugo:

    $ sudo ls

Iniciar hugo server:

    $ hugo server --bind=0.0.0.0 --baseUrl=http://10.10.10.125 -t  hugo-theme-cleanwhite -D -F

Para renderlização completa do site:

    $ hugo server --disableFastRender

Para mostrar os dados estatisticos do site:

    $ sudo hugo

Com essa configuração, já é suficiente para poder ver o site no seu navegador no endereço http://10.10.10.125:1313/.

Toda a configuração do Hugo fica no arquivo config.toml.

Pesquisa interna no site

Indexação do conteudo do próprio site é um recurso necessário em qualquer site, esse é o recurso que permite fazer pesquisa no próprio site. Uma forma rápida de indexar o conteúdo do próprio site para permitir a pesquisa é usar o serviço do site Algolia. A pagina de pesquisa do Tema CleanWhite foi criada usando a indexação do site Algolia que mantém o indice na nuvem. Essa solução faz uso do arquivo algolia.json instalado no site paa atualização do site. Para uso exclusivamente da indexação pelo site Algolia:

algolia_search = true

algolia_appId = “HKS6U9KCFO”

algolia_indexName = “netlify_2c605e1-0911-4247-8bb8-b67708b42cfe_master_all”

algolia_apiKey = “9d68de3c531398cc988b2cb038e248a1”

A pagina de pesquisa pode ser feita pelo navegador: http://10.10.10.125:1313/search

Caso, voce opte para fazer a indexação localmente instalar o pacote npm atomic-algolia:

$ npm init

$ npm install atomic-algolia --save

O arquivo package.json, será usado pelos scripts NPM para atualizar os indices no site Algolia e será adicionada a linha: “algolia”: “atomic-algolia”

Criar o arquivo .env no raiz do site Hugo com conteúdo: ALGOLIA_APP_ID={{ YOUR_APP_ID }}

ALGOLIA_ADMIN_KEY={{ YOUR_ADMIN_KEY }}

ALGOLIA_INDEX_NAME={{ YOUR_INDEX_NAME }}

ALGOLIA_INDEX_FILE={{ PATH/TO/algolia.json }}

Google Analytics

Opcionalmente, voce pode ativar a estatistica do Google Analytics. Deixar os campos vazios, se tiver em uso:

googleAnalytics = “UA-XXXXX-X”

ba_track_id = “XXXXXXXXXXXXXXXX”

Documentos

Perguntas Mais Frequentes

Como baixar todos os temas do Hugo? Instalar o git e executar o comando git clone para a pasta home do usuario/themes: $ sudo git clone --recursive https://github.com/spf13/hugoThemes ~/themes.
Como converter arquivos MarkDown para HTML5? Usar o programa pandocVamos usar o pandoc para traduzir o .md em um .html. Ele vem instalado como padrão no Mac e no Linux (verifique sua distribuição!). A página do pandoc é bem detalhada e tem exemplos do seu uso. Exemplo: pandoc tutorial-md.md --css github.css -o tutorial.html --metadata pagetitle="Tutorial do Markdown" --to=html5 --self.

Configurar Servidor Hugo

Hugo Tema CleanWhite

TOC