Categories
por

Como utilizar o gerador hugo de sítio estático em linux

Artigos em profundidade sobre Node. js, Microservices, Kubernetes e DevOps.

Neste artigo:

Revelador de Full-Stack no RisingStack

Neste artigo, vou mostrar como se pode gerar rapidamente um site estático com Hugo e Netlify de uma forma fácil.

O que são geradores de sítios estáticos, e porque é que precisa de um?

Simplificando, um gerador de sítio estático pega no seu conteúdo, aplica-o a um template, e gera um sítio estático baseado em HTML. É excelente para blogs e páginas de destino.

  • Implementação rápida
  • Seguro (sem conteúdo dinâmico)
  • Tempos de carga rápidos
  • Utilização simples
  • Controlo de versões

Então, quais são as opções populares em termos de geradores de sítios estáticos?

  • Gatsby (Reagir/JS)
  • Hugo (Go)
  • Próximo. js (Reagir/JS)
  • Jekyll (Ruby)
  • Gridsome (Vue/JS)

Estes são os projectos mais estrelados em GitHub. Já li anteriormente sobre Hugo, e pareceu-me divertido experimentar, por isso vou ficar com Hugo.

O que é Hugo?

O website oficial afirma que Hugo é o motor de website estático mais rápido do mundo.

Podemos confirmar que é realmente rápido. Hugo está escrito em Golang. Também vem com um rico sistema de temas e tem como objectivo tornar a construção de websites divertidos novamente.

Vamos ver o que temos aqui.

Instalando Hugo

Para verificar a sua instalação:

Usando Hugo

Criar um novo projecto:

Adicionar um tema para um início rápido. Pode encontrar temas aqui.

Acrescentar o tema ao ficheiro de configuração.

Acrescentar algum conteúdo.

Deve ser algo parecido com isto:

Há muitas opções (etiquetas, descrição, categorias, autor) que pode escrever para os detalhes do assunto da frente.

Pode ler mais sobre os detalhes aqui.

Dê uma vista de olhos ao que fizemos:

Compreender a estrutura do directório de Hugo

  • arquétipos : Arquétipos são ficheiros de modelos de conteúdo que contêm material frontal pré-configurado (data, título, rascunho). É possível criar novos arquétipos com campos de matéria frontal pré-configurados à medida.
  • assets : pasta Assets armazena todos os ficheiros, que são processados por Hugo Pipes. (por exemplo, ficheiros CSS/Sass) Este directório não é criado por defeito.
  • config. toml : Hugo utiliza o config. toml , config. yaml , ou config. json (se encontrado na raiz do site) como o ficheiro de configuração padrão do site. Em vez de um único ficheiro config, pode utilizar também um directório config para separar diferentes ambientes…
  • conteúdo : Aqui é onde vivem todos os ficheiros de conteúdo. As pastas de nível superior contam como secções de conteúdo. Se tiver secções devops e nodejs, então terá directórios content/devops/first-post. md e directórios content/nodejs/second-post. md.
  • dados : Este directório é utilizado para armazenar ficheiros de configuração que podem ser utilizados por Hugo ao gerar o seu sítio web.
  • layouts : Armazena modelos sob a forma de ficheiros. html. Consulte a secção Estilos para mais informações.
  • estático : Armazena todo o conteúdo estático: imagens, CSS, JavaScript, etc. Quando Hugo constrói o seu site, todos os activos dentro do seu directório estático são copiados sobre o estado em que se encontram.
  • temas : tema Hugo da sua escolha.

Estilizar o nosso sítio estático

Lembre-se, já aplicámos um tema antes. Agora, se inspeccionarmos a pasta de temas, podemos ver t

O tema tem uma pasta temática/nome temático/layout/parcial, onde podemos encontrar alguns modelos HTML (header. html, footer. html). Agora vamos editar o template header. html, portanto copie o conteúdo deste ficheiro para layouts/parciais/cabeçalhos. html e tenha o cuidado de criar a mesma estrutura de directório como a do tema na pasta de layouts de raiz.

Crie um ficheiro CSS personalizado: static/css/custom-style. css .

Adicionar o ficheiro css personalizado ao config. toml :

Adicionar este código dentro da etiqueta:

Agora pode escrever por cima das classes CSS aplicadas pelo seu tema.

Implementar o nosso site estático para Netlify

Uma das vantagens de um sítio estático é que pode ser facilmente implantado. Netlify ou AWS S3 é uma escolha muito boa para alojar um sítio estático. Vamos ver como implementá-lo na Netlify.

Conta na Netlify

Repositório Github

O que fazer em Netlify

  • Criar um repositório de git
  • Crie um ficheiro netlify. toml na raiz do seu projecto com o conteúdo abaixo.

Agora, se empurrar o seu código para Github, a Netlify implantará o sítio, e a criação de blogues começará.

Ligue a Netlify e o seu repositório Git

Construir e implantar

Pode também dar uma vista de olhos à rede oficial Hugo Netlify para mais informações.

AWS S3 + CI

Utilizaremos a Terraform para criar um balde S3 que acolherá o nosso sítio estático. Presumo que tenha uma conta AWS.

