DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Create your GitHub profile page in 1 minute without 1 line of code for free
Rafael Mateus
Rafael Mateus

Posted on

Create your GitHub profile page in 1 minute without 1 line of code for free

GitHub-me is the easiest way to create your profile page from
GiHub for free. 😎

All your profile information will be accessed through the public
GitHub API. πŸŽ’

So, have your GitHub registration properly filled out.
That way you don't need to make any code changes. πŸ€–

You don't need to have infrastructure costs the availability will be made by
gh-pages free of charge. πŸ€‘

You will have a link to share on your social networks with SEO's meta tags.
will also be indexed by the google search engine. πŸš€

Features

  • βœ… Show basic profile (login, name and bio)
  • βœ… Show company, location, blog and twitter
  • βœ… Number of followers
  • βœ… Count of public repos
  • βœ… Account created at
  • βœ… List of repos with the tag
  • βœ… Progressive Web App (PWA)
  • βœ… SEO's meta tags
  • βœ… Deploy using gh-pages

How to create your profile page?

To create your own profile follow the steps below.
Basically, just fork me project to your github.

Follow the steps:

  1. Create a fork
  2. Enable Github Actions
  3. Run deploy to Pages
  4. Access your profile page in https://<username>.github.io/me

Details of the steps

1. Create a fork

To create a fork of this project access
https://github.com/rafaelbmateus/me/fork
and click in "Create fork" button.

1-create-fork

2. Enable Github Actions

By default actions are not automatically enabled for forks.
Select Actions in your repository forked and click in
"I understand my workflows, go ahead and enable them".

2-enable-actions

3. Run deploy to Pages

Select "Deploy static content to Pages" Workflow,
click in "Run workflow", use workflow from Branch: main
and click in "Run workflow".

3-run-deploy

Check if deploy static content to Pages workflow
run completed successfully.

4-check-deploy

4. Access your profile page

Access your profile page
in https://<username>.github.io/me/.

Change <username> with your github user. Like: https://github.com/rafaelbmateus
the username is rafaelbmateus.

5-preview

How show the repositories?

The repositories you want to appear in your profile page's project catalog put the me tag.

You can change the tag to another one you prefer
but you will need to change a line of code
assets/js/github.js#L6.

GitHub API

The HTML fields are filled using data from github.

The endpoint used are:

Running localhost

Clone repository

git clone git@github.com:rafaelbmateus/me.git
cd me
Enter fullscreen mode Exit fullscreen mode

Build the page using:

GITHUB_USERNAME=<username> python3 builder/main.py
Enter fullscreen mode Exit fullscreen mode

Others profile pages builders

If you want something more powerful take a look at the projects:

it will probably take you more than 1 minute to deploy.

Top comments (3)

Collapse
 
cappe987 profile image
Casper

Consider making it responsive. Your demo page is basically unreadable on mobile.

Collapse
 
rafaelbmateus profile image
Rafael Mateus Author

Yeah, is the next feature. I'll try done today!
Thanks!

Collapse
 
rafaelbmateus profile image
Rafael Mateus Author

Casper, I created the pull request to improve responsive.

Could you help me with the review?

πŸ€” Did you know?

Β 
🌚 You can turn on dark mode in Settings