To read more articles like this, visit my blog
The first impression is the last. Make it count!
Your GitHub profile is your most important profile as a developer. It’s the first and sometimes the only profile that is listed on your resume.
Having something exceptional on your profile can create a positive impact on other's minds. It’s very, very easy to do as well. So, why not?
Today, we will see how you can create a beautiful landing page for your GitHub profile. It will take just 5 minutes to create!
Let’s begin!
Step 1: Create a Github Profile
I am pretty sure that you already have a GitHub profile. If not, then maybe this article is not for you.
I have created a fresh profile on GitHub for this article. If you go to the profile page of your profile, you will see something like this.
This is pretty straightforward. You have your personal information on the left and your contributions on the right.
Step 2: Create a new Repository
Now, create a new repository and give it the same name as your username.
The username of the profile that we are using is medium-showcase . So, we are creating a repository named medium-showcase.
And look at the bottom of your page where it says that this repository is a special repository and should be kept public.
Check the box below to create a README.md file. Whatever you put on this file will be visible on your profile.
By default, it has a text named, “Hi there! 👋.” So, if you open your profile now, it will look something like this.
Let’s update our Readme.MD file to create a beautiful profile.
Step 3: Update Readme
Now, go to that repository and edit the file. First, let’s copy-paste the following code directly and see the result.
### Hello World 👋
I am a fullstack software engineer from bangladesh
- 🔭 Working on multiple frontend and backend project using React and Nodejs
- 🌱 Learning design patterns in depth
<br>
## Connect with me
[<img align="left" alt="linked-in" src="[https://img.shields.io/badge/linkedin-%230077B5.svg?&style=for-the-badge&logo=linkedin&logoColor=white](https://img.shields.io/badge/linkedin-%230077B5.svg?&style=for-the-badge&logo=linkedin&logoColor=white)" />]([https://www.linkedin.com/in/mohammad-faisal-2665b5134](https://www.linkedin.com/in/mohammad-faisal-2665b5134))
[<img align="left" alt="medium" src="[https://img.shields.io/badge/medium-%2312100E.svg?&style=for-the-badge&logo=medium&logoColor=white](https://img.shields.io/badge/medium-%2312100E.svg?&style=for-the-badge&logo=medium&logoColor=white)" />]([https://56faisal.medium.com/](https://56faisal.medium.com/))
[<img align="left" alt="stack-overflow" src="[https://img.shields.io/badge/stack%20overflow-FE7A16?logo=stack-overflow&logoColor=white&style=for-the-badge](https://img.shields.io/badge/stack%20overflow-FE7A16?logo=stack-overflow&logoColor=white&style=for-the-badge)" />]([https://stackoverflow.com/users/5379437/mohammad-faisal](https://stackoverflow.com/users/5379437/mohammad-faisal))
[<img align="left" alt="facebook" src="[https://img.shields.io/badge/facebook-%231877F2.svg?&style=for-the-badge&logo=facebook&logoColor=white](https://img.shields.io/badge/facebook-%231877F2.svg?&style=for-the-badge&logo=facebook&logoColor=white)" />]([https://www.facebook.com/56faisal/](https://www.facebook.com/56faisal/))
[<img align="left" alt="twitter" src="[https://img.shields.io/badge/twitter-%231DA1F2.svg?&style=for-the-badge&logo=twitter&logoColor=white](https://img.shields.io/badge/twitter-%231DA1F2.svg?&style=for-the-badge&logo=twitter&logoColor=white)" />]([https://twitter.com/Mohamma88766694](https://twitter.com/Mohamma88766694))
<br>
<br>
## Expertise
<img align="left" alt="react" src="[https://img.shields.io/badge/react%20-%2320232a.svg?&style=for-the-badge&logo=react&logoColor=%2361DAFB](https://img.shields.io/badge/react%20-%2320232a.svg?&style=for-the-badge&logo=react&logoColor=%2361DAFB)" />
<img align="left" alt="nodejs" src="[https://img.shields.io/badge/node.js%20-%2343853D.svg?&style=for-the-badge&logo=node.js&logoColor=white](https://img.shields.io/badge/node.js%20-%2343853D.svg?&style=for-the-badge&logo=node.js&logoColor=white)" />
<img align="left" alt="aws" src="[https://img.shields.io/badge/Amazon%20AWS-%23232F3E?logo=amazon-aws&logoColor=white&style=for-the-badge](https://img.shields.io/badge/Amazon%20AWS-%23232F3E?logo=amazon-aws&logoColor=white&style=for-the-badge)" />
<img align="left" alt="medium" src="[https://img.shields.io/badge/postgres-%23316192.svg?&style=for-the-badge&logo=postgresql&logoColor=white](https://img.shields.io/badge/postgres-%23316192.svg?&style=for-the-badge&logo=postgresql&logoColor=white)" />
<img align="left" alt="android" src="[https://img.shields.io/badge/Android-3DDC84?logo=android&logoColor=white&style=for-the-badge](https://img.shields.io/badge/Android-3DDC84?logo=android&logoColor=white&style=for-the-badge)" />
<img align="left" alt="spring" src="[https://img.shields.io/badge/spring%20-%236DB33F.svg?&style=for-the-badge&logo=spring&logoColor=white](https://img.shields.io/badge/spring%20-%236DB33F.svg?&style=for-the-badge&logo=spring&logoColor=white)" />
<br>
<br>
Now, open up your profile and see the magic. Your profile looks like this now.
Wow, awesome! But we still have some work to do.
Step 4: Customize
I have added two sections here — Connect with me and Expertise . If you look closely at the icons under Connect with me, there are links provided to each social media platform.
[<img align="left" alt="linked-in" src="[https://img.shields.io/badge/linkedin-%230077B5.svg?&style=for-the-badge&logo=linkedin&logoColor=white](https://img.shields.io/badge/linkedin-%230077B5.svg?&style=for-the-badge&logo=linkedin&logoColor=white)" />]([https://www.linkedin.com/in/mohammad-faisal-2665b5134](https://www.linkedin.com/in/mohammad-faisal-2665b5134)) -> see here
So, you need to **replace these links with your own profile link.**
Also, if you want to add more icons and links to your profile, then go to the https://img.shields.io and even create your own badges there!
Bonus: Get your Medium Stories
Are you a blogger and like to have your stories on your profile too? Well, that would be great. But do we need to manually update our profile every time we publish a new story on Medium?
Of course not. We are developers, and automation is our best friend. We will create a cron job that will be run by github-actions.
If you don’t know anything about github-actions , then don’t worry! This is a piece of code that will be run automatically by Github for us.
Head over to the Readme.md file that you just created and add the following section at the bottom of the file.
## Blog posts
<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->
This will act as a placeholder for the links to your blogs.
Next Step: Add the GitHub Action
Now, we will create a new action for your repository. There is an awesome action template that can be used directly. This action will fetch the blogs from your Medium profile and put that on your GitHub profile page.
Go to the Actions tab and click on the set up a workflow yourself button.
You will be presented with a screen that has a code editor. Add the following code there.
name: Latest blog post workflow
on:
schedule: # Run workflow automatically
- cron: '0 0 * * *' # Runs every day at 12 am
workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the Github Actions Workflow page directly
jobs:
update-readme-with-blog:
name: Update this repo's README with latest blog posts
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: gautamkrishnar/blog-post-workflow@master
with:
feed_list: "https://medium.com/feed/@56faisal"
At the bottom of the file, you can see a link. This is the link to my profile on Medium. Change that to include your own profile.
Then commit the file using the right button, and you are almost done.
Currently, this is set to run every midnight. You can change it as per your wish. To learn about cron jobs, you can go here. If you want to run the action now and see the results, go to the Actions tab again and click on the Run Workflow button.
The workflow will run, and your Medium stories will appear on your GitHub profile. Open your profile to see the magic!
Conclusion
There are lots of other ways to make a beautiful GitHub profile page. I have kept it simple and functional. Let me know if you liked it.
Here is my actual profile if you are interested in that.
Have a great day!
Resources:
Get in touch with me via LinkedIn or my Personal Website.
Top comments (4)
I saw a lot of developers have their own profile in github, but somehow, I've never given it a try yet. As you read this post, I decided to do this and I've created my github profile now. Thank you for the post 👍
Glad I could help!
Thanks for sharing @mohammadfaisal ,
Its super simple to follow 😊
Thank you!