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 namedindex.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 :)
Top comments (14)
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.
The idea looks cool
How would we implement it though?
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.
dev.to/thewhitewulfy/blog-api-on-g...
See this on how to implement what I said that day :-)
this is super nice, nice post 👍
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:
Setting up a `npx username` card!
Conlin Durbin ・ Dec 26 '18 ・ 3 min read
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. 🙃
This is a neat idea, nice work! Might take a stab at something similar, thanks for the idea.
Happy to help 🤗
funny
I know it is an old post, but I had the possibility to look at it just now.
Really nice idea! Thumbs up!
Thanks :)
Great! 👍🏼