Criando meu portfólio no github.io em 10 passos
Utilizando o github.io para criação do site pessoal
Github é uma ótima ferramenta para você compartilhar código e páginas, em um só lugar. Hoje eu decidi fazer a minha página no domínio github.io e compartilhar em 10 passos como você poderá fazer o mesmo.
Os passos aqui listados serão de forma simples e prática, espero que no final vocês tenham resultados bons ao passarem o link do seu site pessoal.
Ferramentas/Linguagem que irei utilizar
- Sublime
- Github
- CSS
- HTML
- Bootstrap
Bootstrap
Basicamente o bootstrap é um framework web responsivo com código-fonte aberto para desenvolvimento de componentes de interface e front-end para sites e aplicações web usando HTML, CSS e JavaScript.
Para entender um pouco mais o Bootstrap segue o link com detalhes https://getbootstrap.com/
Download de um template
Template escolhido para criação dessa página — https://startbootstrap.com/template-overviews/resume/
Mais opções se preferir — https://startbootstrap.com/themes/
Faça o download do template que preferir, após é necessário que a pasta seja descompactada.
Você poderá editar em seu editor de texto favorito (usarei o sublime) os arquivos “index.html” e o css “css/resume.min.css”
Passos para edição do site pessoal:
1 — Abra o index.html e o css/resume.min.css no editor
2 — Abra o index.html no seu navegador
3 — Edite a linha 66 troque a palavra Clarence para João e salve o index.html.
4 — Atualize sua página no navegador index.html
Quis mostrar aqui que qualquer alteração que fizer no seu arquivo index.html ele refletirá na sua página web.
5 — Editando de forma personalizada o texto que estará nessa página
Se quiser o código alterado desse index.html, ele se encontra aqui.
6 — Alterando o resume.min.css, nesse arquivo estão as configurações de cores, links e layout da página. Alterar a linha 163 de #bd5d38 para #495057 e salvar.
7 — Atualizar o página index.html e ver o resultado.
8 — Alterando a foto do lado esquerdo. Adicionar a sua foto na pasta /img com o nome profile.jpg e visualizar o resultado.
9 — Coloque sua pasta em um novo projeto no github. Crie um novo repositório e faça o upload dos arquivos. Criei o meu projeto com o nome portfólio — https://github.com/lopesdiego12/portfolio
10 — Vá até o menu configurações do seu projeto no github e visualize a opção GitHub Pages.
Se no seu repositório não apresentar a mesma tela clique no dropbox masterbranch e altere de none para master branch.
Agora é só acessar diretamente o link — https://lopesdiego12.github.io/portfolio/
