# Despliegue

Puedes entregar su Sistema de Páginas de Estado creado con Statusfy de dos maneras diferentes: Generación Estática o Renderizado por Servidor.

Enumeramos algunos servicios diferentes que puedes utilizar para alojar su Sistema de Páginas de Estado. Ten en cuenta la entrega/implementación del sitio compatible con cada servicio:

Las siguientes guías se basan en algunas suposiciones compartidas:

• Estás utilizando la ubicación de destino de compilación predeterminada (./dist).
• Statusfy se instala como una dependencia local en su proyecto, y has configurado los siguientes scripts npm:

{
  "scripts": {
    "dev": "statusfy dev",
    "generate": "statusfy generate",
    "build": "statusfy build",
    "start": "statusfy start"
  }
}

# GitHub Pages

1. Establece el dominio personalizado en baseUrl de tu config.js

2. Agrega un script de implementación a package.json:

{
  "scripts": {
    "deploy": "gh-pages -d dist"
  }
}

3. Y ejecuta:

#!/usr/bin/env sh

# instala gh-pages
npm install gh-pages --save-dev # o yarn add gh-pages --dev

# genera
npm run generate # o yarn run generate

# despliega
npm run deploy # o yarn run deploy

Visita las Páginas de GitHub para obtener información sobre cómo configurar dominios personalizados y obtener información sobre configuraciones avanzadas.

# Referencias

• Gatsby: How Gatsby Works with GitHub Pages
• Nuxt: How to deploy on GitHub Pages?
• VuePress: Deploying to GitHub Pages

# GitLab Pages y GitLab CI

1. Establece el dominio personalizado en baseUrl de tu config.js

2. Crea un archivo llamado .gitlab-ci.yml en la raíz de tu proyecto con el contenido a continuación. Esto construirá e implementará tu sitio cada vez que realices cambios en su contenido.

image: node:latest

# Esta carpeta se almacena en caché entre las compilaciones
# http://docs.gitlab.com/ce/ci/yaml/README.html#cache
cache:
  paths:
    - node_modules/

pages:
  script:
    - npm install # o yarn install
    - npm run generate -- -d public # o yarn run generate -d public
  artifacts:
    paths:
      - public
  only:
    - master

Visita las GitLab Pages para aprender cómo configurar dominios personalizados y conocer las configuraciones avanzadas.

# Referencias

• Gatsby: Deploying to GitLab Pages
• VuePress: Deploying to GitLab Pages and GitLab CI

# Netlify

1. En Netlify, configura un nuevo proyecto con la siguiente configuración:

• Comando de Compilación: npm run generate o yarn generate
• Directorio de Publicación: dist

Netlify desplegará automáticamente el sitio y lo publicará cada vez que envíes tu repositorio Git.

# Referencias

• Gatsby: Hosting on Netlify
• Nuxt: How to deploy on Netlify?
• VuePress: Deploying to Netlify

# Firebase

Primero, asegúrese de tener firebase-tools instalado.

# Generación Estática

1. Create el archivo firebase.json en la raíz de tu proyecto con el siguiente contenido:

{
 "hosting": {
   "public": "./dist",
   "ignore": []
 }
}

2. Crea el archivo .firebaserc en la raíz de tu proyecto con el siguiente contenido:

{
 "projects": {
   "default": "<YOUR_FIREBASE_ID>"
 }
}

3. Y ejecuta:

#!/usr/bin/env sh

# genera
npm run generate # o yarn run generate

# depliega
firebase deploy

# Referencias

• VuePress: Deploying to Firebase

# Renderizado por Servidor

TODO

# Surge

1. Asegúrete de tener surge instalado.

2. Ejecuta:

#!/usr/bin/env sh

# genera
npm run generate # o yarn run generate

# depliega
surge dist

Visite la Ayuda de Surge para obtener información sobre cómo configurar un dominio personalizado y obtener información sobre las configuraciones avanzadas.

# Referencias

• Nuxt: How to deploy with Surge?
• VuePress: Deploying to Surge

# Heroku

Primero, instala y configura el Heroku CLI.

