5  Developer Portfolios

Lecture Week 3

This week has no lecture slides. We discussed the flow of creating a website with Git, Quarto and GitHub pages.

You can join the Teams during the lecture (for screen sharing) here and see the recording after class either in the above teams link, or here

5.1 Exercise

Do the following:

  1. Create a new repository on GitHub called developer-portfolio or yourname.github.io (where yourname is your GitHub username).
  2. Build a website using Quarto and GitHub pages that showcases your work. Pay attention to e.g.
  • who are you
  • what do you do (e.g. expertise, service, product)
  • where people may find you (GitHub, Company page, facebook, G+, twitter, etc.)
  • accomplishments/publications/qualifications/skills etc.
  • detailed curriculum vitae
  1. Add a link to your website to the README.md file of your repository.
  2. Make your website into a GitHub template
  3. Hand in the link to your hosted personal repository as well as a link to your template on GitHub - it is a deliverable for this course. Also add a zip of the repo at the time of handing in - on your GitHub repo click the green Code button and choose Download ZIP.
Alternative

If you already know how to build a webpage with any other means, you can also use that. The goal is to have a webpage as a developer portfolio that showcases you and your work. Still, you need to hand in the link to a working web-page, a template on GitHub and an archive (on GitHub click the green code button and Download ZIP) of your site at the time of handing it in.

5.1.1 Custom domain

If you want to use a custom domain name, you need to buy one. You can do this on many websites. To use a custom domain with Github pages, you need to add a CNAME file to your repository. You can read more about this here. After addition of the CNAME, your website will be available at the custom domain. For example, where my website is available at https://gerkovink.github.io, I can also access it at https://www.gerkovink.com. Any repository converted to a GitHub pages website (such as this course webpage) will then not only be available at https://username.github.io/repositoryname, but also at and https://www.customdomain.com/repositoryname.

5.1.2 Render on push to main

If you’d like your site to render when you push changes to the main branch, while your site is deployed from the gh-pages branch, you must

  1. follow the flow outlined in the lecture
  2. create an empty gh-pages branch by running the following commands in your terminal:
Terminal
git checkout --orphan gh-pages
git reset --hard # make sure all changes are committed before running this!
git commit --allow-empty -m "Initialising gh-pages branch"
git push origin gh-pages

GitHub will automatically deploy webpages with an action. To also build your Quarto project, add the following action to a file in the path .github/workflows/publish.yml:

.github/workflows/publish.yml
on:
  workflow_dispatch:
  push:
    branches: main

name: Quarto Publish

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - name: Check out repository
        uses: actions/checkout@v4

      - name: Set up Quarto
        uses: quarto-dev/quarto-actions/setup@v2
        
      - name: Render and Publish
        uses: quarto-dev/quarto-actions/publish@v2
        with:
          target: gh-pages
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

5.2 Further reading

All details to set this up smoothly can be found in the Quarto GitHub pages documentation. More information about building websites with Quarto can be found in the Quarto websites documentation.

5.3 Other means of publishing

More routes of creating and publishing websites with GitHub pages are discussed in last year’s markup exercise. That said; Quarto is now by far the easiest means of realizing this week’s goal. That is why we only focus on Quarto in this year’s course iteration.

5.4 Safe and compliant cloud storage

If you need some secure (GDPR or HIPAA compliant) file sharing, open up a free 5GB account on Sync.com. If you use this link you’ll get a free additional 1GB - so 6GB of super-secure storage. Don’t lose your 2FA recovery keys, though!

5.5 Nothing to show for?

Have a look at Advent of Code. It is a yearly event where you can solve programming puzzles. You can use any language you like. It is a great way to learn a new language or to practice your skills. Plus you can use your solutions as a portfolio.