baseUrls, redirects and rewrites in blogdown

Question

Hello blogdown stackoverflow community!

I have been recently migrating my personal GitHub/Jekyll blog (https://blogs.nopcode.org/brainstorm) over to Blogdown/Netlify, but I'm a bit confused by the _redirects and config.toml url routing business.

I have read in detail the official blogdown and netlify documentations.

As well as Yihui's recommendations on good permalink hygiene

Unfortunately, no matter how many sensible changes I try (essentially on config.toml and _redirects), I cannot successfully migrate from Jekyll since:

1. Visiting https://blogs.nopcode.org/brainstorm results in all blogpost links rendered as https://blogs.nopcode.org/brainstorm/brainstorm/2017-09-01-blogpost-etc (two brainstorm's in the URL instead of just one). I would like all my blogposts to link to https://blogs.nopcode.org/brainstorm/2017-09-01-blogpost-etc (just one brainstorm). Right now I'm doing a URL rewrite so that when a user clicks on one of those brainstorm/brainstorm links, it gets rewritten as simply brainstorm... clearly suboptimal.
2. I have to move parts of the theme (js/images/css/etc..) under static/brainstorm/ in order for theme assets to load and find those URLs.

Here is the repo of my blog, should you find obvious flaws in it:

https://github.com/brainstorm/brainblog

And a string of changes I tried chasing an acceptable configuration without too many contortions:

https://github.com/brainstorm/brainblog/commits/master

That all being said, I find Hugo/blogdown super fast and the RStudio Addins menu/interface super handy to make quick changes on blogposts :)

Thanks much in advance!

Answer 1

The issue here is created because there is a relative path to posts at brainstorm and you are setting your base url to https://blogs.nopcode.org/brainstorm

Hugo will build your relative paths to the baseURL based on the theme configuration and Netlify will publish the public directory relative to the root of the site.

Hugo Server is showing you the correct links locally at brainstorm/brainstorm, because it configures the paths based on the baseURL.

The Netlify paths are from the root of the published site and is unaware of the Hugo configuration. On Netlify, the path to the posts are at /brainstorm.

Possible Solution

• Create a layout for the home page of your site to create the list like the theme does for a Section.

• Put all posts into the content root and remove the brainstorm folder

• Have Hugo build to public/brainstorm using hugo -d public/brainstorm in the netlify.toml

Create _index.md file at the root of the content folder with any frontmatter data you want to use on the page, if any.

Create a layouts/index.html file at the root of your project repository.

{{ partial "header.html" . }}

<main class="content" role="main">

  <div class="archive">
    {{ range .Data.Pages.GroupByDate "2006" }}
    <h2 class="archive-title">{{ .Key }}</h2>
    {{ range .Pages }}
    <article class="archive-item">
      <a href="{{ .RelPermalink }}" class="archive-item-link">{{ .Title }}</a>
      <span class="archive-item-date">
        {{ .Date.Format "2006/01/02" }}
      </span>
    </article>
    {{ end }}
    {{ end }}
  </div>

</main>

{{ partial "footer.html" . }}