-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathWebsiteCreation.qmd
54 lines (30 loc) · 5.14 KB
/
WebsiteCreation.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
---
toc: true
---
In the previous article, we discussed the individual elements within a Instrument.qmd file, as well as rendered them individually locally. In this article, we will discuss how to have Quarto render them collectively into a website.
# Combining .qmd files into a Website
If you look at the InstrumentQC folder, you can see a few additional .qmd files we have not referenced yet. These correspond to a few of the miscellaneous tabs present on the website.
The index.qmd file corresponds to the landing/home/summary page. For our website, it's main purpose is a quick summary of instrument QC status, as well as being able to rapidly load in (since it lacks most of the interactive elements present in the individual Instrument pages). Briefly, we can see indicator blocks for the individual instrument status (color-coded pass, caution, fail). The second column shows the results of the daily QC for the day (with tabsets for each instrument). And finally a six-month QC for all instruments is visible in the third column.
We then have a drop-down with the individual instrument pages, under the text for "Levey-Jennings Plots". As we have already explored, each instrument.qmd file generates its own interactive webpage specified by the combinatorial elements present in the code layouts (as well as the input file.paths that provide the data for the plots).
Next to it another dropdown tab for "Historical", which is covered at the end in Advanced Topics, but contains data for the same instruments for other years. Then there is the Help, Download Data Tabs and Other drop down menu. Looking around our InstrumentQC repository folder, we can find corresponding .qmd files for each of these webpages.
## _quarto.yml
One file in the repository we haven't discussed is the _quarto.yml file. This is the one file that rules them all, the one file that find them, the one file to bring them all and in the Quarto Website bind them. It is composed yaml, another coding language. I would suggest simply copying our existing _quarto.yml, modifying the text however you would like, and then just modify the Aurora3L.qmd filenames present to match how you have named your individual instruments.
Additionally, we have options for the navbar and footer elements that can be customized/renamed/etc as desired.
# Rendering the Website
Regardless if you implemented a manual, automated or hybrid approach to data transfer, at the GitHub repository level you will be receiving newly updated QC data in the form of modified Archive.csv files that are being updated and pushed to the GitHub repository.
Once you have configured your _quarto.yml file to provide links between the individual Instrument .qmd files and your index.qmd file, it is time to attempt to generate the website locally.
First, pull in any new data from your forked InstrumentQC repository. Next, navigate to your Terminal, and enter the following
```{r}
#| eval: false
quarto render
```
This starts the process of website building. Quarto will begin to render (build) the indivudal .qmd files into .html webpages. It will do so for every file, and if it doesn't encounter any errors, it will assemble them into a working copy.
Since you have rendered the Instrument.qmd files individually successfully before this step, if you do encounter any errors, read the description, and navigate to the individual .qmd file throwing the error and try to modify accordingly. Hopefully, these errors are just due to a missing library package, incorrect instrument name or file.path, or small issue with the _quarto.yml that should be easy to fix. If not, feel free to reach out by opening [an issue](https://github.com/DavidRach/InstrumentQC_Install/issues) and if I have free time I can trouble shoot.
Once Quarto Render completes, you have a fully functional copy of the website available locally. Navigate to your forked InstrumentQC folder, and look within the docs folder. Double click on the index.html file and admire your initial work! If you see anything that you want to modify, make a note of which instrument page it occurred on, navigate back to that Instrument.qmd, make the change, and then re-render the entire website.
## GitHub Pages
Once you are happy with your local version of the Website, it is time to share it with the world. For public GitHub repositories, you have the option to host a website as a GitHub page. To do this, navigate to your repository folder, click on settings, and on the middle left side of the page click on Pages.
From here, go under "Build and Deployment" and select "Deploy from a branch", and then select the "main/master" branch, and the "/docs" folder and click save.
Once this is done, wait a few minutes for GitHub to process the change, and your website will be available.
If your GitHub Repository name is something like this: "https://github.com/UMGCCFCSS/InstrumentQC", the deployed website would be found at the following: "https://umgccfcss.github.io/InstrumentQC/"
# Wrap Up
Congratulations, you now have a working website with an url link! You have made quite a bit of progress. Continue the cycle of making adjustments to the .qmd files, quarto render, and then push until you are happy with the result.