Como eu fiz meu primeiro portfólio

Esta é uma descrição bastante detalhada de como eu fiz o que foi o meu primeiro portfólio, este é um post que foi publicado nele e agora que ele não existe mais achei interessante migrar para cá.

Motivação

Como desenvolvedor é importante possuir um website pessoal para publicação de trabalhos e projetos interessantes para que outros desenvolvedores, potenciais empregadores e clientes possam se inspirar ou checar a compatibilidade com um projeto.

No mundo de desenvolvimento é muito comum ter dúvidas sobre tecnologias e problemas a serem resolvidos, é sempre um alívio encontrar um post de alguém que já teve o mesmo problema e conseguiu resolver ou uma descrição prática do uso de alguma tecnologia interessante, pra que isso seja possível é necessário que alguém publique esses posts e toda a comunidade tem algo a oferecer nesse campo. A criação de um arquivo pessoal também me atrai muito pensando que ele poderá me ser útil no futuro, e se vai ser útil pra mim pode ser útil pra mais alguém.

Ferramentas utilizadas

ReactJS

O ReactJS ou apenas React é "uma biblioteca javascript para criar interfaces de usuário"[1]. Com ela é possível criar o front-end de uma aplicação web de forma simples, pode ser portada para outras plataformas de forma simples por conta do React Native, que utiliza estruturas muito parecidas. Existem diversos componentes que podem ser instalados e utilizados dentro do projeto, como o react-icons e react-gh-pages, que foram utilizados neste projeto.

Github Pages

O Github possui uma solução bem simples de ser utilizada para a hospedagem gratuita de páginas estáticas [2], a partir de um repositório github existente é possível habilitar a função nas configurações do repositório criar uma página HTML e rapidamente a página estará no ar em um domínio característico pessoal, mas também é possível vincular um domínio próprio. Também é possível criar uma página pessoal de forma equivalente, mas o nome do repositório deve seguir um padrão específico.

Metodogia

O projeto foi desenvolvido utilizando o Ubuntu 19.10, portanto todos os exemplos de instalação e comandos serão feitos nesse contexto, podendo haver diferenças em outros sistemas.

Requisitos

Git

sudo apt install git

Caso seja o primeiro acesso será necessário configurar o git:

git config --global user.name "abraao"
git config --global user.email [email protected]

React

O React tem como requisitos o Node e npm, que podem ser baixados no site oficial, é recomendável utilizar a versão LTS atualizada.

Utilizando o gerenciador de versões asdf:[5][6]

asdf plugin-add nodejs https://github.com/asdf-vm/asdf-nodejs.git
bash ~/.asdf/plugins/nodejs/bin/import-release-team-keyring
asdf plugin install nodejs 12.16.1

asdf global nodejs 12.16.1

asdf reshim

Para a criação do projeto react instalei o pacote create-react-app:

npm i -g create-react-app

Início do projeto

Criei um repositório vazio no github com o meu nome de usuário seguido pelo domínio do github (abraaom.github.io) seguindo as instruções disponíveis no site oficial. [2]

Clonei o repositório utilizando o comando:

git clone https://github.com/AbraaoM/abraaom.github.io.git

Criei um projeto react dentro da pasta clonada do github:

create-react-app .

Publicação no gh-pages

É necessário instalar no projeto um componente que irá fazer a publicação do projeto no github pages, que não possui suporte nativo ao react.

npm i react-gh-pages --save-dev

Também foi necessário inserir algumas linhas de configuração no arquivo package.json:

No início do arquivo:

"homepage": "http://abraaom.github.io/react-gh-pages"

Na seção scripts:

"predeploy": "npm run build",
"deploy": "gh-pages -d build"

Para publicar o projeto é necessário apenas o seguinte comando:

npm run deploy

Depois desse passos, já deve existir um novo branch (gh-pages) no repositório github, como se trata de um site pessoal ele ainda não está publicado, porque as configurações devem ser feitas na branch master, basta criar uma nova branch vazia, nomeá-la de "master" e fazer um merge entre os dois branchs, em alguns segundos o "hello world" padrão do react deve ser publicado e poderá ser acessado pelo domínio abraaom.github.io.

Criação do site

Para criar o site foram utilizados ícones que pertencem a biblioteca de componentes react-icons, que disponibiliza ícones de diversos pacotes conhecidos de forma simplificada.

npm i react-icons

Para a criação de menus responsivos e aproveitamento de classes utilizei a biblioteca que interliga de forma simplificada o projeto ao Bootstrap 4, react-bootstrap.

npm install react-bootstrap bootstrap

Com este pacote instalado é possível utilizar o bootstrap diretamente dentro do JSX importando classes e utilizando tags, mas também é possível utilizar os componentes presentes na documentação do bootstrap 4.

Para fazer as rotas entre as páginas do site utilizei o componente react-router-dom.

npm i react-router-dom

Por meio de um arquivo routes gerencio todas as rotas dentro do projeto. Normalmente de usa a classe BrowserRouter para se fazer esse gerenciamento, entretanto o react-gh-pages não lida bem com está classe, para contornar o problema utilizei a classe HashRouter, que apresenta praticamente o mesmo resultado.

Publicação do site

Depois de tudo pronto, basta utilizar o comando:

npm run deploy

Ir até o github e fazer o merge da nova branch gh-pages na master, em poucos segundos a página deve ser publicada no domínio abraaom.github.io.

Domínio próprio

Com o domínio comprado é necessário a configuração de DNS:

NOME	TIPO	VALOR
@	A	185.199.108.153
@	A	185.199.109.153
@	A	185.199.110.153
@	A	185.199.111.153
www	CNAME	abraaom.github.com

A forma como esta configuração irá variar a depender do local de compra do domínio, como comprei este na hostgator o procedimento é enviar um chamado por meio do suporte requisitando a configuração seguindo um modelo disponibilizado. Os domínios variarão, mas os IPs são padrão do github pages.

Agora dentro do repositório, na branch master, é necessário criar um arquivo nomeado CNAME que contêm o domínio próprio (abraaomoreira.com), se tudo tiver corrido bem e os prazos de alteração do DNS já tiverem sido cumpridos em alguns minutos o site será exibido no novo domínio.

Resultados

O site foi pensado para ser o mais simples e claro possível, tanto para facilitar e agilizar o desenvolvimento, sem que haja perda na harmonia visual.

Apresentação

Esta página contêm uma breve apresentação sobre o dono do site com as principais informações de contato e conhecimentos.

Mais sobre

Esta página apresenta informações mais detalhadas sobre o dono so site, incluindo trajetória acadêmica.

Lista de projetos

Esta página apresenta uma listagem cronológica estática de páginas de projetos realizados, foi feita uma modelagem de post para cada linguagem de programação facilitando a publicação.

Projeto

Cada projeto possui uma página detalhando os principais processos utilizados para o desenvolvimento e o seu funcionamento, as páginas possuem estilização comum.