Crie um ficheiro s3_bucket. tf no seu projecto e insira o conteúdo abaixo no mesmo:

Depois, siga estes passos:

executar o init terraform

inserir o seguinte código snippet

executar terraformas aplicar

Isto irá criar um balde de leitura pública AWS S3, que irá alojar o sítio estático.

Agora temos de cuidar da construção do sítio estático por nós próprios: precisamos de uma ferramenta de IC.

  • Criação do CircleCI para uma integração contínua

No RisingStack, estamos normalmente a utilizar o CircleCI para este tipo de tarefas. Vamos montar o processo de construção.

Crie os seguintes ficheiros na raiz do projecto:.circleci/config. yml

Aplique o seguinte código para config. yml :

Nota: Para adicionar credenciais AWS, localize o link AWS Permissions na secção Permissions em CircleCI.

Avançar com Hugo

Hugo oferece muito mais que deveria saber. Descubra a documentação oficial aqui.

LTV Co. Blog de Engenharia

4 dias atrás – 5 min ler

ESTE POST FOI ORIGINALMENTE PUBLICADO NO NOSSO PRÓPRIO SÍTIO DO BLOGUE CONFIRA PARA VER MAIS POSTS COMO ESTE!

Quem é Hugo

Um novo CMS: Silvicultura. io

Desempenho adicional

  • Os resultados finais
  • Acabámos com o WordPress, um processo doloroso mas necessário que descrevemos em pormenor num post anterior. Mas esta não é uma história sobre finais, mas sim sobre novos começos – com Hugo, o nosso novo CMS. Dizem que há sempre algo melhor à sua espera lá fora e para nós, foi Hugo.
  • Hugo é um gerador de sítios estático (SSG) escrito i n Go. Os sites são vistos com mais frequência do que são editados e Hugo tira partido disso apenas construindo páginas quando o conteúdo é criado ou actualizado, ao contrário de sistemas dinâmicos como o WordPress que geram HTML para cada pedido de utilizador. Uma vez que o seu servidor HTTP serve uma versão estática da sua página, não há necessidade de construir páginas on-demand e
  • Uma das coisas que as pessoas adoram no WordPress é a sua facilidade de utilização como editor de texto. Markdown não é WYSIWYG, o que significa que tem de adicionar a sintaxe ao seu texto a fim de exibir estilos diferentes. Aprender o markdown não é difícil e hoje em dia, existem muitas aplicações de mensagens (WhatsApp, Telegram e Slack, para citar algumas) que fazem uso desta linguagem, mas este processo pode ser aborrecido, especialmente para pessoas sem conhecimentos técnicos. Por que razão, então, removeríamos uma funcionalidade tão boa como um editor de texto incorporado? A silvicultura era a nossa solução.

Forestry. io é um sistema de gestão de conteúdos (CMS) construído para SSGs tais como Hugo, Jekyll ou Gatsby. Um CMS é uma aplicação que ajuda os utilizadores a criar e gerir conteúdos para o seu website. Isto é extremamente útil para pessoas sem conhecimentos técnicos. Sem o Forestry. io, cada colaborador do blog teria de descarregar o projecto do nosso repositório e começar a “codificar” os seus artigos utilizando uma linguagem de marcação. Queremos que este processo seja tão simples quanto possível para que os editores possam concentrar-se na criação de conteúdos. O Forestry. io tem uma interface WYSIWYG familiar que permite aos utilizadores escrever, guardar e pré-visualizar rascunhos.

O principal ponto de venda do Forestry. io para os nossos engenheiros é que ele é inteiramente apoiado por Git. Todo o conteúdo e código são controlados por versão com Git e guardados em Github, sem necessidade de uma base de dados ou aplicação de terceiros para armazenar informação. Isto torna o processo de Integração Contínua fácil porque todos os ficheiros de que precisamos são armazenados num repositório Git. Os editores podem utilizar a interface Forestry. io para gerar os ficheiros markdown e estes são armazenados como o conteúdo que Hugo utiliza mais tarde para construir toda a aplicação. Ao mesmo tempo, os programadores podem fazer alterações a qualquer um dos modelos ou adicionar novas funcionalidades ao website e empurrá-los para o mesmo repositório. O esquema seguinte ajuda a ilustrar o processo:

Utilizámos anteriormente uma estrutura CSS e fizemos uso de bibliotecas JavaScript de terceiros, pelo que quisemos dar uma vista de olhos a essas bibliotecas para ver se existiam melhorias que pudessem ser feitas. No caso do nosso CSS, descobrimos que o Bootstrap veio com uma elevada dependência do jQuery, o que nos atrasou com o uso de funções desnecessárias. Também reconhecemos a possibilidade de futuras vulnerabilidades de segurança com a biblioteca e a necessidade de manter a biblioteca actualizada para evitar tais vulnerabilidades. Um relatório da W3Tech descobriu que jQuery é utilizado por 73% de todos os websites e, mais importante, 81% desses websites estão a utilizar a versão 1, uma versão já não suportada pela equipa jQuery. Outro relatório da Snyk mostrou que mais de 50% das vulnerabilidades encontradas para jQuery são desta primeira versão. No entanto, a maioria dos websites utiliza jQuery como um componente legado, tornando-o um alvo mais fácil para os hackers maliciosos.

