week 5.qmd

# Developer Portfolios {#sec-wk5}


::: callout-tip
## 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](https://teams.microsoft.com/l/meetup-join/19%3ameeting_NjMwYmE2OTItZTJhMS00MzljLWE4OWMtZjA4ZGU0NGQwMzk1%40thread.v2/0?context=%7b%22Tid%22%3a%22d72758a0-a446-4e0f-a0aa-4bf95a4a10e7%22%2c%22Oid%22%3a%22cc7d7fcd-73aa-4668-936a-2ca38cace0f3%22%7d) and see the recording after class either in the above teams link, or [here](https://www.dropbox.com/scl/fi/l34q4hu4i4x66t4586k3b/wk5_recording.mp4?rlkey=sofbtgfo93zg3qd70imk5pwsq&st=u20v5b8w&dl=0)
:::

## 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

3. Add a link to your website to the `README.md` file of your repository.
4. Make your website into a `GitHub` template
5. 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`. 

::: callout-warning
### 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. 
:::

### 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](https://docs.github.com/en/github/working-with-github-pages/managing-a-custom-domain-for-your-github-pages-site). 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](https://gerkovink.github.io), I can also access it at [https://www.gerkovink.com](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`. 

### 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:

``` {.bash filename="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`: 

``` {.yaml filename=".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 }}
```


## Further reading

All details to set this up smoothly can be found in the [Quarto GitHub pages documentation](https://quarto.org/docs/publishing/github-pages.html). More information about building websites with `Quarto` can be found in the [Quarto websites documentation](https://quarto.org/docs/websites/).

## Other means of publishing
More routes of creating and publishing websites with GitHub pages are discussed in [last year's markup exercise](https://www.gerkovink.com/oldmarkup/#week-6). 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.

## 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](https://www.sync.com/?_sync_refer=d609f9a50). If you use [this link](https://www.sync.com/?_sync_refer=d609f9a50) you'll get a free additional 1GB - so 6GB of super-secure storage. Don't lose your 2FA recovery keys, though!

## Nothing to show for?
Have a look at [Advent of Code](https://adventofcode.com). 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.