Successful Netlify production, but no layout displayed

support
1

I followed the standard guide to migrate from Forestry to Tina. All seems to be working, except the correct layout of our website (see attached)… Who can help?

This is the Github repo: GitHub - jfparie/AlgorithmAudit_website

What works:

  • Visiting localhost:1313 displays our website properly, after running npx tinacms dev -c "hugo server -D -p 1313"
  • Visiting localhost:1313/admin returns the Tina admin page
  • Netlify publishes the website successfully and is displayed properly in the Netlify app
  • Our GitHub repo contains a package.json

Where do I go wrong?

Ps - new user can only provide 2 links in a post

Screenshot 2023-06-20 at 21.59.40
Screenshot 2023-06-20 at 21.59.401920×958 157 KB

2

https://github.com/jfparie/AlgorithmAudit_website/blob/master/config/_default/config.toml#L2

https://gohugo.io/getting-started/configuration/#baseurl

1 Like
3

Thanks for your swift reaction!

I replaced the local URL with the domain URL here: AlgorithmAudit_website/config/_default/config.toml at 66d82fe0bad44e456830ac74d781ba920d3fd4d0 · jfparie/AlgorithmAudit_website · GitHub

But no result…

4

When I visit that URL I see

image
image1025×500 96.3 KB

What’s the problem?

1 Like
5

Yes, for continuity purposes I created a forward from www.algorithmaudit.eu to a version (partially) successfully deployed through my personal Github pages. I prefer however to host directly through Tina + Netlify, rather than Github.

6

So, in both cases I face an error:

  • Tina + Netlify: If I remove the temporarily forward to Github Pages, the Github repo I referred to in my earlier post is still displayed as the “markdownify” layout;
  • Github Pages: Some images (e.g., landing page) are visible, but images on others pages not (e.g., subdomain). This is due to the images path: src="/AlgorithmAudit_website/images/X.svg" works, src="/images/X.svg"doesn’t. But hardcoding the images paths to the former structure, isn’t successful according to my most recent git commits. There seems to be happening some path parsing in the deploying phase?

Thanks for your help by the way :slight_smile:

7

First, getting it working on GitHub Pages… it will help you understand some of the basics of URL resolution. The baseURL needs to match the GitHub Pages project URL. For example:

baseURL = 'https://user.github.io/project/'

As you have noticed, things can break when a site is served from a subdirectory. Some themes support this configuration, some do not. This article describes the challenge, and offers a solution.

After you have it working on GitHub Pages, then work on the migration to Netlify. Start by using the correct baseURL:

https://github.com/jfparie/AlgorithmAudit_website/blob/master/netlify.toml#L7

8

Also, make sure that you are building with the same version everywhere, including locally.

  • On GitHub Pages you are currently building with v0.105.0.
  • On Netlify you are currently building with v0.87.0.

The current version is v0.114.0.

9

For the current workaround on Github Pages, I changed the baseURL to my Github repo: https://www.jfparie.github.io/AlgorithmAudit_website/

I started reading about image render hooks, but don’t fully get it how this would resolve the issue to display all images properly on Github Pages. Seem very arbitrary to my why for some image path stuctures in subdomains /AlgorithmAudit_website/ is added as a prefix, while for others only src="images/X.svg is loaded. E.g., when inspecting the top page image for subdomain ‘about’ the prefix is loaded, while for ‘events’ it is not…

10

Thanks for pointing this out. Can I simply change HUGO_VERSION = "0.87.0" in netlify.toml to HUGO_VERSION = "0.114.0"?

11

Yes.

OK, so markdown render hooks are not going to help you with all of the hardcoded img and a elements in all of those content shortcodes.

Typically, when an author hardcodes a URL in a template, they pass it through one of the URL transformation functions: relURL, absURL, relLangURL, or absLangURL. Something like:

<img src="{{ relURL "images/Quantitative-qualitative.png"}}">

Notice the path does not have a leading slash. That’s really important if you use this approach. See docs.

If you don’t want to make all of those changes, you could try enabling canonifyURLs in your site configuration.

.

12

Thanks for looking into this. I included in both config.toml files (in the root directory) and in (config >_default): canonifyURLs = true, without direct result.

Git changes can be found here:

13

As a test with relURL, I changed this image path without succes. Do you have any idea why?

14

Good to know, on the website two types of image path stuctures are used:

  1. In all page headers {{with .Params.image}}<img src="{{ . | relURL }}" {{end}}
  2. In html chunks <img src="images/Quantitative-qualitative.png"> is used

For 2, relURL could potentially be a fix. But for 1, relURL is in use.

15

After the recent PRs, I cannot find any broken internal links in either deployment:

What’s the next step?

16

Hi,

After merging the new PR, I set up GitHub Pages and linked a custom domain (algorithmaudit.eu) to my GitHub domain. I changed the DNS records accordingly and all seems to work now! Happy to have this alternative for Tina :slight_smile: Many many thanks for your help! Without this community I would have been lost in fixing this all myself.

Best,
Jurriaan

17

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.