Outro problema que encontrámos usando jQuery: fez com que as nossas páginas carregassem muito mais lentamente devido ao tamanho do pacote, o que depois afectou a pontuação geral de SEO do nosso domínio.

Não havia nenhuma razão convincente para continuar a usar jQuery, por isso fizemos a pausa. Uma vez tomada a decisão, utilizámos sites como youmightnotneedjquery. com para procurar a implementação de js vanilla js de quaisquer funções jQuery existentes que estivéssemos a utilizar. Queríamos manter os práticos selectores jQuery e para isso, utilizámos o Cash, uma alternativa jQuery com a sintaxe jQuery-style que é óptima para manipular o DOM. É mais leve a 32 KB sem compressão em comparação com jQuery a 271 KB.

Para remover ainda mais a nossa dependência do jQuery, começámos a utilizar a estrutura Bulma, uma estrutura CSS baseada no flexbox sem dependências no javascript.

O PurgeCSS foi outra ferramenta que implementámos para ajudar a nossa minimização do CSS. Embora Bulma seja modular e lhe permita escolher os componentes que deseja no seu pacote, ainda assim encontrámos algumas classes extra incluídas que nunca utilizámos. O PurgeCSS foi excelente para identificar classes não utilizadas dos nossos ficheiros de conteúdo e ajudou-nos a reduzir ainda mais a nossa pegada de CSS e, consequentemente, a tornar as nossas páginas carregadas mais rapidamente.

O tamanho do CSS para o design do WordPress era cerca de 57,1KB, mais de 3 vezes o nosso tamanho actual com Hugo. O próprio Bootstrap 4 é 20KB gzipado, enquanto o CSS para todo o blogue em Hugo é de 16,6 KB, incluindo todos os componentes Bulma que utilizámos.

No LTV, comprometemo-nos a fazer melhorias todos os dias. Estamos sempre à procura das melhores ferramentas, das melhores estruturas e das melhores pessoas. Cada novo projecto é uma oportunidade para reflectir sobre o passado e ver o que tem sido feito e o que pode ser melhorado. Independentemente de estar a trabalhar em refazer um projecto antigo numa nova língua ou a trabalhar num projecto inteiramente novo, normalmente chegará a esta realização: “Ei, já fiz isto antes”. Sempre que me encontro nesta situação, pergunto-me se existe alguma forma de encontrar uma solução que melhore o que fizemos antes.

Interessado em trabalhar connosco? Consulte a nossa página de carreiras e contacte-nos se quiser fazer parte da nossa equipa!

Descubra como Hugo torna novamente divertida a construção de websites.

Subscrever agora

Receba os destaques na sua caixa de correio todas as semanas.

Quer iniciar um blogue para partilhar as suas últimas aventuras com várias estruturas de software? Adora um projecto que está mal documentado e quer corrigir isso? Ou quer apenas criar um website pessoal?

Muitas pessoas que querem iniciar um blogue têm um aviso significativo: falta de conhecimento sobre um sistema de gestão de conteúdos (CMS) ou tempo para aprender. Bem, e se eu disser que não precisa de passar dias a aprender um novo CMS, a criar um website básico, a estilizá-lo, e a endurecê-lo contra atacantes? E se eu dissesse que poderia criar um blogue em 30 minutos, começar a terminar, com Hugo?

hugo_1.png

Hugo é um gerador de sítios estático escrito em Go. Porquê usar Hugo, perguntam vocês?

Porque não há base de dados, não há plugins que exijam quaisquer permissões, nem plataforma subjacente a correr no seu servidor, não há qualquer preocupação adicional de segurança.

O blogue é um conjunto de sites estáticos, o que significa que o tempo de serviço é rápido como um raio. Além disso, todas as páginas são renderizadas no tempo de implantação, pelo que a carga do seu servidor é mínima.

O controlo da versão é fácil. Algumas plataformas CMS utilizam o seu próprio sistema de controlo de versões (VCS) ou integram o Git na sua interface. Com Hugo, todos os seus ficheiros fonte podem viver nativamente no VCS da sua escolha.

Blog dos Desenvolvedores da Red Hat

  • Programação de folhas de fraude
  • Experimente de graça: Assinatura de aprendizagem Red Hat
  • eBook: Uma introdução à programação com Bash
  • Guia transferível: 7 bibliotecas essenciais de PyPI e como u
  • Para simplificar, vou referir-me ao caminho para o binário Hugo (incluindo o binário) como hugo . Por exemplo, a versão hugo traduziria para C:\hugo_dir\hugo versão no seu computador.
  • Se receber uma mensagem de erro, pode ter descarregado a versão errada. Note também que há muitas maneiras possíveis de instalar Hugo. Consulte a documentação oficial para mais informações. O ideal é colocar o binário Hugo em PATH. Para este início rápido, não há problema em utilizar o caminho completo do binário Hugo.
  • Crie um novo site que se tornará o seu blog: hugo novo site awesome-blog .
  • Mudar para o novo directório criado: cd awesome-blog .
  • Parabéns! Acabou de criar o seu novo blogue.

