nuxt / nuxt/nuxt.com

Deploy to GitHub Pages: Improve doc for generic base URL config and favicon working on <owner>.github.io/<repository>/

Open Beginner friendly
#1,776 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
457
Forks
272
Avg merge
13h 33m
Merged PRs (30d)
23

Description

Proposal for Improvement

Current doc of Deploy Nuxt to GitHub Pages / github-pages.md should be enhanced by the following helpful details:

  1. Add a hint to generically set NUXT_APP_BASE_URL within a GitHub Action by:
    NUXT_APP_BASE_URL="/${GITHUB_REPOSITORY##*/}/" - so it works for any repo oob.

  2. Give an example how to make favicon working in any case - for a custom domain as well as for hosting on <owner|organization>.github.io within nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  app: {
    head: {
      title: "My Page Title",
      link: [
        // https://nuxt.com/deploy/github-pages and https://vite.dev/guide/env-and-mode.html for details.
        // !!! Make use of compile time environment var NUXT_APP_BASE_URL to work for GitHub Pages deployments as well.
	// Assumption: favicon files in ~/public as ~/public/favicon.ico, ~/public/favicon-32x32.png etc.:
        {
          rel: "icon",
          type: "image/x-icon",
          href: (import.meta.env.NUXT_APP_BASE_URL ? import.meta.env.NUXT_APP_BASE_URL : "/") + "favicon.ico?x=2"
        },
        { 
          rel: "icon", type: "image/png", sizes: "32x32",
          href: (import.meta.env.NUXT_APP_BASE_URL ? import.meta.env.NUXT_APP_BASE_URL : "/") + "favicon-32x32.png"
        },
       // ... add probable other icon variants accordingly
      ],
    },
  },
  // ... continue with existing config
});

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Open content/3.deploy/github-pages.md and review the existing GitHub Pages deployment instructions. Add the generic base-URL hint and favicon configuration example described in the issue, then verify that the documented setup covers repository paths, custom domains, and owner.github.io hosting.

Written by the indexing model from the issue text.

Assessment

Tech stack
github-actions, nuxt, typescript
Domain
devops, documentation
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.