Creating a straight-forward 'starting-out' portfolio and blog with GitHub pages and Dev.to

Mon, 18 May 2020 20:44:24 +0000

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 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 (repo) 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.

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/. Some also include links to their git repos. Or have a shot at making your own - here is a good resource on how to get Jekyll running locally to get you started with the development.

Example article

Sun, 17 May 2020 00:40:59 +0000

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt consectetur nibh, vulputate aliquam nulla posuere et. Fusce dolor velit, vehicula sed lorem vel, accumsan efficitur nisi. Cras diam eros, finibus a ex et, egestas ultrices lectus. Nulla a metus imperdiet lacus egestas gravida vel in odio. Morbi auctor quis tellus et rutrum. Vivamus pretium leo libero, dignissim aliquet lectus egestas eget. Pellentesque eget consectetur ligula. Quisque vel lacinia lectus. Aliquam erat volutpat.

Morbi interdum risus dolor, sed ultrices nunc faucibus sit amet. Vestibulum nec luctus nibh. Nullam iaculis, libero eget blandit tincidunt, orci turpis luctus lectus, id ultrices nibh enim sit amet elit. Aliquam ornare mauris augue, a congue massa tincidunt eget. Praesent augue nibh, auctor id faucibus faucibus, ultrices ut augue. Morbi sagittis mauris sed facilisis euismod. Sed scelerisque cursus diam eget interdum. Etiam facilisis elit mollis orci tristique, vel ultricies nulla molestie. Aenean nec dolor et leo venenatis consequat in sollicitudin sapien. Aliquam eget auctor erat. Nulla diam purus, blandit ac dolor quis, finibus scelerisque tellus. Donec nisl nibh, viverra sit amet venenatis et, bibendum et tellus. Phasellus eget placerat ipsum, vitae malesuada odio. Ut fringilla ultricies diam, a blandit mi. Nulla fermentum fermentum vehicula. Nulla facilisi.

Etiam mattis est eget odio finibus finibus. Vivamus convallis sagittis placerat. Mauris dignissim magna nisl, non aliquam ex efficitur eu. Maecenas nec vestibulum diam. Etiam quis lorem eu metus fringilla rutrum ut non arcu. Sed tellus libero, vehicula sed dui non, feugiat mattis ligula. Integer eu tortor purus.

Ut non gravida urna. Proin in ante vitae arcu venenatis cursus a ut erat. Maecenas lobortis lacinia diam, a sodales nisi gravida ut. Fusce finibus, ante sed sodales placerat, purus dui feugiat erat, eu luctus mauris nibh tristique orci. Vestibulum rhoncus porta hendrerit. Vestibulum nec tempus arcu, a tempus orci. Nulla placerat dolor eget ante faucibus efficitur. In pellentesque, enim id malesuada accumsan, ligula sapien rutrum nunc, eu lacinia magna odio sed ante. Vivamus posuere mattis vehicula. Fusce faucibus nisl vitae pharetra tincidunt. Fusce posuere posuere ipsum, nec viverra neque congue vitae. Nulla scelerisque, lectus aliquet blandit ultricies, erat leo finibus elit, id pulvinar enim dui congue ante. Pellentesque maximus, leo pharetra convallis fermentum, sem nibh auctor ante, et gravida quam nunc eu neque. Integer finibus rhoncus malesuada. Pellentesque fermentum aliquam massa, sit amet dapibus leo eleifend vel.

Sed efficitur varius erat at semper. In hac habitasse platea dictumst. Donec vitae lectus nec mauris tristique luctus. Nulla nec sodales quam, in dictum ligula. Aenean ultrices sem maximus condimentum pharetra. In mattis accumsan justo pulvinar posuere. Maecenas dignissim ipsum vitae mattis aliquam. Duis a gravida lectus, eu rhoncus ex. Phasellus auctor tellus sed molestie porta. Etiam mattis lacus urna, sed aliquet tortor hendrerit at. Nunc ut ornare nunc, ac vestibulum lacus. Sed a accumsan ligula. Etiam aliquet ultricies ligula eget elementum. Suspendisse orci est, vestibulum vitae nisl at, commodo viverra nibh.

DEV Community: ☆

Creating a straight-forward 'starting-out' portfolio and blog with GitHub pages and Dev.to

Why GitHub Pages?

How can it be done?

How can you do it?

Example article