Making an Awesome Quarto Website
A Comprehensive Guide to DevContainers, renv, and Agentic AI-Driven Design
Creating a modern, reproducible, and aesthetically pleasing technical website requires more than just a good content management system. It requires a robust development environment and a forward-thinking approach to design. This project documents the setup of this very website, leveraging Quarto, VS Code DevContainers, renv, and the power of Agentic AI for rapid iteration and design orchestration.
1. The Foundation: Quarto
Quarto is an open-source scientific and technical publishing system built on Pandoc. It allows you to weave together narrative text and code to produce high-quality articles, reports, presentations, websites, and more.[1]
One of the primary advantages of Quarto is its ability to support multiple languages, including R, Python, Julia, and Observable. For this website, we primarily use Quarto’s website project type, which provides a flexible structure for organizing posts and projects.
2. Reproducibility with VS Code DevContainers
To ensure that the development environment is consistent across different machines and for different contributors, we use VS Code DevContainers. A DevContainer is a Docker container that is used as your development environment, containing all the tools and dependencies needed for the project.
The devcontainer.json Configuration
Our configuration utilizes the official Playwright image as a base, which provides a rich set of browser binaries essential for testing and certain agentic workflows. We then layer on several “Features” to install R, Python, and the Quarto CLI.
{
"name": "Gemini Playwright Sandbox",
// Use the official Playwright image. It includes Node.js and all browser binaries.
"image": "mcr.microsoft.com/playwright:v1.58.2-jammy",
"features": {
"ghcr.io/rocker-org/devcontainer-features/r-apt:latest": {
"installRStudio": false
},
"ghcr.io/devcontainers/features/python:1": {
"version": "latest"
},
"ghcr.io/rocker-org/devcontainer-features/quarto-cli:1": {
"version": "latest"
},
"ghcr.io/devcontainers/features/github-cli:1": {
"version": "latest"
}
},
"customizations": {
"vscode": {
"settings": {
"terminal.integrated.defaultProfile.linux": "bash",
"r.lsp.enabled": true,
"python.defaultInterpreterPath": "/usr/local/bin/python"
},
"extensions": [
"google.geminicode", // Optional: Google's AI assistant extension
"REditorSupport.r",
"ms-python.python",
"quarto.quarto",
"ms-toolsai.jupyter"
]
}
},
// Install the Gemini CLI automatically when the container builds
"postCreateCommand": "apt update && apt install -y libmagick++-dev && npm install -g @google/gemini-cli && echo 'Gemini CLI installed!' && Rscript -e 'install.packages(c(\"languageserver\", \"renv\"), repos=\"https://cloud.r-project.org\")' && if [ -f renv.lock ]; then Rscript -e 'renv::restore()'; fi && pip install jupyter ipykernel"
}3. Managing R Dependencies with renv
In the R ecosystem, package management is critical for reproducibility. The renv package provides a way to create project-local environments, ensuring that the exact versions of packages used during development are recorded and can be restored later.[2]
Our postCreateCommand in the devcontainer.json automatically installs renv and attempts to restore the environment if a renv.lock file is present:
Rscript -e 'install.packages("renv", repos="https://cloud.r-project.org")'
Rscript -e 'renv::restore()'This ensures that every time the DevContainer is built, the R environment is perfectly synchronized with the project’s requirements.
4. Enhancing the Developer Experience: R Language Server
To provide a modern IDE experience within VS Code, we install the languageserver package.[3] This package implements the Language Server Protocol (LSP) for R, providing features such as:
- IntelliSense: Smart completions for functions and variables.
- Linting: Real-time error and style checking.
- Go-to-Definition: Quickly navigate to the source code of functions.
- Formatting: Consistent code styling.
By setting "r.lsp.enabled": true in our VS Code settings, we activate these features within the DevContainer.
5. Agentic AI: The Secret to Rapid Design
The design and structure of this website were heavily influenced and accelerated by Agentic AI, specifically the Gemini CLI.[4]
Instead of manually editing every CSS file or Quarto configuration, we use the Gemini CLI as a “pair programmer” for design. For example, the particle background on the blog page and the specific layout of the project cards were orchestrated by issuing high-level directives to the AI agent.
The “Intent-Based” Workflow
- Describe the Goal: “Create a particle background for the blog page using particles.js, ensuring it respects the website’s light and dark themes.”
- Iterative Refinement: The AI agent generates the necessary JavaScript and CSS, which is then refined through follow-up prompts until the “vibe” is correct.
- Autonomous Execution: The agent can even handle the creation of files and the modification of the
_quarto.ymlconfiguration to integrate the new features.
This approach, colloquially known as vibe-coding, allows for a much faster iteration cycle, enabling the developer to focus on high-level intent rather than the minutiae of syntax.
6. Installation and Setup
To replicate this setup on your local machine, follow these steps:
- Install VS Code and the Dev Containers extension.
- Install Docker on your host system.
- Create a project with
quarto create projector Clone this repository. (if you want to use it as sample) - Open the folder in VS Code.
- When prompted, click “Reopen in Container”.
The DevContainer will handle the installation of:
- Quarto CLI: For rendering the website.
- R and R Language Server: For R-based data analysis and IDE support.
- renv: For R package management.
- Gemini CLI: For agentic AI assistance.
Conclusion
By combining the structural power of Quarto with the reproducibility of DevContainers and the creative acceleration of Agentic AI, we have created a development workflow that is both robust and incredibly fast. This setup allows us to focus on what matters most: sharing technical insights and building awesome projects.