Como criar um blog com Hugo

• Introdução
• Pré-requisitos
• Etapa 1: instalar o programa Hugo
• Etapa 2: crie seu site
• Etapa 3: instalar temas do repositório Hugo
• Etapa 4: faça algumas alterações básicas na configuração
• Etapa 5: redija seu conteúdo
• Etapa 6: ajuste seu conteúdo com o servidor Hugo
• Etapa 7: publique seu site

Introdução

Hugo é um gerador de site estático com velocidade de renderização extremamente rápida e excelente facilidade de uso. Graças a todos os seus recursos orientados a conteúdo, você sempre pode se concentrar na criação de conteúdo, em vez de criar o ambiente:

• Com Hugo, você pode criar um site estático em execução em qualquer lugar em vários minutos, sem se preocupar com dependências ou bancos de dados tediosos.
• Você pode compor seu conteúdo no Markdown, o estilo de escrita mais conveniente, e ver instantaneamente as alterações feitas na Web.
• Além disso, você pode aproveitar ao máximo o rico repositório de temas de Hugo e a comunidade em rápido crescimento.

Neste tutorial, mostrarei como instalar e usar o Hugo para criar um blog estático em uma instância do servidor Vultr LEMP baseada no CentOS.

Pré-requisitos

Efetue login na sua instância como um usuário não raiz com permissões sudo. Veja como criar um usuário nesse artigo .

Etapa 1: instalar o programa Hugo

Hugo pode ser instalado em quase todas as plataformas convencionais. Para o CentOS, basta baixar o arquivo de programa mais recente em um .tar.gzarquivo e descompactá-lo em um local conveniente. No momento da redação deste artigo, a versão mais recente é 0.15.

sudo yum update -y
sudo yum install git -y
cd ~
wget https://github.com/spf13/hugo/releases/download/v0.15/hugo_0.15_linux_amd64.tar.gz
tar -zxvf hugo_0.15_linux_amd64.tar.gz
sudo mv hugo_0.15_linux_amd64/hugo_0.15_linux_amd64 /usr/local/bin/hugo

Teste sua instalação com o seguinte comando:

 hugo version

Etapa 2: crie seu site

Com Hugo, você pode criar seu site em qualquer pasta do seu servidor. Aqui, criei um site no diretório mysite/em meu diretório pessoal.

cd ~
hugo new site ~/mysite

Execute os seguintes comandos para ver a arquitetura do site:

cd mysite
ls -lF

Como você vê, a arquitetura atual do site se parece com:

arquétipos /

config.toml

conteúdo/

dados/

layouts /

estático/

Com outros dois diretórios a serem criados themes/e public/toda a arquitetura de um site da Hugo é compacta e abrangente.

Como entrada, saiba que o seu conteúdo deve ser armazenado no diretório content/.

Etapa 3: instalar temas do repositório Hugo

Para instalar todos os temas do repositório Hugo, execute os seguintes comandos. Isso criará um diretório nomeado themes/no diretório do site e fará o download de todos os temas do repositório de temas Hugo.

cd ~/mysite/
git clone --depth 1 --recursive https://github.com/spf13/hugoThemes.git themes

Se você deseja instalar apenas um tema, visite o repositório de temas Hugo para determinar seu tema favorito. Copie seu URL e cole-o no git clonecomando abaixo.

cd ~/mysite/
mkdir themes
cd themes
git clone https://github.com/jaden/twentyfourteen

Etapa 4: faça algumas alterações básicas na configuração

O arquivo nomeado config.tomlno diretório do seu site contém a configuração global do seu site da Hugo. Edite o arquivo com um editor de texto para fazer algumas alterações básicas na configuração, conforme listado abaixo. Lembre-se de substituir os valores de acordo com suas condições específicas.

baseurl = "http://[YourSiteIP]/"
languageCode = "en-us"
title = "Your Site Name"
theme = "twentyfourteen"

Etapa 5: redija seu conteúdo

No seu diretório local, introduza o seguinte comando para criar uma página de conteúdo no diretório ~/mysite/content/post/.

cd ~/mysite/
hugo new post/about.md

Abra o arquivo em um editor de texto, o formato do arquivo deve se parecer com o seguinte.

+++
date = "2015-12-25T03:21:23Z"
draft = true
title = "about"

+++

Entre as duas linhas de +++mentiras, as meta informações sobre sua página de conteúdo. Aqui, você pode remover a linha draft = truee modificar a linha de título como desejar.

Sob a segunda +++linha, adicione o conteúdo que você deseja exibir na página da web. Lembre-se de escrever seu conteúdo no idioma Markdown.

## This is an H2 headline

Text goes here.

Após concluir esta edição, mantenha o editor de texto aberto para uso posterior.

Etapa 6: ajuste seu conteúdo com o servidor Hugo

Você pode usar o servidor da Web incorporado de Hugo para implantar seu site, que pode exibir instantaneamente suas alterações na página da Web assim que você modificar seu conteúdo em um editor de texto.

Abra outro terminal, configure as iptablesregras para permitir seu acesso ao seu site na porta 1313 padrão do servidor Hugo:

sudo iptables -I INPUT -p tcp --dport 1313 -j ACCEPT

Inicie o servidor Hugo:

hugo server --bind="[YourServerIP]"

Visite seu site em um navegador:

http://[YourServerIP]:1313

Agora, você pode tentar editar o conteúdo do arquivo de paginação no terminal anterior ou adicionar / remover um arquivo de paginação. Você descobrirá que quaisquer modificações no content/diretório serão refletidas simultaneamente na tela do navegador. Esse é um ótimo recurso para um blogueiro ocupado, porque você sempre pode ver imediatamente suas modificações para obter melhores experiências de composição.

Depois de terminar sua edição, pressione Ctrl+Cpara parar o servidor Hugo.

Etapa 7: publique seu site

Agora é hora de publicar seu site na web. Execute os seguintes comandos e Hugo gerará todo o conteúdo estático adequado para publicação no public/diretório.

cd ~/mysite
hugo

Nota : Hugo não exclui arquivos antigos que foram gerados anteriormente quando você executa os comandos acima. Para evitar resultados inesperados, você sempre pode excluir o public/diretório antes de executar o hugocomando ou especificar um novo destino de saída, conforme mostrado no comando a seguir.

hugo --destination=public2

Como o servidor da web Nginx já está em execução no servidor, tudo o que você precisa fazer é copiar o conteúdo do ~/mysite/public/diretório ou de outros diretórios de destino personalizados para o diretório da web /usr/share/nginx/html/.

Exclua os arquivos originais:

cd /usr/share/nginx/html/
sudo rm -rf background.jpg index.php logo.png

Copie os arquivos do site estático para o diretório da web:

cd ~/mysite/public
sudo cp -R ~/mysite/public/. /usr/share/nginx/html/

É isso aí. Agora você pode visitar o seu site super rápido estática do seu navegador: http://[YourServerIP].

Para ver mais detalhes, use o comando hugo helpou visite o site oficial da Hugo .