Cannot deploy website made by Blogdown in Github Pages

Question

I want to deploy a Hugo-based website made using the blogdown package in Github Pages, while keeping the R source code of the website in the same repository. This should be achievable by generating the website files in the docs directory in the Github repository, and then pointing Github Pages to the docs folder in the main branch. However, I could not make it work.

Here, I describe a simple blogdown site to demonstrate the problem. The directory is created using Rstudio with the options as shown in the following picture.

I have edited the config.toml file, in particular to set the publishDir as docs and add a logo to the website. The content of the edited config.toml file is given below.

baseurl = "/"
publishDir = "docs"
languageCode = "en-us"
title = "Blogdown website in Github Pages"
theme = "hugo-lithium"
googleAnalytics = ""
disqusShortname = ""
ignoreFiles = ["\.Rmd$", "\.Rmarkdown$", "_files$", "_cache$"]

[permalinks]
    post = "/:year/:month/:day/:slug/"

[[menu.main]]
    name = "About"
    url = "/about/"

[params]
    description = "Demonstrating problem in deploying a blogdown website in Github Pages."

    # options for highlight.js (version, additional languages, and theme)
    highlightjsVersion = "9.12.0"
    highlightjsCDN = "//cdnjs.cloudflare.com/ajax/libs"
    highlightjsLang = ["r", "yaml"]
    highlightjsTheme = "github"

    MathJaxCDN = "//cdnjs.cloudflare.com/ajax/libs"
    MathJaxVersion = "2.7.5"

    [params.logo]
    url = "logo.png"
    width = 50
    height = 50
    alt = "Logo"

I have also edited the value of the publish parameter in the netlify.toml file to docs. I have done this to have the option to deploy the website using Netlify apart from Github Pages. The content of the edited netlify.toml file is:

[build]
command = 'hugo'
publish = 'docs'
[build.environment]
HUGO_VERSION = '0.89.4'


[context]
[context.branch-deploy]
command = 'hugo -F -b $DEPLOY_PRIME_URL'

[context.deploy-preview]
command = 'hugo -F -b $DEPLOY_PRIME_URL'

[context.production]
[context.production.environment]
HUGO_ENV = 'production'

Content of the website is added in the content folder, which includes an about.md file and a sample post 2021-12-09-sample-post.Rmd. The structure of the content folder is:

content
   |-- about.md
   |-- post
        |-- 2021-12-09-sample-post.Rmd

The logo is added by placing the file logo.png in the static\images directory. The source code of this example can be downloaded from here. The local build in RStudio runs perfectly well. The files after building the website locally are uploaded here. I have placed the .nojekyll file in both the main directory and the docs folder to prevent Github Pages from using Jekyll.

However, the generated Github Pages site does not work. But it works perfectly in Netlify.

I have also tried changing the value of the baseurl argument in the file config.toml to point to the Github hosting directory. The website is generated perfectly in RStudio through blogdown. The source code as well as the generated website files are uploaded here. But now, neither Github Pages nor Netlify correctly deploys the website.

I wish to be able to deploy the website in both Github Pages and Netlify, just like which can be done for a website generated using the bookdown package in R. If that is not possible at all, I wish to be able to deploy the website in Github Pages at least. I wonder what mistakes I am making in the website code or configuration.

user_559676 · Answer

Short answer: set relativeURLs = true in config.toml, so that your pages use relative URLs (but this is really up to the theme's support for relative URLs; the hugo-lithium theme should be good).

Longer answer:

Your Github Pages URL https://joydeepchowdhury.github.io/deploymentproblem/ contains a subpath deploymentproblem/, whereas your Netlify URL does not: https://deploymentproblem.netlify.app/. If you don't use relative URLs, resources won't be correctly loaded on one of these two sites, e.g., /images/logo.png on https://joydeepchowdhury.github.io/deploymentproblem/ means https://joydeepchowdhury.github.io/images/logo.png, which is wrong (should have been https://joydeepchowdhury.github.io/deploymentproblem/images/logo.png instead), but it is correct on the Netlify site: https://deploymentproblem.netlify.app/images/logo.png. Absolute/relative URLs are tricky but extremely important to understand. You may read the last part of the Appendix B.1 of the blogdown book.

Another solution is to specify different baseURLs for different sites. For example, you may configure

baseURL: "https://joydeepchowdhury.github.io/deploymentproblem/"

in config.toml, but override it in netlify.toml:

[build]
command = 'hugo -b https://deploymentproblem.netlify.app/'

Cannot deploy website made by Blogdown in Github Pages

1 Answers