Skip to content

Commit

Permalink
Lecture 4 activity and exercise added
Browse files Browse the repository at this point in the history
  • Loading branch information
@andytai7
andytai7 committed Jul 26, 2024
1 parent 1f045bb commit dc12317
Show file tree
Hide file tree
Showing 3 changed files with 215 additions and 2 deletions.
93 changes: 92 additions & 1 deletion docs/lectures/4-quarto_github_pages.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@
<ul class="list-unstyled mt-1">
<li class="sidebar-item">
<span class="menu-text"><div style="text-align: center;">
<img src="lectures/img/MDSlogo.png" alt="MDS Logo" style="width: 100%; height: auto;">
<img src="../site_libs/img/MDSlogo.png" alt="MDS Logo" style="width: 100%; height: auto;">
</div>
</span>
</li>
Expand Down Expand Up @@ -422,6 +422,18 @@ <h3 class="anchored" data-anchor-id="renering-your-website">Renering your websit
<p>Always <code>render</code> your site before your final deployment, not all changes to your quarto files will trigger an automatic regeneration + rendering.</p>
</section>
</section>
<div class="activity">
<section id="lecture-4-activity-1" class="level2 activity-header">
<h2 class="anchored" data-anchor-id="lecture-4-activity-1">Lecture 4 Activity 1</h2>
</section>
<div class="activity-container">
<p>Which command would you use to preview a Quarto file and automatically update the preview when changes are made?</p>
<p>A. <code>quarto render --preview</code></p>
<p>B. <code>quarto render --watch</code></p>
<p>C. <code>quarto preview</code></p>
<p>D. <code>quarto serve</code></p>
</div>
</div>
<section id="github-pages" class="level2">
<h2 class="anchored" data-anchor-id="github-pages">GitHub Pages</h2>
<p>GitHub (public and enterprise) have mechanims that can turn static website content and render them into an actual website. If you’re reading these words from a web URL and not directly in the raw source (i.e., the jupyter notebook) then you are experiencing github pages.</p>
Expand Down Expand Up @@ -540,6 +552,85 @@ <h2 class="anchored" data-anchor-id="quarto-for-rendering-your-mds-assignments">
quarto render document.qmd -M code-fold:true
Render to Stdout: quarto render document.qmd --output -</code></pre>
<p>You can also use <code>quarto render --help</code> to get the same help output.</p>
<div class="exercise">
<section id="lecture-4-exercise-1" class="level3 exercise-header">
<h3 class="anchored" data-anchor-id="lecture-4-exercise-1">Lecture 4 Exercise 1</h3>
</section>
<div class="exercise-container">
<p><strong>Creating and Deploying a Quarto Website</strong></p>
<p><strong>Objective:</strong> By completing this exercise, students will gain hands-on experience in creating a Quarto website and deploying it using GitHub Pages.</p>
<p><strong>Instructions:</strong></p>
<ol type="1">
<li><strong>Create a New Quarto Website Project:</strong>
<ul>
<li>Open your command line interface (Terminal on Mac/Linux, Command Prompt/PowerShell on Windows).</li>
<li>Use the <code>quarto create project</code> command to create a new Quarto website project.</li>
</ul>
<div class="sourceCode" id="cb14"><pre class="sourceCode bash code-with-copy"><code class="sourceCode bash"><span id="cb14-1"><a href="#cb14-1" aria-hidden="true" tabindex="-1"></a><span class="ex">quarto</span> create project</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<ul>
<li>Select “website” as the project type and provide a directory name for your project.</li>
</ul></li>
<li><strong>Navigate to Your Project Directory:</strong>
<ul>
<li>Change into the newly created project directory.</li>
</ul>
<div class="sourceCode" id="cb15"><pre class="sourceCode bash code-with-copy"><code class="sourceCode bash"><span id="cb15-1"><a href="#cb15-1" aria-hidden="true" tabindex="-1"></a><span class="bu">cd</span> your_project_directory</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div></li>
<li><strong>Customize Your Quarto Website:</strong>
<ul>
<li>Open the <code>_quarto.yml</code> file in a text editor and customize the settings as needed.</li>
</ul>
<div class="sourceCode" id="cb16"><pre class="sourceCode yml code-with-copy"><code class="sourceCode yaml"><span id="cb16-1"><a href="#cb16-1" aria-hidden="true" tabindex="-1"></a><span class="fu">project</span><span class="kw">:</span></span>
<span id="cb16-2"><a href="#cb16-2" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">type</span><span class="kw">:</span><span class="at"> website</span></span>
<span id="cb16-3"><a href="#cb16-3" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">output-dir</span><span class="kw">:</span><span class="at"> docs</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<ul>
<li>Modify the content of the <code>index.qmd</code> and <code>about.qmd</code> files to personalize your website.</li>
</ul></li>
<li><strong>Render Your Quarto Website:</strong>
<ul>
<li>Use the <code>quarto render</code> command to generate the HTML files for your website.</li>
</ul>
<div class="sourceCode" id="cb17"><pre class="sourceCode bash code-with-copy"><code class="sourceCode bash"><span id="cb17-1"><a href="#cb17-1" aria-hidden="true" tabindex="-1"></a><span class="ex">quarto</span> render</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<ul>
<li>Verify that the output is created in the <code>docs</code> directory.</li>
</ul></li>
<li><strong>Initialize a Git Repository:</strong>
<ul>
<li>If you haven’t already, initialize a Git repository in your project directory.</li>
</ul>
<div class="sourceCode" id="cb18"><pre class="sourceCode bash code-with-copy"><code class="sourceCode bash"><span id="cb18-1"><a href="#cb18-1" aria-hidden="true" tabindex="-1"></a><span class="fu">git</span> init</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<ul>
<li>Add all files to the Git repository and commit them.</li>
</ul>
<div class="sourceCode" id="cb19"><pre class="sourceCode bash code-with-copy"><code class="sourceCode bash"><span id="cb19-1"><a href="#cb19-1" aria-hidden="true" tabindex="-1"></a><span class="fu">git</span> add .</span>
<span id="cb19-2"><a href="#cb19-2" aria-hidden="true" tabindex="-1"></a><span class="fu">git</span> commit <span class="at">-m</span> <span class="st">"Initial commit of Quarto website"</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div></li>
<li><strong>Push Your Project to GitHub:</strong>
<ul>
<li>Create a new repository on GitHub and follow the instructions to push your local repository to GitHub.</li>
</ul>
<div class="sourceCode" id="cb20"><pre class="sourceCode bash code-with-copy"><code class="sourceCode bash"><span id="cb20-1"><a href="#cb20-1" aria-hidden="true" tabindex="-1"></a><span class="fu">git</span> remote add origin https://github.com/YOUR_GITHUB_USERNAME/YOUR_REPOSITORY_NAME.git</span>
<span id="cb20-2"><a href="#cb20-2" aria-hidden="true" tabindex="-1"></a><span class="fu">git</span> branch <span class="at">-M</span> main</span>
<span id="cb20-3"><a href="#cb20-3" aria-hidden="true" tabindex="-1"></a><span class="fu">git</span> push <span class="at">-u</span> origin main</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div></li>
<li><strong>Enable GitHub Pages:</strong>
<ul>
<li>Go to the settings of your GitHub repository.</li>
<li>Under the “Pages” section, set the source to the <code>docs</code> folder on the <code>main</code> branch.</li>
<li>Save the settings and wait for GitHub to publish your website.</li>
</ul></li>
<li><strong>Verify Your Website:</strong>
<ul>
<li>Navigate to <code>https://YOUR_GITHUB_USERNAME.github.io/YOUR_REPOSITORY_NAME</code> to see your published Quarto website.</li>
</ul></li>
</ol>
<p><strong>Questions:</strong></p>
<ol type="1">
<li>What command do you use to create a new Quarto website project?</li>
<li>How do you customize the settings for your Quarto website?</li>
<li>What steps do you take to render your Quarto website and generate the HTML files?</li>
<li>How do you initialize a Git repository and push it to GitHub?</li>
<li>What settings do you need to change in GitHub to enable GitHub Pages for your website?</li>
</ol>
</div>
</div>
</section>
<section id="improving-your-quarto-experience" class="level2">
<h2 class="anchored" data-anchor-id="improving-your-quarto-experience">Improving your quarto experience</h2>
Expand Down
13 changes: 12 additions & 1 deletion docs/search.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -334,7 +334,7 @@
"href": "lectures/4-quarto_github_pages.html#quarto-for-rendering-your-mds-assignments",
"title": "Introduction to Quarto and Github Pages",
"section": "Quarto for rendering your MDS assignments",
"text": "Quarto for rendering your MDS assignments\nYou can use quarto render to render your MDS documents into different output formats, e.g., pdf or html. For more information you can explore how quarto render works by calling the help page for render. This can be particularly useful when trying to export out pdf documents from a jupyter notebook if other methods are not working.\n$ quarto help render\n\n Usage: quarto render [input] [args...]\n Version: 1.4.358\n\n Description:\n\n Render files or projects to various document types.\n\n Options:\n\n -h, --help - Show this help.\n -t, --to - Specify output format(s).\n -o, --output - Write output to FILE (use '--output -' for stdout).\n --output-dir - Write project output to DIR (path is project relative)\n -M, --metadata - Metadata value (KEY:VALUE).\n --site-url - Override site-url for website or book output\n --execute - Execute code (--no-execute to skip execution).\n -P, --execute-param - Execution parameter (KEY:VALUE).\n --execute-params - YAML file with execution parameters.\n --execute-dir - Working directory for code execution.\n --execute-daemon - Keep Jupyter kernel alive (defaults to 300 seconds).\n --execute-daemon-restart - Restart keepalive Jupyter kernel before render.\n --execute-debug - Show debug output for Jupyter kernel.\n --use-freezer - Force use of frozen computations for an incremental file render.\n --cache - Cache execution output (--no-cache to prevent cache).\n --cache-refresh - Force refresh of execution cache.\n --no-clean - Do not clean project output-dir prior to render\n --debug - Leave intermediate files in place after render.\n pandoc-args... - Additional pandoc command line arguments.\n --log &lt;level&gt; - Path to log file\n --log-level &lt;level&gt; - Log level (info, warning, error, critical)\n --log-format &lt;format&gt; - Log format (plain, json-stream)\n --quiet - Suppress console output.\n --profile - Active project profile(s)\n\n Commands:\n\n help [command] - Show this help or the help of a sub-command.\n\n Examples:\n\n Render Markdown: quarto render document.qmd\n quarto render document.qmd --to html\n quarto render document.qmd --to pdf --toc\n Render Notebook: quarto render notebook.ipynb\n quarto render notebook.ipynb --to docx\n quarto render notebook.ipynb --to pdf --toc\n Render Project: quarto render\n quarto render projdir\n Render w/ Metadata: quarto render document.qmd -M echo:false\n quarto render document.qmd -M code-fold:true\n Render to Stdout: quarto render document.qmd --output -\nYou can also use quarto render --help to get the same help output.",
"text": "Quarto for rendering your MDS assignments\nYou can use quarto render to render your MDS documents into different output formats, e.g., pdf or html. For more information you can explore how quarto render works by calling the help page for render. This can be particularly useful when trying to export out pdf documents from a jupyter notebook if other methods are not working.\n$ quarto help render\n\n Usage: quarto render [input] [args...]\n Version: 1.4.358\n\n Description:\n\n Render files or projects to various document types.\n\n Options:\n\n -h, --help - Show this help.\n -t, --to - Specify output format(s).\n -o, --output - Write output to FILE (use '--output -' for stdout).\n --output-dir - Write project output to DIR (path is project relative)\n -M, --metadata - Metadata value (KEY:VALUE).\n --site-url - Override site-url for website or book output\n --execute - Execute code (--no-execute to skip execution).\n -P, --execute-param - Execution parameter (KEY:VALUE).\n --execute-params - YAML file with execution parameters.\n --execute-dir - Working directory for code execution.\n --execute-daemon - Keep Jupyter kernel alive (defaults to 300 seconds).\n --execute-daemon-restart - Restart keepalive Jupyter kernel before render.\n --execute-debug - Show debug output for Jupyter kernel.\n --use-freezer - Force use of frozen computations for an incremental file render.\n --cache - Cache execution output (--no-cache to prevent cache).\n --cache-refresh - Force refresh of execution cache.\n --no-clean - Do not clean project output-dir prior to render\n --debug - Leave intermediate files in place after render.\n pandoc-args... - Additional pandoc command line arguments.\n --log &lt;level&gt; - Path to log file\n --log-level &lt;level&gt; - Log level (info, warning, error, critical)\n --log-format &lt;format&gt; - Log format (plain, json-stream)\n --quiet - Suppress console output.\n --profile - Active project profile(s)\n\n Commands:\n\n help [command] - Show this help or the help of a sub-command.\n\n Examples:\n\n Render Markdown: quarto render document.qmd\n quarto render document.qmd --to html\n quarto render document.qmd --to pdf --toc\n Render Notebook: quarto render notebook.ipynb\n quarto render notebook.ipynb --to docx\n quarto render notebook.ipynb --to pdf --toc\n Render Project: quarto render\n quarto render projdir\n Render w/ Metadata: quarto render document.qmd -M echo:false\n quarto render document.qmd -M code-fold:true\n Render to Stdout: quarto render document.qmd --output -\nYou can also use quarto render --help to get the same help output.\n\n\nLecture 4 Exercise 1\n\n\nCreating and Deploying a Quarto Website\nObjective: By completing this exercise, students will gain hands-on experience in creating a Quarto website and deploying it using GitHub Pages.\nInstructions:\n\nCreate a New Quarto Website Project:\n\nOpen your command line interface (Terminal on Mac/Linux, Command Prompt/PowerShell on Windows).\nUse the quarto create project command to create a new Quarto website project.\n\nquarto create project\n\nSelect “website” as the project type and provide a directory name for your project.\n\nNavigate to Your Project Directory:\n\nChange into the newly created project directory.\n\ncd your_project_directory\nCustomize Your Quarto Website:\n\nOpen the _quarto.yml file in a text editor and customize the settings as needed.\n\nproject:\n type: website\n output-dir: docs\n\nModify the content of the index.qmd and about.qmd files to personalize your website.\n\nRender Your Quarto Website:\n\nUse the quarto render command to generate the HTML files for your website.\n\nquarto render\n\nVerify that the output is created in the docs directory.\n\nInitialize a Git Repository:\n\nIf you haven’t already, initialize a Git repository in your project directory.\n\ngit init\n\nAdd all files to the Git repository and commit them.\n\ngit add .\ngit commit -m \"Initial commit of Quarto website\"\nPush Your Project to GitHub:\n\nCreate a new repository on GitHub and follow the instructions to push your local repository to GitHub.\n\ngit remote add origin https://github.com/YOUR_GITHUB_USERNAME/YOUR_REPOSITORY_NAME.git\ngit branch -M main\ngit push -u origin main\nEnable GitHub Pages:\n\nGo to the settings of your GitHub repository.\nUnder the “Pages” section, set the source to the docs folder on the main branch.\nSave the settings and wait for GitHub to publish your website.\n\nVerify Your Website:\n\nNavigate to https://YOUR_GITHUB_USERNAME.github.io/YOUR_REPOSITORY_NAME to see your published Quarto website.\n\n\nQuestions:\n\nWhat command do you use to create a new Quarto website project?\nHow do you customize the settings for your Quarto website?\nWhat steps do you take to render your Quarto website and generate the HTML files?\nHow do you initialize a Git repository and push it to GitHub?\nWhat settings do you need to change in GitHub to enable GitHub Pages for your website?",
"crumbs": [
"Home",
"Lecture 4: Introduction to Quarto and Github Pages"
Expand Down Expand Up @@ -1795,5 +1795,16 @@
"Home",
"Lecture 3: Getting grovy with Git and GitHub"
]
},
{
"objectID": "lectures/4-quarto_github_pages.html#lecture-4-activity-1",
"href": "lectures/4-quarto_github_pages.html#lecture-4-activity-1",
"title": "Introduction to Quarto and Github Pages",
"section": "Lecture 4 Activity 1",
"text": "Lecture 4 Activity 1",
"crumbs": [
"Home",
"Lecture 4: Introduction to Quarto and Github Pages"
]
}
]
Loading

0 comments on commit dc12317

Please sign in to comment.