Posit Open Source
Resources

How to Build a Data Science Portfolio Website with Python & Quarto!

Learn how to build and deploy a professional data portfolio website using Quarto and Python! This comprehensive tutorial covers everything from creating a basic website structure to adding navigation, custom themes, and interactive elements like dashboards and slideshows. By the end, you'll know how to showcase your data science projects on your own custom domain using either Posit Connect Cloud or Netlify for deployment. Quarto Crash Course Video: https://youtu.be/_VKxTPWDhA4?si=1xoYNeZMy2SDvwFO Resources: - Read the Quarto Docs: https://quarto.org/docs/websites/ - Check out the website! https://quartoisfun.com - Link to Code (Starter): https://github.com/KeithGalli/quarto-portfolio/tree/starter - Link to Code (Finished): https://github.com/KeithGalli/quarto-portfolio Video by @KeithGalli Video Timeline! - 0:00 - Video Overview & Topics Covered - 2:22 - Getting Started Building Websites with Quarto & Python - 12:46 - Adding a Sidebar with Navigation to Your Website - 16:15 - Building a Data Portfolio of Our Past Work - 18:44 - Choosing a Custom Website Theme - 21:29 - Adding Many Pages & Sections to Our Website 28:38 - Adding Social Media Links (with Icons) to Your Site (GitHub, LinkedIn, YouTube, etc.) - 29:50 - Adding More Sections to Our Site & Linking to Specific Pages - 31:32 - Adding a Navbar Menu with Clickable Links to Our Website - 33:30 - Adding Custom Branding and Logo Favicons & Images (_brand.yml) - 40:25 - Deploying Our Website with Posit Connect Cloud - 48:21 - Deploying to Your Own Custom Domain (Netlify) #pythoncontent

Feb 7, 2025
52 min
Data Science Python Data Visualization Data Viz Technology Coding Connect Serious Data Science Dplyr Statistics Open Source Oss

image: thumbnail.jpg

Transcript#

This transcript was generated automatically and may contain errors.

Hey what's up everyone and welcome back to another video. So for the past couple of months we've done a few different Python and Quarto-based tutorials. We started with a Quarto crash course which covered kind of everything from the basics to some more advanced features, you know, sprinkling a little bit of everything in between. And then we had a couple different tutorials on more advanced concepts like parameterized reporting, converting Jupyter notebooks into nice polished HTML reports, etc. In this video we're going to tie everything that we've done in previous YouTube videos together with a nice looking website like the one you see on the screen.

So this is actually not only, you know, built with Quarto and Python but we can deploy it to a web domain of our choice. So I picked QuartoIsFun.com and so basically with this website we have all sorts of cool things. We got like a toggle menu here that has all the different assets that we built in our previous videos. And if I click on any of these pages, like let's say Quarto crash for example, it has a kind of about page and then we can kind of get into different details of things that we built in that tutorial. So here's a dashboard. I guess some of the theming made this a little hard to read but like we can basically show off all of this different type of analysis that we've done.

Show off another dashboard. You can show off the slideshow that was included in the last video. All built with Python and Quarto. So we'll start with the basics of how to build just a simple simple website with Quarto and Python. Then we'll slowly progress, see how we can add sidebars like this, see we can add menus like this, add links over here, add tools like GitHub links, YouTube links, LinkedIn links, a search bar so I can look up like dashboards and find specific stuff related to dashboards in this series and more.

I think it's a pretty cool way to tie everything together so I'm excited to share it with all of you. Link to the code is in the description. I've also linked the Quarto crash course video. That's probably a good place to get started but you can also watch this video without seeing any of that as well. All right enough of me talking though let's get into the video.

Getting started with the Quarto docs

With anything Quarto related I think a great place to start is by going to the Posit Quarto website and here you have a ton of information. If we go to the guide and we go down to websites we can look at creating a website here and find a lot of useful information and if you ever forget like let's say how to add a sidebar, navbar, etc to your website going to website navigation is the next spot you want to check out. A lot of useful stuff here and this is always here as reference linked in the description.

