Criando Readme incríveis! 📖
Tags: github, git, braziliandevs
Published: 2021-05-07 01:44:40

![Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dfoo4at1lywvj3pijnxs.gif)
Você sabe criar arquivos readme para seus repositórios de uma forma atrativa e informativa, ou apenas deixa o [readme padrão do React](https://github.com/facebook/create-react-app/tree/master/packages/cra-template/template) (just a joke) ?

> Hey, eu atualizei esta postagem no [meu blog pessoal, veja agora!](https://www.tuliocalil.com.br/post/criando-readme-incriveis)

Nesse post vamos ver alguns exemplos e dicas de como deixar nosso arquivo de readme super legal e organizado, então vamos por a mão na massa.md. 

 * [ Badges](#badges)  
 * [ Logo](#logo)  
 * [ Titulo e descrição](#titulo-e-descri%C3%A7%C3%A3o)  
 * [ Gif ou imagem demo](#gif-ou-imagem-demo)  
 * [ Sessões](#sess%C3%B5es)  
 * [ Sobre](#sobre)  
 * [ Como utilizar](#como-utilizar)  
 * [ Instalar](#instalar)  
 * [ Como rodar e como utilizar](#como-rodar-e-como-utilizar)  
 * [ Demo](#demo)  
 * [ Campos do Github](#campos-do-github)  
 * [ Utilize todo o poder do Markdown](#utilize-todo-o-poder-do-markdown)  
 * [ Conclusão](#conclus%C3%A3o) 

###### generated with [Summaryze Forem 🌱](https://summaryze-forem.vercel.app/)

## Badges
![Github Badges](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmeglsi08f0b593k1io5.png)
Badges são super legais para adicionar no nosso arquivo, além de dar um overview super rápido e deixar o projeto bem bonito.
Algumas que eu gosto muito de utilizar são as de tecnologia, dizendo algum framework/lib que utilizei, status da pipeline, stars e licença.
Alguns exemplos legais:
<img alt="Type-graphql" src="https://img.shields.io/badge/-TypeGraphQL-%23C04392?&style=for-the-badge"/>
<img alt="Next JS" src="https://img.shields.io/badge/nextjs-%23000000.svg?&style=for-the-badge&logo=next.js&logoColor=white"/>
<img alt="Firebase" src="https://img.shields.io/badge/firebase-%23039BE5.svg?&style=for-the-badge&logo=firebase"/>
Você pode criar suas próprias badges utilizando o [shields.io](https://shields.io/) ou pode encontrar varias prontas, inclusive nesse repositório aqui: [https://github.com/Ileriayo/markdown-badges](https://github.com/Ileriayo/markdown-badges).

## Logo
Criar uma logo ou utilizar algo pra representar é algo super legal e que da um toque super bonito pra o repo, é uma dica bem opcional, mas que faz muita diferença.
Aqui também é legal implementar versões de imagem para cada tema (light ou dark) caso seu repositório esteja no Github, você pode fazer isso [vendo este post](https://dev.to/arnavkr/using-darklight-mode-specific-images-in-github-markdown-3iln)
Uma dica pra quem não tem tanta afinidade com design é utilizar serviços de criação de logo online, como o [Launchaco](https://www.launchaco.com/logo/) ou encontrar uma logo open source aqui: [https://openlogos.org/](https://openlogos.org/).
{% github https://github.com/tuliocll/elixir-http-request %}

## Titulo e descrição
![Titulo e descrição](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyep52sph2l8ulyivff4.png)
Esse é super importante, lembre sempre de adicionar o titulo e a descrição do seu projeto de forma simples e bem direta.
Você pode criar o titulo e logo abaixo a descrição, ou criar uma sessão para a descrição depois do titulo.

Utilize as tags do markdown para isso:
```md
# Meu projeto
Descrição do meu projeto...
```
## Gif ou imagem demo
É super legal quando a gente entra em um repo e tem logo de cara uma prévia do que esperamos ver, adicionar uma imagem ou um vídeo para isso é uma dica super valida.
{% github tuliocll/summaryze-forem %}

## Sessões
Eu gosto de dividir o projeto em varias sessões: sobre, como funciona, como instalar etc...
#### Sobre
Gosto de criar uma sessão de sobre e detalhar mais sobre o projeto, o que me motivou, como ele foi feito etc.
#### Como utilizar
É legal uma parte falando como utilizar o projeto (caso seja necessário).
#### Instalar
Uma sessão mostrando comando a comando como instalar o projeto também é super valido.
#### Como rodar e como utilizar 
Sempre deixo os comandos de como rodar em cada ambiente(caso seja o caso), prontos para serem copiados e colados.
![Sessões](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jp2b7qlackf4zjbflhqz.png)

## Demo
![Demo de projeto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4j0lyli3stbnmoh52oun.png)
Caso seja possível, é sempre legal deixar um link de uma demo online, dessa forma, se for um projeto pessoal ou algum estudo que você fez, quem estiver vendo conseguirá ter a experiência de uso sem precisar fazer todo o processo de instalação.

## Campos do Github
Preencha campos específicos do github, como: about e as tag.
Ajuda seu repositório ser encontrado facilmente e deixa mais organizado também.
![Github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kaeoc7p7jnncn64vnni.png)

## Utilize todo o poder do Markdown
![Tabelas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91wqym60u9v38ixsn67v.png)
O Markdown nos oferece coisas incríveis, assim como no html conseguimos criar links, tabelas, títulos e varias outras coisas. Eu recomendo duas coisas aqui nesse ponto, a primeira é que você [leia essa documentação](https://github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet) sobre as tags do markdown e a segunda é um [editor em markdown online](https://stackedit.io/app#) com varias dessas tags em forma de um editor de texto.

## Bonus
Uma ferramenta online super legal e que conheci recentemente (depois de escrever esse post) foi o [Readme.so](https://readme.so/pt/editor). Você consegue criar readmes de forma mais visual e com uma padronização excelente!

## Conclusão
Vou deixar aqui alguns repositórios meus que tem uns readme que eu gosto bastante e caso vocês queiram se inspirar.
Conhece algum repo que tem um readme muito legal ? Comenta pra gente!

{% github tuliocll/rn-darkmode %}

{% github tuliocll/sagres-bot %}

{% github tuliocll/todo-google-chrome %}