Share your deployed sites

[willfaught]

Links and screenshots are welcome! :)

If you have an issue, please create a GitHub issue to report it instead of posting here.

[goern]

Hi there, here is mine> https://tinytales.shop/

only the social icons are missing...

[willfaught]

Looks good! If you want to hide the "1 minute" reading time, you can set paige.style to "#paige-reading-time { display: none; }" in the front matter or site parameters.

[goern]

any idea why the social links are not shown?

[willfaught]

I see this HTML:

<div class="mw-100 overflow-x-auto" id="paige-content">
<div class="paige-hero">...</div>
<!-- raw HTML omitted -->
</div>

By the way, where is <!-- raw HTML omitted --> coming from?

I don't see a div or p tag there for social icons. You have to put one there manually now, wrapping the paige/icon shortcode. For example:

<div class="column-gap-3 d-flex display-6 justify-content-center mb-3">
    {{< paige/icon class="bi bi-github" name="GitHub" url="https://github.com/willfaught/paige" >}}
</div>

If that's not the issue, I'd have to see your code and know the exact Paige version you're using.

[willfaught]

I added a new tip for your case, where you only use the menu for the navigation: https://github.com/willfaught/paige#menu-navigation-only. Basically, I recommend you hide #paige-breadcrumbs in that case.

[peterjdavis]

Mine is https://www.caninescentric.co.uk/

[willfaught]

Looks good! :)

[willfaught]

Here's mine: https://willfaught.com

[Today20092]

https://tampashutter.net

Code can be found @ https://github.com/Today20092/tampashutterwebsite

[Today20092]

It would be on the gallery page,
i would want this photo from https://www.tampashutter.net/gallery/ramadan-2023/

to be on the /gallery page but not appear in the description as "div" because that is the only way i was able to do it before

[willfaught]

Paige is currently designed to only present text on list pages like your /gallery/ page, in your case using the .Title and .Description page string fields in Hugo. You could try putting an img tag in your page description, since the description is rendered as Markdown. I don't know if that will look good, though.

Perhaps in the future list pages could display the first page image configured in the front matter. That presents a design challenge for pages that don't have images, though. How would you want the image to be displayed? Below the description, centered? Beside the title and description, to the left or right? How big?

[willfaught]

I noticed that the videos on https://www.tampashutter.net/gallery/youtube/ aren't expanded to fill the width of the page. Did you customize it to do that? If not, that's a bug that might be fixed in the latest version.

[Today20092]

I noticed that the videos on https://www.tampashutter.net/gallery/youtube/ aren't expanded to fill the width of the page. Did you customize it to do that? If not, that's a bug that might be fixed in the latest version.

Yes i did, it looked weird on mobile so i made them a little smaller. sorry i haven't replied sooner i didn't get any notification for your message!

[Today20092]

Paige is currently designed to only present text on list pages like your /gallery/ page, in your case using the .Title and .Description page string fields in Hugo. You could try putting an img tag in your page description, since the description is rendered as Markdown. I don't know if that will look good, though.

Perhaps in the future list pages could display the first page image configured in the front matter. That presents a design challenge for pages that don't have images, though. How would you want the image to be displayed? Below the description, centered? Beside the title and description, to the left or right? How big?

The image would be like a banner possibly, its up to your creativity how you would do that, like a banner for a blog. similar to https://medium.com/ or anything like that.

[ryvaeus]

Here's mine: https://ryvaeus.com/

I'm loving the simplicity and "front and center"-edness of of the theme.

A couple tips for other users who might be browsing this discussion board:

• Muut is an accepted commenting system, although it's not documented in the readme. Use the following parameter in your site config: [paige.comments.muut] account_id = "muut-id"
• You can hide pages from showing up in search results using [paige.search] hide = true, not [paige.search] hide_page = true as it is currently written in the readme at the time of this post.
• Will is very responsive to issue reports, so don't be afraid to raise one if you're having trouble. Thanks, Will, not just for sharing this great theme but for being a responsible repository owner as well!

I do have a couple questions for you though, @willfaught. I realize that whether the theme displays in dark or light mode depends on the user agent's device theme. But is there a way we can let visitors toggle the theme on their own?

And secondly, is there a way we can have pages load different CSS stylesheets and/or different content entirely, depending on whether dark or light mode is used? I ask because Muut by default expects to be integrated into a site with a light background. They do offer a dark background option, but it requires embedding their installation code snippet with additional classes.

Edit: I worked around for a solution to my second question above, and now have Muut able to dynamically change between dark and light mode depending on the viewer's system theme just like the rest of the site. However, I'd still appreciate an answer if the above is possible, so I can do a proper implementation.

[willfaught]

@ryvaeus Thanks for the notice! I removed Muut support.

[shehuawwal]

@ryvaeus Can you help with integrating cusdis commenting system? Also is there a need for captcha? How often do you receive spam comments?

Thanks

[willfaught]

@shehuawwal Cusdis support was added in v0.90.0.

[ryvaeus]

Cusdis support was added in v0.90.0.

Hi, thanks for implementing this officially! I hadn't noticed.

I attempted to switch over to your official Cusdis implementation just now but after removing my custom pages and adjusting the Cusdis config in my hugo.yaml, my blog loads without any comments. Any advice?

params:
  paige:
    comments:
      cusdis:
        app_id: REDACTED
        host_url: https://cusdis.com

Edit: Nevermind, it looks like I'll need to update the Paige module which will also require updating my Hugo install. There's been a lot of changes on both projects since I last looked at my site haha.

[willfaught]

@ryvaeus Sorry for the delay responding. I fixed an issue that was preventing Cusdis from working. Thanks for reporting the issue. Please try v0.91.2.

[axjms1]

