-
Notifications
You must be signed in to change notification settings - Fork 18
Update --base-url recipe docs, and add warning box #138
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -1,27 +1,40 @@ | ||||||||||||||||||||||
| --- | ||||||||||||||||||||||
| title: Testing Sites Not Served from Root with --base-url | ||||||||||||||||||||||
| description: Understanding how to use the --base-url parameter in lychee | ||||||||||||||||||||||
| title: Applying a Base URL with --base-url | ||||||||||||||||||||||
| --- | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| import { Code } from "@astrojs/starlight/components"; | ||||||||||||||||||||||
| export const fileName = "docs/guide.html"; | ||||||||||||||||||||||
| export const fileLang = "html"; | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ## What Is The Base URL? | ||||||||||||||||||||||
| ## What Is the Base URL? | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| The `--base-url` parameter in lychee lets you check links for sites that aren't | ||||||||||||||||||||||
| served from the root domain. This is useful when your site lives in a | ||||||||||||||||||||||
| subdirectory, like `example.com/docs/`. | ||||||||||||||||||||||
| In HTML, a base URL is used when resolving relative links; relative links will be resolved | ||||||||||||||||||||||
| [relative to](https://developer.mozilla.org/en-US/docs/Web/API/URL_API/Resolving_relative_references) | ||||||||||||||||||||||
| the base URL. For example, a link to `page.html` with a base URL of | ||||||||||||||||||||||
| `https://example.com/help/` would resolve to `https://example.com/help/page.html`. | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ## Do You Need To Set A Base URL? | ||||||||||||||||||||||
| For most published sites, the base URL of a page is just the normal URL of the page. | ||||||||||||||||||||||
| The [`<base>`][base] HTML element can be used to override the base URL for a | ||||||||||||||||||||||
| particular HTML page, but this is rare. | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| Most of the time, you don't! Skip `--base-url` if: | ||||||||||||||||||||||
| [base]: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/base | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| - Your site runs at a root domain (like `example.com`) | ||||||||||||||||||||||
| - You're only checking absolute URLs | ||||||||||||||||||||||
| - Your links should resolve relative to their files | ||||||||||||||||||||||
| ## Do You Need To Set a Base URL? | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| You need `--base-url` when your site lives in a subdirectory. | ||||||||||||||||||||||
| Most of the time, you don't! | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| **Skip** `--base-url` **if**: | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| - You're only checking fully-qualified URLs. | ||||||||||||||||||||||
| - Your site runs at a root domain like `example.com`. | ||||||||||||||||||||||
| - Your relative links should resolve to other local files based on their folder structure. | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| If your use case falls into the second or third case, | ||||||||||||||||||||||
| [--root-dir](/recipes/root-dir/) may be useful instead. Setting a root | ||||||||||||||||||||||
| directory can help to resolve absolute links, and relative links will be | ||||||||||||||||||||||
| resolved based on a local file's path. | ||||||||||||||||||||||
|
Comment on lines
+33
to
+35
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. That bit about resolving absolute links is also a bit confusing. Unfortunately, I don't know how to phrase it better.
Suggested change
|
||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ## An Example | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| Let's look at an example: | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
|
|
@@ -43,6 +56,14 @@ To check if these links are valid, tell lychee where the site will be hosted: | |||||||||||||||||||||
| lychee --base-url https://example.com/docs/ "**/*.html" | ||||||||||||||||||||||
| ``` | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| :::caution[Important] | ||||||||||||||||||||||
| lychee's `--base-url` option applies the same base URL to _all_ local files. | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| This can cause problems when local files have relative links to other local files based | ||||||||||||||||||||||
| on their filesystem structure, as `--base-url` does not consider the folder structure. | ||||||||||||||||||||||
| ::: | ||||||||||||||||||||||
|
Comment on lines
+59
to
+64
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What do you think about reordering this a bit?
Suggested change
But as a user I would ask: "What's the problem with that? What are the edge-cases that arise by applying the same base-url to all local files? Isn't that the expected behavior?" Maybe that helps find a better way to phrase this part.
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. do you think " --base-url causes lychee to assume that all local files have the same base URL. This can cause problems when resolving relative links that expect a certain folder structure." would be enough? does the first paragraph teach the reader enough about base url to know why this is bad?
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I don't know yet, but it's better. Maybe we could also mention that this behavior can be counterintuitive. And maybe we could also add an example for the folder structure and how this could cause problems to really bring the point home, although I could understand if that's outside the scope of this PR. |
||||||||||||||||||||||
|
|
||||||||||||||||||||||
| {/* | ||||||||||||||||||||||
| :::note[Good to know] | ||||||||||||||||||||||
| The `--base-url` parameter works similarly to other tools you might know: | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
|
|
@@ -53,14 +74,15 @@ The `--base-url` parameter works similarly to other tools you might know: | |||||||||||||||||||||
|
|
||||||||||||||||||||||
| If you've used any of these, lychee's `--base-url` follows the same concept. | ||||||||||||||||||||||
| ::: | ||||||||||||||||||||||
| */} | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ## How Does It Work? | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| When you set `--base-url`, lychee will: | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| 1. Find all links in your HTML files | ||||||||||||||||||||||
| 2. Convert relative links to full URLs | ||||||||||||||||||||||
| 3. Check if the referenced files exist in your project | ||||||||||||||||||||||
| 1. Find all links in your HTML files. | ||||||||||||||||||||||
| 2. Convert relative links to full URLs using the given base URL. | ||||||||||||||||||||||
| 3. Check if the full URLs are valid and reachable. | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| Here's what happens to different types of links: | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
|
|
@@ -93,9 +115,11 @@ Want to verify links before deploying? lychee can check if files exist in your p | |||||||||||||||||||||
| lychee --base-url https://example.com/docs/ "docs/**/*.html" | ||||||||||||||||||||||
| ``` | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| {/* | ||||||||||||||||||||||
| :::note | ||||||||||||||||||||||
| Even though your site isn't deployed yet, lychee can verify that the files your links point to exist in your project. This helps catch broken links before they go live! | ||||||||||||||||||||||
| ::: | ||||||||||||||||||||||
| */} | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ### GitHub Pages | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
|
|
@@ -158,21 +182,15 @@ lychee can't automatically add the slash because both forms are valid - they jus | |||||||||||||||||||||
|
|
||||||||||||||||||||||
| ## `--base-url` vs `--root-dir` | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| These solve different problems: | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| - `--base-url` is for URLs (like `https://example.com/docs/`) | ||||||||||||||||||||||
| - Use it when you care about your site's final URL structure | ||||||||||||||||||||||
| - Helps validate relative links | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| - [`--root-dir`](/recipes/root-dir) is for file paths (like `./public/`) | ||||||||||||||||||||||
| - Use it to find files on your computer | ||||||||||||||||||||||
| - Helps validate absolute paths | ||||||||||||||||||||||
| These solve different problems, and using both together is generally not recommended. | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| You can use both together: | ||||||||||||||||||||||
| - `--base-url` requires a URL (like `https://example.com/docs/`), and it: | ||||||||||||||||||||||
| - Applies to all relative links in local files. | ||||||||||||||||||||||
| - Resolves all relative links relative to the given base URL. | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ```bash | ||||||||||||||||||||||
| lychee --base-url https://example.com/docs/ --root-dir $(pwd)/public/ "public/**/*.html" | ||||||||||||||||||||||
| ``` | ||||||||||||||||||||||
| - [`--root-dir`](/recipes/root-dir) requires a local folder path (like `./public/`), and it: | ||||||||||||||||||||||
| - Applies to links with absolute paths (links beginning with `/`) in local files. | ||||||||||||||||||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this is using the URL notion of absolute links, so it's those beginning with /. I should avoid the word "path" to avoid confusion. |
||||||||||||||||||||||
| - Resolves absolute links to files within the given root directory. | ||||||||||||||||||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Since this can be a bit counterintuitive ("why doesn't it just check /foo and instead prefixes it with a 'root directory'?"), maybe we should add an example here.
Suggested change
|
||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ## Troubleshooting | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
|
|
||||||||||||||||||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The "other" suggests that we check a file in the first place. It could be an online URL, though, so it's slightly confusing.