From 9aa2043fe5beed2041fda4e99df9e5aec60f7280 Mon Sep 17 00:00:00 2001 From: adam-hudak Date: Fri, 5 Apr 2024 08:16:42 -0500 Subject: [PATCH 1/5] docs: Add GitLab Pages deploy option --- content/0.index.yml | 3 + content/3.deploy/gitlab.md | 90 +++++++++++++++++++++++++++ public/assets/integrations/gitlab.svg | 1 + 3 files changed, 94 insertions(+) create mode 100644 content/3.deploy/gitlab.md create mode 100644 public/assets/integrations/gitlab.svg diff --git a/content/0.index.yml b/content/0.index.yml index 65e87c389..d86e0cd0e 100644 --- a/content/0.index.yml +++ b/content/0.index.yml @@ -193,6 +193,9 @@ sections: - src: /assets/integrations/koyeb.svg alt: Koyeb to: /deploy/koyeb + - src: /assets/integrations/gitlab.svg + alt: GitlabPages + to: /deploy/gitlab - src: /assets/integrations/tailwind.svg alt: Tailwind CSS to: /modules/tailwindcss diff --git a/content/3.deploy/gitlab.md b/content/3.deploy/gitlab.md new file mode 100644 index 000000000..9ee76c483 --- /dev/null +++ b/content/3.deploy/gitlab.md @@ -0,0 +1,90 @@ +--- +title: GitLab Pages +description: 'Deploy your Nuxt Application to GitLab Pages.' +logoSrc: '/assets/integrations/gitlab.svg' +category: Hosting +website: 'https://docs.gitlab.com/ee/user/project/pages' +--- + +Nuxt supports deploying on the [GitLab Pages](https://docs.gitlab.com/ee/user/project/pages) with minimal configuration. + +::caution +GitLab Pages only support static sites, Nuxt will pre-render your application to static HTML files. +:: + +## Setup + +1. GitLab Pages only support deployment from `public/` directory. Rename the `public/` directory to a collision-free alternative first: + + ```bash [Terminal] + mv public static + ``` + +2. Add the following to your nuxt.config.ts: + + ```ts [nuxt.config.ts] + import path from 'node:path'; + + export default defineNuxtConfig({ + nitro: { + // Output directories for production bundle + output: { + publicDir: path.join(__dirname, "public"), + }, + }, + // Customize default directory structure used by Nuxt + dir: { + public: 'static', + static: 'static' + } + }) + ``` + +3. Ensure that `generate` script is defined within the project's `package.json` file to define how to generate the application: + + ```json [package.json] + { + "scripts": { + "generate": "nuxt generate" + } + } + ``` + +## Deployment + +1. Here is an example GitLab Pages workflow to deploy your site to GitLab Pages: + +```yaml [.gitlab-ci.yml] +# The Docker image that will be used to build your app +image: node:lts +# Functions that should be executed before the build script is run +before_script: + - npm install +cache: + paths: + - # Directories that are cached between builds + - node_modules/ +pages: + script: + # Specify the steps involved to build your app here + - npm run generate + artifacts: + paths: + # The directory that contains the built files to be published. + # This must be called "public". + - public + rules: + # This ensures that only pushes to the default branch + # will trigger a pages deploy + - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH +``` + +## Learn more + +::read-more{to="https://docs.gitlab.com/ee/user/project/pages/getting_started_part_one.html#project-website-examples" target="_blank"} +Head over **GitLab Pages default domain names and URLs** to learn more about the GitLab Pages default domain names. +:: + +::read-more{to="https://docs.gitlab.com/ee/user/project/pages/" target="_blank"} +Head over **GitLab Pages documentation** to learn more about the GitLab Pages deployment preset. +:: diff --git a/public/assets/integrations/gitlab.svg b/public/assets/integrations/gitlab.svg new file mode 100644 index 000000000..b57f282b9 --- /dev/null +++ b/public/assets/integrations/gitlab.svg @@ -0,0 +1 @@ + \ No newline at end of file From 918dd7a12f3fd8f583c5d5ba176c53555f55ce5d Mon Sep 17 00:00:00 2001 From: adam-hudak Date: Fri, 5 Apr 2024 08:27:55 -0500 Subject: [PATCH 2/5] docs: update GitLab alt --- content/0.index.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/0.index.yml b/content/0.index.yml index d86e0cd0e..0276ee79a 100644 --- a/content/0.index.yml +++ b/content/0.index.yml @@ -194,7 +194,7 @@ sections: alt: Koyeb to: /deploy/koyeb - src: /assets/integrations/gitlab.svg - alt: GitlabPages + alt: GitLab to: /deploy/gitlab - src: /assets/integrations/tailwind.svg alt: Tailwind CSS From 127252c74737cfc56fbd9aff59e459c02149b106 Mon Sep 17 00:00:00 2001 From: adam-hudak Date: Mon, 8 Apr 2024 09:33:08 -0500 Subject: [PATCH 3/5] docs: Set .output/public as default artefact directory for GitLab Pages --- content/3.deploy/gitlab.md | 45 ++++---------------------------------- 1 file changed, 4 insertions(+), 41 deletions(-) diff --git a/content/3.deploy/gitlab.md b/content/3.deploy/gitlab.md index 9ee76c483..b8fa2f429 100644 --- a/content/3.deploy/gitlab.md +++ b/content/3.deploy/gitlab.md @@ -12,44 +12,6 @@ Nuxt supports deploying on the [GitLab Pages](https://docs.gitlab.com/ee/user/pr GitLab Pages only support static sites, Nuxt will pre-render your application to static HTML files. :: -## Setup - -1. GitLab Pages only support deployment from `public/` directory. Rename the `public/` directory to a collision-free alternative first: - - ```bash [Terminal] - mv public static - ``` - -2. Add the following to your nuxt.config.ts: - - ```ts [nuxt.config.ts] - import path from 'node:path'; - - export default defineNuxtConfig({ - nitro: { - // Output directories for production bundle - output: { - publicDir: path.join(__dirname, "public"), - }, - }, - // Customize default directory structure used by Nuxt - dir: { - public: 'static', - static: 'static' - } - }) - ``` - -3. Ensure that `generate` script is defined within the project's `package.json` file to define how to generate the application: - - ```json [package.json] - { - "scripts": { - "generate": "nuxt generate" - } - } - ``` - ## Deployment 1. Here is an example GitLab Pages workflow to deploy your site to GitLab Pages: @@ -62,7 +24,7 @@ before_script: - npm install cache: paths: - - # Directories that are cached between builds + # Directories that are cached between builds - node_modules/ pages: script: @@ -71,8 +33,9 @@ pages: artifacts: paths: # The directory that contains the built files to be published. - # This must be called "public". - - public + - .output/public + # The directory that contains the built files to be published. + publish: .output/public rules: # This ensures that only pushes to the default branch # will trigger a pages deploy From bf218557dc2fea0e5636a844576a34d19474aa42 Mon Sep 17 00:00:00 2001 From: adam-hudak Date: Mon, 8 Apr 2024 09:47:49 -0500 Subject: [PATCH 4/5] docs: remove an unnecessary "Learn more" paragraph from GitLab Pages --- content/3.deploy/gitlab.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/content/3.deploy/gitlab.md b/content/3.deploy/gitlab.md index b8fa2f429..4cdffc9ad 100644 --- a/content/3.deploy/gitlab.md +++ b/content/3.deploy/gitlab.md @@ -47,7 +47,3 @@ pages: ::read-more{to="https://docs.gitlab.com/ee/user/project/pages/getting_started_part_one.html#project-website-examples" target="_blank"} Head over **GitLab Pages default domain names and URLs** to learn more about the GitLab Pages default domain names. :: - -::read-more{to="https://docs.gitlab.com/ee/user/project/pages/" target="_blank"} -Head over **GitLab Pages documentation** to learn more about the GitLab Pages deployment preset. -:: From df99239a60c654c3d6510e381b89123306bce634 Mon Sep 17 00:00:00 2001 From: adam-hudak Date: Mon, 8 Apr 2024 09:48:33 -0500 Subject: [PATCH 5/5] docs: update comment for GitLab Pages workflow example --- content/3.deploy/gitlab.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/3.deploy/gitlab.md b/content/3.deploy/gitlab.md index 4cdffc9ad..b4b2848f6 100644 --- a/content/3.deploy/gitlab.md +++ b/content/3.deploy/gitlab.md @@ -32,9 +32,9 @@ pages: - npm run generate artifacts: paths: - # The directory that contains the built files to be published. + # The directory that contains the built files to be published - .output/public - # The directory that contains the built files to be published. + # The directory that contains the built files to be published publish: .output/public rules: # This ensures that only pushes to the default branch