Creating a straight-forward 'starting-out' portfolio and blog with GitHub pages and Dev.to
Tags: tutorial, github, career
Published: 2020-05-18 20:44:24

Having a portfolio is important, there is no better proof of one's ability than actual evidence of their work. A quick glance at that your portfolio can tell a lot about you. 

My web-page was viewed 90% of the time when added as part of my resume, so there is clear potential to make a good first impression.

#Why GitHub Pages?

A big plus is that the ***cost of hosting is a whopping £0!!!*** Also, the nicely readable domain `github.io` helps recruiters input that address. (Provided you don't have an obscure *GitHub* username that becomes the sub-domain).

I also felt that having just *GitHub* repositories as a portfolio, with its simple design, would not help me to stand out to potential employers or, at the very least, get the attention of recruitment agencies. 

Other solutions would offer me the design flexibility but at the same time a lot of functionality I did not need. 

Creating a full blown web-page felt like an overkill. Even though I created a CMS solely for this purpose, by the time I was half-done with it I grew demotivated in continuing.

I thought of using *GitHub pages* for this - it issues a sub-domain for each user, making it feel more professional, however, their templates felt too bleak and did not really fit my use case. 

**I needed a one-stop solution that would include all of my social media and dynamically link to a blog and projects.**


#How can it be done?

In the age of API it is quite easy to make use of things, really avoiding the need of a powerful backend of your own (provided we do not need authentication).

There is no need to re-invent the wheel, *Dev.to* offers a straight forward API for getting all the articles of a user. A call to `https://dev.to/api/articles?username=equalcoding` gives all the information necessary to reference and link user's articles at *Dev.to*

*GitHub* offers similar functionality for repositories on this endpoint `https://api.github.com/users/equalcoding/repos` 

Just with these two API calls above we have the potential to create a simple landing page for a portfolio that will include a blog and a reference to the resources at *GitHub* and *Dev.to*.


*GitHub Pages* uses [Jekyll](https://jekyllrb.com/) that allows to create static pages. By using some JavaScript to make http calls these pages can become somewhat dynamic.

#How can you do it?

Create a new git repository with your username prepended to `.github.io`, e.g., `equalcoding.github.io`. This will generate the page at that exact URL.

After creating a new git repository, if you go to settings you will find a section about GitHub Pages, where you will be able to create your GitHub page.

When creating GitHub Pages GitHub will ask you to choose a template and, once that is done, it will generate an `index.md` file. This file can be replaced with a `index.html` file if you wish to use html in your project (you will have to if you want to make the API calls).

This can be used as the basis for the page, from here you can implement your own css or js, or even external .css and .js libraries.

In my project @ [equalcoding.github.io](https://equalcoding.github.io/) ([repo](https://github.com/equalcoding/equalcoding.github.io)) API queries to *Dev.to* and *GitHub* are used to display blog posts and GitHub repositories. Every time I add anything to *Dev.to*, it will automatically be displayed in the web-page and the same will happen when creating a new *GitHub* repository.

You are more than welcome to clone or fork my project - there is configuration in the `main.js` file that allows you to point everything to your own accounts. The instructions with configuration description can be found at the bottom of [the repository page](https://github.com/equalcoding/equalcoding.github.io).


My page is made to be very minimalist and simple, as that appeals to me and I believe that it works best for 'quick glance' situations. However, there are many other templates available for every taste at [https://jamstackthemes.dev/ssg/jekyll/](https://jamstackthemes.dev/ssg/jekyll/). Some also include links to their git repos. Or have a shot at making your own - here is a good [resource](https://help.github.com/en/enterprise/2.14/user/articles/setting-up-your-github-pages-site-locally-with-jekyll) on how to get Jekyll running locally to get you started with the development.