-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathNHS_R_Pycom_2023.qmd
264 lines (170 loc) · 8.15 KB
/
NHS_R_Pycom_2023.qmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
---
title: "Create Quarto website using RStudio and GitHub"
author: "`Pablo Leon-Rodenas`| NHSE-PMDD |`NHS-R/NHS.pycom Conference 2023`"
date: 10/10/2023
date-format: long
editor: visual
format:
revealjs:
smaller: true
theme: dark
slide-number: true
chalkboard:
buttons: false
preview-links: auto
logo: images/quarto.png
css: styles.css
footer: <https://github.com/Pablo-source>
resources:
- demo.pdf
---
## Objective {background="#43464B"}
This is a tutorial about creating your personal website using Quarto in RStudio (from Posit) and to publish it to GitHub. The website will include a section about R and Python online resources
`Pre-requisites`
- GitHub Account: You must have a GitHub account or create a new one to host your website.
- RStudio: We will push all our code to GitHub using Rstudio (you can use its built in terminal to do it so)
- Git and GitHub: We will use Git integrated within Rstudio to publish the different website files (index.html, about.html, etc) to GitHub. You can also upload files directly to GitHub website repo.
## Presentation structure {background="#43464B"}
- Step 01: Create a new `GitHub Account`
- Step 02: Create a `new repository` to host your website on GitHub
- Step 03: Create `new folder` in your local machine to build your website
- Step 04: Create new `RStudio project`
- Step 05: Create `Quarto website document`
- Step 06: `Critical` step. Change `output` directory to a `new "docs" folder`
## Presentation structure {background="#43464B"}
- Step 07: Populate `Index file` with content and click on `"Render"`
- Step 08: Create new `quarto file` to populate the `new "resources" tab` in our website
- Step 09: Go to the `_quarto.yml` and add the `new section` below the about.qmd line
- Step 10: Go to `"Pages"` left menu on the `"Setting"` main top menu on our Pablo-tester new repo
- Step 11: `Push` all your website `files` to `GitHub` dedicated repo using `RStudio`
- Step 12: Check all GitHub `website` `sections` content is `accessible` from your browser using website URL
## 01.Create GitHub Account {background="#43464B"}
For this workshop, I am going to use my GitHub account https://github.com/Pablo-tester. My main GitHub account already includes a personal website: https://github.com/Pablo-source/Pablo-source.github.io
::: columns
::: {.column width="40%"}
:::
::: {.column width="60%"}
:::
:::
## 03.Local Quarto website folder {background="#43464B"}
::: columns
::: {.column width="40%"}
- Previously created local folder named "Build_new_website"
- Create new R project
- Containing new Quarto Website project.
:::
::: {.column width="60%"}
:::
:::
## 05.Create Quarto website {background="#43464B"}
We setup the Quarto website using the **repository name** we created at the start "Pablo-tester.github.io". This is required for the website to be rendered in GitHub.
::: columns
::: {.column width="40%"}
:::
::: {.column width="60%"}
:::
:::
Our Quarto website will create a new project folder as a sub-directory of our main folder:\~/Documents/Pablo_zorin/Pablo_tester/Build_new_website
- Tick check box: Create a git repository
- Tick check box: Open in a new session
## 05.Set of Quarto website files {background="#43464B"}
Click on "Create Project" to open the Quarto Website project. Website files included inside new folder "Pablo-tester.github.io"
::: columns
::: {.column width="40%"}
It that will be populated with the following Quarto related files: - quarto.yml
- .gitignore
- about.qmd
- index.qmd
- styles.css
- Pablo-tester.github.Rproj
:::
::: {.column width="60%"}
:::
:::
## 06. Add docs folder to yaml file {background="#43464B"}
When rendering a Quarto documents, quarto saves the rendered website to `output` directory by default.
To host your Quarto website using GitHub pages, change this setup to point to a new `docs` folder.
Change `output` directory to a new `docs` folder
## 07. Populate Index file with content {background="#43464B"}
Open the `Index.qmd` file, populate it with content and click on Render. Include content about the general purpose of this website.
::: columns
::: {.column width="40%"}
:::
::: {.column width="60%"}
:::
:::
This action will create a new `docs` folder on your Files pane. Now our Quarto website is ready to be pushed to GitHub, so it would be rendered using GitHub Pages.
## 08. Fill Resources content {background="#43464B"}
Create new `quarto file` to populate `resources` tab in our website
In Rstudio click File \> New File \> Quarto document. Name this new Quarto file `Resources`
::: columns
::: {.column width="40%"}
:::
::: {.column width="60%"}
:::
:::
## 09. Add new section to quarto.yml file {background="#43464B"}
Modify \_quarto.yml file content to include new quarto file `resources.qmd` as a new website section.
Click on save to keep the changes introduced to this \_quarto.yml file.
The HTML output file from resources tab is saved in the /docs folder.
## 10. Set branch to docs folder {background="#43464B"}
From setting menu search for `Pages` left side menu. In this `Pages` left menu, under branch section: Instead of /root folder, navigate and select /docs folder instead. And then save changes applied
::: columns
::: {.column width="40%"}
:::
::: {.column width="60%"}
:::
:::
## 11. In RStudio push website to GitHub {background="#43464B"}
From RStudio, push all your website files to the `GitHub` to update your website content.
::: columns
::: {.column width="40%"}
:::
::: {.column width="60%"}
:::
:::
## 12. Check GitHub website {background="#43464B"}
Now our website is up and running, Access it from GitHub website URL
`https://pablo-tester.github.io/`
::: columns
::: {.column width="40%"}
:::
::: {.column width="60%"}
:::
:::
## 13. Resources/Further topics {background="#43464B"}
- Tutorial for Creating a new RStudio project with GitHub to visualize climate change (CC213). Riffomonas Project <https://www.youtube.com/watch?v=d5dUkO5lXds&list=PLmNrK_nkqBpLdTEOj\_-bwp58490i8ezRI&index=9>
- Repository "climate_viz" on my main GitHub account: <https://github.com/Pablo-source/climate_viz>
- Repository using Git and the terminal to commit changes to GitHub: <https://github.com/Pablo-tester/housing_pipelines>
Further topics
- Settings: (Manage Pipeline to deploy website):"Re-run all jobs" to ensure Quarto website is rendered
- Setup SSH security setting to clone repo and apply changes using Git and the Terminal instead of Rstudio:
- Create a public/private RSA key pair to use SSH instead of URL to commit changes to GitHub
## Any questions? {background="#43464B"}
- Pablo Leon-Rodenas
- email: [email protected]
- `My GitHub Repo`: <https://github.com/Pablo-source>
- `Slides`: <https://pablo-source.github.io/NHS_R_Pycom_2023.html#/title-slide>
- `Quarto slides R script`: <https://github.com/Pablo-source/Pablo-source.github.io/blob/main/NHS_R_Pycom_2023.qmd>
- `THANKS !!`