DEV Community

Cover image for Craft Your GitHub Profile Page in 60 Seconds with Zero Code, Absolutely Free
Rafael Mateus
Rafael Mateus

Posted on

Craft Your GitHub Profile Page in 60 Seconds with Zero Code, Absolutely Free

Project 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 (0)