O Hugo é um gerador de sites estáticos. Um site estático distingue-se de um site com páginas dinâmicas por ter páginas geradas previamente e não quando é feito o pedido das mesmas. Isto significa que o site não precisa de utilizar uma base de dados onde guardar os conteúdos como acontece, por exemplo, com o WordPress. A utilização de páginas previamente geradas torna os sites estáticos muito mais rápidos do que os que usam páginas dinâmicas. Um gerador de sites estáticos funciona como um compilador que converte o conteúdo escrito pelos utilizadores no formato adequado a um servidor de HTML. No caso do Hugo os conteúdos estão inicialmente em de texto no formato [Markdown](https://www.markdownguide.org). O site web do [Hugo](https://gohugo.io) tem este procedimento para criar um site em poucos minutos: [Quick start | Hugo](https://gohugo.io/getting-started/quick-start/) O procedimento assume que se instalou previamente o Hugo o que depende do sistema operativo do computador onde se vai gerar o site estático: [Installation | Hugo](https://gohugo.io/installation/) Para além do Hugo o procedimento assume que o computador tem instalado o pacote de software [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) que facilita o download dos ficheiros distribuídos pela plataforma [GitHub](https://github.com). Para verificar a instalação e a versão dos programas deve-se dar os seguintes comandos numa janela de comandos (os utilizadores de Windows devem usar a [PowerShell](https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell-on-windows?view=powershell-7.4)): ``` hugo version git --version ``` ### Criação da estrutura de ficheiros do site Depois de verificar que a versão do Hugo é superior à v0.112.0 podemos começar por criar a estrutura de ficheiros para um novo site a que chamaremos de `quickstart`. Como contamos ter mais do que um site, vamos criar a estrutura debaixo de uma pasta chamada `hugo-sites`: ``` mkdir hugo-sites cd hugo-sites hugo new site quickstart ``` Depois desta sequência de comandos ficamos com uma pasta chamada `quickstart` dentro da pasta `hugo-sites`. ### Instalação de um tema Vamos em seguida instalar o tema [Ananke](https://github.com/theNewDynamic/gohugo-theme-ananke) na pasta de temas do site `quickstart`: ``` cd quickstart git init git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke ``` O comando `git init` inicializa um repositório Git vazio na pasta `quickstart`e o comando seguinte faz o download do tema para a pasta `themes/ananke`. Em seguida é preciso indicar no ficheiro de configuração do site, `hugo.toml`, que pretendemos usar o tema que acabámos de instalar. Isto pode ser feito com um editor de texto ou com este comando que junta uma linha ao final do ficheiro: ``` echo "theme = 'ananke'" >> hugo.toml ``` Podemos verificar o conteúdo do ficheiro `hugo.toml` com: ``` cat hugo.toml ``` Que deve resultar em: ``` baseURL = 'https://example.org/' languageCode = 'en-us' title = 'My New Hugo Site' theme = 'ananke' ``` ### Lançar o servidor de desenvolvimento do Hugo Para vermos o estado atual do site podemos pedir ao Hugo que inicie um servidor HTML de desenvolvimento com um endereço local que podemos colocar num browser. Dentro da pasta `quickstart` fazemos: ``` hugo server ``` Este comando gera algumas linhas de texto, mas a última indica o endereço onde está a correr o servidor e que podemos colocar numa janela de um browser. Deverá ser alguma coisa na forma: ``` http://localhost:1313/ ``` ### Adicionar conteúdos As páginas com conteúdos ficam guardadas na pasta `content/posts`. Para criar uma nova página dá-se o seguinte comando: ``` hugo new content posts/my-first-post.md ``` Se se abrir a página com um editor de texto como o [Visual Studio Code - Code Editing. Redefined](https://code.visualstudio.com), podemos ver que tem apenas uma cabeçalho a que se dá o nome de [front matter](https://gohugo.io/content-management/front-matter/). Neste caso indica que a página está ainda no modo _draft_ e que por isso não será publicada: ``` +++ title = 'My First Post' date = 2024-01-14T07:07:07+01:00 draft = true +++ ``` No editor pode-se juntar texto em formato Markdown: ``` +++ title = 'My First Post' date = 2024-01-14T07:07:07+01:00 draft = true +++ ## Introduction This is **bold** text, and this is *emphasized* text. Visit the [Hugo](https://gohugo.io) website! ``` Para ver o conteúdo do site, incluindo as páginas ainda em _draft_ junta-se a opção `-D` ao comando que inicia o servidor de desenvolvimento ``` hugo server -D ``` ### Configurar o site O site pode ser configurado editando o ficheiro `hugo.toml`. As variáveis de configuração são auto explicativas: ``` baseURL = 'https://example.org/' languageCode = 'en-us' title = 'My New Hugo Site' theme = 'ananke' ``` ### Publicar o site Antes de publicar o site temos de gerar as páginas estáticas que depois copiaremos para o local definitivo. Essa geração é feita com o comando `hugo` sem argumentos: ``` hugo ``` Este comando cria uma pasta `public` com os ficheiros que precisam de ser copiados para um serviço de alojamento do site, como o [[serviço de alojamento de páginas web do Técnico]]. O tema Ananke, que usámos como exemplo, foi concebido para um alojar um blogue. No nosso caso poderá ser mais útil usar um [[tema Hugo com blogue e landing page]].