# Generación Estática

Puede usar el Heroku Buildpack Static para manejar los archivos estáticos de tu sitio.

1. Cree un archivo llamado static.json en la raíz de tu proyecto con el contenido a continuación:

{
  "root": "./dist"
}

2. Añade al script heroku-postbuild en tu archivo package.json:

{
  // ...
  "scripts": {
    // ...
    "heroku-postbuild": "npm run generate"
    // ...
  }
  // ...
}

3. Configura el control remoto Heroku git:

#!/usr/bin/env sh

# registrar los cambios
git init
git add .
git commit -m "Mi sistema de página de estado está listo para su despliegue."

# crea una nueva aplicación vacía en Heroku
heroku create

# configurar buildpack para sitios estáticos
heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git

4. Despliega la aplicación:

#!/usr/bin/env sh

# publicar el sitio
git push heroku master

# Referencias

• Gatsby: Deploying to Heroku
• VuePress: Deploying to Heroku

# Renderizado por Servidor

1. Primero, debe leer la documentación de Heroku para Node.js.

2. Necesitamos decirle a Heroku que instale las devDependencies del proyecto:

heroku config:set NPM_CONFIG_PRODUCTION=false

3. Establece el host que la aplicación debería escuchar:

heroku config:set HOST=0.0.0.0
heroku config:set NODE_ENV=production

4. Add a heroku-postbuild script in your package.json:

{
  // ...
  "scripts": {
    // ...
    "heroku-postbuild": "npm run build"
    // ...
  }
  // ...
}

5. Cree un archivo llamado Procfile en la raíz de su proyecto con el contenido a continuación:

web: npm run start

6. Despliega la aplicación:

#!/usr/bin/env sh

# publicar el sitio
git push heroku master

# Referencias

• Nuxt: How to deploy on Heroku?

# Now (legacy) v1

Primero, debes instalar la CLI de Now globalmente:

npm install -g now

# Generación Estática

1. Agrega un archivo now.json a la raíz del proyecto:

{
  "version": 1,
  "name": "my-cool-statusfy",
  "alias": "my-cool-statusfy",
  "type": "static",
  "files": [
    "dist"
  ],
  "static": {
    "public": "dist"
  }
}

2. Agrega un script de despliegue a package.json:

{
  "scripts": {
    "deploy": "npm run generate && now && now alias"
  }
}

3. Y ejecuta:

# despliegue
npm run deploy # o yarn run deploy

Visita la Documentación de Now para aprender cómo personalizar el comportamiento del servicio estático.

# Referencias

• Gatsby: Deploying to Now
• VuePress: Deploying to Now

# Renderizado por Servidor

1. Agrega un archivo now.json a la raíz del proyecto:

{
  "version": 1,
  "name": "my-cool-statusfy",
  "alias": "my-cool-statusfy",
  "env": {
    "NODE_ENV": "production",
    "NPM_CONFIG_PRODUCTION": "false"
  },
  "engines": {
    "node": "8"
  }
}

2. Agrega un script de despliegue a package.json:

{
  "scripts": {
    "deploy": "now && now alias"
  }
}

3. Y ejecuta:

# despliegue
npm run deploy # o yarn run deploy

Visita la Documentación de Now para obtener más información sobre los despliegues de Node.js.

# Now v2

Primero, debes instalar la CLI de Now globalmente:

npm install -g now

# Generación Estática

1. Agrega un archivo now.json a la raíz del proyecto:

{
  "version": 2,
  "name": "my-cool-statusfy",
  "alias": "my-cool-statusfy",
  "builds": [
    { "src": "package.json", "use": "@now/static-build" }
  ]
}

2. Crea un archivo llamado .nowignore en la raíz de tu proyecto con el contenido a continuación:

node_modules

3. Agrega un script de despliegue a package.json:

{
  "scripts": {
    "now-build": "npm run generate"
  }
}

# Referencias

• Now: Static Build (@now/static-build)

# Renderizado por Servidor

En este momento, No se puede implementar una aplicación Statusfy Renderizado por Servidor con Now v2. Por favor, utiliza Now v1.