And I think one cool thing to note is that this website was built using the same techniques that we will show. It's a little bit more sophisticated but if you click on like edit this page and just go to Quarto web you can see all the same types of things that ultimately renders the Quarto website and so if you ever need inspiration on how to do something you can check out their Quarto.yaml file and see a lot of different details on how it's laid out.

Building a simple website structure

We'll start simpler though and kind of work our way up there. So what I'm going to do is I'm going to go ahead and open up a terminal and I'm going to just basically open up a blank directory that I can write and build my website. So I'm going to do this with the terminal but you can do this however you normally make your directories. So I'm going to go into my code directory. I have a folder called 2025 and I have a folder called Quarto. I'm going to go there and make a directory called simple website. I'm going to navigate into that and I will open up VS Code here and so now we have our simple website repository.

And to get started I will create just a couple QMD files. I'll call this first one index.qmd and I'll just insert here insert some random text here. Another heading I just accidentally put on caps lock and some more text here. I feel like everyone always asks I'm using GitHub Copilot to do these autocompletes that you see popping up on the screen.

So we have our index.qmd file. As was seen in the crash course if you set up the VS Code Quarto extension you have the ability to render files like this and preview them in your VS Code editor. So we see our markdown code there. Okay not too interesting yet but let's add some more but let's add some more index.qmd files or not index.qmd but more qmd files. How about I do like python example.qmd and in this file we will actually add some python code.

So here's a python code example and we add our three quotes python and I will do something like for i in range five print hello world. I'm going to print i as well. Not that exciting of code but it will give you just a preview of what we can do.

Maybe we add one more code file. I would call this dashboard.qmd and I'll actually make this a more proper Quarto file. So title dashboard author geeth I was going to just replace my first and last initials but we don't need to do that and then type or format dashboard. I'm going to do the same thing. Don't worry about exactly the details here. I'm just trying to get some simple example simple example code on the screen.

Sometimes you need to make sure you have the right Python version kind of running so I'm going to specifically check my Quarto virtual machine. So I did command shift p on my MacBook to allow me to switch. Okay here's a little little dashboard. Here's my Python example file. Okay we got a little HTML file there. Nothing too crazy but this is now how we can start tying it together as a website.

Creating the _quarto.yaml config file

So what we're going to do is we're going to add a file called quarto.yaml and so it's underscore quarto.yaml and here we're going to want to first specify that the project is a website and then we're going to start specifying some configuration. And I think I actually want to do project website like this.

And as I mentioned before like I don't always remember the exact YAML configuration even though like I just did this. Like use the documentation to your advantage. We're going to see how it's set up. Okay so project type website. Okay and then I will do something like this just to start.

And as I mentioned before like I don't always remember the exact YAML configuration even though like I just did this. Like use the documentation to your advantage.

So our file looks like this and we will now what you can do to preview everything is you can go ahead and do quarto preview and if you have this quarto.yaml file in here it will allow things to run. We don't have a file called about.qmd so I want to just use our dashboard.qmv file and we can try this. Okay so we got our nice fun index.qmd that's rendering there. If I click on dashboard we see that now our dashboard also loads in. So we have two different pages here as well as a title.

Title is not super descriptive but I could call it something like quarto website example as our title. And now if we look back at our preview we see that this switches. So you can choose to have a title or you could just choose to have the different menu options here. If we wanted to add another page we can do that by adding just another dash and we could add python example.qmd and now if we look at our website we see here's a python code example.

I don't really love this drop down title so there's a few different ways we could change that. So one would be going to the python example and specifically adding a file title using the Quarto yaml option. So if I did title simple or like html example and now we go back to our website we see that it's changed here. There's also ways that you can specify this in the drop down menu or the navbar menu. So if I go here what I could also do is I could do href is python example and our title will specifically be how about python simple.

So before it was html example and now by specifying the title here I guess this should be text. It's just going to be python simple and this will take precedent over the title but it will default to the title if it can't find anything. So we click on this we go to our home index page index.qmd. If I click home we're also at that index.qmd. If I click dashboard we see that it changes to our dashboard.html page. If I click python simple it renders a python example.html all from the qmd files that we have available to us.

