<?xml version="1.0" encoding="UTF-8"?>
<rss  xmlns:atom="http://www.w3.org/2005/Atom" 
      xmlns:media="http://search.yahoo.com/mrss/" 
      xmlns:content="http://purl.org/rss/1.0/modules/content/" 
      xmlns:dc="http://purl.org/dc/elements/1.1/" 
      version="2.0">
<channel>
<title>Daniel S. Quintana</title>
<link>https://dsquintana.com/blog.html</link>
<atom:link href="https://dsquintana.com/blog.xml" rel="self" type="application/rss+xml"/>
<description>Academic homepage of Daniel S. Quintana — research, workshops, and software.</description>
<image>
<url>https://dsquintana.com/profile.jpg</url>
<title>Daniel S. Quintana</title>
<link>https://dsquintana.com/blog.html</link>
</image>
<generator>quarto-1.9.38</generator>
<lastBuildDate>Fri, 24 Jul 2026 22:00:00 GMT</lastBuildDate>
<item>
  <title>How to create a simple academic website</title>
  <dc:creator>Daniel S. Quintana</dc:creator>
  <link>https://dsquintana.com/posts/quarto-academic-site/</link>
  <description><![CDATA[ 





<p>Some of the most popular resources I’ve previously shared, like <a href="https://youtu.be/ox_Ue9yzf-0?si=jemm9bm09x-FHA0N">this screencast</a>, have been about how to create an academic website. It’s important for academics at <em>any</em> career stage to have a site that they fully control. Most institutions offer their staff personal webpages, but these typically have little flexibility and are lost when people leave institutions.</p>
<p>I’ve been playing around with the <a href="https://quarto.org">Quarto publishing system</a> over the past few months, which also includes the capability to build websites. I’ve been impressed at how Quarto can build academic papers (I wrote <a href="https://osf.io/preprints/psyarxiv/jh36d_v1">this preprint</a> using Quarto), so I wanted to try my hand at using it to rewrite my own website, which is where you’re reading this very post. Compared to how I built websites in R in the past, which was pretty hacky to be honest, using Quarto was a much smoother process. I also wanted a way to easily update my publication list, based on my Zotero library, and to add links to materials associated with papers, along with open access versions of paywalled papers.</p>
<p>In this post I’m going to walk through two different ways you can make a site like this. First I’ll walk through how to clone the whole thing from GitHub, which requires you to edit in your own info. Second, I’m going to show you how to make a site like this by using a Shiny web app I made that creates the required code with your <em>own</em> info from the get go.</p>
<section id="what-you-need" class="level2">
<h2 class="anchored" data-anchor-id="what-you-need">What you need</h2>
<p>Quarto and R. The site itself relies on a single R package — knitr — so there’s no long list of dependencies to work through.</p>
<p>One thing worth pointing out first, because the commands below switch between the two: RStudio’s <strong>Console</strong> and <strong>Terminal</strong> are two tabs in the same pane. The Console runs R code, while the Terminal runs your computer’s own command line. Anything like <code>install.packages()</code> goes in the Console; stuff like <code>git</code>, <code>quarto</code> and <code>brew</code> commands go in the Terminal.</p>
<p>You may already have Quarto as recent versions of RStudio ship with it bundled. You can double-check from the Terminal in RStudio:</p>
<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb1" style="background: #f1f3f5;"><pre class="sourceCode bash code-with-copy"><code class="sourceCode bash"><span id="cb1-1"><span class="ex" style="color: null;
background-color: null;
font-style: inherit;">quarto</span> <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">--version</span></span></code></pre></div></div>
<p>If that comes back with a version number, you’re good to go. If it says command not found, install it from <a href="https://quarto.org/docs/get-started/">quarto.org</a>, which has installers for macOS, Windows and Linux. On a Mac with Homebrew you can instead run in Terminal:</p>
<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb2" style="background: #f1f3f5;"><pre class="sourceCode bash code-with-copy"><code class="sourceCode bash"><span id="cb2-1"><span class="ex" style="color: null;
background-color: null;
font-style: inherit;">brew</span> install <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">--cask</span> quarto</span></code></pre></div></div>
<p>Once it’s installed, add knitr from the R console:</p>
<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb3" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">install.packages</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"knitr"</span>)</span></code></pre></div></div>
</section>
<section id="getting-it-running" class="level2">
<h2 class="anchored" data-anchor-id="getting-it-running">Getting it running</h2>
<p>Now run this in the Terminal.</p>
<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb4" style="background: #f1f3f5;"><pre class="sourceCode bash code-with-copy"><code class="sourceCode bash"><span id="cb4-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">git</span> clone https://github.com/dsquintana/dsquintana.com.git</span>
<span id="cb4-2"><span class="bu" style="color: null;
background-color: null;
font-style: inherit;">cd</span> dsquintana.com</span>
<span id="cb4-3"><span class="ex" style="color: null;
background-color: null;
font-style: inherit;">quarto</span> preview</span></code></pre></div></div>
<p>That serves the site locally with live reload. Here’s what you need to do to make it your own: replace <code>publications.bib</code> with your own<sup>1</sup>, swap the profile photo with your own photo, and work through <code>index.qmd</code>, <code>_quarto.yml</code>, and whichever pages you want to keep. Either edit pages or delete them.</p>
<p>Those two filenames are each hardcoded in exactly one place, so the easiest route is to name your files <code>publications.bib</code> and <code>profile.jpg</code>. A PNG is fine too, but then you need to change the <code>image:</code> line at the top of <code>index.qmd</code> to match — if the name and the file disagree, Quarto renders a missing image without raising an error.</p>
<p>You’ll also want to empty <code>links.csv</code> down to its header row. Mine holds a hundred-odd links to my own data and code, each keyed to a citation key from <em>my</em> bibliography — against your library they’d match nothing, and every row would show up as a warning when you render. Deleting the file entirely works too; the site renders fine without it. You’ll just be missing any additional links to data and code. The <code>README.md</code> has the full list of what you need to do.</p>
<section id="or-skip-the-cloning" class="level3">
<h3 class="anchored" data-anchor-id="or-skip-the-cloning">Or skip the cloning</h3>
<p>Starting from my own webpage means deleting a lot of it first, and assumes you’re reasonably comfortable in RStudio. So, I also built a <a href="https://dsquintana.shinyapps.io/website-builder/">website builder</a>. With this app, you fill in your name, a bio, and a few links, upload a photo and your Zotero BibTeX export (see above), and it hands back a zip of the same site with your details already in it and mine gone. This generates a two-page version that includes a homepage and a publications list.</p>
<p>You’ll still need R and Quarto installed to build what it gives you (see above).</p>
</section>
</section>
<section id="the-publication-list" class="level2">
<h2 class="anchored" data-anchor-id="the-publication-list">The publication list</h2>
<p>Quarto handles citations through pandoc’s citeproc, which is nice, but it creates one flat bibliography per document. I wanted mine grouped under year headings, newest first.</p>
<p>There’s no built-in way to do that, so <code>bibtools.R</code> takes a fairly blunt approach by splitting the <code>.bib</code> file by year, running each year’s subset through pandoc separately, and pasting the resulting HTML fragments back together under <code>###</code> headings. The whole publications page is then three lines:</p>
<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb5" style="background: #f1f3f5;"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb5-1"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```{r}</span></span>
<span id="cb5-2"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#| echo: false</span></span>
<span id="cb5-3"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#| output: asis</span></span>
<span id="cb5-4"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">render_by_year</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"publications.bib"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">csl =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"apa.csl"</span>)</span>
<span id="cb5-5"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```</span></span></code></pre></div></div>
<p>Add a paper in Zotero, re-export, re-render. New years appear on their own.</p>
</section>
<section id="attaching-data-and-code-links" class="level2">
<h2 class="anchored" data-anchor-id="attaching-data-and-code-links">Attaching data and code links</h2>
<p>For me, it was important to add links to data and code associated with papers. BibTeX can’t help here, since there’s no standard field for it, so I put together a solution whereby the links live in a separate file, <code>links.csv</code>, joined to papers by citation key:</p>
<pre class="csv"><code>citekey,label,url
Quintana2023,Data &amp; code,https://osf.io/dr64q/
Quintana2023,Web app,https://dsquintana.shinyapps.io/metameta_app/</code></pre>
<p><code>bibtools.R</code> reads that file and injects a small labelled link into each matching reference. One row per link; a paper can have as many as you like (e.g., data, code, preprint). The labels are free text, so you decide what categories you want — mine are <em>Data &amp; code</em>, <em>Code</em>, <em>Preregistration</em>, <em>Preprint</em>, <em>Web app</em>, and <em>Open access article</em>.</p>
<p>As <code>links.csv</code> is kept separate from the <code>.bib</code>, Zotero remains the ground truth for bibliographic data, and re-exporting never messes with these links.</p>
</section>
<section id="putting-it-online" class="level2">
<h2 class="anchored" data-anchor-id="putting-it-online">Putting it online</h2>
<p>The normal pattern for a static site, like this one, is to connect a host to your repository and let it build on every push. That doesn’t work here, because the publication list is generated by R at render time, and neither Netlify’s nor GitHub Pages’ build image ships with R. Installing R and knitr on every deploy <em>is</em> possible, but it’s slow and one more thing to break. So I build locally and commit the output.</p>
<p>Committing build output is normally poor practice, and it does make the commit history noisier. The tradeoff is worth it here, I think, because deploys can’t fail from a dependency problem, as nothing is being built on the server. The one downside is that <code>quarto render</code> becomes mandatory before pushing — skip it and you deploy your previous build, silently and with no error.</p>
<section id="getting-it-onto-github" class="level3">
<h3 class="anchored" data-anchor-id="getting-it-onto-github">Getting it onto GitHub</h3>
<p>If you used the builder app, the folder it gave you isn’t a git repository yet. From the Terminal, inside that folder:</p>
<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb7" style="background: #f1f3f5;"><pre class="sourceCode bash code-with-copy"><code class="sourceCode bash"><span id="cb7-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">git</span> init</span>
<span id="cb7-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">git</span> branch <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">-M</span> main</span>
<span id="cb7-3"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">git</span> add <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">-A</span></span>
<span id="cb7-4"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">git</span> commit <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">-m</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Initial commit"</span></span></code></pre></div></div>
<p>If you cloned my repo instead, you already have a repository — but it still points at mine, so you’ll want to repoint it in a moment.</p>
<p>Now make an empty repository at <a href="https://github.com/new">github.com/new</a> (assuming you’re logged in to your GitHub account). Leave “Add a README”, “.gitignore” and “license” all unticked as you already have those. Then, swapping in your <u>own username</u> and <u>own repository name</u>:</p>
<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb8" style="background: #f1f3f5;"><pre class="sourceCode bash code-with-copy"><code class="sourceCode bash"><span id="cb8-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">git</span> remote add origin https://github.com/YOU/YOUR-REPO.git</span>
<span id="cb8-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">git</span> push <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">-u</span> origin main</span></code></pre></div></div>
<p>If you cloned my site, use <code>git remote set-url origin ...</code> instead of <code>git remote add</code>.</p>
<p>One thing that sometimes catches people out: when git asks for a password, your GitHub account password won’t work. You need either a <a href="https://github.com/settings/tokens">personal access token</a> pasted in place of the password, or the <a href="https://cli.github.com">GitHub CLI</a> (<code>gh auth login</code>), which sets this up for you.</p>
</section>
<section id="connecting-netlify" class="level3">
<h3 class="anchored" data-anchor-id="connecting-netlify">Connecting Netlify</h3>
<p>In <a href="https://netlify.com">Netlify</a>: <strong>Add new site → Import an existing project → GitHub</strong>, then pick your repository. Two settings matter:</p>
<ul>
<li><strong>Build command</strong> — leave it completely empty</li>
<li><strong>Publish directory</strong> — <code>_site</code></li>
</ul>
<p>That’s the whole configuration. Netlify serves the folder you already built.</p>
</section>
<section id="a-free-address-or-your-own-domain" class="level3">
<h3 class="anchored" data-anchor-id="a-free-address-or-your-own-domain">A free address, or your own domain</h3>
<p>Netlify gives every site a free address like <code>something.netlify.app</code>, and you can change the <code>something</code> part in the site settings. That’s a good place to start, and nothing about your setup has to change if you add a domain later.</p>
<p>If you <em>do</em> want your own, buy one (they’re usually around $10–15 a year), add it under <strong>Domain management</strong>, and follow Netlify’s DNS instructions.</p>
<p>Whichever you use, turn on <strong>Force HTTPS</strong> in Netlify’s domain settings once the certificate has been issued. Without it your site is still reachable over plain <code>http://</code>, and browsers increasingly make that look alarming.</p>
</section>
<section id="updating-it-from-then-on" class="level3">
<h3 class="anchored" data-anchor-id="updating-it-from-then-on">Updating it from then on</h3>
<p>Once that’s set up, publishing a change is three commands:</p>
<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb9" style="background: #f1f3f5;"><pre class="sourceCode bash code-with-copy"><code class="sourceCode bash"><span id="cb9-1"><span class="ex" style="color: null;
background-color: null;
font-style: inherit;">quarto</span> render</span>
<span id="cb9-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">git</span> add <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">-A</span> <span class="kw" style="color: #003B4F;
background-color: null;
font-weight: bold;
font-style: inherit;">&amp;&amp;</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">git</span> commit <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">-m</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Update site"</span></span>
<span id="cb9-3"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">git</span> push</span></code></pre></div></div>
<p>Netlify picks up the push and redeploys in about a minute. The first line is the one to remember: Netlify serves whatever is in <code>_site/</code>, so skipping the render pushes your previous build and nothing will tell you that’s what happened.</p>
</section>
</section>
<section id="reuse" class="level2">
<h2 class="anchored" data-anchor-id="reuse">Reuse</h2>
<p>The code is MIT licensed and the content is CC BY 4.0, so take whatever’s useful. You don’t <em>need</em> to credit me for the code, though I’d be glad to hear about it on <a href="https://www.linkedin.com/in/dsquintana/">LinkedIn</a> or <a href="https://bsky.app/profile/dsquintana.bsky.social">Bluesky</a> if you build something with it.</p>


</section>


<div id="quarto-appendix" class="default"><section id="footnotes" class="footnotes footnotes-end-of-document"><h2 class="anchored quarto-appendix-heading">Footnotes</h2>

<ol>
<li id="fn1"><p>To do this, in Zotero create a collection that only contains your publications, select all of them, right-click, then select ‘Export items’ (choose BibTeX as the format)↩︎</p></li>
</ol>
</section></div> ]]></description>
  <category>website</category>
  <category>quarto</category>
  <guid>https://dsquintana.com/posts/quarto-academic-site/</guid>
  <pubDate>Fri, 24 Jul 2026 22:00:00 GMT</pubDate>
  <media:content url="https://dsquintana.com/posts/quarto-academic-site/card.png" medium="image" type="image/png" height="76" width="144"/>
</item>
</channel>
</rss>
