DEV Community

Cover image for Criando seu site com GitHub pages sem código
Matheus Monte
Matheus Monte

Posted on

Criando seu site com GitHub pages sem código

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 a Netlify.

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, 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

Captura de tela da página inicial do meu blog gerado pelo template builder mencionado no tutorial

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

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

e depois desse comando completo, basta entrar na pasta criada

cd <pasta com mesmo nome do repositorio>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

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"}
]

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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/* ../
Enter fullscreen mode Exit fullscreen mode

caso use npm:

npm build && mv build/* ../
Enter fullscreen mode Exit fullscreen mode
  • Gerar commit com seu novo website
git add --all && git commit -sm "meu site V1.0"
Enter fullscreen mode Exit fullscreen mode
  • Mandar suas alterações para o repositório remoto
git push
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)