Como construir um blog simples com o Hexo estático gerador de sites
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 gerador de sites estático, é um aplicativo da Web que converte o conteúdo dinâmico em uma página da web em conteúdo estático geralmente armazenado localmente. Os geradores estáticos do site não requerem bancos de dados e back -end, eliminando assim a necessidade de aprender a codificar. Ele se concentra principalmente em escrever e apresentar o conteúdo.
SSG vs. Cms
A maneira mais popular de criar sites e gerenciar conteúdo é usar 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, o CMSS é muito lento à medida que o conteúdo é buscado e servido como conteúdo dinâmico. Os sistemas CMS também são propensos a vulnerabilidades de segurança, pois dependem de plugins externos escritos por outros desenvolvedores para aumentar a funcionalidade.
Por outro lado, os geradores estáticos do site funcionam criando meios offline de conteúdo, como editores de texto e renderiza a visualização da página final após a publicação. Como o conteúdo é renderizado localmente, sem necessidade de um banco de dados, a página renderiza mais rapidamente e as velocidades de carga 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 é o hexo.
Hexo é um aplicativo SSG simples, rápido e poderoso escrito em NodeJS. Embora existam outras opções para a criação de um local estático, o HEXO permite que você personalize seu site e integre várias ferramentas.
Vejamos como podemos configurar um site estático simples com hexo.
Instalando o Hexo
Antes que possamos construir um site, precisamos configurar requisitos hexos e instalá -lo. Para isso, exigimos nodejs e git.
Comece atualizando seu sistema:
Atualização de sudo apt-get
Atualização de sudo apt-get
Depois de atualizar seu sistema, instale o Git
sudo apt-get install git
Em seguida, instale o NodeJS no Sodesource usando o comando:
Curl -sl https: // Deb.Sodesource.com/setup_14.x | SUDO -E BASH -
instalação apt -get -y nodejs
Depois de instalar o NodeJS, podemos instalar o HEXO usando o comando:
npm install -g hexo -cli
Trabalhando 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.
Criando um site
Para criar um novo site HEXO, use o comando abaixo:
hexóios hexo init
CD Hexosita
NPM Instale
Entendendo a estrutura do diretório Hexo
Depois de inicializar um novo site HEXO, você receberá uma estrutura de diretório como a abaixo:
-RW-R-R-- 1 CS CS 0 de fevereiro 20:51 _Config.paisagem.yml
-RW-R-R-- 1 CS CS 2439 8 de fevereiro 20:51 _Config.YML DRWXR-XR-X 1 CS 4096 8 de fevereiro 20:51 Node_modules
-RW-R-R-- 1 CS CS 615 8 de fevereiro 20:51.JSON
-RW-R-R-- 1 CS CS 56716 8 de fevereiro 20:51 Lock de embalagem.JSON DRWXR-XR-X 1 CS CS 4096 8 de fevereiro 20:51 Scaffolds DRWXR-XR-X 1 CS CS 4096 Feb 8 20:51 Fonte DRWXR-XR-X 1 CS CS 4096 8 de fevereiro 20:51 Tempos
O primeiro arquivo é o _config.YML contém todas as configurações para o 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/configuração-npm/package-json
Criando um blog
Para criar um blog simples no Hexo, use o comando:
Novo blog Hexo “Hello World Blog”
Uma vez criado, você pode arquivar o arquivo de marcação em /origem /_posts Directory. Você precisará usar o idioma de marcação de marcação para escrever conteúdo.
Criando 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/fonte/página-2/índice.MD
Gerar e servir conteúdo
Depois de publicar seu conteúdo no Hexo, você precisará executar o aplicativo para gerar o conteúdo estático.
Use os comandos abaixo:
$ hexo gera
Info Validando Config
Informações iniciando o processamento
Arquivos de informações carregados em 966 ms
Informações geradas: Arquivos/índice.html
Informações geradas: página-2/índice.html
Informações geradas: Arquivos/2021/índice.html
Informações geradas: índice.html
Informações geradas: Arquivos/2021/02/Índice.html
Informações geradas: JS/Script.JS
Informações geradas: FancyBox/JQuery.Caixa chique.min.CSS
Informações geradas: 2021/02/08/hello-mundo-post/index.html
Informações geradas: CSS/estilo.CSS
Informações geradas: 2021/02/08/Hello-World/Index.html
Informações geradas: CSS/Fontes/Fontawesome.OTF
Informações geradas: CSS/Fontes/Fontawesome-Webfont.Woff
Informações geradas: CSS/Fontes/Fontawesome-Webfont.eot
Informações geradas: FancyBox/JQuery.Caixa chique.min.JS
Informações geradas: CSS/Fontes/Fontawesome-Webfont.woff2
Informações geradas: JS/JQuery-3.4.1.min.JS
Informações geradas: CSS/Fontes/Fontawesome-Webfont.ttf
Informações geradas: CSS/Images/Banner.jpg
Informações geradas: CSS/Fontes/Fontawesome-Webfont.svg
Info 19 arquivos gerados em 2.08 s
Para servir o aplicativo, execute o comando:
$ HEXO Server Info Validando Informações de Config Iniciar Informações sobre Processamento O Hexo está em execução 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 você precisar de mais informações sobre como trabalhar com o Hexo, consulte a documentação principal fornecida abaixo:
https: // hexo.io/docs