Minutos 5-10: Tema o seu blogue

Com Hugo, pode ser você mesmo a tematizar o seu blog ou a utilizar um dos belos temas já prontos. Eu escolhi Kiera porque é deliciosamente simples. Para instalar o tema:

  1. Mudar para o directório de temas: cd themes .
  2. Clonar o seu tema: git clone https://github. com/avianto/hugo-kiera kiera . Se não tiver o Git instalado:
  • Descarregue o ficheiro. zip de GitHub.
  • Descomprima-o para o directório de temas do seu site.

Renomeie o directório de hugo-kiera-master para kiera .

Alterar o directório para o nível awesome-blog: cd awesome-blog .

  1. Activar o tema. Os temas (incluindo Kiera) vêm frequentemente com um directório chamado exampleSite , que contém um conteúdo de exemplo e um ficheiro de definições de exemplo. Para activar o Kiera, copie o ficheiro config. toml fornecido para o seu blogue:
  2. Em Unix: temas cp/kiera/exampleSite/config. toml .

No Windows: copie temas\kiera/exampleSite\config. toml .

Confirme Sim para substituir o antigo config. toml

(Opcional) Pode iniciar o seu servidor para verificar visualmente se o tema está activado: hugo serve r-D e aceder a http://localhost:1313 no seu web browser. Depois de ter revisto o seu blog, pode desligar o servidor premindo Ctrl+C na linha de comando. O seu blogue está vazio, mas estamos a chegar a algum lado. Deve ser algo parecido com isto:

  1. hugo_2.png
  2. Acabou de escrever o seu blog! Pode encontrar centenas de belos temas no site oficial dos temas Hugo.
    • Minutos 10-20: Acrescentar conteúdo ao seu blogue
    • Enquanto que uma tigela é mais útil quando está vazia, este não é o caso de um blogue. Neste passo, irá adicionar conteúdo ao seu blogue. Hugo e o tema Kiera simplificam este processo. Para adicionar o seu primeiro post:
    • Os arquétipos de artigos são modelos para o seu conteúdo.
  3. Adicione arquétipos de temas ao seu sítio do blogue:
  4. Em Unix: temas cp/kiera/archetypes/* arquétipos/
    • No Windows: temas de cópia de arquétipos
    • Confirmar Sim para anular o arquétipo. md por defeito
    • Crie um novo directório para os seus posts no blogue:
  5. Em Unix: conteúdo/posts mkdir

No Windows: mkdir contents\posts

Use Hugo para gerar o seu posto:

Em Unix: hugo novos posts/primeiro-post. md

No Windows: hugo new posts\first-post. md

  1. Abra o novo post num editor de texto à sua escolha:
  2. Em Unix: gedit content/posts/first-post. md
    • No Windows: conteúdo do bloco de notas\posts\posts\posts. md
    • Nesta altura, pode ficar louco. Note que o seu post consiste em duas secções. A primeira é separada por ++++ . Contém metadados sobre o seu post, tais como o seu título. Em Hugo, isto chama-se matéria frontal . Após a matéria da frente, o artigo começa. Crie o primeiro post:
    • Tudo o que precisa de fazer agora é iniciar o servidor: hugo serve r-D . Abra o seu navegador e entre: http://localhost:1313/ .
  3. hugo_3.png
    • Actas 20-30: Ajuste o seu site
    • O que fizemos é óptimo, mas ainda há alguns pretos a engomar. Por exemplo, nomear o seu site é simples:
  4. Publicado: 15 de Agosto de 2017 | Última actualização: 11 de Setembro de 2017 | Web
    • Durante o fim-de-semana, mudei o meu blog de GitHub para GitLab. Agora tenho um CI totalmente automatizado construído em GitLab que agarra uma imagem do NodeJS Docker, descarrega Hugo, UglifyCSS e HTMLMinifier via NPM, constrói e minifica páginas, e finalmente publica para GitLab Pages em cada fusão de GitLab para dominar.
    • Motivação
  5. Utilizo o Hugo Static Site Generator há mais de um ano. Inicialmente o meu blog foi alojado no Google Firebase. Pouco tempo depois, mudei-me para GitHub Pages e tenho vindo a utilizá-lo há mais de um ano. Seja Firebase ou GitHub, ambos funcionaram muito bem para mim.
    • Se têm estado a trabalhar, porquê consertar o que não está partido?
    • TL;DR, para automatizar as tarefas.

Para uma explicação completa, deixem-me começar por explicar as minhas antigas tarefas de composição e publicação de um novo post no blogue:

Em primeiro lugar, componho um post de blogue em Markdown usando o Visual Studio Code.

Além disso, corro Hugo enquanto componho, uma vez que irá traduzir Markdown para HTML pronto a ser visto. Tinha a linha de comando completa num ficheiro de lote.

Os ficheiros fonte do meu blog são então sincronizados com um repositório Git no Google Cloud Source Repositories.

Quando estou pronto para publicar, executo Hugo sem parâmetros para distribuir para pasta pública. Em seguida, minifico ficheiros CSS e HTML. Estes comandos estavam também num ficheiro batch.

Em seguida, uso Free File Sync, uma ferramenta de sincronização de pastas de código aberto, para espelhar a pasta pública num só sentido para um clone local de Git do conteúdo publicado no meu blogue no GitHub. Por fim, comprometo-me e empurro para o ramo mestre remoto.

Passei o fim-de-semana a melhorar o processo de ponta-a-ponta tanto quanto pude.

O quê, porquê e como automatizar

Um repositório Git tanto para a fonte como para o conteúdo publicado

A tabela abaixo mostra a comparação entre as opções de níveis livres:

Google Cloud Repository

Páginas de GitHub

  1. Páginas do GitLab
  2. Armazenamento
  3. 1GB
  4. 1GB
  5. 10GB

Largura de banda por mês

10GB

100GB

Ilimitado

Repositório privado Sim Sim
Repositório público Sim Sim Gerador de sítio estático
Jekyll Gerador de sítio estático * Possível através da utilização de imagens Docker para construções de CI. Ver exemplos de websites alojados por GitLab Pages. Qual a imagem Docker a utilizar e porquê
Comparei 3 configurações diferentes do GitLab CI. As configurações estão em formato YAML: O exemplo do GitLab No O exemplo do GitLab
A minha abordagem No O exemplo do GitLab O exemplo do GitLab
As linhas chave são as seguintes: No As variáveis precisam de ser configuradas. São HUGO_VERSION que é a versão para descarregar e HUGO_SHA que é um hash SHA256 da versão Hugo. Isto irá fazê-lo avançar, se precisar apenas do mínimo necessário.

O exemplo de Hugo

O exemplo de Hugo elimina a necessidade de manter o ficheiro YAML ao não precisar de actualizar a versão e o checksum SHA256 dos lançamentos de Hugo. A sua imagem de Docker já tem Hugo nele.

Esta abordagem é a opção mais simplificada que pude encontrar.

  1. A minha abordagem
  2. Configuro o meu. gitlab-ci. yml para usar a imagem NodeJS Alpine Docker.
  3. Sem dúvida mais complicado do que as outras duas opções, mas há razões para tal.

A minha abordagem

Do ficheiro YAML acima, o comando build que o GitLab CI chamará é npm run build que, por sua vez, executa o comando encontrado no meu pacote. json . Leia a secção seguinte.

Nota: Esta imagem do Docker não contém Python. Python é necessário para que os pygments funcionem. Se ainda não ouviu falar de Pygments, é um marcador de sintaxe do lado do servidor. Para reduzir as dependências do meu blog, optei por substituir este por HighlightJS, uma alternativa do lado do cliente.

O meu ficheiro package. json

Abaixo encontra-se um ficheiro JSON que o NPM compreende. É colocado na raiz da pasta da sua fonte Hugo:

Configuro o meu. gitlab-ci. yml para usar a imagem NodeJS Alpine Docker.

Execute npm run build para gerar ficheiros usando Hugo e depois minifique-os usando UglifyCSS e HTMLMinifier. Este comando não deve precisar de ser executado por si mesmo, a menos que esteja a testar o processo de compilação.

Desencadeando o GitLab CI

Sem dúvida mais complicado do que as outras duas opções, mas há razões para tal.

Informação adicional

Pode encontrar informação adicional, ou seja, configuração SSL/TLS em domínios personalizados em GitLab Pages Getting Started Guide.

Introdução

De acordo com o seu GitHub README, Hugo é um gerador de sites HTML e CSS estático escrito em Go. Está optimizado para rapidez, facilidade de utilização e configurabilidade. Hugo pega num directório com conteúdo e templates e transforma-os num website HTML completo. Hugo confia em ficheiros Markdown com matéria frontal para metadados, e pode executar Hugo a partir de qualquer directório. Isto funciona bem para anfitriões partilhados e outros sistemas onde não se tem uma conta privilegiada. Hugo torna um sítio web típico de tamanho moderado numa fracção de segundo. Uma boa regra geral é que cada peça de conteúdo renderiza em cerca de 1 milissegundo. Hugo foi concebido para funcionar bem em qualquer tipo de sítio web, incluindo blogs, tombos, e documentos.

No início, nem sequer sabia como construir um sítio web estático. As pessoas da Dotfiles ID recomendaram-me que tentasse construir um website usando SSG (Gerador de Site Estático) como Jekyll, Hexo, ou Hugo. Eu não tinha conhecimentos de linguagem de programação, por isso receava que fosse difícil. Mas depois de ver uma bela lista de temas, senti-me motivado a experimentá-la. Depois disso, passei-me com o popular SSG. Os quatro grandes eram

Estava interessado com Hugo, simplesmente porque ele distribuiu o pacote *.deb. Eu uso Debian, pelo que me facilita a sua instalação. E melhor ainda, não puxa nenhuma dependência, nem mesmo o compilador Go. Por isso, mantém a minha configuração simples. Os outros SSG são baseados em coisas que não compreendo, que precisa de configurar muitas coisas como o node. js, ruby, e outras coisas que não compreendo. Não tenho tempo para as aprender. Portanto, Hugo é o SSG perfeito para mim. A vantagem não intencional, Hugo é realmente rápido a construir o website.

Instalação

  1. Bem, na verdade está disponível no repositório Debian desde Stretch. Mas a versão do pacote é demasiado antiga. A maior parte do tema Hugo requer uma versão superior de Hugo. Então, fui à sua página de lançamento no GitHub para obter o pacote superior ve
  2. Acolhi o meu blogue no GitHub. Por isso, fiz dois repositórios em GitHub. Um para alojar o html gerado. Nomeei o repositório addy-dclxvi/addy-dclxvi. github. io . Tinha de ser. github. io , para o tornar imediatamente acessível a partir de https://.github. io . E mais um para colocar o código fonte para manter o espírito do Código Aberto. Eu simplesmente nomeei o repositório addy-dclxvi/blog .

Clonando o Repo Vazio

O reporte de html gerado teve de ser colocado em pasta pública. O guia oficial Hugo pediu-me que criasse submódulos de git, mas eu não o fiz. Eu não queria que as coisas fossem complicadas, quero simplicidade. Então disse ao hugo para criar um novo site.

Depois escolhi um tema dos Temas de Hugo.

Eu estava interessado com Jane por Xianmin. Por isso, instalei-o.

Introdução

Hugo é um gerador de sítios estático com velocidade de renderização rápida e excelente facilidade de utilização. Graças a todas as suas características orientadas para o conteúdo, pode sempre concentrar-se na criação de conteúdo em vez de construir o ambiente:

Com Hugo, pode construir um site em funcionamento – qualquer sítio estático em vários minutos, sem se preocupar com dependências enfadonhas ou bases de dados.

Pode compor o seu conteúdo em Markdown, o estilo de escrita mais conveniente, e ver instantaneamente as alterações que fez na web.

Além disso, pode aproveitar ao máximo o rico repositório temático e a comunidade de Hugo, em rápido crescimento.

Neste tutorial, mostrar-vos-ei como instalar e utilizar Hugo para construir um site de blogue estático numa instância do servidor Vultr LEMP baseado em CentOS.

Pré-requisitos

Inicie sessão na sua instância como utilizador não-root com permissões sudo. Veja como criar um tal utilizador neste artigo.

Passo 1: Instalar o programa Hugo

Hugo pode ser instalado em quase todas as plataformas principais. Para o CentOS, basta descarregar o último ficheiro de programa num arquivo. tar. gz e descompactá-lo para um local conveniente. No momento da redacção, a última versão é 0.15.

Teste a sua instalação com o seguinte comando:

Passo 2: Construa o seu sítio

Com Hugo, pode construir o seu site a partir de qualquer pasta do seu servidor. Aqui, construí um site no directório mysite/ sob o meu directório home.

Introdução

Como vê, a arquitectura actual do site assemelha-se:

  • Com mais dois directórios, temas/ e público/, toda a arquitectura de um sítio Hugo é compacta mas abrangente.
  • Como iniciante, saiba que o seu conteúdo deve ser armazenado no directório de conteúdos/ .
  • Passo 3: Instalar temas a partir do repositório Hugo

Para instalar todos os temas a partir do repositório Hugo, executar os seguintes comandos. Estes criarão um directório nomeado temas/ no directório do seu sítio e descarregarão todos os temas do repositório de temas Hugo.

Se apenas quiser instalar um único tema, visite o repositório de temas Hugo para determinar o seu tema favorito. Copie o seu URL e cole-o no comando git clone abaixo.

Passo 4: Faça algumas alterações de configuração básica

O ficheiro chamado config. toml no seu directório de sítios contém a configuração global para o seu sítio Hugo. Edite o ficheiro com um editor de texto para

Sob a segunda linha +++, adicione o conteúdo que pretende exibir na página web. Lembre-se de escrever o seu conteúdo na língua Markdown.

Depois de terminar esta edição, mantenha o editor de texto aberto para utilização posterior.

Passo 6: Ajuste o seu conteúdo com o servidor Hugo

Pode utilizar o servidor web integrado de Hugo para implantar o seu site, que pode exibir instantaneamente as suas alterações na página web assim que modificar o seu conteúdo num editor de texto.

Abra outro terminal, configure as regras do iptables para permitir o seu acesso ao seu sítio na porta por defeito 1313 do servidor de Hugo:

Inicie o servidor Hugo:

Visite o seu sítio a partir de um navegador:

Agora, pode tentar editar o conteúdo do ficheiro de página no terminal anterior ou adicionar/remover um ficheiro de página. Verá que quaisquer modificações no conteúdo/directório serão reflectidas simultaneamente no ecrã do seu navegador. Esta é uma óptima característica para um blogueiro ocupado porque pode sempre ver imediatamente as suas modificações para melhor compor as experiências.

Depois de terminar a sua edição, prima Ctrl+C para parar o servidor Hugo.

Passo 7: Publique o seu sítio

Agora é altura de publicar o seu sítio na web. Execute os seguintes comandos e Hugo irá gerar todo o conteúdo estático adequado para publicação dentro do público/directório.

Nota : Hugo não apagará ficheiros antigos que foram gerados anteriormente quando executar os comandos acima. A fim de evitar resultados inesperados, pode sempre apagar o public/directório antes de executar o comando hugo ou especificar um novo destino de saída, conforme mostrado no seguinte comando.

Uma vez que o servidor web Nginx já está a correr no servidor, tudo o que precisa de fazer é copiar o conteúdo do

/mysite/public/ directory ou outros directórios de destino personalizados para o seu directório web /usr/share/nginx/html/ .

Elimine os ficheiros originais:

Copie os ficheiros estáticos do seu sítio web para o directório web:

É isso mesmo. Agora pode visitar o seu sítio estático super rápido a partir do seu navegador: http://[YourServerIP] .

Para ver mais detalhes, utilize o comando hugo help ou visite o sítio oficial de Hugo.

Os geradores de sítios já não são um tópico novo. Várias linguagens de programação lançaram as suas próprias estruturas populares de construção de sítios web. Por exemplo, Python lançou Pelican , JavaScript lançou Hexo e PHP lançou WordPress, que tem a maior quota de mercado. Tentei todas estas ferramentas ao implementar o meu blogue pessoal. Mas ao construir o site oficial do Nebula Graph, após avaliação, escolhi Hugo, que está escrito em Golang.

Para esclarecer, não há muita diferença nos quadros escritos em várias línguas. O que importa são as preferências pessoais e a estética, que não é o tema abordado neste post.

Requisitos do website no Nebula Graph

Gestão de conteúdos de blogues

A equipa do Nebula Graph partilha frequentemente artigos técnicos no blogue da empresa. Hugo tem um sistema de gestão de conteúdos flexível e poderoso. Pode adicionar vários tipos de conteúdo, tais como blogs, comunicados e documentos técnicos, conforme necessário. Os detalhes serão introduzidos mais tarde.

Proliferação de produtos

As páginas de proliferação de produtos comummente vistas incluem uma página inicial, uma página de redacção, e uma página da empresa, etc. Isto requer que o Sistema de Gestão de Conteúdos suporte vários tipos de páginas. Estas páginas podem partilhar os mesmos componentes, tais como a barra de navegação e o rodapé de página. Os detalhes serão também abordados mais tarde.

O próprio Hugo é uma estrutura web semelhante ao modelo de fim de serviço, que suporta a renderização de fim de servidor nativamente.

Suporte Multi-Linguístico

O Nebula Graph serve utilizadores em todo o mundo. Para assegurar uma experiência de utilizador de qualidade, o website deve suportar vários idiomas. Hugo tem-nos a nós cobertos. Desde que tenha a configuração de corpus correspondente, pode utilizar a língua no seu sítio e geri-la facilmente.

Fácil de Gerir para Pessoal Não-Técnico

Com base no poderoso sistema de modelos de Hugo, os gestores de conteúdos podem utilizá-lo sem problemas após os técnicos terem feito o desenvolvimento personalizado do modelo.

Destaques da característica de Hugo

Sistema de Gestão de Conteúdos Flexível e Poderoso

O acima exposto é a estrutura do projecto construída com o poderoso modelo Hugo. Pessoalmente, penso que demonstra intuitivamente as exigências dos diferentes sítios. Para mais informações, consulte a Síntese oficial dos Templates de Hugo.

Ferramentas Ricas Construídas

Para além do poderoso sistema de gestão de conteúdos, Hugo fornece uma série de modelos e funções integradas úteis para melhorar a eficiência do edifício. Por exemplo: Partilhar

Twitter

Linkedin

Facebook

Outros

Uma vez que Hugo torna os websites estáticos, pode alojar o seu novo website Hugo praticamente em qualquer lugar .

Mais um repositório de git

Bom entendimento idiota

Compreensão básica do heroku

Um Heroku Dyno

Assumo também que o vosso projecto Hugo já está sob controlo de fonte idiota. Caso contrário, execute um simples git init na raiz do mesmo.

Tudo bem? Vamos começar.

Vamos criar um pequeno gasoduto local que nos ajudará a distribuir o conteúdo da pasta pública, que contém o html “compilado” do nosso site estático.

Além disso, de cada vez que vai compilar o seu site com o comando hugo, poderá implementá-lo em heroku.

Para tal, iremos inicializar um submódulo git que será apenas aquele código compilado, que será implantado em Heroku. Com alguns ajustes para o fazer funcionar com uma aplicação de Heroku.

Na raiz do seu projecto Hugo, execute o seguinte comando:

Isto irá remover a pasta pública do índice. Como vamos criar um submódulo a partir dessa pasta, precisamos de retirar este repositório do índice. Isto não irá realmente remover os ficheiros ! 🙂

Vá para o seu servidor de código online favorito (GitHub, Bitbucket…) e crie um repositório lá. Nomeie o repositório my_awesome_website. public , ou qualquer outro nome que se ajuste a si. Criar um ficheiro README. md no mesmo .

  • Volte ao seu directório público Hugo e escreva o seguinte:
  • Dentro da pasta pública do projecto Hugo, crie um ficheiro index. php. Coloque o seguinte código no seu interior:
  • Da mesma forma, crie um ficheiro composer. json. Coloque o seguinte código dentro do mesmo:
  • Na raiz do projecto Hugo, digite o seguinte:

Com um terminal, vá para outro directório. Noutro sítio que não o seu projecto Hugo. Digamos, por exemplo

  • Dentro desta pasta, executar o seguinte comando:
  • A partir do repositório my_awesome_website. public, crie a sua aplicação Heroku se esta ainda não existir, ou associe a sua repo a uma já existente:
  • Em seguida, implante a aplicação Heroku com:
  • E voilà ! O vosso sítio deve ser implantado em conformidade com essa aplicação de Heroku.

Se actualizar o seu site, digamos que adicione um post no blog ou modifique os ficheiros na pasta de dados, e se o quiser implementar, terá de o executar a partir da pasta raiz do seu projecto Hugo.

Depois, na outra pasta que esteja noutro sítio que não o seu projecto Hugo (no nosso caso, a pasta de

/projectos/my_awesome_website. public , faça o seguinte:

Deve ser feito !

Além disso, verá que o submódulo changelog na raiz do projecto Hugo está a recolher alterações assim que lhe é atribuído um novo código. Como:

A escolha é sua ou não:). Pessoalmente, eu fá-lo-ia para manter o repositório limpo.

Poderia fazer um guião que se encarregasse de compilar o sítio (com hugo ) que correria com os guiões pré-push de um gancho.

Enquanto desenvolvia o meu site de apresentação usando Hugo, aprendi sobre submódulos de git.

Vejo que há um verdadeiro interesse em usá-los como um resolvedor de dependência, especialmente quando se modifica o código do módulo, e se pretende fundi-lo com actualizações.

Hugo é um gerador de sítios estático escrito em Go. Está optimizado para rapidez, fácil utilização e configurabilidade. Hugo pega num directório com conteúdo e modelos e transforma-os num site completo em html.

Hugo faz uso de ficheiros markdown com material frontal para meta dados. Escrito em GoLang para velocidade, Hugo é significativamente mais rápido do que a maioria dos outros geradores de sítios estáticos.

Um sítio web típico de tamanho moderado pode ser renderizado numa fracção de segundo. Uma boa regra geral é que Hugo demora cerca de 1 milissegundo para cada pedaço de conteúdo. É tão rápido que renderiza o site em menos tempo do que demora a mudar para o seu browser e recarregar.

Hugo é feito para ser muito flexível. Defina os seus próprios tipos de conteúdo. Defina os seus próprios índices. Construam os vossos próprios modelos, atalhos e muito mais. Está escrito para funcionar bem com qualquer tipo de sítio web, incluindo blogs, tumbles e docs.

Instalar Hugo

Hugo é escrito em GoLang com suporte para Windows, Linux, FreeBSD e OSX.

O último lançamento pode ser encontrado em hugo releases. Construímos actualmente para Windows, Linux, FreeBSD e OS X para arquitecturas x64 e 386.

A instalação é muito fácil. Basta descarregar a versão apropriada para a sua plataforma a partir de hugo releases. Uma vez descarregada, pode ser executada a partir de qualquer lugar. Não precisa de a instalar num local global. Isto funciona bem para anfitriões partilhados e outros sistemas onde não tem uma conta privilegiada.

Idealmente deverá instalá-lo algures no seu caminho para facilitar a sua utilização. /usr/local/bin é o local mais provável.

O executável Hugo não tem dependências externas.

Instalar a partir da fonte

Dependências

Git

Ir 1.1+

Mercurial

Bazaar

Clonar localmente (para os contribuintes):

Porque go espera que todas as suas bibliotecas sejam encontradas em $GOROOT ou $GOPATH, é útil ligar o projecto a um dos seguintes caminhos:

l n-s /path/to/your/hugo $GOPATH/src/github. com/spf13/hugo

l n-s /path/to/your/hugo $GOROOT/src/pkg/github. com/spf13/hugo

Venha directamente de Github:

Instalando Hugo

Construir Hugo

Correr Hugo

A documentação completa está disponível em Hugo Documentation.

Licença

Hugo é libertado sob a Licença Pública Simples. Ver LICENÇA. md.

Thu Jul 4, 2013

400 palavras

  • Ler em cerca de 2 Min
  • Desenvolvimento
  • Blogging
  • GoLang

Desenvolvimento

golang

  • Blogging
  • Sobre o Autor:

Steve Francia é um Engenheiro de Software Americano, Orador & Autor baseado em NYC. Ele tem a distinção única de papéis de liderança em cinco dos maiores projectos de código aberto.

Trabalha actualmente no Google na equipa de liderança da linguagem Go, onde é responsável pela estratégia e produto do projecto Go e é responsável por mais de 1M utilizadores.

Anteriormente desempenhou funções executivas na Docker, MongoDB, onde liderou a engenharia, o produto e o código aberto. Anteriormente, foi director da Associação Drupal.

É o criador de algumas das mais populares aplicações e bibliotecas de código aberto do mundo, incluindo Hugo, Cobra, Viper, spf13-vim e muitas outras.

Fora da tecnologia, Steve gosta de viagens, skate, punk rock, e filmes distópicos.

© 2013-19 Steve Francia. Alguns direitos reservados; por favor, atribua correctamente e ligue de volta. Powered by Hugo.