HTML page formatting to match Github Page

[castower]

Hello all,

While working on the github page website, I've figured out how to make the .md files match the theme by adding a YAML header, but I'm not sure how to do this for .html files. Has anyone discovered if it is possible to create a .html file on RStudio and make it match the overall website theme? Specifically, I'd like to be able to create a .html file that can display R Code Output, but also have the same style and include the header of my site so that I can click through all the pages instead of having to hit the back button/lose the header options.

Thanks!
Courtney

[lecy]

The CSS controls appearance. To match your website you need to apply the same CSS. You can go into the assets folder and download the CSS into the folder with your RMD file. Then there is a CSS option for YAML where you can specify a CSS file. The file you reference will override the default RMD style options.

[lecy]

You can add style events to an RMD document by placing the CSS arguments between <style></style> tags in your document.

[castower]

@lecy thanks so much!

[lecy]

You can also add header and footer sections to your RMD, but you need static HTML pages. The current versions of header.html and footer.html in the _includes folder of your website include Jekyll liquid tags. RMD will not know what to do with these, so you would probably need to create static versions. If you have static header and footer sections you would add them as follows:

---
title: "Page Title"
output:
  html_document:
    includes:
      before_body: header.html
      after_body: footer.html
      css: styles.css
---

Lots more options here:

https://bookdown.org/yihui/rmarkdown/html-document.html#advanced-customization

[castower]

I just wanted to follow up and say that I figured it out using the R HTML format in RStudio and I was able to create the following page: https://castower.github.io/wordcloud2/
repository link: https://github.com/castower/castower.github.io/blob/master/wordcloud2.md
Thanks @lecy

[lecy]

This is great! Did you update the YAML header settings in the RMD file, or copy the HTML code into a GitHub page?

[castower]

@lecy I used the R HTML template in RStudio to export the file to an html that I uploaded to the repository. I then changed the file extension to .md and added the YAML header under GitHub pages. I also added a few extra HTML and CSS codes for the photos and table of contents.