Building an online portfolio has become essential for professionals across fields — from journalists and technical writers to software developers and UX designers — to effectively showcase their work and skills.
This blog walks you through the process of creating portfolios on Clippings.me, GitHub, GitLab, or Netlify for free.
clippings.me is a platform for journalists, writers, and freelancers. It requires no coding or app deployment experience. The drawback is the templates are very simple and you cannot customize much.
To create a free portfolio on clippings.me:
www.clippings.me/<username>. For example, this is my short portfolio on clippings.me.If you are not very technical, this is an excellent platform to showcase your work. If you are a technical writer, I don’t recommend that you use clippings.me as the only platform for your portfolio. It is just too simple to demonstrate your tech skills. As a technical writer, your demonstrated proficiency in leveraging version control systems like GitHub and GitLab and efficiently deploying applications on platforms such as Netlify demonstrates your strong technical skills and quick learning capability.
GitHub and GitLab are two popular platforms for hosting and collaborating on Git repositories for source code management. Both have very similar functionality and workflows. GitHub is owned by Microsoft and seems to be more popular.
Netlify is a platform that automates the build, deployment, and hosting of web projects. Netlify can ingest projects with source code stored on GitHub or GitLab.
For personal projects, you can host them for free on all the three platforms.
To create and host a portfolio, you typically go through the following steps:
Before you decide where to host the portfolio, first choose what SSG you want to use for creating your portfolio. SSGs provide templates that allow you to create consistent layouts and designs across your website. These templates can include dynamic elements, such as navigation menus or sidebars, that are generated at build time. Jekyll and Hugo are two popular open source SSGs. Jekyll is Ruby-based while Hugo is Go-based. For a comparison of the two, see Hugo vs. Jekyll.
After you have decided on an SSG, follow the official documentation to install the related software on your computer. For Jekyll, you can follow the Jekyll QuickStart Guide. For Hugo, follow the Hugo QuickStart Guide. If you have never used SSGs before, you should create a dummy site following the QuickStart instructions to get some basic understandings how SSGs work.
After choosing an SSG, you need to pick a theme. You can find Jekyll themes on jekyllthemes.org. For Hugo themes, go to themes.gohugo.io.
When choosing a theme, consider the following:
Now you need to decide where to host your portfolio. Both GitHub and GitLab can host your source code, provide Continuous Integration/Continuous Deployment (CI/CD) tools to manage your portfolio and deploy the website.
For Netlify, typically you still need to have your source code hosted on GitHub or GitLab. Instead of using GitHub or GitLab’s own deployment and hosting mechanisms, you use Netlify to manage the deployment and provide the hosting service. Personally I find Netlify’s deployment and hosting mechanism a bit easier to use compared with the corresponding GitHub or GitLab services.
The configuration and deployment steps vary depending on the platform you choose.
https://<username>.github.io, where <username> is your GitHub username. I have a Jekyll-based GitHub Pages on taolicd.github.io.https://<username>.gitlab.io/<projectname>, where <username> is your GitLab username and <projectname> is your portfolio project name. I have a Hugo-based GitLab Pages on tao_li.gitlab.io/hugo.https://<your-chosen-name>.netlify.app, where the <your-chosen-name> is from one of the available names you get when creating the project. During your portfolio project creation, Netlify displays a list of suggested names you can choose from. Some are free and some you need to pay and the price is listed next to the name. I deployed a Hugo-based project on Netlify for free on taoli.netlify.app.To configure and deploy a GitHub Pages site, follow these steps described in the official GitHub Pages documentation.
After you’ve enabled GitHub Pages and made any desired customizations, scroll back up to the GitHub Pages section in the repository settings. You’ll find a message indicating the URL where your site is published (for example, “Your site is published at https:/</>username>.github.io"). Click on the provided URL to access your GitHub Pages site.
If you prefer to watch a YouTube video, try How to Make a Data Science Portfolio With GitHub Pages video.
GitLab Pages are very similar to GitHub Pages. Visit the official GitLab Pages documentation to get started.
To watch a YouTube video, try How to make a website with Hugo and Gitlab.
Netlify makes deploying and managing a web project really easy. Hugo provides excellent documentation to explain how to host your site on Netlify with continuous deployment. See Hugo Host on Netlify official documentation.
After you’ve successfully created your portfolio and deployed to GitHub, GitLab, or Netlify, you can continue to add, modify, and publish content to your site by making changes to the repository and committing them.
If you don’t like the free URL name that GitHub, GitLab, or Netlify provides, you can buy a custom domain name from a domain registry company such as GoDaddy or Amazon Route 53. The cost may range from a few dollars to hundreds of dollars per year depending on the popularity of the domain name you choose.
After you purchase the domain name, you then configure your portfolio to use this new custom domain name.