Crie uma conta no GitHub em https://github.com/join
Para começar precisaremos de um repositório, o repositório é a casa do nosso projeto, é dentro do repositório onde colocaremos todos os arquivos que precisamos para um projeto de software, e lá, temos todo o histórico de versões.
Com a magia do git, se precisarmos, podemos voltar para qualquer versão anterior do nosso código dentro desse respositório, basicamente uma máquina do tempo do software.
Para criar um repositório basta clicar no botão new ou novo no canto superior esquerdo da sua homepage do GitHub (https://github.com/)
Na página de criação do nosso repositório, podemos ver um campo de texto Repository name onde podemos batizar este novo projeto que estamos criando.
Também é possível colocar uma descrição legal sobre esse projeto, que deve servir para que outras pessoas possam entender sobre o que ele se trata.
Aqui, daremos um nome super especial para o repositório, chamaremos ele de seuNomeDeUsuário.github.io, é muito importante lembrar de substituir seuNomeDeUsuário pelo seu real nome de usuário do GitHub. Meu usário por exemplo é OtacilioN então devo criar meu repositório com o nome OtacilioN.github.io.
Caso você já tenha um repositório criado com esse nome, para seguirmos no workshop, chame esse repositório de portfolio, ou outro nome
Após escolher um nome pro seu repositório, colocar uma descrição, marque a opção Add a README.md file, também deixe o seu repositório como público, afinal, queremos mostrar nosso portfólio ao mundo!
Uma vez preenchido tudo, basta clicar no botão Create Repository
Uma vez criado seu repositório, você deve estar numa tela parecida com essa.
Se algo não deu certo, esse é o momento de levantar a mão e pedir ajuda
Você encontrará um ícone de edição no topo do conteúdo do seu README.md, clique neste ícone.
Abrirá uma tela de edição onde começaremos nosso site de portfólio.
Você deve ter notado que este arquivo criado termina com a extensão .md, isto porque estamos usando Markdown que é uma linguagem de marcação, assim como o HTML.
A diferença é que Markdown é pensado para que o conteúdo seja bem legível por humanos ainda no código fonte, sendo mais simples de criar textos, mas ainda ganhar poder de semântica criando títulos, parágrafos, links, imagens, listas, etc.
Então agora vamos entender um pouco da sintaxe de Markdown.
| Elemento | Sintaxe Markdown |
|---|---|
| Titulos | # h1 ## h2 ... ### h6 |
| Negrito | Texto negrito |
| Itálico | Texto itálico |
| lista ordenada | 1. Primeiro Item 2. Segundo Item 3. Terceiro Item |
| Lista nao ordenada | - Primeiro Item - Segundo Item - Terceiro Item |
| Link | [titulo](https://www.exemplo.com) |
| Imagem |  |
Vamos começar com um título pro Nosso Site, uma descrição de nós mesmos e uma lista de coisas que estamos estudando
Uma vez criado nosso conteúdo, iremos fazer nosso "commit", fazer um commit é como salvar seu progesso em um jogo, mas em vez de ser um jogo, é salvo o progresso do seu código.
Podemos dar um nome ao nosso commit e descrever o que fizemos nele.
Uma vez escrito sua mensagem de commit, basta clicar no botão verde Commit changes
Assim que realizamos o commit, uma pipeine de deploy automaticamente roda, e assim que o site está disponível temos um check verde ✔️ ao lado do commit.
Uma vez que o verde aparece, seu site já está no ar e você pode acessar-lo em SeuUserName.github.io
Na barra superior de seu repositório clique em Add File > Create new file crie um arquivo com o nome _config.yml
Neste arquivo iremos escolher um tema, vamos começar com o tema Architect, você pode ver uma lista completa de temas suportados aqui: https://pages.github.com/themes/
Para colocar o tema Architect coloque no arquivo:
remote_theme: pages-themes/[email protected]
plugins:
- jekyll-remote-theme
então clicar no botão commit changes no fim da página, uma vez a build feita, agora seu site tem um tema.
Crie uma nova seção de projetos e nela coloque uma imagem, logo, foto ou algo que descreva seu projeto, dica: Você pode hospedar suas fotos num drive publico ou imgur, ou ainda, no próprio repositório, numa pasta assets
[](link final)
Você também pode adcionar gifs e deixar tudo mais animado!
Você pode comprar um domínio, e continuar hospedando no GitHub Pages, mas em vez de usar o .github.io você pode usar .com, .com.br ou qualquer outro domínio.
Aqui está um tutorial de como configurar um domínio customizado:
https://docs.github.com/pt/pages/configuring-a-custom-domain-for-your-github-pages-site
Não! GitHub Pages hospeda qualquer site estático, basicamente se seu site ou web app é client side, é possível hospedar no GitHub, ou seja, você pode usar html, css e JS puro, ou criar seu site com React, Vue, Remix ou qualquer tecnologia que faça build do seu site ao final para ser servido com github pages.
Para usar html, css e JS puro, basta ter um arquivo index.html na raiz do projeto.
Aqui vai um tutorial de como fazer deploy de um react app no GitHub Pages:
https://rodrilima.medium.com/react-como-fazer-o-deploy-no-github-pages-87f6a6fde370