loading...
Cover image for Portfolio API + GitHub Pages

Portfolio API + GitHub Pages

bhupesh profile image ๐”น๐•™๐•ฆ๐•ก๐•–๐•ค๐•™ ๐•๐•’๐•ฃ๐•ค๐•™๐•Ÿ๐•–๐•ช ๐Ÿ‘พ Updated on ใƒป3 min read

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/

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/"
        }
    }
}

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/
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/"
        },
    }
}

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 ๐Ÿ“Ž": " "
}
  • 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 :)

Posted on by:

Discussion

markdown guide
 

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.

 
 

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.

 
 

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. ๐Ÿ‘

 

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 ๐Ÿ˜‹

 

Haha, totally my bad! I see Tierney's tweet embedded in Conlin's post now. ๐Ÿ™ƒ