¿Cómo implementar un sitio web HTML estático básico en Heroku?

Heroku es una solución simple y única para alojar cualquier sitio web o servidor. Este artículo gira en torno a cómo puede alojar su propia página web HTML estática en Heroku. Para demostrar esto, vamos a construir una página web simple y alojarla.

requisitos previos

• Git
• Cuenta Heroku
• CLI de Heroku

Vamos a crear un directorio llamado «cartera» para nuestro proyecto. Conectaremos este directorio a nuestra aplicación Heroku para que cada vez que actualicemos el archivo HTML local, los cambios se reflejen en el sitio web alojado.

Paso 1:

Cree un directorio con el nombre «cartera» y cambie el directorio de trabajo a él.

$ mkdir portfolio
$ cd portfolio

Paso 2:

Cree su propio sitio web HTML estático y asígnele el nombre » home.html» (vamos a crear un archivo simple con solo «Mi cartera» como texto)

$ echo "<h1> My Portfolio </h1>" > home.html 

Paso 3:

Heroku, de forma predeterminada, no le permite implementar una aplicación que no tenga un backend. Por lo tanto, debemos crear un backend ficticio o un archivo PHP dinámico. Necesitamos usar un truco y decirle a Heroku que nuestro sitio web es una aplicación PHP. Para hacer esto, simplemente copie y pegue los siguientes comandos en su terminal. composer.json se ha incluido para brindar soporte para la aplicación PHP en Heroku. Si una aplicación no tiene dependencias de compositor, debemos incluir composer.json vacío para reconocer la aplicación PHP.

$ echo '<?php include_once("home.html"); ?>' > index.php
$ echo '{}' > composer.json

Paso 4:

Inicialice el repositorio como un repositorio git.

$ git init

Paso 5:

Cree su aplicación Heroku con el nuevo botón en la parte superior derecha del panel de control de Heroku. Vamos a nombrar esta aplicación como » your-app-name-123″

Paso 6:

Inicie sesión en su cuenta de Heroku mediante la CLI de Heroku

$ heroku login

Paso 7:

Ahora que hemos creado nuestra aplicación, solo necesitamos conectar el repositorio git local a la aplicación Heroku. Para ello añadimos el remoto de la app de Heroku al repositorio de git. (No olvide reemplazar «su-aplicación-nombre-123» con su propio nombre de aplicación)

$ heroku git:remote -a your-app-name-123

Paso 8:

Empuje los cambios a su aplicación Heroku.

$ git push heroku master

Paso 9:

Su aplicación ahora está disponible en Heroku. Para ver su aplicación, haga clic en el enlace que aparece al final del paso anterior, que se parece a https://your-app-name-123.herokuapp.com/ . Para ejecutar los siguientes comandos desde su directorio «cartera» .

$ git add . 
$ git commit -m "your commit message" 
$ git push heroku master