Unit 04 · lesson

`url`, `baseurl`, and Safer Link Construction

A local site at / and a deployed site under /repository-name/ can expose the same generated content through different base paths.

That is where naive root-relative links can betray you.

The deployment problem

This looks harmless locally:

<a href="/about/">About</a>

But if the site is deployed under:

https://example.github.io/my-portfolio/

then /about/ points to the domain root, not automatically to /my-portfolio/about/.

Jekyll uses configuration values such as:

url: "https://example.github.io"
baseurl: "/my-portfolio"

You will study configuration deeply in Unit 6.

For now, learn the link-building boundary.

Jekyll provides filters/helpers intended to make links compatible with configured base URLs.

A common internal-link pattern is:

{{ '/about/' | relative_url }}

Use the upstream documentation for your installed version rather than hand-concatenating strings everywhere.

Compare:

href="/about/"

with:

href="{{ '/about/' | relative_url }}"

Build under the current configuration and inspect output.

Later you will change baseurl and repeat the test.

If a link works locally but fails only after deployment, that pattern is evidence for:

It is weaker evidence for "the page source is missing."

Identify every shared internal navigation link and mark whether it safely respects your intended deployment base path.

Write one sentence distinguishing url from baseurl in the architecture you plan to deploy.