{"id":1869,"date":"2019-11-14T12:49:49","date_gmt":"2019-11-14T18:49:49","guid":{"rendered":"https:\/\/naps.com.mx\/blog\/?p=1869"},"modified":"2021-01-15T21:49:06","modified_gmt":"2021-01-16T03:49:06","slug":"subir-mi-web-a-la-nube-usando-heroku","status":"publish","type":"post","link":"https:\/\/naps.com.mx\/blog\/subir-mi-web-a-la-nube-usando-heroku\/","title":{"rendered":"Como subir mi web a la nube usando Heroku"},"content":{"rendered":"<p>Hablemos de <strong>Heroku<\/strong>, una excelente herramienta para probar nuestra web en la nube, en forma gratuita y sin anuncios. Subir tu web a la nube usando Heroku es muy sencillo si cuentas con las herramientas correctas.<\/p>\n<p><!--more--><\/p>\n\n<h2>Video<\/h2>\n<p>&nbsp;<br \/>\n<iframe loading=\"lazy\" width=\"751\" height=\"422\" src=\"https:\/\/www.youtube.com\/embed\/AXwjm60mTsg\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<h2>Pasos para subir tu web a la nube usando Heroku<\/h2>\n<h3>1. Instalaci\u00f3n de las herramientas a utilizar<\/h3>\n<p>Utilizaremos Git y la interfaz de comandos de Heroku. Tambi\u00e9n se requerir\u00e1 crear una cuenta en Heroku.<\/p>\n<h4>Git<\/h4>\n<p>Descarga Git en su p\u00e1gina de descargas:\u00a0<a href=\"https:\/\/git-scm.com\/downloads\">https:\/\/git-scm.com\/downloads<\/a><\/p>\n<p><a href=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-08-a-las-23.39.48.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1886 size-medium\" src=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-08-a-las-23.39.48-300x178.png\" alt=\"\" width=\"300\" height=\"178\" srcset=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-08-a-las-23.39.48-300x178.png 300w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-08-a-las-23.39.48.png 662w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Una vez descargado, inst\u00e1lalo, y prueba abriendo una ventana de comandos y escribiendo:<\/p>\n<pre class=\"lang:sh decode:true\">git --version\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.10.44.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1885\" src=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.10.44-300x184.png\" alt=\"git --version\" width=\"300\" height=\"184\" srcset=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.10.44-300x184.png 300w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.10.44-768x471.png 768w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.10.44-1024x628.png 1024w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.10.44.png 1118w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<h4>Heroku Cli<\/h4>\n<p>Descarga la interfaz de comandos de Heroku en la siguiente p\u00e1gina:<\/p>\n<p><a href=\"https:\/\/devcenter.heroku.com\/articles\/heroku-cli\">https:\/\/devcenter.heroku.com\/articles\/heroku-cli<\/a><\/p>\n<p><a href=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.15.01.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1884 size-large\" src=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.15.01-1024x1012.png\" alt=\"Descargar Heroku CLI\" width=\"900\" height=\"889\" srcset=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.15.01-1024x1012.png 1024w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.15.01-300x297.png 300w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.15.01-768x759.png 768w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.15.01.png 1566w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/a><\/p>\n<p>Una vez descargado inst\u00e1lalo, y prueba abriendo tu ventana de comandos de tu sistema operativo y escribiendo el comando:<\/p>\n<pre class=\"lang:sh decode:true \">heroku --version<\/pre>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.33.54.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1883\" src=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.33.54.png\" alt=\"heroku --version\" width=\"1150\" height=\"364\" srcset=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.33.54.png 1150w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.33.54-300x95.png 300w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.33.54-768x243.png 768w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.33.54-1024x324.png 1024w\" sizes=\"auto, (max-width: 1150px) 100vw, 1150px\" \/><\/a><\/p>\n<h4>Cuenta en Heroku<\/h4>\n<p>Crea una cuenta en Heroku.<\/p>\n<p><a href=\"https:\/\/signup.heroku.com\">https:\/\/signup.heroku.com<\/a><\/p>\n<h3>2. Generar un repositorio local en Git<\/h3>\n<p>Abre una ventana de comandos (CMD o Terminal) y ub\u00edcate en la carpeta donde est\u00e1 tu proyecto. Importante: cambia la extensi\u00f3n del archivo .html por .php.<\/p>\n<h4>Generar un repositorio local<\/h4>\n<p>Escribe el comando<\/p>\n<pre class=\"lang:sh decode:true\">git init<\/pre>\n<p><a href=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-22.52.12.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1878\" src=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-22.52.12.png\" alt=\"git init\" width=\"1280\" height=\"204\" srcset=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-22.52.12.png 1280w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-22.52.12-300x48.png 300w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-22.52.12-768x122.png 768w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-22.52.12-1024x163.png 1024w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/a><\/p>\n<p>Ahora agregaremos los archivos de nuestro proyecto al repositorio<\/p>\n<pre class=\"lang:sh decode:true \">Git add .<\/pre>\n<p><a href=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-22.52.33.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1877\" src=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-22.52.33.png\" alt=\"git add .\" width=\"1280\" height=\"204\" srcset=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-22.52.33.png 1280w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-22.52.33-300x48.png 300w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-22.52.33-768x122.png 768w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-22.52.33-1024x163.png 1024w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/a><\/p>\n<p>Hacemos un commit para confirmar los cambios que acabamos de realizar<\/p>\n<pre class=\"lang:sh decode:true \">Git commit -m \"mi commit\"<\/pre>\n<p><a href=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-22.53.17.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1876\" src=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-22.53.17.png\" alt=\"git commit\" width=\"1280\" height=\"372\" srcset=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-22.53.17.png 1280w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-22.53.17-300x87.png 300w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-22.53.17-768x223.png 768w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-22.53.17-1024x298.png 1024w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/a><\/p>\n<h3>3. Crear una app en Heroku<\/h3>\n<p>Hacemos login en Heroku<\/p>\n<pre class=\"lang:sh decode:true \">heroku login<\/pre>\n<p><a href=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.36.51.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1882\" src=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.36.51.png\" alt=\"heroku login\" width=\"1638\" height=\"372\" srcset=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.36.51.png 1638w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.36.51-300x68.png 300w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.36.51-768x174.png 768w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.36.51-1024x233.png 1024w\" sizes=\"auto, (max-width: 1638px) 100vw, 1638px\" \/><\/a><\/p>\n<p>Te pedir\u00e1 ir a la web de Heroku para autenticarse. Deber\u00e1s proporcionar tu nombre de usuario y contrase\u00f1a que obtuviste cuando creaste tu cuenta en Heroku.<\/p>\n<p><a href=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.37.05.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1881\" src=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.37.05.png\" alt=\"Login in Heroku\" width=\"1070\" height=\"926\" srcset=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.37.05.png 1070w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.37.05-300x260.png 300w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.37.05-768x665.png 768w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-09-a-las-12.37.05-1024x886.png 1024w\" sizes=\"auto, (max-width: 1070px) 100vw, 1070px\" \/><\/a><\/p>\n<h4>Crear una app en Heroku<\/h4>\n<pre class=\"lang:sh decode:true \">heroku create<\/pre>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-22.57.15.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1875\" src=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-22.57.15.png\" alt=\"Comando para crear app en Heroku\" width=\"1984\" height=\"268\" srcset=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-22.57.15.png 1984w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-22.57.15-300x41.png 300w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-22.57.15-768x104.png 768w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-22.57.15-1024x138.png 1024w\" sizes=\"auto, (max-width: 1984px) 100vw, 1984px\" \/><\/a><\/p>\n<p>Heroku crear\u00e1 una app utilizando un nombre \u00abaleatorio\u00bb. Toma nota de la url que gener\u00f3, pues en ese punto se colgar\u00e1 nuestra web.<\/p>\n<h4>Subimos nuestro proyecto a Heroku<\/h4>\n<pre class=\"lang:sh decode:true \">git push heroku master<\/pre>\n<p>&nbsp;<\/p>\n<p><span class=\"Apple-converted-space\">\u00a0<\/span><\/p>\n<p><a href=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-23.04.46.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1873 size-full\" title=\"Comando para subir archivos usando Heroku\" src=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-23.04.46.png\" alt=\"Comando para subir archivos usando Heroku\" width=\"1488\" height=\"364\" srcset=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-23.04.46.png 1488w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-23.04.46-300x73.png 300w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-23.04.46-768x188.png 768w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Captura-de-Pantalla-2019-11-11-a-las-23.04.46-1024x250.png 1024w\" sizes=\"auto, (max-width: 1488px) 100vw, 1488px\" \/><\/a><\/p>\n<p>Se demorar\u00e1 el tiempo necesario de acuerdo a la cantidad y tama\u00f1o de nuestros archivos. Una vez finalizado \u00e9ste proceso podr\u00e1s ir a laURL generada en el paso anterior usando tu navegador web preferido. Felicidades, ya tienes tu sitio en l\u00ednea.<\/p>\n<p><a href=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Resultados.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1892\" src=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Resultados.png\" alt=\"Pasos para subir tu web a la nube con Heroku\" width=\"1488\" height=\"1239\" srcset=\"https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Resultados.png 1488w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Resultados-300x250.png 300w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Resultados-768x639.png 768w, https:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2019\/11\/Resultados-1024x853.png 1024w\" sizes=\"auto, (max-width: 1488px) 100vw, 1488px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hablemos de Heroku, una excelente herramienta para probar nuestra web en la nube, en forma gratuita y sin anuncios. Subir tu web a la nube usando Heroku es muy sencillo si cuentas con las herramientas correctas.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"amp_status":"","footnotes":""},"categories":[171,33],"tags":[262,63,261,48],"class_list":["post-1869","post","type-post","status-publish","format-standard","hentry","category-programacion-web","category-web","tag-computo-en-la-nube","tag-heroku","tag-hosting","tag-programacion-web"],"_links":{"self":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1869","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/comments?post=1869"}],"version-history":[{"count":12,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1869\/revisions"}],"predecessor-version":[{"id":2375,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1869\/revisions\/2375"}],"wp:attachment":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/media?parent=1869"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/categories?post=1869"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/tags?post=1869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}