How to create your website for free with GitHub?Pages [en-US and pt-BR]

(pt-BR version is available on page #2 | Updated on October 20, 2021)

I?was always curious about GitHub Pages, but I used to think that it was something hard to use or that was needed to write code using Markdown language, which has some limitations. But I discovered last week that I was completely wrong.

GitHub Pages is a free service from GitHub that allows you to host personal or corporate web pages. Of course, it's not as powerful as AWS services, so you won't be able to host large web systems like e-commerce or ERPs on GitHub Pages.

In this post, I’ll show you how I created my own website using GitHub Pages. Before moving on, this is my Personal Website: https://leogomesdev.github.io. I would also like to give credits to this video of Joshua Fluke on YouTube, where I learned, last week, how to use the GitHub Pages. Please, like the video and subscribe to his YouTube channel ;)

Well, first of all, you need to have a GitHub account and sign in using your credentials. If you don’t have one, sign up for free at https://github.com

1. Using your machine, you need to create a simple web page, using HTML, CSS, and Javascript. Be sure it runs perfectly in your browser and use the "Toggle device toolbar" to simulate smartphones and other viewing scales;

In this step, you should be very creative, and I encourage you to create a beautiful site. To help you, it's possible to use templates available on Google, they are very powerful and easy to use. In my project, I picked one template from HTML5 UP!, but you can use any template source. Other tools that you could use:

• Font Awesome: the web's most popular icon set and toolkit
• Unsplash: gallery photos for everyone
• Favicon Generator: creates favicon.ico image for websites
• Built With Jigsaw: a showcase of web sites built with Jigsaw

Once your site is running perfectly, let's upload it:

2. Go to Repositories > New. The repository name must be `${username}.github.io`. In my case, my username is leogomesdev, so I created with the name leogomesdev.github.io. I recommend setting the MIT license. Click in the Create repository button;

3. Go to Add file > Upload files, select and send your website content (index.html, favicon.ico, and all sub-folders or files). Then use the Commit button and wait for the processing;

4. Go to Settings > GitHub Pages to check the status of the publishing.

Okay, now your website should be working!

Do you need to update any part of the site? It's very simple! Just send a new commit or pull request to the master branch and it will be updated automatically.

Oh... I recommend editing the about section of your project and create your first release.

Remembering that comments or feedback are welcome. And in case of doubts feel free to send me a message. :)

Update (Jan./2021): Custom Domain

I just configured a custom domain to my website, check it out: https://leogomes.dev

You can do the same by following the instructions of this article: "How to setup Google Domain for GitHub pages". Reach out to me in case of any doubt, it would be a pleasure to help you and visit your website.

Thanks my friend Charles Busatta Cunico for this tip!

[pt-BR version]

Como criar seu próprio site gratuitamente com o GitHub Pages

Sempre tive curiosidade sobre o GitHub Pages, mas eu pensava que era algo difícil de utilizar ou que era necessário escrever código usando a linguagem Markdown, que tem algumas limita??es. Mas eu descobri na semana passada que eu estava completamente errado.

GitHub Pages é um servi?o gratuito do GitHub que permite hospedar páginas da Web pessoais ou corporativas. Claro que n?o é t?o poderoso quanto os servi?os da AWS, ent?o você n?o poderá hospedar grandes sistemas web como e-commerces ou ERPs no GitHub Pages.

Nesse post, vou mostrar como criei meu próprio site usando o GitHub Pages. Antes de prosseguir, este é o meu site pessoal: https://leogomesdev.github.io. Gostaria também de dar créditos a este vídeo de Joshua Fluke no YouTube, onde aprendi, na semana passada, a utilizar o GitHub Pages. Por favor, curta o vídeo e se inscreva no canal dele no YouTube ;)

Em primeiro lugar, você precisa ter uma conta no GitHub e fazer o login usando suas credenciais. Se você n?o possui uma conta, inscreva-se gratuitamente em https://github.com

1. Com o seu computador, você deve criar uma página web simples, usando HTML, CSS e Javascript. Certifique-se de que ela funciona perfeitamente no seu navegador e use a "Toggle device toolbar" para simular smartphones e outras escalas de visualiza??o;

Nesta etapa, você deve ser bem criativo e eu te encorajo a criar um belo site. Para te ajudar, é possível usar qualquer template disponível no Google, que s?o poderosos e fáceis de usar. Em meu projeto, eu escolhi um modelo do site HTML5 UP !, mas você pode usar qualquer template de qualquer site. Outras ferramentas que você pode utilizar:

• Font Awesome: o conjunto de ícones e kit de ferramentas mais populares da web
• Unsplash: galeria de fotos diversas
• Favicon Generator: criar imagem favicon.ico para sites
• Built With Jigsaw: uma cole??o de sites criados com o Jigsaw

Assim que seu site estiver funcionando perfeitamente, vamos enviá-lo ao GitHub:

2. Vá para Repositories > New. O nome do repositório deve ser `${username}.github.io`. No meu caso, meu nome de usuário é leogomesdev, ent?o criei com o nome leogomesdev.github.io. Eu recomendo definir a licen?a MIT. Clique no bot?o Create repository;

3. Vá para Add file > Upload files, selecione e envie o conteúdo do seu site (index.html, favicon.ico e todas as subpastas ou arquivos). Em seguida, use o bot?o de commit e aguarde o processamento;

4. Vá para Settings > GitHub Pages para verificar o status da publica??o.

Pronto, agora seu site deve estar funcionando!

Precisa atualizar alguma parte do site? é bem simples! Basta enviar um novo commit ou pull request para o branch master e ele será atualizado automaticamente.

Ah... Recomendo que você edite a sess?o about do seu projeto e crie sua primeira release.

Lembrando que comentário ou feedback s?o bem-vindos. E em caso de dúvidas, sinta-se a vontade para me enviar uma mensagem. :)

Update (Jan./2021): Domínio customizado

Configurei uma URL própria para o meu site, confira:?https://leogomes.dev

Você pode fazer o mesmo seguindo as instru??es deste artigo: "How to setup Google Domain for GitHub pages". Em caso de dúvidas, entre em contato comigo, será um prazer te ajudar e visitar o seu site.

Obrigado meu amigo Charles Busatta Cunico por essa dica!