By default this search bar is here so that's pretty cool to see but you could also disable that if you wanted to. You could do like search false and that will disable the search bar. I don't know why you would want to disable a search bar but good to know.

Adding a sidebar

Other things you could do so here we have the navbar but you might also want a sidebar. And so with our sidebar we might want to have some contents or maybe we start with let's look at our options for a sidebar because again I don't remember what they are off the top of my head but if you go to website navigation on the Quarto docs and you look for sidebar so here we're looking at I think the top navigation so this navbar but we could also go to side navigation here see sidebar and we could play around stuff this way.

So I'm going to kind of copy this and you can have both a sidebar and a navbar and we see this let's see I'm going to just do the same type of files like dashboard example I can write whatever text I want here you href that's going to be dashboard.qmd and then like simple python example that's going to point to python example.qmd.

And we see that everything's kind of re-rendering in the background if we go back to our website we now see that we have two different things that we can click on. Go home so here's our little sidebar for some reason the python simple python example isn't rendering not quite sure how it's because I did section here this should be text. Now we can click on this cool and we can get even more sophisticated with this. So let's say we wanted it to be a drop down of multiple things well we could keep adding Quarto files into this.

So if I added now instead of just straight text we added a section I could actually not include let's say like we don't want to have this be clickable I could just have some contents under the basic section and there's a dot you could list individual qmd files like this but you could also do something like just list all files and there's a dot you could list individual qmd files like this but you could also do something like just list all files all qmd files get them all and put them under the basics.

So if we look at this go to html example it's going to grab any qmd file it can find other than the index.qmd and it's going to put them here. So you could have links multiple multiple of the same links so like this link and this link go to the same spot but it's all under this drop down and it's expanded out and you can just keep nesting these drop downs we'll see some more sophisticated examples of this soon.

Other things that we could do is we could start adding you know github links youtube links etc but I think this is good for the basics let's start making this more interesting by actually using the previous qmd files we did in the different tutorials that have been in this series.

Using the starter code from GitHub

So to do to find the code you can go to this is going to be linked in the description as well github.com slash keith galley slash quarto portfolio and there's a ton of code here I recommend you know copying this and cloning it locally to start out. There'll be a branch called like starter code so if you don't want to see all the finished Quarto.yml and kind of want to play around with things yourself you know look for the branch starter code I'll also link that in the description for convenience.

Let's see what we can do with this starter code okay once you're on the starter branch or you can find it in the description we're going to go back to visual studio code pull in my visual studio code real quick and we see we have a bunch here so we have our Quarto.yml starter file we have a starter index.qmd so I've kind of just linked it here with some descriptions of the different projects we've done in this Quarto series.

But if we were to render this right now and there's a requirements.txt so you can make sure that you have all the necessary libraries to run this by doing a pip3-install requirements.txt I recommend maybe starting a virtual environment so I'm going to activate my Quarto environment and then if I run this requirements.txt I can make sure that I have everything and now if I run a Quarto preview it's going to start rendering these different qmd files.

And this is all our yaml file has right now so the website's probably not going to be that interesting to start. Yeah so very very basic you know these links I guess they work but I don't know it doesn't it could be a lot better.

Applying themes

So how can we start adding more interesting things to this well I think first off we could change up the theme so if we wanted a theme to look more interesting we could go ahead and go in here and we could do format theme and then we could specify something like cosmo. I think it was in that starter code theme okay format html and then theme like this. Copy this if you had special css styles you could add them here I don't right now so I'm going to just remove this and I guess I'll leave the table of contents I don't know what that will look like in this base version of the website.

So we have I guess our table of contents over here if it's helpful you can include it we only have a single page so I don't really need the table of contents right now I'm going to just get rid of this but we do see that with the theme cosmo I think things look a bit different right this header bar is definitely different. What other themes could we try out well if I look up Quarto themes we have some of these out of the box one that I liked I was solar but let's try a couple I like the name sketchy sketchy slate and solar how about I try all of those.