Hello,

I created two very similar websites and have them hosted on Git Hub. They are still getting a few tweaks but are largely complete with the exception of my final paper. 👎

I just wanted to thank @willfaught for all of his help on these projects. He was a lifesaver and I am really happy with how they turned out.

https://axjms1.github.io/portfolio/

https://axjms1.github.io/maker_portfolio/

//Jason

[willfaught]

You're welcome! They look great. :)

[svetogam]

https://superpractica.org/

I modified it a little to suit my purpose.

Out of all the Hugo and Jekyll themes I looked through, I liked this one the best. It's minimalist without having the "rugged" look that most minimalist themes go for. It was surprising to me how few themes do this well. Thanks!

[willfaught]

You're welcome!

[pbj-writes]

https://pbjwrites.info/

I'm a technical writer, so I'm trying to better understand static site generators, markdown, and general docs-as-code concepts.

[willfaught]

Nice!

[hankuoffroad]

Here is my new portfolio website (on staging) - https://techwritingcx.vercel.app/

I used a default parameter setting in hugo.toml file.
https://github.com/hankuoffroad/techwritingcx/blob/main/hugo.toml

Title is duplicated. I don't know where I can override it. Can you advise? Thanks.

[willfaught]

According to https://gohugo.io/methods/page/title/, Page.Title defaults to the section title if there's no file for the page, but apparently if it's the home page, it defaults to the site title. I've never noticed that before because I usually have a content/_index.md. To clear the title, you need to make a content/_index.md that either (1) has content and doesn't set the title in the front matter, or (2) doesn't have content and sets title = "" in the front matter.

[willfaught]

Created gohugoio/hugoDocs#3015

[hankuoffroad]

That works! Thank you for your help.

[hankuoffroad]

@willfaught narrow look setting doesn't work now. the content expands to fill the whole window. Could you advise how to fix it? I used the following in hugo.html.

[params.paige]
style = """
#paige-page-content > * { margin-left: auto; margin-right: auto; max-width: 40rem; }
"""

[hankuoffroad]

Alternatively, I used a custom style template in layouts/_default/single.html

[willfaught]

With:

diff --git a/example/content/content/markdown-syntax.md b/example/content/content/markdown-syntax.md
index 666d879c..b93e3a90 100644
--- a/example/content/content/markdown-syntax.md
+++ b/example/content/content/markdown-syntax.md
@@ -4,6 +4,10 @@ categories = ["content", "paige"]
 description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
 tags = ["css", "html", "markdown"]
 title = "Markdown Syntax Guide"
+[params.paige]
+style = """
+#paige-page-content > * { margin-left: auto; margin-right: auto; max-width: 40rem; }
+"""
 +++
 
 <!--

I see this:

What are you seeing? Can you provide code or a screenshot?

[hankuoffroad]

thank you. under layouts/_default/single.html,

<!DOCTYPE html>
<html lang="en">
<head>
    <title>{{ .Title }} - {{ .Site.Title }}</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap">
    <style>
        /* styling across sites */
        body { font-family: 'Inter', sans-serif !important; background: #f9fafb; color: #333; margin: 0; padding: 20px; }
        main { max-width: 800px; margin: auto; }

        /* basic styling */
        article { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: 0.3s; }
        article:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); }
        h1 { font-size: 2rem; font-weight: 600; color: #1e293b; font-family: 'Inter', sans-serif !important; }
        section { font-size: 1.1rem; line-height: 1.6; font-family: 'Inter', sans-serif !important; }

        /* code block & front matter styling */
        pre, code { 
            font-family: 'Courier New', monospace; 
            background: #f3f4f6; 
            padding: 10px; 
            border-radius: 5px; 
            font-size: 0.95rem; 
            white-space: pre-wrap;
            word-wrap: break-word;
            overflow-x: auto;
            display: block; 
        }

        /* custom style (layout: "custom") */
        {{ if eq .Params.layout "custom" }}
        .custom-article { border-left: 5px solid #3b82f6; padding: 25px; }
        .custom-title { text-align: center; color: #2563eb; font-size: 2.2rem; font-family: 'Inter', sans-serif !important; }
        .custom-meta { text-align: center; color: #64748b; font-size: 0.9rem; font-family: 'Inter', sans-serif !important; }
        .custom-content { font-size: 1.2rem; line-height: 1.8; color: #374151; font-family: 'Inter', sans-serif !important; }
        .custom-footer { margin-top: 20px; padding-top: 10px; border-top: 1px solid #ddd; text-align: center; font-style: italic; }
        {{ end }}
    </style>
</head>
<body>
    <main>
        <article {{ if eq .Params.layout "custom" }} class="custom-article" {{ end }}>
            <header>
                <!-- display title once -->
                {{ if not .IsPage }}
                    <h1 class="{{ if eq .Params.layout "custom" }}custom-title{{ end }}">{{ .Title }}</h1>
                {{ end }}
                {{ if eq .Params.layout "custom" }}
                    <p class="custom-meta">Published on {{ .Date.Format "2006-01-02" }}</p>
                {{ end }}
            </header>
            <section class="{{ if eq .Params.layout "custom" }}custom-content{{ end }}">
                {{ .Content }}
            </section>
            {{ if and (eq .Params.layout "custom") .Params.author }}
                <footer class="custom-footer">
                    <p>Written by: <strong>{{ .Params.author }}</strong></p>
                </footer>
            {{ end }}
        </article>
    </main>
</body>
</html>

[willfaught]

It looks like you're trying to style the list page subpage content, not the single page content. List page subpage content is in #paige-page-pages, so you want:

#paige-page-pages > * { margin-left: auto; margin-right: auto; max-width: 40rem; }

I updated the readme to show this.