search

oxidecomputer / design-site

We are looking for designers who code to help build a new user experience for computing!
https://design.oxide.computer
MIT License
98 stars 34 forks source link

Missing Base URL #43

Closed lovethebomb closed 4 years ago

lovethebomb commented 4 years ago

It seems that hugo doesn't use a base URL when building, which prevents the twitter:image and Time Travel exit button from working, following my changes introduced in e928f0e745008bada7f869a30073ec1c2372063b.

We could rollback that change and hardcode the twitter image, or, we could use VERCEL_URL env var at build!

I do not know what it is the build command used on Vercel right now, but a simple hugo -b $VERCEL_URL should do it.

  -b, --baseURL string         hostname (and path) to the root, e.g. http://spf13.com/
plainspace commented 4 years ago

Good eyes! I just caught this myself. Added the VERCEL_URL in Vercel but also in config.toml. Still not working correctly. It isn't pulling the contributors in the footer anymore. Still debugging.

plainspace commented 4 years ago

Seems like the contributors issues was not related.

plainspace commented 4 years ago

Actually... it was! I hardcoded the links for now.

lovethebomb commented 4 years ago

After testing different solutions in Vercel, I got it working!

Reminder: when using hugo serve locally, hugo will automatically override the base URL for you (and thus this is also why it wasn't working for me as I thought it would).

In config.toml we define 

baseurl = "https://design.oxide.computer/"

This allows a 'safe' fallback when building for production with a simple hugo command.

In Vercel, update the build command to be hugo -b https://$VERCEL_URL

Screenshot 2020-05-30 at 13 26 11

And then enable the system environment variable VERCEL_URL (both production and preview)

Screenshot 2020-05-30 at 13 27 09

If the meta twitter:image and Time Travel href button are changed to use {{ .Site.BaseURL }}, it will correctly output the deployment URL! :)

<meta name="twitter:image" content="{{ .Site.BaseURL }}/images/logo.jpg">
<a class="history__exit" href="{{ .Site.BaseURL }}" title="Exit to main page">

=>

<meta name="twitter:image" content="https://design-site-1o7jf0m5d.now.sh/images/logo.jpg">
<a class="history__exit" href="https://design-site-1o7jf0m5d.now.sh" title="Exit to main page">
plainspace commented 4 years ago

This is close but not quite working yet. Something about changing the build command is messing with the call to the GitHub API to grab the contributors.

lovethebomb commented 4 years ago

That is odd!

If you look at my own deployed version based on the same changes, it seems to build with working contributors, even if the getJSON API call is using the old repository name (GitHub handles the redirection but repos/oxidecomputer/design.oxide.computer should be repos/oxidecomputer/design-site)!

Could you either share the build command used or the build logs, unless it contains sensitive data?

plainspace commented 4 years ago

I just tried again. It is really strange that the contribs are showing up on your deployed version but not this one. I updated the build command updated the meta twitter:image and Time Travel href button with {{ .Site.BaseURL }}.

plainspace commented 4 years ago

I was talking with @jessfraz about this and it is possible that the IP is getting rate-limited and that is why I'm not seeing the contributors...

Also, one problem with using VERCEL_URL is that it resolves to Vercel's URL instead of our pretty URL...

lovethebomb commented 4 years ago

Ah indeed! It would make sense!

This issue is not relevant anymore after the new GitHub actions and last commits on master.

Thank you for your help @plainspace & @jessfraz. Closing the issue! :)