Criando um blog pessoal com Hexo e Github Pages

(Updated: )
, ,

Introdução

A ideia desse post é fazer um tutorial rápido para que você tenha de forma gratuita um meio de tornar seu estudo documentado e público, assim como diz no artigo “Aprenda em público”. E esse blog tem exatamente esse propósito, além de poder ajudar quem está começando, assim como eu.

Meu ambiente de desenvolvimento:

​ Sistema operacional: Zorin OS

​ NodeJs: v14.15.4

​ NPM: 6.14.11

Requerimentos

Você vai precisar ter instalado o NodeJS, o NPM e o git

O git você consegue instalar com o comando:

1
sudo apt install git-all

Agora o nodeJS e o NPM recomendo que sigam esse tutorial ou digitando no terminal:

1
2
3
4
5
6
7
8
9
10
# Usando Ubuntu
$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
$ sudo apt-get install -y nodejs

# Usando Debian, como root
$ curl -sL https://deb.nodesource.com/setup_14.x | bash -
$ apt-get install -y nodejs

# NPM
$ sudo apt install npm

Para ter certeza de que foi instalado, digite o comando:

1
2
3
4
$ node -v && npm -v
# saída:
v14.15.4
6.14.11

Instalando o Hexo

Para instalar o Hexo usaremos o npm, abra o terminal e digite:

1
npm install -g hexo-cli

Criando uma página com o Github Pages

Acesse o Github e clique no + no lado direito do site:

github

E depois em New repository

O nome do repositório deve ser username.github.io onde username é seu nome de usuário no github. Como exemplo vou usar o meu que é devhector, o repositório deve ser devhector.github.io.

Criando um projeto para seu Github Pages

Vamos criar um projeto com o Hexo, para entre na pasta que deseja salvar, abra o teminal no local e digite:

1
hexo init devhector.github.io

Substitua o devhector pelo seu usuário github.

Entre na pasta do projeto criada:

1
cd devhector.github.io

E depois:

1
npm install

Levantando o server localmente

Digite: 

1
hexo server

acesse no navegador:

http://localhost:4000/

Agora seu blog está funcionando, mas localmente.

Colocando as informações do seu blog

Na pasta raiz vamos editar o _config.yml, eu usarei o micro, mas você pode usar o editor de texto que quiser como: nano, vim, gedit...

1
2
3
4
5
6
7
8
9
10
11
12
13
$ sudo micro _config.yml

-------------------------------------------------------------

# Site
title: Hector Fernandes
subtitle: ''
description: 'Estudante de Eng. de Computação na UFPEL 💻. 
Esse blog é uma forma de documentar publicamente os meus estudos.'
keywords:
author: Hector Fernandes
language: pt-br
timezone: America/Sao_Paulo

Edite da forma que achar melhor. Veja a documentação oficial

Informando seu repositório Github

Primeiro vamos instalar o pacote hexo-deployer-git , digite:

1
npm install hexo-deployer-git --save

e edite o _config.yml, vamos até a parte onde está escrito deploy:

1
2
3
4
5
6
7
8
$ sudo micro _config.yml

-------------------------------------------------------------

deploy:
  type: git
  repo: [email protected]:devhector/devhector.github.io.git
  branch: master

onde repo: você vai colocar o mesmo de quando usa o git clone

Veja a documentação oficial

Monitorando os arquivos mudados

Abra uma nova aba do terminal na pasta raiz devhecto.github.io :

1
hexo generate --watch

Isso vai fazer com que o Hexo monitore os arquivos mudados, você pode se aprofundar mais aqui.

Criando um post

Para criar um post, digite no terminal:

1
hexo new "título do post"

e para editar:

1
cd source/_posts/

e editamos o arquivo titulo-do-post.md criado, usando o markdown.

Fazendo o deploy do blog

Para finalizar, vamos fazer o deploy, para isso digite:

1
2
$ hexo clean
$ hexo deploy

Documentação oficial

Geralmente para a nossa página ir para o ar na primeira vez, demora em média 30 min. Mas você pode acessar devhector.github.io para testar se o blog já está no ar. (lembrando de sempre substituir o devhector com o seu usuário).

No próximo post, irei mostrar como é simples mudar o tema usando o Hexo.

Inicio