Sketchy and this might actually look more interesting once we actually add some more stuff so maybe I revisit the themes in a second. Oh wow that's sketchy geez so here's a you know if you wanted some character a little personality you could use the sketchy version. We could also try the slate see what that does oh that looks really actually pretty cool I like the look of that a lot. And I'm going to do another called solar I think that looks quite nice as well. So you can play around with the different html themes here a lot of cool options. I'll leave it at solar for now.

Adding sidebar sections and navbar tools

But as we start playing around with this let's add some other pages so I'm going to add a sidebar and I want to add title will be python Quarto series contents and we can just start listing off different directories here so I could just literally do to start you know contents is everything let's see what that does with our website.

I'm going to run it like this first I don't know if title actually okay these qmd files aren't found so we're going to have a section just called everything and the contents of the section everything will literally be just star and then we're going to have a section called the contents of the section everything will literally be just star.

And there's no introduction qmd either so I'll just make this index.qmd or something like that and see now we have our page and what's really cool is that when we do the star that asterisk like this it's just basically looking for all renderable files. So what is a renderable file well if I look up some information here we see that Quarto input files .qmd .ipythonnotebook .md and .rmd will automatically be rendered.

So when I specify something like the asterisk here it's going to look for any types of those files even if they're nested within like a different directory so like Quarto crash course etc and it's going to automatically just kind of embed them in the sidebar here so we have everything and then we could go into like Quarto crash course for example and then we could get all the different files there. So here's like the home page file and we see we get all the information there.

One thing that's cool too is that let's say I didn't want to render this file a kind of strategic thing that I did was I made this about file a markdown file no different just that I knew I wasn't going to have any actual code in the about files so I didn't need the perks of Quarto markdown specifically. So what I could also do with my publish is I could specify I wanted all files that end in qmd and you could make this even more sophisticated you could do like maybe you have a special naming convention that starts with report dash anything dot qmd so there's a lot of different ways you can play around with this.

But now if I do star dot qmd and we look at our website if I go to Quarto crash course we now don't see that page that we initially did but I could get to it if I linked this Quarto crash course tab with a specific href that gets to this page. So the way that we can do that is instead of just letting it render everything on its own you could be a little bit more specific and do stuff like you know the section here is Quarto crash course the contents will be everything in the Quarto crash course directory and then qmd files there and the section will also point you to the specifically Quarto crash course slash about dot md file.

So now if I run this and you know go back to my home page and then click Quarto crash course we see that it gets us to that page but we still have the drop down options. One thing we see too is that the drop downs are all showing by default but maybe you wouldn't want that one parameter we have access to and the sidebar is I think it's called collapse level I can make this one and then nothing really will show so nothing's showing here so it's the collapse level is how much is expanded by default so it's I think default set to two so this is all showing.

Another thing that we see in here is that like we have two movie analysis movie data analysis so if we wanted to switch things up we could specifically go into Quarto crash course we could go into like let's say html report and I could do like movie data analysis html and I could also do movie data analysis pdf switch up the titles and then if I look back at the website and refresh this the pdf might be weird because I think it's rendered a little bit differently.

And we look at this we now see pdf and html the different pages and you can just kind of you know name your files as you need to as you as you see fit. But it's cool that like you know the qmds automatically will render during this you know website publishing process.

All right let's keep going other things you might want to do is maybe add a tool bar so like I could add in my nav bar I could add tools and tools are just basically like my github links let's say so I would want this to navigate to github.com slash keith galley Quarto portfolio and I would maybe also want to add a icon so these icons are from the default bootstrap icons and so they have an icon for github and youtube but you need to make sure that they're lowercase otherwise it will not work. We're going to just do at posit pbc and so if we render this we see we get the github link I can click on this get to the github we also have a youtube link opens up the youtube.

That all looks good and we can keep adding things so I could keep adding sections to this I could add a section for the second video in the series which was the parameterized reports and is that navigating to the right it's called parameterized reporting here and now if we look at the new website we have a new drop down and it's going to you know show an example of a parameterized report.

