DEV Community

Cover image for Portfolio API + GitHub Pages
Bhupesh Varshney 👾
Bhupesh Varshney 👾

Posted on • Edited on • Originally published at bhupesh-v.github.io

Portfolio API + GitHub Pages

Portfolio API + GitHub Pages = 🔥

So I accidentally figured out that we can return JSON response instead of the standard HTML when we access a GitHub Pages site.

I really liked the business card concept by Tierney Cyren

So I thought instead of creating a user card why not do some dev fun 😉 and create a REST API about me.

For example, if you do

curl bhupeshv.me/api/
Enter fullscreen mode Exit fullscreen mode

Gives the following result on the terminal

{
    "Name 😎":"Bhupesh Varshney",
    "Bio 🤗":"OpenSource Lover, Blogger & CodePervert",
    "Website 🖱":"https://bhupeshv.me/",
    "Github 💻":"https://github.com/Bhupesh-V",
    "DEV 🦄":"https://dev.to/bhupesh",
    "Twitter 🐦":"https://twitter.com/codepervert",
    "LinkedIn 📎":"https://www.linkedin.com/in/bhupesh-v/",
    "blogs":{
        "blog8":{
            "name":"Making a Simple REST API Using Django REST Framework",
            "link":"https://bhupeshv.me/simple-api-using-drf/"
        },
        "blog7":{
            "name":"Internet for Developers",
            "link":"https://bhupeshv.me/internet-for-devs/"
        },
        "blog6":{
            "name":"Portfolio API + GitHub Pages",
            "link":"https://bhupeshv.me/Portfolio-API+GitHub-Pages/"
        },
        "blog5":{
            "name":"30 Seconds of C++",
            "link":"https://bhupeshv.me/30-Seconds-of-C++/"
        },
        "blog4":{
            "name":"A Simple Scheduler in Python",
            "link":"https://bhupeshv.me/A-Simple-Scheduler-in-Python/"
        },
        "blog3":{
            "name":"Exceptions in C++",
            "link":"https://bhupeshv.me/Exceptions-in-C++/"
        },
        "blog2":{
            "name":"pipreqs - Automatically generate python dependencies",
            "link":"https://bhupeshv.me/pipreqs/"
        },
        "blog1":{
            "name":"My dev life has just started 😎👩‍💻",
            "link":"https://bhupeshv.me/My-dev-life-has-just-started/"
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

You can also test it on apitester and see that it indeed returns a JSON response, behaving like a normal REST API.
Here is another demo using HTTPie.
Do

http GET bhupeshv.me/api/
Enter fullscreen mode Exit fullscreen mode
HTTP/1.1 200 OK
Accept-Ranges: bytes
Access-Control-Allow-Origin: *
Age: 0
Cache-Control: max-age=600
Connection: keep-alive
Content-Length: 1267
Content-Type: application/json; charset=utf-8
Date: Tue, 21 May 2019 06:37:05 GMT
ETag: "5ce3999b-4f3"
Expires: Tue, 21 May 2019 06:35:10 GMT
Last-Modified: Tue, 21 May 2019 06:24:27 GMT
Server: GitHub.com
Vary: Accept-Encoding
Via: 1.1 varnish
X-Cache: MISS
X-Cache-Hits: 0
X-Fastly-Request-ID: e19833ea471f930d8ef9cfb2574ab539530b7df7
X-GitHub-Request-Id: C806:4F97:95A48F:C36F69:5CE399C6
X-Served-By: cache-bom18223-BOM
X-Timer: S1558420625.037150,VS0,VE256

{
    "Bio 🤗": "OpenSource Lover, Blogger & CodePervert",
    "DEV 🦄": "https://dev.to/bhupesh",
    "Github 💻": "https://github.com/Bhupesh-V",
    "LinkedIn 📎": "https://www.linkedin.com/in/bhupesh-v/",
    "Name 😎": "Bhupesh Varshney",
    "Twitter 🐦": "https://twitter.com/codepervert",
    "Website 🖱": "https://bhupeshv.me/",
    "blogs": {
        "blog1": {
            "link": "https://bhupeshv.me/My-dev-life-has-just-started/",
            "name": "My dev life has just started 😎👩‍💻"
        },
        "blog2": {
            "link": "https://bhupeshv.me/pipreqs/",
            "name": "pipreqs - Automatically generate python dependencies"
        },
        "blog3": {
            "link": "https://bhupeshv.me/Exceptions-in-C++/",
            "name": "Exceptions in C++"
        },
        "blog4": {
            "link": "https://bhupeshv.me/A-Simple-Scheduler-in-Python/",
            "name": "A Simple Scheduler in Python"
        },
        "blog5": {
            "link": "https://bhupeshv.me/30-Seconds-of-C++/",
            "name": "30 Seconds of C++"
        },
        "blog6":{
            "name":"Portfolio API + GitHub Pages",
            "link":"https://bhupeshv.me/Portfolio-API+GitHub-Pages/"
        },
        "blog7":{
            "name":"Internet for Developers",
            "link":"https://bhupeshv.me/internet-for-devs/"
        },
        "blog8":{
            "name":"Making a Simple REST API Using Django REST Framework",
            "link":"https://bhupeshv.me/simple-api-using-drf/"
        },
    }
}
Enter fullscreen mode Exit fullscreen mode

Tell me how ?

Here is how you create a fun static API for your portfolio on GitHub Pages:

  • Select the route, you want the users to send a GET request. For example you could choose https://yourdomain.com/about/
    Or any other route according to your choice.

  • Make sure you add a custom domain on GitHub Pages, because sending a request to https.username.github.io sounds a bit 🤷🏾‍♂️.

  • Now go & make a directory with the same name about and inside it create a new file named index.json.

  • Add the following contents in the JSON file.
{
  "Name 😎": " ",
  "Bio 🤗": " ",
  "Website 🖱": " ",
  "GitHub 💻": " ",
  "DEV 🦄": " ",
  "Twitter 🐦": " ",
  "LinkedIn 📎": " "
}
Enter fullscreen mode Exit fullscreen mode
  • Fill in the details as required or create new fields.

  • Push your changes and test it.

  • Hurray !! You got your first static API ready.
    Now go and ask your dev friends to do a curl on you 😁

Note: Do not place any other files in the same directory as the one in which your index.json file resides.
For example, if you place a README.md or index.html that will get served instead of the JSON file
.

Downsides

  • Not able to access parameters through URL ?blogs=blog1.
  • Only GET method works.
  • Data is static.

Do share once you make one for yourself 😋 or just say how did you like the post below :)

Top comments (14)

Collapse
 
thewhitewulfy profile image
Alok Prateek

Great idea! I was thinking of using it in my Jekyll blog, so like recent posts on jekyll, I can statically generate this json using liquid. A cool use case can be using the api to display most recent post on my portfolio page.

Collapse
 
bhupesh profile image
Bhupesh Varshney 👾

The idea looks cool
How would we implement it though?

Collapse
 
thewhitewulfy profile image
Alok Prateek

Use liquid syntax to create index.json

Use a js function to get last post details from api and insert the string value inside a fixed dom structure.

I could do a POC as I get free, it might clarify things.

Collapse
 
thewhitewulfy profile image
Alok Prateek • Edited

dev.to/thewhitewulfy/blog-api-on-g...

See this on how to implement what I said that day :-)

Thread Thread
 
bhupesh profile image
Bhupesh Varshney 👾

this is super nice, nice post 👍

Collapse
 
michaeltharrington profile image
Michael Tharrington • Edited

This is super cool!

Quick note though, near the top of the post you say:

"I really liked the business card concept by Tierney Cyren"

but beneath it you link to:

Thinking this is just a typo and you might've meant to give the shoutout to Conlin Durbin.

Again, this is an awesome post. 👍

Collapse
 
bhupesh profile image
Bhupesh Varshney 👾

Thanks 😙
Well it's not a typo, I was not able to find any post from Tierney Cyren
But No doubt shout out to Conlin Durbin too 😋

Collapse
 
michaeltharrington profile image
Michael Tharrington • Edited

Haha, totally my bad! I see Tierney's tweet embedded in Conlin's post now. 🙃

Collapse
 
deciduously profile image
Ben Lovy

This is a neat idea, nice work! Might take a stab at something similar, thanks for the idea.

Collapse
 
bhupesh profile image
Bhupesh Varshney 👾

Happy to help 🤗

Collapse
 
sm0ke profile image
Sm0ke

funny

Collapse
 
tttfifo profile image
Todor Todorov

I know it is an old post, but I had the possibility to look at it just now.
Really nice idea! Thumbs up!

Collapse
 
bhupesh profile image
Bhupesh Varshney 👾

Thanks :)

Collapse
 
vipin profile image
vipin-27

Great! 👍🏼