_quarto.yml
project:
type: website
output-dir: docs
website:
title: "My website title"
navbar:
left:
- href: index.qmd
text: Home
# - about.qmd
# ~ additional metadata excluded for brevity ~
Art by Allison Horst
Anticipated deliverable(s)
By the end of today’s workshop, you should have:
- the scaffolding of a basic Quarto website built and deployed using GitHub Pages
- a neatly-arranged landing page with your professional headshot and your chosen bio
Learning objectives
By the end of today’s workshop, you should be able to:
- create a Quarto website from scratch
- understand how to navigate the structure of a Quarto website, including how to add, rearrange and edit pages
- preview a site to view iterative changes, build a site in preparation for (re)deployment, and publish a site using GitHub Pages
Pre-workshop Prep
A. Install software / Create accounts
MEDS students should already have the following installed / created from summer session (but it’s worth double-checking!):
B. Gather materials to add to your website’s landing page
During this session, you’ll have the opportunity to add some personal information to your website’s landing page. It’ll help to have an idea of what you might want to include (at least as a starting point – your website’s content will most certainly evolve over time). Consider the following before attending the workshop:
- Have your professional headshot handy. Your Bren photo is a great option here! Save your photo to your Desktop (or somewhere you can easily find again) for now.
- Consider which landing page template to use. We’ll be applying one of Quarto’s five available built-in templates when we create our website’s landing page. Take a peek at the template previews and identify which one(s) you like most (e.g. I’m currently a fan of
jolla, but usedtrestlesfor a long while). Consider how you’d like to arrange your personal bio / info given the layout of your top choice template. - Draft a personal bio or tagline for your landing page. I recommend something that’s different than your Bren bio – a shorter, catchier one that’s infused with a bit more of your personality – though you may certainly consider reusing parts of your Bren bio (taglines are great here too!). Consider the tips and examples in the dropdown, below. Save your text in a place you can quickly copy from during class (e.g. your personal branding guide document!).
- Gather your important public profile links. Your personal website is an excellent place to link out to your other public profiles in one, organized place (again, your personal branding guide is a great place to keep these). Bookmark / save the links you’d like to include (e.g. LinkedIn, GitHub, even your preferred email address)
Workshop Materials
| Content Type | Materials | Notes |
|---|---|---|
| Instructional Slides | GitHub Portfolio Slides | These slides will be helpful to come back to ask you continue to create more repos and grow your Github portfolio. |
| Instructional document | Quarto website instructions | We’ll walk through the steps of building and deploying our personal websites together in class, but you can find step-by-step instructions in this document should you need to reference them at any point |
What should I continue working on?
- Revisit & seek feedback on your personal bio. Does your landing page bio fit your personal brand? Consider what information you include and your tone – does it make sense to revise your bio to better fit your brand? Consider if your chosen template suits your needs, or if a different layout might work better. Share your bio with friends, family, a Career Team member, etc. and ask for their thoughts / feedback. You should also revisit your bio regularly (at least once a year) to make sure the content is still relevant and reflects your professional and personal identity.
- Consider editing or adding additional pages. Your website scaffolding includes an “about” page where you may consider adding a longer-form biography or information. You may also decide to add additional pages, as needed.
- Hide any pages that aren’t “complete.” Want to include an “about” page (e.g. like mine) but don’t quite have the content sorted out yet? It’s best to hide this until you’re ready to share something that’s fairly polished. Comment out the necessary pages in
_quarto.yml(see example below), then rebuild your site and push to GitHub. Note that while you can do this for almost all in-progess pages, you must keepindex.qmd“live” (i.e. don’t comment it out).