Deployment

Manual deployment

To deploy your blog, you should first generate the static files with the following command:

npm run generate

Then, you can deploy the dist folder to your favorite hosting provider.

Netlify deployment

If you have an account on Netlify, you can deploy in one click :

This will create a new repository on your github account and deploy the blog on Netlify.

Alternatively, especially if you want to deploy another template, you can deploy manually on Netlify by following these steps:

Netlify documentation

See also this blog post about how to deploy a blog on Netlify.

Vercel deployment

If you have an account on Vercel, you can deploy in one click :

Alternatively, especially if you want to deploy another template, you can deploy manually on Vercel by following these steps:

Vercel documentation

Github Pages deployment

Github Pages serves static files, so it only needs the result of npm run generate. The simplest setup builds the blog in a Github Actions workflow and publishes the artifact.

First, in your repository, go to Settings → Pages and set Source to Github Actions.

Then add the following workflow:

name: Deploy to Github Pages

on:
  push:
    branches: [main]

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: pages
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: npm
      - run: npm ci
      - run: npm run generate
        env:
          NITRO_PRESET: github-pages
      - uses: actions/upload-pages-artifact@v3
        with:
          path: .output/public

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - id: deployment
        uses: actions/deploy-pages@v4

The github-pages Nitro preset adds the .nojekyll file that keeps Github from ignoring the _nuxt directory. If you build without it, create that file at the root of your generated site yourself.

Codeberg Pages deployment

Codeberg is a non profit, EU based forge running on Forgejo. Its Pages service serves static files from a git branch and runs no build of its own, so you build the blog first and publish the result.

Two layouts are possible:

• a repository named pages, served at https://username.codeberg.page/
• any other repository with a branch named pages, served at https://username.codeberg.page/reponame/

In both cases the published files live on the pages branch. The manual deploy is a build followed by a push of the generated folder to that branch.

If you have access to Forgejo Actions, the official action publishes it for you:

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: docker
    container:
      image: node:22
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm run generate
      - uses: https://codeberg.org/git-pages/action@v2
        with:
          site: https://username.codeberg.page/
          token: ${{ forge.token }}
          source: .output/public/

The second layout puts your blog in a subfolder, so read Deploying on a subfolder before you push.

A step by step walkthrough, including the DNS records for a custom domain and what Codeberg does not offer compared to the other hosts, is available in this blog post.

Cloudflare Pages deployment

If you have an account on Cloudflare, you can deploy in one click :

Alternatively, especially if you want to deploy another template, you can deploy manually on Cloudflare by following these steps:

Cloudflare documentation

Deploying on a subfolder

If you want to deploy your blog on a subfolder, like https://bloggrify.com/subfolder, you can set the baseURL property in the nuxt.config.ts file:

export default defineNuxtConfig({
    app: {
        baseURL: '/subfolder/'
    }
})

Then you have to change the url in the app.config.ts file:

export default defineAppConfig({

    url: 'https://bloggrify.com/subfolder',
})