And these are getting linked to so basically within there's this about.md file and with that you know when this gets rendered by Quarto it becomes as we look in this or I guess you might not see it but if you look in the site information if you looked in like parameterized reporting it becomes about.html and so in our index file we can reference like parameterized reporting about.html and basically get it so that if we click this it will get us to the page that has all this information on it.

That's cool let's keep seeing what else we can do. Another thing we had in the website that I previewed so if I go back to my index or not index if I go back to the Quarto.yaml in the website that we previewed in the navbar there was a section called youtube tutorials and this had a menu of youtube links so I could do like text video one and that would have you know the youtube link corresponding to video one.

And if I look at my index I actually did or no not the index if I looked at Quarto crash course about.md this is the link to that video so I could copy this paste it in the href href is I forget what it stands for but it's basically whenever you have a link that's the source of where the link is going. Go to our website we see now we have youtube tutorials video one I click on it it navigates me to the website.

One thing you might want it to do is not actually open this in the same window so one trick that I found helpful is you can also add this target parameter and if you specify the special variable underscore blank and then try clicking youtube video one you see that we have this about page right here if I click video one now it opens it up in a different link that is a cute cat btw.

All right other things we want to do well I want some more theming I want some more branding so maybe I add like a favicon and a title here. So website title sure keith galley's Quarto portfolio I think yeah that will I guess you can add it if you have any titles in any of these pages I think we'll change up this header Quarto and python video series that's coming from specifically the index.qmd.

Oh it's yeah right here so that's kind of specifying that if I wanted to specifically have my own favicon I go to Quarto.yaml and I go to favicon in the previous slideshow video we showed I showed this little sample logo that I created saved in logos kglogo.svg that will now pop up here so I have my logo. I could also add a logo to the navbar I think if I do navbar logo and I did like logos slash I added a Quarto image here too so Quarto.png. If we look at what this does we see now we get like the Quarto logo over here logo over here you could replace this with whatever logo that you wanted if you think that this is cool and makes sense.

Let's try to think of other things I like adding a footer to the website and all of this is documented in you know the the Quarto docs but if I wanted to add a page footer I could add page footer copyright 2023 keith galley it's 2025 keith galley and I can also actually specify like multiple options here so I could do the left side of the footer is the copyright and the right side is yo yo yo yo yo. Where's the page oh here's the page footer see yo yo yo yo on the right side left side is copyright 2025 keith galley that looks good.

I could also make this instead of docked there's a I think fixed is the other option or floating and that would just kind of center everything I kind of like the fixed look so I'm going to keep it docked. And notice if we turn off the search in the nav bar or in this yeah the nav bar and we have it active in the sidebar we now get it over here instead of over here I kind of like it on the top right so I'm going to keep it the way we had it.

One cool thing I guess one kind of useful thing is you can also specify just three dashes here as a item and that will create a nice little line break in your sidebar.

Using a brand.yaml file

I think the last real thing that's different before we actually show how we publish this is instead of adding the format and doing theming like this we can also specify a branding file so if I do brand and then I do brand.yaml or wherever you have your brand.yaml file so maybe I create a folder or maybe I just create the file sometimes the nesting of files makes a difference here but I'll just call this brand.yaml and then I'm going to copy this in from the github website.

So we have our brand.yaml I copy it this is all kind of talked about in the most the slideshow video so you can learn more about the brand.yaml feature there note this is only available in newer versions of Quarto so you need to have Quarto 1.6 or above for this to work but now if we look at our website we're gonna get this nice sweet you know branded version of the website which I think looks pretty dang sweet.

We're gonna get this nice sweet you know branded version of the website which I think looks pretty dang sweet.

I don't know if I love the border here of this maybe that was already there I could specify on my sidebar border is false to remove that if I want so yeah depending on what you think is better I think this looks really sweet though. The brand.yaml is all this it's using the same kg logo it looks quite quite cool in my opinion and there's even more customization you can do with your brand.yaml file lots of cool stuff.

Embedding slideshows and dashboards

On the slideshow point one cool trick I think is useful when you're displaying slideshows in a website is you can copy the following code snippet into your you know about dot markdown file whatever markdown file you want to and basically what this will do is I'm going to real quick render it without it first we have this site and I could click you know Quarto presentations to see the slideshow but it takes me to a different page.

