Build a static website with R Shiny

April 12, 2020
By

[This article was first published on R & Census, and kindly contributed to R-bloggers]. (You can report issue about the content on this page here)
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

Sounds stupid? Yes, it’s kind of throwing away 99% of Shiny’s power; and you can always build a static website with R markdown, blogdown, or bookdown.

Anyway, please keep reading as it will save you time if you are an R users who

  • want to make a portfolio website to showcase your work,
  • but know little about web development,
  • and yet prefer designing your own interface rather than using a popular theme.

The idea is to take advantage of Shiny’s convenient user interface design without relying on a Shiny server. Here is my portfolio website. It is nowhere near fancy, but is exactly what I want.

Without further ado, let’s get started. We will host the website on Github pages. Follow this instructions to create a repository called johndoe.github.io (replace johndoe with your username) and clone the repository to your computer.

Now let’s create a Shiny project in the cloned directory. All the files can be found here. The file structure for this project is:

As a simple example, this ui.R contains a picture (birds.png), some text (birds.Rmd), an internal link to a section in the same page, an external link to Wikipedia and a link to sample.html in subdirectory /samples. For the link to sample.html, we will use the true url at your website: href = "https://johndoe.github.io/samples/sample.html".

library(shiny)
ui <- fluidPage(
    sidebarLayout(
        sidebarPanel(
            width = 3,
            h2("My Static website"),
            h3("Internal link example"),
            a(h4("Birds"),
              href = "#birds"),
            hr(),
            h3("External link example"),
            a(h4("Wikipedia"),
              href = "https://en.wikipedia.org/wiki/Main_Page",
              target = "blank")
        ),
        
        mainPanel(
            width = 9,
            h2("Link to a saved sample.html"),
            p("The url is https://johndoe.github.io/samples/sample.html"),
            a(h3("Lovely Birds"),
              href = "https://johndoe.github.io/samples/sample.html",
              target = "blank"),
            hr(),
            h2("Text and image example", id = "birds"),
            fluidRow(
                column(
                    7,
                    includeMarkdown("markdown/birds.Rmd")
                ),
                column(
                    5,
                    img(src = "birds.png", width = "100%")
                )
            ),
        )
    )
)

The serve.R file has an empty function as we do not have any interactive features in ui.R.

library(shiny)
server <- function(input, output) {
    # empty
}

With all the files in place, follow these steps to create the static website on github page.

Step 1: Run the Shiny app in RStudio and then open it in browser. The webpage is at localhost 127.0.0.1:6230 (may differ from yours) and looks like:

Step 2: Save this webpage as index.html under directory johndoe.github.io as complete html. An subdirectory index_files contains associated files is created automatically.

Step 3: Open index.html in a text editor.

  • delete all

  • replace all https://127.0.0.1:6230 with https://johndoe.github.io

Step 4: Push all files to the Github repository. Wait for a couple of minutes and your website is ready at https://johndoe.github.io.

To leave a comment for the author, please follow the link and comment on their blog: R & Census.

R-bloggers.com offers daily e-mail updates about R news and tutorials about learning R and many other topics. Click here if you're looking to post or find an R/data-science job.
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.



If you got this far, why not subscribe for updates from the site? Choose your flavor: e-mail, twitter, RSS, or facebook...

Comments are closed.

Search R-bloggers

Sponsors

Never miss an update!
Subscribe to R-bloggers to receive
e-mails with the latest R posts.
(You will not see this message again.)

Click here to close (This popup will not appear again)