Hugo

Please help me add an external link to my site

Hi guys,

I’ve been trying to find info on how I can create a link to an external resource in some of my /data .yml or config.toml files. I went through the official docs - didn’t find what I want, googled the subj and found couple dozens of pages discussing that.

I went through all of them - and in the end I still don’t know how to create a link to an external resource. All those pages discuss lengthily (tl;dr) anything but creation of a link to an external resource.

I want to draw all contributors’ attention to extreme desirability of staying on the subject, being clear and concise and finishing their input with a simple working demo.

Also, if anyone knows how to create a link to an external resource - please send me a link!
Thanks a lot!

What kind of resource are you referring to? An external image?

Which pages are you refering to? Can you please post a couple of links?

Can you please give us concrete examples of what you are referring to above? Like for example, which pages in the Documentation are not meeting your expectations.

Again it is not clear at all what do you mean by creating a link to an external resource.

Also for future reference and to keep things in this Forum civil and productive please do read up on the Forum FAQ regarding proper etiquette when posting here, as well as the Requesting Help Guidelines.

Thank you.

I want to create a link from my blog to a page in my online store.

  1. I am using the Meghna-Hugo theme. There is a button in “cta” partial - it links to the page I want just fine. Here is its code:

<a href="{{ .Site.Params.cta.btnURL }}" class=“btn btn-main”>{{ with .Site.Params.cta.btnText }} {{ . }} {{end}}</a>

It picks values from a section in config.toml:

[params.cta]
btnURL = "https://www.theurl.com/thepage.html"
btnText = "Button Text"

It works fine from its partial, but if I copy the button code to a partial called “services” - it stops working, does not pick values!
Why?! How is it configured?

  1. If I create a section in config.toml:

    [params.services]
    btnURL = “https://www.theurl.com/thepage.html
    btnText = “Button Text”

it does not pick values from here. Why?! How is it configured?

  1. If I put these values into service.yml

    btnURL : “https://www.theurl.com/thepage.html
    btnText : “Button Text”

it does not pick values from here. Why?! How is it configured?

  1. If I create a

    [[menu.nav]]
    name = “GitHub”
    weight = 9
    identifier = “GitHub”
    url = “https://github.com/petschau/WinFellow

why it points to

http://localhost:1313/#https%3A%2F%2Fgithub.com%2Fpetschau%2FWinFellow ?

Thank you in advance if you can explain this to me.

Did you change it to <a href="{{ .Site.Params.services.btnURL }}" class=“btn btn-main”>{{ with .Site.Params.services.btnText }} {{ . }} {{end}}</a>?

<a href="{{ .Site.Params.cta.btnURL }}" class="btn btn-main">{{ with .Site.Params.cta.btnText }} {{ . }} {{end}}</a>
                         ^^^ Note this                                  and this  ^^^

{{ .Site.Params.cta }} corresponds to [params.cta] in your config.toml. Read more about .Site.Params here: https://gohugo.io/variables/site/#the-site-params-variable

What does your services partial look like?

If you are copied {{ .Site.Params.cta.btnURL }} as is, then it wouldn’t pick up the values of [params.services], but instead use [params.cta].

But I’m just guessing here. Without seeing what your actual code looks like, that is all I or anyone can do, guess. Which is why we ask that people asking for help in these forums read Requesting Help, which recommends that you share the actual code.


The theme you are using constructs the URL that way in this line: https://github.com/themefisher/meghna-hugo/blob/7b23675e1171d8a059f253b306f9c8c3e2efa208/layouts/partials/navigation.html#L33

{{ $.Site.BaseURL }}#{{ .URL }}

Assuming you are running hugo server,

  • $.Site.BaseURL will resolve to http://localhost:1313
  • .URL will resolve to "https://github.com/petschau/WinFellow"

Yes, of course!

And it still doesn’t work?

Does not work. My latest guess is the services partial does not have access to the config.toml

Can you upload your code to github and give us the link?

Right now I see the best solution as to put the button from cta.html partial:

<a href="{{ .Site.Params.cta.btnURL }}" class=“btn btn-main”>{{ with .Site.Params.cta.btnText }} {{ . }} {{end}}</a>

configured to pick values from service.yml:

