REHeader - GitHub Profile README Header Image Generator

The Gallery
1

Project URL: https://reheader.glitch.me
Star it on GitHub: https://github.com/khalby786/reheader/

REHeader

GitHub Profile README Header Image Generator

That’s a very long name. By the time I finish reading the title, a whole day will be over.

Generate beautiful header images for your GitHub profile READMEs.

GitHub now allows us to add READMEs to our profile describing ourselves but what if we need a header image in the README with your name and a small greeting? This generator comes to your rescue and saves the day (well, not a big thing and not very useful and it doesn’t really save the day :shrug:)

GitHub Profile README Header Image Generator - you shouldn't be seeing this text
GitHub Profile README Header Image Generator - you shouldn't be seeing this text800×454

Once you generate the image and upload it somewhere (like a CDN), you can use it in your README like this:

Another image which is a use case of this generator - again you shouldn't be seeing this
Another image which is a use case of this generator - again you shouldn't be seeing this1261×527

Instructions for use

  1. Go to https://reheader.glitch.me, scroll all the way down and log in with GitHub.

  2. Once you login with GitHub, you’ll be redirected to a page where you are able to customise your own header image.

  3. Then, click on Generate Image and the generated image will appear. Below the image, you’ll see a yellow-coloured box :sweat_smile: that says ‘Add to username/username’. For this to work, you will have to create a repo and give it the name of your username. (Like khalby786/khalby786).

  4. Click on ‘Add to username/username’. Then navigate towards your profile README repo and you will see a new file created with the name of header.png.

  5. Now to use it in your README! You could use /header.png in the README file (with Markdown) and it will work just fine in the preview of the README in the repo page but when you navigate back to your user page at https://github.com/username, you’ll see a weird image which does not look anything like the header you have designed.

    Some image
    Some image1241×502

    It turns out to be some other image under the same file name and route.

    To solve this, navigate to the header.png file in the repo that you’ve stored it. Then, right click on the image and copy its URL. Then go back to your README and add in the URL you just copied as the source of the header image.

    At least you don’t need to worry about hosting now!

Note that username is your GitHub username.

This is literally something I created in 1 day with Vue, so you’re sure to find a lot of bugs and bad code (and code practises), make sure to report them here. I also aim to make the code better and also more readable.

New features are being added whenever I can, make sure to check 'em out.

12 Likes
2

@khalby786 it says project not found

edit: link is fixed

3

Hehe, thanks for letting me know, I’ve fixed it!

1 Like
4

your welcome @khalby786

1 Like
5

Thats really cool! Thanks!

1 Like
6

Woah this is great! Hope there’s custom fonts on the future updates you release! Really promising.

2 Likes
7

Pretty cool! Can’t wait to see future updates.

1 Like
9

Looks awesome! May use! Would be cool if you hosted the images on a CDN so we can just stick the code in. :slight_smile:

1 Like
10

the server is on glitch so every time someone viewed your profile it would ping your project. so we have a github pinging service? I don’t remeber github having a image proxy though

1 Like
11

Right now, you have to download the image, if I understand right. That’s why I suggested making a CDN (maybe on another provider) so he can host them not us :slight_smile:

2 Likes
12

You can upload it to github and use theirs

1 Like
13

Just upload the image into the repo and copy the link

1 Like
14

I made this

image
image1000×300 11.3 KB

my sense of humor is weird today

3 Likes
15

Thanks for all your great feedback! Next up, I’m going to add custom fonts as @ElectricReality has suggested and bunch of other features. I will also look for options to host the images in the same project or automatically upload it to a CDN.

Peace! :v:

16

I see a whole lot of new jokes coming up with this generator… :joy::joy::slightly_smiling_face:

17

This is so cool! Hours of fun here:

download
download1000×300 7.19 KB

1 Like
18

Glad to see that y’all are liking it!

3 Likes
19

I have found a way to host these images, although it’s not very automatic.

  1. Once you generate an image, right click on the image and save it.

  2. Go to https://ghreadmeheaderimg.glitch.me and upload the image that you saved.

  3. Make sure to copy the link provided once you’ve uploaded the image there and then you can happily use it in your README!

https://ghreadmeheaderimg.glitch.me is a remix of the ~image-hosting project. I aim to make this a completely automatic process in the future (probably with the use of POST requests).

Peace out! :v:

1 Like
20

Also, GitHub user @Akshay090 has submitted a pull request (which I have merged) which fixes some CSS bugs and auto updates the preview while changing colors, thanks for the contribution!

21

again, this would be a much better way.

22

Hmmm what if you make the background change like a rainbow and make a gif

1 Like
23

Interesting idea…

24

Yessss, you have given me an idea! And I’m halfway done implementing it. Includes logging in with GitHub to access and edit repos (the README repo) using the GitHub API. Writing part is good but problem is that it is an image (see https://github.com/khalby786/khalby786/blob/master/header.png). Thank you so much for writing that post!

25

Yesss, it works! See https://github.com/khalby786/khalby786/blob/master/header.png!

26

Looooooots of changes:

  • Renamed it as REHeader (you can pronounce it however you want) because I’m tired of saying GitHub Profile README Header Image Generator every time.

  • You need to login with GitHub for everything to work now.

  • Proper instructions for proper usage to ensure proper and better results:

    1. Go to https://reheader.glitch.me, scroll all the way down and log in with GitHub.

    2. Once you login with GitHub, you’ll be redirected to a page where you are able to customise your own header image.

    3. Then, click on Generate Image and the generated image will appear. Below the image, you’ll see a yellow-coloured box :sweat_smile: that says ‘Add to username/username’. For this to work, you will have to create a repo and give it the name of your username. (Like khalby786/khalby786).

    4. Click on ‘Add to username/username’. Then navigate towards your profile README repo and you will see a new file created with the name of header.png.

    5. Now to use it in your README! You could use /header.png in the README file (with Markdown) and it will work just fine in the preview of the README in the repo page but when you navigate back to your user page at https://github.com/username, you’ll see a weird image which does not look anything like the header you have designed.

      Some image
      Some image1241×502

      It turns out to be some other image under the same file name and route.

      To solve this, navigate to the header.png file in the repo that you’ve stored it. Then, right click on the image and copy its URL. Then go back to your README and add in the URL you just copied as the source of the header image.

      At least you don’t need to worry about hosting now!

      Note that username is your GitHub username.

Sorry for the very complex instructions.

1 Like
27

A great tool for internet ads, and “billboards”

image
image1000×300 12.8 KB

4 Likes
28

lol