Feature Request: Add CDN Support for Images and Fonts with Environment Variable Override #7

New issue

Open

opened 2024-08-28 14:12:19 +00:00 by Aroy · 0 comments

Aroy commented

2024-08-28 14:12:19 +00:00

Owner

Description:
I would like to request the addition of CDN support for images and fonts in the Hugo theme, along with the ability to override the configuration parameters using environment variables. This feature will allow users to configure the use of a Content Delivery Network (CDN) for serving images and fonts, either through the config.yaml file or environment variables, making it flexible and suitable for deployment environments like Netlify.

Rationale:
Integrating CDN support directly into the Hugo theme, with the option to override settings via environment variables, will greatly benefit users by improving website performance and load times. The environment variable support is especially useful for deployment platforms like Netlify, where configuration can be managed without modifying the repository files.

Use Cases:

Global Websites: Users with a global audience can serve static assets like images and fonts more efficiently by using a CDN.
Performance Optimization: Website owners seeking to optimize load times can benefit from offloading static assets to a CDN.
Flexible Deployment: Developers can easily switch between local and CDN resources based on the deployment environment (e.g., using environment variables on Netlify).

Implementation Ideas:

Configurable CDN Option in config.yaml:
- Introduce a new parameter in the config.yaml file to enable or disable CDN usage.
- Example configuration in config.yaml:
```
params:
  # other parameters
  CDN: false
  CDN_FONT_URL: "https://fonts.examplecdn.com"
```
- When the CDN parameter is enabled, the theme should use the specified CDN URLs for fonts and images.
CDN Image URL in Front Matter:
- Add support for a CDN_IMG_URL field in the front matter of individual pages or posts.
- This allows users to specify a custom CDN URL for images on a per-post or per-page basis.
- Example front matter:
```
title: "My Awesome Post"
date: 2024-08-27
CDN_IMG_URL: "https://img.examplecdn.com/my-awesome-image.png"
```
Environment Variable Override:
- Allow the CDN parameter in config.yaml to be overridden by an environment variable.
- Example environment variable usage: HUGO_PARAMS_CDN=true
- This is particularly useful for platforms like Netlify, where environment variables can be set in the build settings without altering the repository’s files.
Automatic URL Replacement:
- When the CDN option is enabled (either via config.yaml or an environment variable), the theme should automatically replace default image and font URLs with their CDN counterparts.
- Ensure that if CDN_IMG_URL is specified in the front matter, the theme uses this URL instead of the local image path.
Fallback Mechanism:
- Provide a fallback mechanism so that if the CDN is unavailable or not configured, the theme defaults to using local resources.
Documentation:
- Include clear documentation on how to configure CDN support in the config.yaml file.
- Provide examples of using CDN_IMG_URL in front matter and best practices for CDN integration.
- Explain how to use environment variables like HUGO_PARAMS_CDN to override the configuration, particularly in deployment scenarios like Netlify.

Additional Context:
Many Hugo theme users are concerned with website performance and flexibility, particularly when deploying on platforms like Netlify. Adding CDN support with environment variable overrides will help them achieve faster load times, better scalability, and more flexible configuration options. This feature aligns with modern web development practices and makes the theme more versatile for various deployment environments.

Example usage in a Hugo template:

{{ $useCDN := cond (env "HUGO_PARAMS_CDN" | default .Site.Params.CDN) true false }}
{{ if $useCDN }}
  <link href="{{ .Site.Params.CDN_FONT_URL }}/css?family=Roboto" rel="stylesheet">
  <img src="{{ .Params.CDN_IMG_URL | default "/images/default.png" }}" alt="My Image">
{{ else }}
  <link href="/local/path/to/fonts/roboto.css" rel="stylesheet">
  <img src="/images/default.png" alt="My Image">
{{ end }}

Example Netlify Environment Variable:

In Netlify’s Build & Deploy settings, add the environment variable:
```
Key: HUGO_PARAMS_CDN
Value: true
```

**Description**: I would like to request the addition of CDN support for images and fonts in the Hugo theme, along with the ability to override the configuration parameters using environment variables. This feature will allow users to configure the use of a Content Delivery Network (CDN) for serving images and fonts, either through the `config.yaml` file or environment variables, making it flexible and suitable for deployment environments like Netlify. **Rationale**: Integrating CDN support directly into the Hugo theme, with the option to override settings via environment variables, will greatly benefit users by improving website performance and load times. The environment variable support is especially useful for deployment platforms like Netlify, where configuration can be managed without modifying the repository files. **Use Cases**: 1. **Global Websites**: Users with a global audience can serve static assets like images and fonts more efficiently by using a CDN. 2. **Performance Optimization**: Website owners seeking to optimize load times can benefit from offloading static assets to a CDN. 3. **Flexible Deployment**: Developers can easily switch between local and CDN resources based on the deployment environment (e.g., using environment variables on Netlify). **Implementation Ideas**: 1. **Configurable CDN Option in `config.yaml`**: - Introduce a new parameter in the `config.yaml` file to enable or disable CDN usage. - Example configuration in `config.yaml`: ```yaml params: # other parameters CDN: false CDN_FONT_URL: "https://fonts.examplecdn.com" ``` - When the CDN parameter is enabled, the theme should use the specified CDN URLs for fonts and images. 2. **CDN Image URL in Front Matter**: - Add support for a `CDN_IMG_URL` field in the front matter of individual pages or posts. - This allows users to specify a custom CDN URL for images on a per-post or per-page basis. - Example front matter: ```yaml title: "My Awesome Post" date: 2024-08-27 CDN_IMG_URL: "https://img.examplecdn.com/my-awesome-image.png" ``` 3. **Environment Variable Override**: - Allow the CDN parameter in `config.yaml` to be overridden by an environment variable. - Example environment variable usage: `HUGO_PARAMS_CDN=true` - This is particularly useful for platforms like Netlify, where environment variables can be set in the build settings without altering the repository’s files. 4. **Automatic URL Replacement**: - When the CDN option is enabled (either via `config.yaml` or an environment variable), the theme should automatically replace default image and font URLs with their CDN counterparts. - Ensure that if `CDN_IMG_URL` is specified in the front matter, the theme uses this URL instead of the local image path. 5. **Fallback Mechanism**: - Provide a fallback mechanism so that if the CDN is unavailable or not configured, the theme defaults to using local resources. 6. **Documentation**: - Include clear documentation on how to configure CDN support in the `config.yaml` file. - Provide examples of using `CDN_IMG_URL` in front matter and best practices for CDN integration. - Explain how to use environment variables like `HUGO_PARAMS_CDN` to override the configuration, particularly in deployment scenarios like Netlify. **Additional Context**: Many Hugo theme users are concerned with website performance and flexibility, particularly when deploying on platforms like Netlify. Adding CDN support with environment variable overrides will help them achieve faster load times, better scalability, and more flexible configuration options. This feature aligns with modern web development practices and makes the theme more versatile for various deployment environments. Example usage in a Hugo template: ```html {{ $useCDN := cond (env "HUGO_PARAMS_CDN" | default .Site.Params.CDN) true false }} {{ if $useCDN }} <link href="{{ .Site.Params.CDN_FONT_URL }}/css?family=Roboto" rel="stylesheet"> <img src="{{ .Params.CDN_IMG_URL | default "/images/default.png" }}" alt="My Image"> {{ else }} <link href="/local/path/to/fonts/roboto.css" rel="stylesheet"> <img src="/images/default.png" alt="My Image"> {{ end }} ``` **Example Netlify Environment Variable**: - In Netlify’s Build & Deploy settings, add the environment variable: ``` Key: HUGO_PARAMS_CDN Value: true ```