How to set up your GitHub Profile README
Tags: github, beginners, tutorial
Published: 2020-12-18 18:56:45

---
canonical_url: https://www.foteinisavvidou.codes/set-up-your-github-profile-page/
description: In this tutorial you will learn how to create a beautiful GitHub Profile page using markdown, images and custom social badges.
---

In this tutorial you will learn how to create a beautiful GitHub Profile page. All you need is a basic knowledge of markdown and a pinch of creativity.

## Instructions
Go to [github.com](https://github.com/) and sign in to your account.

### Create a new repository
**1.** Select the plus sign (+) in the upper-right corner to create a new repository.
![Create a new repository in GitHub](https://www.foteinisavvidou.codes/wp-content/uploads/2020/12/create-new-repo.png)
**2.** Type your GitHub username in the “Repository Name” field. Make sure the names of your new repository and GitHub profile match. For example, my username is sfoteini so I created a repository with the name sfoteini.
![Type the name of the new repository](https://www.foteinisavvidou.codes/wp-content/uploads/2020/12/repo-name.jpg)
**3.** Select “Public” and “Initialize this repository with a README”.
![Select “Public” and “Initialize this repository with a README”](https://www.foteinisavvidou.codes/wp-content/uploads/2020/12/repo-public-readme.jpg)
**4.** Click Create repository.
A README file with the following template will be created.
![Profile README template](https://www.foteinisavvidou.codes/wp-content/uploads/2020/12/readme-template-1024x322.png)

### Use headings, text and lists in markdown
Use the hash sign (#) to create headings. The number of hash signs determines the heading level.
```markdown
# Hi there 👋 – Level 1
## Hi there 👋 – Level 2
### Hi there 👋 – Level 3
#### Hi there 👋 – Level 4
##### Hi there 👋 – Level 5
###### Hi there 👋 – Level 6
```

For plain sentences and paragraphs, you don’t need to use specific markdown syntax.
```markdown
Hi there. This is my GitHub profile.
```

For unordered lists, use either an asterisk (*), dash (-) or plus sign (+).
```markdown
- I’m currently working on ...
- I’m currently learning ...
- I’m looking to collaborate on ...
```

For ordered lists, use numbers.
```markdown
1. I’m currently working on ...
2. I’m currently learning ...
3. I’m looking to collaborate on ...
```

### Use images
Upload your images into the same repository as your README.md file and use the following markdown syntax:
```markdown
![Profile Header Image](profile_image.jpg)
```
where `Profile Header Image` is the alt text and `profile_image.jpg` is the image that you want to show on your profile.
Alternatively, you can use the following HTML syntax:
```html
<img src="/profile_image.jpg" alt="Profile Header Image" />
```
For the profile README file, you need to use the raw image’s URL instead of the relative path. Select the image, then click the download button and copy the image’s URL at the top of the page. The result will look like this:
```markdown
![Profile Header Image](https://raw.githubusercontent.com/<OWNER>/<OWNER>/master/profile_image.jpg)
```

### Create custom social media badges
You can create a more colorful profile page by setting up your own social media badges. We are going to use [shields.io](https://shields.io/) and [Simple Icons](https://simpleicons.org/) to create them.
```html
<img src="https://img.shields.io/badge/BadgeText-HexColor?style=StyleName&logo=SimpleIconsLogo&logoColor=Color">
```
where `BadgeText` is the displayed text, `HexColor` is the bagde color, `StyleName` is the selected Shields badge style, `SimpleIconsLogo` is the logo name from Simple Icons and `Color` is the color of the logo.
Here is the code I used to create 3 social media badges.
```html
<p align="center">
  <a href="https://www.twitter.com/ClairSavvidou" target="_blank"><img src="https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white" alt="Twitter"></a>
  <a href="https://www.linkedin.com/in/foteini-savvidou" target="_blank"><img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" alt="Linkedin"></a>
  <a href="https://www.dev.to/sfoteini" target="_blank"><img src="https://img.shields.io/badge/Dev.to-0A0A0A?style=for-the-badge&logo=dev%2Eto&logoColor=white" alt="Dev.To"></a>
</p>
```

-------------
More articles: [foteinisavvidou.codes](https://www.foteinisavvidou.codes/)

Hello, my name is Foteini Savvidou and I am an Electrical and Computer Engineering student who loves writting code and creating beautiful things. I am interested in computer science, AI and especially in applications of technology in healthcare and education. I want to use technology to improve people's everyday life, and create a more sustainable 🌱, accessible and inclusive 🧑‍🤝‍🧑 world.

✨ [Blog](https://www.foteinisavvidou.codes/) | [LinkedIn](https://www.linkedin.com/in/foteini-savvidou) | [Twitter](https://www.twitter.com/ClairSavvidou) | [GitHub](https://github.com/sfoteini)