Os sites estáticos são fáceis de criar e extremamente rápidos de usar. Se você aprender a usar o Hugo, poderá gerar sites estáticos baseados em temas no Linux. Criar sites é divertido de novo!
Índice
Um site estático é aquele que não cria ou modifica páginas da web dinamicamente. Não há banco de dados de fundo, processamento de e-commerce ou PHP . Todas as páginas da web são totalmente pré-construídas e podem ser exibidas aos visitantes muito rapidamente.
Mas isso não significa que um site estático deva ser chato. Eles podem usar tudo o que o HTML fornece, além de folhas de estilo em cascata (CSS) e JavaScript . Eles também podem ter coisas como carrosséis de imagens e páginas da web deslizando sobre imagens de fundo.
O gerador de sites Hugo funciona com um modelo e qualquer conteúdo que você criou para gerar um site completo. Você pode então colocá-lo em uma plataforma de hospedagem e ter um site ativo imediatamente.
Hugo usa markdown para as páginas e entradas de blog que você cria. Markdown é a linguagem de marcação mais simples que existe, o que simplifica a manutenção do seu site.
Os arquivos de configuração de Hugo estão em Tom’s Obvious, Minimal Language (TOML) e YAML Ain’t Markup Language (YAML), que são igualmente fáceis. Outro bônus é que o Hugo é extremamente rápido – alguns sites carregam em menos de um segundo. Tem muitos modelos à sua escolha e mais estão sendo adicionados o tempo todo, então é fácil começar. Basta escolher um modelo e adicionar algum conteúdo que o torne seu.
Hugo também atua como um pequeno servidor web direto no seu computador. Você pode ver uma versão ao vivo do seu site enquanto o projeta e cria e sempre que adiciona uma nova postagem. Ele também se atualiza automaticamente sempre que você “Salvar” no editor, para que possa ver imediatamente o efeito de suas alterações no navegador.
Quando se trata de hospedar seu site estático, você tem muitas opções. A maioria das empresas oferece hospedagem gratuita para uso pessoal ou de código aberto. Claro, você também pode escolher uma empresa de hospedagem na web regular, como qualquer uma das seguintes:
Junto com Hugo, você precisa ter o Git instalado. Git já estava instalado no Fedora 32 e Manjaro 20.0.1. No Ubuntu 20.04 (Focal Fossa,) foi adicionado automaticamente como um dependente de Hugo.
Para instalar o Hugo no Ubuntu, use este comando:
sudo apt-get install hugo
No Fedora, você precisa digitar:
sudo dnf install hugo
O comando para Manjaro é:
sudo pacman -Syu hugo
Quando pedimos ao Hugo para fazer um novo site, ele cria um conjunto de diretórios para nós. Estes irão conter os diferentes elementos do nosso website. No entanto, este não é o site final que será carregado em sua plataforma de hospedagem. Esses diretórios conterão o tema, os arquivos de configuração, os conteúdos e as imagens que Hugo usará como entrada quando pedirmos para construir o site real.
É como a diferença entre o código-fonte e um programa compilado. O código-fonte é o material que o compilador usa para gerar o produto final. Da mesma forma, Hugo pega o conteúdo desses diretórios e gera um site funcional.
O comando que vamos executar criará um diretório com o mesmo nome do site que você deseja criar. Esse diretório será criado no diretório em que você executa o comando.
Portanto, vá para o diretório no qual deseja que o seu site seja criado. Estamos usando nosso diretório inicial, então digitamos o seguinte:
hugo novo site geek-demo
Isso cria um diretório “geek-demo”. Nós digitamos o seguinte para mudar para esse diretório e executar ls:
cd geek-demo /
ls
Vemos o arquivo de configuração “config.toml” e os diretórios que foram criados. No entanto, eles estão praticamente vazios, pois são apenas o andaime do site.
Precisamos adicionar um tema para que Hugo saiba como queremos que o site concluído fique. Para fazer isso, temos que inicializar o Git. Na pasta raiz do seu site (aquela que contém o arquivo “config.toml”), execute este comando:
git init
Existem centenas de temas que você pode escolher, e cada um tem uma página da web que o descreve. Você pode executar uma demonstração de um tema e descobrir qual é o comando para fazer o download. Usaremos um chamado Meghna .
Para incorporar esse tema em nosso site, precisamos mudar para nossa pasta “Temas” e executar o git clonecomando:
temas de cd
git clone https://github.com/themefisher/meghna-hugo.git
O Git exibe algumas mensagens à medida que avança. Quando terminar, usamos lspara ver o diretório que contém o tema:
ls
Os temas de Hugo incluem um site de exemplo de trabalho. Você deve copiar esse site padrão para os diretórios do seu site.
Primeiro, volte ao diretório raiz do seu site. Estamos usando a opção -r(recursiva) cppara incluir subdiretórios e a -fopção (forçar) para substituir quaisquer arquivos existentes:
cd ..
cp themes / meghna-hugo / exampleSite / * -rf
Fizemos o suficiente para lançar um novo site localmente. Ele ainda conterá o texto e as imagens do espaço reservado, mas essas são apenas alterações cosméticas. Vamos verificar se as partes técnicas funcionam primeiro.
Dizemos ao Hugo para executar seu servidor web e usar a -Dopção (rascunho) para garantir que todos os arquivos que possam ser marcados com “rascunho” sejam incluídos no site:
servidor hugo -D
A imagem abaixo mostra a saída do nosso hugocomando.
Fomos informados de que Hugo construiu o site em 142 milissegundos (dissemos que era rápido, certo?). Ele também nos diz para pressionar Ctrl + C para parar o servidor, mas deixá-lo em execução por enquanto.
Abra seu navegador e vá para localhost:1313 para ver seu site.
Enquanto está funcionando assim, Hugo está servindo as páginas da web de memória. Ele não criou o site no disco rígido, mas sim uma cópia de trabalho na RAM. No entanto, ele está monitorando os arquivos e imagens no disco rígido. Se algum deles for alterado, ele atualiza o site em seu navegador – você nem precisa pressionar Ctrl + F5.
Abra outra janela de terminal e navegue até o diretório raiz do seu site. Abra o arquivo “config.toml” em um editor. Altere o “baseURL” para o domínio no qual seu site será hospedado e altere o “título” para o nome do seu site. Salve suas alterações, mas deixe o editor aberto.
Hugo detecta que houve mudanças no arquivo “config.toml”, então ele as lê, reconstrói o site e atualiza o navegador.
Agora você deve ver o nome que escolheu para o seu site na guia do navegador. Obter feedback visual imediato sobre as alterações salvas acelera significativamente o processo de personalização de um site.
Todos os temas são diferentes, mas descobrimos que aqueles que costumávamos eram bastante simples de seguir. As diferentes seções do site têm nomes óbvios, assim como as configurações em cada seção, então é sempre óbvio o que você está mudando.
E, novamente, assim que você salva uma alteração, você vê o que alterou em seu navegador. Se você não gostar, basta reverter a alteração e salvar novamente.
Os vários arquivos de configuração que controlam o site são cada um dedicado a um único trabalho e rotulado de forma significativa. Rastreá-los não é difícil, pois não há muitos lugares onde eles possam estar no diretório. Normalmente, eles estão na pasta “Dados”.
Como estamos usando um modelo bilíngue, nossos arquivos de configuração em inglês estão no subdiretório “En”.
Se você abrir o arquivo Data> En> banner.yml em um editor, verá a coleção de configurações que regem a área de banner do site.
Ao alterar as configurações de “Título” e “Conteúdo”, você altera o texto na página do banner.
Também alteramos a configuração “Rótulo”, para que o texto do botão diga “Saiba mais”. Para o seu site, provavelmente você também desejará alterar a imagem.
Assim que salvar suas alterações, você as verá em seu navegador.
Você pode alterar todos os outros elementos de maneira semelhante. Basta rastrear o arquivo de configuração apropriado e alterar as configurações e o texto para atender às suas necessidades.
Você também vai querer mudar as imagens. A imagem padrão será referenciada no arquivo de configuração. Você pode facilmente encontrar e dar uma olhada na imagem original para ver quais são suas dimensões.
As imagens são colocadas no diretório “Static> Images” com subdiretórios para as diferentes seções do site. Coloque quaisquer favicons e logotipos diretamente no diretório “Estático> Imagens”.
Até agora, vimos como mudar o que já está lá. Mas, como adicionamos uma nova postagem no blog? Hugo usa um conceito chamado “Arquétipos” para criar novos conteúdos. Se não criarmos um arquétipo para nossas entradas de blog, um arquivo padrão será criado para nós cada vez que pedirmos a Hugo para criar uma nova entrada de blog.
Isso é bom, mas com um arquétipo, podemos nos poupar algum esforço e garantir que o máximo possível do assunto inicial seja inserido para nós com antecedência.
Neste tema, as entradas do blog estão localizadas em Conteúdo> Inglês> Blog. Se abrirmos uma entrada de blog existente em um editor – como “simple-blog-post-1.md” – podemos ver o assunto inicial.
Precisamos copiar essa seção, editar as entradas atuais para que possam ser usadas como um modelo de arquétipo e, em seguida, salvá-lo na pasta “Arquétipos”. Se o chamarmos de “blog.md”, ele será usado automaticamente como modelo para novas entradas de blog.
Em gedit, podemos fazer isso da seguinte maneira:
gedit content / english / blog / simple-blog-post-1.md
Realce a seção superior incluindo as duas linhas tracejadas e pressione Ctrl + C para copiá-la. Pressione Ctrl + N para iniciar um novo arquivo e, a seguir, Ctrl + V para colar o que você copiou.
Agora, faça as seguintes alterações e certifique-se de deixar um espaço após os dois pontos (:) em cada linha:
"{{ replace .Name "-" " " | title }}" (inclua as aspas). Um título para cada nova postagem do blog será inserido automaticamente. É formado a partir do nome do arquivo que você passa para o hugo newcomando, como veremos.{{ .Date }}. A data e a hora em que o blog é criado serão inseridas automaticamente.""), poderá digitar uma descrição para cada novo blog sem precisar editar o texto antigo.Salve esse novo arquivo como “archetypes / blog.md” e feche gedit. Hugo agora usará esse novo arquétipo sempre que quiser criar uma nova entrada de blog.
Observe que nosso arquivo deve ter uma extensão “.md” porque usaremos markdown para escrever nossa entrada de blog:
hugo novo blog / first-new-blog-post-on-this-site.md
Agora, queremos abrir nossa nova entrada de blog em um editor:
gedit content / english / blog / first-new-blog-post-on-this-site.md
Nossa nova postagem do blog é aberta em gedit.
Todas as seguintes peças do assunto inicial foram adicionadas para nós:
Escreva o blog usando marcação e use a marcação padrão para títulos, negrito, itálico, imagens, links e assim por diante. Cada vez que você salva seu arquivo, Hugo reconstrói o site e o atualiza em seu navegador.
A imagem abaixo mostra como nossa nova entrada de blog aparece na página inicial.
A imagem abaixo mostra a aparência da nova entrada do blog em sua própria página.
Depois de terminar de escrever sua postagem no blog, salve as alterações e feche o editor. Você também pode fechar seu navegador porque vamos parar o servidor Hugo.
Na janela do terminal em que o servidor Hugo está sendo executado, pressione Ctrl + C.
No diretório raiz do seu site, emita o seguinte comando para construir o seu site:
hugo
Hugo constrói o site e lista o número de páginas e outros componentes que ele criou. Demorou 134 milissegundos para criar o nosso.
Hugo cria um novo diretório chamado “Público” no diretório raiz do seu site. No diretório “Público” você encontrará todos os arquivos que você precisa para transferir para sua plataforma de hospedagem.
Observe que você deve fazer upload dos arquivos e diretórios dentro do diretório “Público” para sua plataforma de hospedagem, não para o diretório “Público” em si.
Cada tema exigirá um pouco de exploração para descobrir como você pode fazer com que ele tenha a aparência desejada, mas essa é a parte divertida! Dada a capacidade de Hugo de renderizar alterações imediatamente em uma janela do navegador, nada demora muito.
Você provavelmente descobrirá que escrever seu texto e localizar e recortar imagens são as partes do processo que demoram mais.
O site de documentação do Hugo também é útil , mas extenso. Esperançosamente, este passo a passo básico será suficiente para você começar.
Se você usar o Git e Github , gitlab , ou BitBucket , há também integrações disponíveis para essas plataformas. Eles observam seu repositório Hugo remoto e reconstroem seu site ativo sempre que você envia alterações nele.
Muitos aplicativos de limpeza estão disponíveis para Windows ao longo dos anos, mas hoje em…
Seu PlayStation 4 está congelado? Seus jogos favoritos continuam travando? Reiniciar seu PS4 pode resolver…
A popularidade das mensagens de texto significou aprender uma forma totalmente nova de comunicação. Você…
A foto dos "Pilares da Criação" tirada pelo Telescópio Espacial Hubble é uma das fotos…
O Proton Drive saiu de seu estágio beta há algumas semanas, mas o aplicativo real…
Para ver suas fotos mais de perto ou para uma edição precisa , você pode…