Phenquestions
Este tutorial mostrará como você pode configurar um blog simples usando um gerador de site estático que é muito rápido e fácil de usar.
O que é um SSG?
SSG, ou Static Site Generator, é um aplicativo da web que converte o conteúdo dinâmico de uma página da web em conteúdo estático geralmente armazenado localmente. Os geradores de sites estáticos não requerem bancos de dados e back-ends, eliminando assim a necessidade de aprender a codificar. Ele se concentra principalmente em escrever e apresentar o conteúdo.
SSG vs. CMS
A forma mais popular de criar sites e gerenciar conteúdo é usando CMS ou sistemas de gerenciamento de conteúdo, como WordPress, Drupal, Joomla, etc.
Os sistemas CMS funcionam criando e gerenciando conteúdo diretamente usando uma interface interativa. Como os dados em um CMS são recuperados do banco de dados, os CMSs são muito lentos, pois o conteúdo é buscado e servido como conteúdo dinâmico. Os sistemas CMS também estão sujeitos a vulnerabilidades de segurança, pois contam com plug-ins externos escritos por outros desenvolvedores para aumentar a funcionalidade.
Por outro lado, os geradores de sites estáticos funcionam criando meios offline de conteúdo, como editores de texto, e renderizam a visualização da página final após a publicação. Como o conteúdo é renderizado localmente, sem a necessidade de um banco de dados, a página é renderizada mais rapidamente e as velocidades de carregamento são incrivelmente rápidas.
Os geradores de sites estáticos são feitos de código pré-compilado que atua como um mecanismo para renderizar o conteúdo publicado.
Como construir um blog estático com Hexo
Uma das escolhas populares para construir um site estático é Hexo.
Hexo é um aplicativo SSG simples, rápido e poderoso escrito em NodeJS. Embora existam outras opções para construir um site estático, Hexo permite que você personalize seu site e integre várias ferramentas.
Vejamos como podemos configurar um site estático simples com Hexo.
Instalando Hexo
Antes de podermos construir um site, precisamos configurar os requisitos hexo e instalá-lo. Para isso, exigimos NodeJS e git.
Comece atualizando seu sistema:
sudo apt-get updatesudo apt-get upgrade
Depois de ter seu sistema atualizado, instale o git
sudo apt-get install gitEm seguida, instale nodejs a partir de nodesource usando o comando:
curl -sL https: // deb.nósource.com / setup_14.x | sudo -E bash -apt-get install -y nodejs
Depois de instalar o Nodejs, podemos prosseguir com a instalação do hexo usando o comando:
npm install -g hexo-cliTrabalhando com Hexo
Depois de instalar o hexo, você pode criar um site e publicar conteúdo. Vejamos como trabalhar com Hexo. Lembre-se de que este é um guia rápido e simples. Consulte a documentação para saber mais.
Criação de um site
Para criar um novo site hexo, use o comando abaixo:
hexo init HexoSitecd HexoSite
npm install
Compreendendo a estrutura do Hexo Directory
Depois de inicializar um novo site Hexo, você obterá uma estrutura de diretório como a abaixo:
-rw-r - r-- 1 cs cs 0 8 de fevereiro 20:51 _config.panorama.yml-rw-r - r-- 1 cs cs 2439 8 de fevereiro 20:51 _config.yml drwxr-xr-x 1 cs cs 4096 8 de fevereiro 20:51 node_modules
-rw-r - r-- 1 cs cs 615 8 de fevereiro 20:51 pacote.json
-rw-r - r-- 1 cs cs 56716 8 de fevereiro 20:51 package-lock.json drwxr-xr-x 1 cs cs 4096 8 de fevereiro 20:51 andaimes drwxr-xr-x 1 cs cs 4096 8 de fevereiro 20:51 fonte drwxr-xr-x 1 cs cs 4096 8 de fevereiro 20:51 temas
O primeiro arquivo é o _config.yml contém todas as configurações do seu site. Certifique-se de modificá-lo antes de implantar seu site, pois ele conterá valores padrão.
O próximo arquivo é o pacote.arquivo json que contém os dados e configurações do aplicativo NodeJS. Aqui, você encontrará pacotes instalados e suas versões.
Você pode aprender mais sobre o pacote.json da página de recursos abaixo:
https: // docs.npmjs.com / cli / v6 / configuring-npm / package-json
Criação de um blog
Para criar um blog simples em hexo, use o comando:
hexo novo blog “Hello World Blog”Uma vez criado, você pode arquivar o arquivo markdown no diretório / source / _posts. Você precisará usar a linguagem de marcação Markdown para escrever o conteúdo.
Criação de uma nova página
Criar uma página no Hexo é simples; use o comando:
hexo nova página “Página-2”A fonte da página está localizada em / source / Page-2 / index.md
Gerando e veiculando conteúdo
Depois de publicar seu conteúdo em hexo, você precisará executar o aplicativo para gerar o conteúdo estático.
Use os comandos abaixo:
$ hexo gerarINFO Validando configuração
INFO Iniciar processamento
INFO Arquivos carregados em 966 ms
INFO gerado: arquivos / índice.html
INFO gerado: Página 2 / índice.html
INFO gerado: arquivos / 2021 / índice.html
INFO gerado: índice.html
INFO gerado: arquivos / 2021/02 / índice.html
INFO gerado: js / script.js
INFO gerado: fancybox / jquery.Caixa chique.min.css
INFO gerado: 2021/02/08 / Hello-World-Post / index.html
INFO gerado: css / style.css
INFO gerado: 2021/02/08 / hello-world / index.html
INFO gerado: css / fonts / FontAwesome.otf
INFO gerado: css / fonts / fontawesome-webfont.woff
INFO gerado: css / fonts / fontawesome-webfont.eot
INFO gerado: fancybox / jquery.Caixa chique.min.js
INFO gerado: css / fonts / fontawesome-webfont.woff2
INFO gerado: js / jquery-3.4.1.min.js
INFO gerado: css / fonts / fontawesome-webfont.ttf
INFO gerado: css / images / banner.jpg
INFO gerado: css / fonts / fontawesome-webfont.SVG
INFO 19 arquivos gerados em 2.08 s
Para servir o aplicativo, execute o comando:
$ hexo server INFO Validando config INFO Iniciar processamento INFO Hexo está sendo executado em http: // localhost: 4000 . Pressione Ctrl + C para parar.Conclusão
Esta introdução rápida e simples mostrou como usar o site estático Hexo. Se precisar de mais informações sobre como trabalhar com a Hexo, consulte a documentação principal fornecida abaixo:
https: // hexo.io / docs
