Week 14: Web design and visualization

This week is a more or less free week to discuss and work on anything from the class that we feel we want/need to go over. The current idea for the week is to go over styling for websites and polishing visualizations.

Reading

Assignment

  • Work on website project.

Activities

Workshop: Publishing your website Workshop: Designing websites

Publishing your website on GitHub pages

Setting up publish command

  1. First, make sure all changes are committed on your project.
  2. Create an empty gh-pages branch.
    1. git checkout --orphan gh-pages
    2. git reset --hard
    3. git commit --allow-empty -m "Initialising gh-pages branch"
    4. git push origin gh-pages
  3. Check Settings -> Pages for Source branch on your GitHub repository.
  4. Ignore _site/ folder in git
    1. Add /_site/ to .gitignore file.
    2. Remove any tracking of _site/ in git: git rm -r _site
  5. Publish through command line: quarto publish gh-pages

What you should be doing to make changes to your website

  1. Make the changes in RStudio.
  2. Render website on your computer to make sure everything works.
  3. git add and git commit -m changes.
  4. Push changes to GitHub main branch: git push origin main
  5. Publish changes by pushing to gh-pages branch: quarto publish gh-pages

Designing Quarto websites

The basic styling of your website is done through HTML theming.

Choose a Quarto theme

  • Quarto HTML documents are all based on Bootstrap 5.
  • Quarto provides access to 25 Bootswatch themes.
  • Change theme in _quarto.yml under format:

Basic customization

  • You can make basic changes to the theme in _quarto.yml under format:.
  • See basic customization for available options.

Customization with SCSS

Resources: Website design