<a href="{{ .Site.Data.service.serviceItem.btnURL }}" class=“btn btn-main”>{{ with .Site.Data.service.serviceItem.btnText }} {{ . }} {{end}}</a>

into service.html partial - right after {{ .content }} on line 24, and to pick values from service.yml:

enable : true
heading : Our
headingSpan : Services
serviceItem :

  • icon : tf-ion-social-tux
    title : Lorem ipsum dolor sit
    content : Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur necessitatibus ullam, culpa odio.
    btnURL : “https://www.theurl.com/page-1.html/
    btnText : “Shop for button text”

but it does not work - I don’t know why.

As a temporary solution, you could just put the links and text in the actual html code.

Without seeing the full code of your site, it’s hard to tell what’s happening. As a ‘shot in the dark’ another option could be that the problem isn’t with the code in the partial, or values in config.toml but the way you’re overriding the theme.

Have a read of https://gohugo.io/templates/partials/#partial-template-lookup-order

Have you got the Maghna-Hugo theme copied into the theme directory? Are you overriding its partials using the higher-level layouts/partials directory? Has your version of the partial got the same name, in the same sub-directory?

If you can give us a link to a repo or the actual code somehow, we can check. Going only from the snippet you pasted, the format is wrong due to the spaces before the colons.

This is my first experience with Github. I’ve just downloaded the theme and edited some files. Please advise, how I should upload my files to Github - fork, clone, submodule?

I’m not sure how to create a child theme, so the best solution for now perhaps would be to have an independent fork. So, just upload my files to Github, or create a clone / submodule with CLI - I don’t know. May be use git command to sync my local files to Github?

Downloading a theme and editing it is an ok way to do things—it’ll work. I think there’s a benefit to having a theme as a sub-module and then overriding the bits you want to change…but I reckon what you’re doing will help get things started.

For now, we’ll be able to help you if you push your code to a git repository (gitlab/github/bitbucket). Here’sa few tutorials on how to do this

https://help.github.com/en/articles/creating-a-new-repository


https://git-scm.com/book/en/v1/Git-Basics

As @funkydan2 says, it will be great to apply some basic about git repository. There is a flexibility of using GUI as well.

Also, I’d recommend using the theme as gitsubmodule

Thank you guys, I am figuring out how I can do that with CLI. BTW, do you keep your business info in your local GIT, or separately? You might keep your software model in local Git and actual data files to build the website in another folder.

I used the website smaple files - copied the to Hugo and edited them along with partials. Now in my working directory I have a mix of Hugo files, theme files and sample website files. Which of those I should push into Git remote?

I think I have started wrong and now that’s why I hardly understand what to do.
What is the correct way I should have taken initially -
fork the theme into my Git remote,
download it and edit it,
upload edited files to the remote -
or what?

Here’s the process I use

  1. Create a new blank git repository (on github or bitbucket).
  2. git clone <url> to get the initialised repository on my local system.
  3. Run hugo new site <site directory> to build a skeleton folder structure.
  4. Install the theme as a submodule (documentation).
  5. Copy files out of the themes exampleSite directory (like config.toml, maybe some of the example pages and posts) into the appropriate places in the site folder structure.
  6. Run hugo server and test that something like the example site gets built.
  7. Commit and push these changes to git (you could do this after each step if you like).
  8. Start customising…and as things work, commit and push the changes to git.
1 Like

Hello funkydan2, thank you for your assistance! Mastering this for the first time creates a huge overwhelm. This is what I could recreate:

On github or bitbucket: create a new blank git repository <siteName>

Locally: run hugo new site <siteName> to build a skeleton folder structure:
cd <workDir>
<workDir> hugo new site <siteName> Initialize local repository: <workDir>: git init <siteName>
<workDir>: git config user.email \<email> \<workDir>: git config user.name <username>
cd <siteName>
<siteName>$ sudo git clone <themeUrl> to /themes/<themeName>:
Merge files from the theme’s <exampleSite> into <siteName>
Run hugo server - it works.

I’m sorry for this mess - can’t clean it.

I didn’t understand how to Install the theme as a submodule - after I installed it as clone above.

git commit -m “my first commit”
On branch master

Initial commit

Untracked files:
archetypes/
config.toml
content/
data/
resources/
static/
staticman.yml
themes/

nothing added to commit but untracked files present