Criando seu site com GitHub pages sem código
Tags: sitepessoal, githubpages, react, brasil
Published: 2021-02-02 15:50:38

---
title: Criando seu site com GitHub pages sem código
published: true
description: Usando um projeto template em react, crie e publique seu website pessoal de forma rápida usando github pages
tags: SitePessoal,GitHubPages,react,brasil
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/3jhuk1gjv8y8mbssiu7t.png
---

Desde que entrei no curso técnico, nos idos de 2010, eu sempre quis ter meu próprio site. Cheguei a criar algumas versões em HTML/CSS puro e no que mais tarde seria chamado de JS Vanilla, eu acho esse nome muito bom e engraçado. Mas na época, ter que comprar uma VPC, configurar DNS, Apache e etc era um mundo de coisa que sempre assustou o menino que só estudava Delphi e VB na escola.

Felizmente a tecnologia de hosts para site de texto puro e aplicações simples evoluiu muito desde essa época (Na minha cabeça são alguns anos, mas já fazem 11). Existem várias soluções hoje de click-and-host onde basicamente você não precisa saber de (quase) nada para deixar seu site disponível. Algumas das opções que eu conheço e que já utilizei vão do [S3 bucket da amazon](https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html) a [Netlify](https://netlify.com).

Mas caso você não tenha paciência para ainda assim lidar com algumas configurações como DNS e build, uma outra solução que vem se tornando bem popular são as [GitHub Pages](https://pages.github.com/), onde você não precisa de (quase) nenhuma configuração. 

Pensando nessa modalidade, eu decidi criar um WebSite builder que ao mesmo tempo que entrega a facilidade de criar um site dinâmico e pronto para produção, tem o código fonte embutido para te dar toda a liberdade de modificar e usar sua criatividade da melhor forma possível. O template padrão gerado para o site, é o mesmo do meu [site pessoal](https://matheusmonte.me)

![Captura de tela da página inicial do meu blog gerado pelo template builder mencionado no tutorial](https://dev-to-uploads.s3.amazonaws.com/i/dtej7zedxi25eslqmzdr.png)  


Caso tenha lido até aqui, você deve realmente está interessado, então chega de lero lero e vamos para o que você irá precisar:

- Uma conta github
- node e react instalados no seu computador
- git instalado e funcional

O primeiro passo é bem simples, em um browser com sua conta github, acesse https://github.com/matheusmonte/PersonalWebSiteBuilder e utilize o botão "Use this template", a descrição do botão pode variar de acordo com sua configuração de idioma, mas em geral é esse verde da figura abaixo.

![Captura de tela com os botões disponíveis](https://dev-to-uploads.s3.amazonaws.com/i/65ny9trgo2dbqp5reyis.png)

Após acionar esse botão, você será levado a tela de criação de repositório, aqui é muito importante que você crie um repositório com a seguinte estrutura:

```
<seu-usuario-github>.github.io
```

Essa estrutura vai garantir que esse repositório seja usado para criar a sua página dentro do domínio github.io . No caso, para o meu usuário o nome do repositório deveria ser:

```
matheusmonte.github.io
```

Passada essa etapa, você vai ter um repositório novo em sua conta com vários arquivos, precisamos baixar esse conteúdo, para isso, você pode clonar o repositório usando esse comando

```
git clone <url do repositorio aqui>
```

e depois desse comando completo, basta entrar na pasta criada

```
cd <pasta com mesmo nome do repositorio>
```

você vai deve ser 3 coisas dentro dessa pasta:

- LICENSE
- READ.md
- pasta personal_site_src

Caso você já tenha utilizado o template anteriormente e possui mais arquivos do que somente os listados acima, pode usar esse comando para resetar o seu site, lembrando que caso você não execute o build novamente antes de fazer o commit das suas alterações, seu site não será exibido.

```
rm -rf asset-* logo* service-worker.js robots.txt static/ favicon.ico index.html precache-manifest.* manifest.json
```

### Modificando seu site

Para modificar os dados que vem junto com o template e adicionar os seus detalhes, você precisa modificar o arquivo 

```
personal_site_src/src/config.js 
```

Ao abrir esse arquivo, você encontrará 2 exports de objectos JS que descrevem os dados do profile e os labels e links das redes sociais:

```
export const PROFILE = {
    image : "profile.jpg",
    text : {
        introduce : "HI, I'm Matheus",
        subintroduce : "Software Engineer based in Dublin",
        bio : "I'm current Software Development Engineer at Amazon Web Services, " +
        "I love to talk about JavaScript stuff, but I code on Java, C# and Python too. Open source lover, I contributed " +
        "to some interesting projects, check on my github for more details. Seahawks (NFL) fan, Flamengo (Soccer/football) supporter and GSW (NBA) nation."
    }
};

export const SOCIAL_MEDIA = [
    {title : "Github", link : "https://github.com/matheusmonte"},
    {title : "Linkedin", link : "https://linkedin.com/in/matheus-monte"},
    {title : "Twitter", link : "https://twitter.com/mcsmonte"},
    {title : "YouTube", link : "https://youtube.com/matheusmonte"},
    {title : "SpeakerDeck", link : "https://speakerdeck.com/matheusmonte"},
    {title : "Email", link : "mailto:matheusmonte@protonmail.com"}
]

```

Modifique as informações e salve o arquivo.

Antes de iniciar o processo de build, lembre-se de colocar a sua foto de perfil, para isso, entre na pasta

```
personal_site_src/src/resources
```
apague o arquivo profile.jpg e copie a sua foto para dentro dessa pasta, depois disso, basta renomear para o mesmo nome do arquivo antigo, ou seja, profile.jpg

Feito esses passos, você está pronta para buildar seu próprio website.

### Gerando seus arquivos estáticos

Nesse passo, você vai precisar rodar os seguintes comandos em ordem:

- Gerar arquivos estáticos
caso você use yarn:
```
yarn build && mv build/* ../
```
caso use npm:
```
npm build && mv build/* ../
```

- Gerar commit com seu novo website
```
git add --all && git commit -sm "meu site V1.0"
```

- Mandar suas alterações para o repositório remoto
```
git push
```

e então basta acessar a sua url com o mesmo nome do repositório no sue browser de preferência e seu site novinho em folha vai está lá te esperando.

```
<seu-usuario-github>.github.io
```

Lembre que na próxima vez, antes de gerar seus arquivos estáticos, você precisa remover os anteriores com esse comando:

```
rm -rf asset-* logo* service-worker.js robots.txt static/ favicon.ico index.html precache-manifest.* manifest.json
```

É isso galera, espero que tenham curtido e estou aberto a sugestões do que queiram ver por aqui.