Landing page A/B Testing

support
1

I am trying to run A/B testing using cloudflare page functions and I need Hugo to create two html files in the public directory

public/
├── index.html   # Default  page
├── test.html    # Alternative version for testing

I have tried with layouts/index.html (for index.html) and layouts/test.html (for test.html) but I can’t get what I want.

What am I missing ?

2

first change index.md to _index.md.

you should now get a public/test/index.html for your test page.

hugo calls that pretty urls and thats the default.

to always get name.html add this to your hugo.toml

uglyUrls = true

read more about that in Content organization

3

Thanks. Maybe I should have given more info.

  1. there is no index.md in the content/ directory and using an _index.md didn’t help
  2. The site html is generated using yaml files in the data/ directory
  3. uglyUrls = true will cause all the website to change how the urls are created. I want to have the index.html and test.html to be in the root of the public/. Much like the 404.html

So I am thinking may be the approach is configuring outputs and outputformats might solve.

4

so, at least for me, there too many unknown factors with that.

  • config
  • how , where and when are these content files created
  • layouting
  • parameters.

if I were you I would share the repo and elaborate more how things are done

seems nothing that can be answered out of the bat.

5

You’re right as no one has the magic ball. Unfortunately I don’t have a public repo. It is currently locally developed. However here is what I have now in terms of config and layouts.

config/_default/outputs.yaml
home:
- HTML
- RSS
- JSON
- TESTHTML

config/_default/outputformats.yaml
HTML:
baseName: "index"
isHTML: true
mediaType: "text/html"
permalinkable: true
TESTHTML:
baseName: "test"
isHTML: true
mediaType: "text/html"
permalinkable: true

layouts/index.html
{{- define "main" -}}
<main>
{{- partialCached "noscript" . -}}
{{- partialCached "ddj-hero" . -}}
{{- partialCached "whatsnew-webinar" . -}}
{{- partialCached "about-with-PicQuote" . -}}
{{- partialCached "signUp" . -}}
</main>

layouts/index.TESTHTML.html
{{- define "main" -}}
<main>
{{- partialCached "noscript" . -}}
{{- partialCached "demo-webinar-cta" .  -}}
{{- partialCached "whatsnew-webinar" . -}}
{{- partialCached "about-with-PicQuote" . -}}
</main>

content/_index.md
---
outputs:
- html
- testhtml
layout: "index" # Default for HTML
layout_TESTHTML: "testindex" # Custom layout for TESTHTML

---

I have tried both with layout and without layout in the _index.md result is same. Also having no _index.md still produces the index.html and test.html

I now have the following rendered in the public directory

public/
├── index.html   # Uses `list.html`
├── test.html    # Uses `index.TESTHTML.html`

So now at least I have two html files which I can reach without any path ie. http://localhost:1313/ gives me index.html and http://localhost:1313/test.html gives me test.html.

However for some reason I can’t figure out why, even though the layout templates are different, the index.html and the test.html are generated by the layouts/index.html and therefore identical which shouldn’t be.

So the puzzle is still not solved.

6

Solved finally, solution is public for any one interested.

Hugo AB testing minimum layout

I will also add a simple README as soon as possible

1 Like