This series of articles will show you how to quickly and freely deploy a personal portfolio website with a blog.
At the end of this tutorial, you will know how to build and host your own Jekyll blog on GitHub Pages, how to create new pages or blog posts, and how to customize them.
We will also cover more advanced topics like adding a comment system directly in our code using Staticman and integrating free privacy-friendly analytics using Umami.
I divided this tutorial into several parts:
- Introduction <- you are here
- Setting Up
- Create Content
- Customize Display
- Commenting System - Part 1
- Commenting System - Part 2
- Analytics
Foreword
When I started this blog, one piece of advice made a lot of sense for a developer wanting to start a blog: Even though you are a developer, don’t lose your time building your blog, focus on writing content and publish it on any blogging platform.
I am totally in agreement with this advice. It is too easy for us to spend a lot of time creating a blog from scratch, missing the main point: a blog is about what you have to say. Spending your time to develop your blog is just disguised procrastination.
But the “create your own blog” team had a point though: creating your blog allows you to own your content.
I eventually went for a trade-off between these two approaches: setting my own blog very quickly using GitHub Pages while republishing my content on dev.to, which allows me to reach a broader audience.
After deploying my blog on GitHub Pages, I realized it was also a perfect solution to host a portfolio. GitHub is a natural place to showcase your work as a developer, and this will be a big plus for recruiters or clients if you are a freelancer.
So even if the blogging part does not appeal to you, you still might be interested in following this tutorial.
Why Github Pages?
There are many solutions to create your blog or portfolio, and I am far from trying them all.
Using Github Pages is not the perfect solution, but it has some noticeable pros for developers.
First, you are probably already quite familiar with the use of Git and GitHub. The fact that all your content will be in a Git folder is lovely and provides versioning for your articles and pages.
It also makes sense to have a website link to your GitHub account where you centralize all your development-related content: blog articles, portfolio, side projects, and so on. You can see this as your personal showcase.
And last but not least, deploying and hosting your website on GitHub Pages is really easy and totally free!
How will it work?
In this tutorial, we will use a static site generator named Jekyll. Jekyll is the framework used by GitHub to power GitHub Pages, which gives us the significant advantage of having GitHub building our pages without needing to do anything.
Jekyll builds HTML pages from markdown documents, which is excellent as this is the standard used by many blogging platforms and tools. Once you add an article in a markdown format, pushing it to your deployment branch will update your website.
What are the cons?
There is no perfect solution to build a website, and it is essential to know the limitation of your stack when choosing it.
As a static site generator, Jekyll will build all pages of our website at deployment. This is nice as it provides a fast navigation experience, compared to a website using a back-end for which pages would be build when the user navigates the website.
But it also means that our pages will not be dynamic, with no interactivity with a database. Of course, you can still add some interactivity using javascript and AJAX calls to a service, but it means you will need a separated back-end for this.
Hosting a Jekyll website on GitHub Pages is probably the easiest way, but it also comes with a significant drawback: the limited list of plugins that you can use. You can find the (small) list of available plugins here.
Ready to start?
Now that we have covered what we will achieve in this tutorial, it is time to start the work and set up our project.
Top comments (0)