Introdução ao Hugo: como criar um site simples

Hugo é um gerador de site estático que permite criar um site com pouca ou nenhuma experiência de codificação. Você pode usar temas pré-criados como base para o design do seu site. Isso permite que você se concentre mais em preencher o site com seu conteúdo.

Como o Hugo é usado principalmente para sites estáticos, é perfeito para criar blogs, portfólios ou sites de documentação.

Você pode configurar e criar facilmente um site Hugo usando um tema Hugo pré-criado. Com apenas algumas etapas curtas, você pode adicionar conteúdo e páginas ao seu site usando o Markdown.

Como instalar o Hugo

Você precisa instalar o gerador de site estático Hugo para criar, executar e testar um site Hugo. De acordo com Documentação Hugo, há muitas maneiras de instalá-lo. Abaixo estão algumas das opções.

Mac

Você pode instalar o Hugo usando o Homebrew.

1. Abra seu terminal macOS.
2. Instale o gerenciador de pacotes Homebrew.

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

3. Instale o Hugo.

   preparar instalar abraço

janelas

Você precisará de um gerenciador de pacotes equivalente para Windows. Por exemplo, você pode usar o Gerenciador de pacotes de colher.

1. Abra o Windows PowerShell, que já deve fazer parte do seu sistema operacional Windows.
2. Se você estiver instalando o Scoop pela primeira vez, pode ser necessário definir sua Política de Execução.

   Definir-ExecutionPolicy RemoteSigned -alcance Usuário atual

3. Instalar colher:

   iex (novo-object net.webclient).downloadstring('https://get.scoop.sh')
   

4. Instale o Hugo:

   colher instalar abraço

Como criar um projeto Hugo

Para criar um novo projeto Hugo, você precisará usar o built-in novo site hugo comando.

1. Abra seu terminal ou prompt de comando. Navegue até a pasta onde você gostaria de criar seu projeto.
2. Execute o novo site hugo comando:

   abraço novo local novo-hugo-site

3. Navegue até o local do seu projeto Hugo no explorador de arquivos.
4. Abra a pasta do projeto. Você verá que seu novo site Hugo tem a estrutura de arquivos e pastas necessária para que seu site funcione.

Como adicionar um tema

No momento, seu projeto contém apenas as pastas base principais do projeto Hugo. A execução do seu site localmente neste momento mostraria apenas uma tela vazia. Como você ainda não tem nenhum design HTML, CSS ou UI configurado para o seu site, será necessário adicioná-los.

Hugo já fornece uma biblioteca de Hugo Temas criados por desenvolvedores.

1. Selecione um tema que você gosta. Cada tema pode ter instruções de configuração ligeiramente diferentes, mostradas em sua respectiva página de visualização. Este tutorial usará o Tema do conto como um exemplo.
2. Navegue até a pasta raiz do seu projeto em um terminal ou linha de comando.

   cd novo-hugo-site

3. Execute o comando para adicionar o tema Tale. Você pode adicionar o tema como um submódulo, que criará uma nova pasta chamada conto dentro de tema pasta.

   git init
   git submódulo adicionar https://github.com/EmielH/tale-hugo.git themes/tale

   Como alternativa, você pode clonar o repositório de contos do GitHub na pasta de temas do seu projeto.

   git clone https://github.com/EmielH/tale-hugo.git themes/tale

4. Navegue até a pasta do seu projeto. Clique no temas pasta para abri-lo. Independentemente de qual comando você usou, haverá um novo conto pasta que armazena o tema recém-baixado.
5. No config.toml arquivo, adicione o tema do conto como parte da configuração. Isso dirá ao Hugo para usar HTML, CSS e outros estilos que o tema Tale inclui.

   tema = "conto"

Como adicionar páginas ao seu site

Você pode escrever seu conteúdo em qualquer formato que Hugo aceite. O Hugo converterá automaticamente seus arquivos em arquivos HTML ao servi-los ao usuário. Isso torna rápido para construir e implantar. Este exemplo usará Markdown, uma linguagem de texto simples simples, como o formato do seu conteúdo.

Você pode escrever Markdown principalmente em inglês simples com alguns símbolos adicionados para especificar qualquer formatação. Isso inclui adicionar símbolos para representar títulos, quais palavras estão em negrito ou qualquer outra formatação básica que você possa precisar.

Para adicionar uma nova subpágina ou postagem ao seu site, você precisará adicionar um novo arquivo Markdown no contente pasta. Cada postagem ou página terá seu próprio arquivo Markdown associado a ela.

1. Abra o contente pasta dentro do seu projeto Hugo. Crie um novo arquivo Markdown chamado meuPrimeiroPost.md.
2. Abra o arquivo em qualquer editor de texto, como Notepad++ ou Visual Studio Code.
3. Na parte superior do arquivo, adicione alguns metadados. Isso incluirá informações importantes sobre a postagem. O tema que você está usando formatará essas informações de uma determinada maneira na página.

   
   autor: "Seu nome"
   título: "Minha primeira postagem"
   encontro: "2022-05-17"
   

4. Depois de adicionar os metadados, você pode começar a adicionar seu conteúdo usando Markdown.

   Esse é meu primeiro post no meu site Hugo!
   O tema Hugo sendo usado poresta site se chama Tale.
   Isto é muito simples de instalar e configurar.
   # Subtítulo
   Esse é algum conteúdo.
   # Outro subtítulo
   Esse é mais conteúdo.

5. Sinta-se à vontade para adicionar mais arquivos de remarcação para adicionar mais páginas ao seu site.

Como executar e testar seu site Hugo localmente

Para executar seu site, use o hugo servir comando.

1. Abra um terminal ou linha de comando.
2. Navegue até a pasta raiz do seu projeto Hugo.
3. Execute o hugo servir comando:

   hugo servir

4. Aguarde o site concluir o processo de inicialização. Feito isso, o terminal imprimirá uma mensagem informando de qual endereço local você pode acessar o site. Normalmente, isso é http://localhost: 1313/.
5. Abra um navegador da web e digite http://localhost: 1313/, ou qualquer endereço que o terminal lhe deu. Você verá a página principal do seu site Hugo.
6. Na página, haverá uma lista de postagens para cada arquivo de remarcação que você possui. Nesse caso, há dois arquivos de remarcação preenchidos com conteúdo. Isso inclui a página myFirstPost.md que você criou anteriormente. Também inclui um novo post chamado bananaCakeRecipe.md.
7. Clique no link do título em uma das visualizações. Isso levará você para a página inteira desse post específico.

Hospedando seu site Hugo

Colocar um site estático em funcionamento é simples e rápido com o Hugo. Você pode usar e configurar temas pré-criados e executar seu site Hugo localmente para teste. Você também pode adicionar páginas de conteúdo ao seu site usando o Markdown.

Depois de criar seu site Hugo, você pode começar a aprender mais sobre como hospedá-lo. Existem muitas opções gratuitas de hospedagem de sites para você escolher, como Dropbox, Google Drive ou OneDrive.

Como obter hospedagem gratuita de sites com Dropbox, Google Drive ou OneDrive

Leia a seguir