One thing that's cool that you can do is we could add this code snippet and example.html is ultimately the html file that's rendered from example.qmd which is our slideshow and now with this code snippet if we re-render this we have a nice iframe embedding of the slideshow so you can see the slideshow navigate through the slideshow right there within your screen which I just feel like it's a nice little trick to know about.

And sometimes I guess the themes don't look as good with um you know maybe previous themes that you use if you use white light or dark so there's some additional customization you sometimes will have to do.

Deploying with Posit Connect Cloud

Okay so if I wanted to deploy this code I would go Quarto I would go to posit connect cloud I have a link to posit connect cloud in the description and I would do publish I would specify Quarto my repo is Quarto portfolio the branch here is actually called starter did I push that code I did push origin starter that looks good.

And primary file doesn't matter here because I don't think it should matter here but I would recommend putting index.qmd because I think it it reads ultimately your Quarto.yaml file so you need to have that connected you'll also need to make sure you have a requirements.txt in this that has all the libraries that you need but if you have those things you click publish. It's going to install everything or render everything might take a minute to render.

And we see we got our website all rendered here and what's cool is you could go like full screen mode here and you could go ahead very easily and share this link so if I like opened up an incognito window and shared this link uh you know it renders it all the same I can go to any of these pages.

Very easily and if you really wanted to make this a data portfolio I do want to mention that any analysis you do with your qmd files and any outputs that are you know html-based can be easily embedded in this website so here we have some the report from the jupyter notebook to analytics report video and you're seeing a lot of like matplotlib and seaborn charts here but like these also could be interactive plotly charts that you could zoom in on play around with like this table right here is interactive so you can also embed the same interactive elements that you can with any Quarto document.

Deploying to a custom domain with Netlify

I wanted to make that just clear quickly my tutorials are all there these links are here you can share that link you could also just you know go ahead and copy this to get the same link. This works out of the box with public portfolio github repos but if you want to deploy from private repos you can you know use a pro plan you know the basic plan or the enhanced plans for extra types of support there's new features rolling out in posit connect cloud very frequently so I might recommend checking this out you know every so often to see what you have access to. This is definitely the easiest way.

But if you wanted to let's say right now deploy to your own custom domain first you'd want to acquire a domain I typically do that with namecheap.com but you can use any provider you could also use netlify.com. One thing that's really cool is there's a Quarto publish netlify option and with that you can specify you know sign into your account and basically so I need to make sure my libraries are all there again so Quarto publish netlify.

Right now this is all living on Quartosfund.com but if I wanted to add a new destination I could like specify my account it will all render the same kind of way and ultimately you'll end up on netlify.com and you can you know connect your own domain so if I go to domains I can add a register a domain so I could type in something like like you know my data portfolio dot xyz maybe this domain is available you can literally just buy it right here from netlify and then like it'll allow you to connect what you're publishing to this code over here.

Or yeah like as I said I'll show probably a screen recording of it but like I purchased my domains on namecheap.com and like I just basically had to copy some additional settings to my namecheap account and then it was able to connect from that external domain I just don't like having my domains fly or floating in all different spots. But you know here we have a new site and I could very much you know configure it to connect to a different um you know either just the netlify.app.

But yeah if you wanted to add your custom domain you know I could do something here like as I said Quartosfund.com then added the the name servers and then basically it will be connected and you know you go to Quartosfund.com everything that was living locally is here online you can share it with people a lot of fun you can build a cool data portfolio with this using your qmd files it's just like I I found it pretty awesome so hopefully you all do as well.

I think this is the tutorial though all right well we've deployed our website hopefully you found this video useful hopefully you found it interesting if you did enjoy it make sure to throw it a thumbs up and subscribe to the channel to not miss any videos like this in the future. I'd be very curious to see what you all build so if you build any cool websites please share them with me tag me on linkedin tag me on instagram I would love to see them. If you have any questions or suggestions for future videos please leave them down in the comments but I think that is all we're going to do with it today this was a lot of fun build a cool looking website till next time everyone peace out.

Featured software#