Learn how to upload your Webpage on Github Pages for free [SPA][ENG]
Hello everyone!
If you are a programmer, whether professional or beginner, you may have realized that in order to expose your skills and demonstrate your learning you will have to participate in projects or do personal projects.
But, when you are starting and you still don't have enough have money to buy a domain or a hosting service, you will have to use a free one. So today I will show you how to upload your pages to Github Pages so that the public can see your projects on the web.
¡Hola a todos! Si eres un programador, ya sea profesional o principiante, te podrás haber dado cuenta que para poder exponer tus habilidades y demostrar tu aprendizaje tendrás que participar en proyectos o hacer proyectos personales.
Pero, cuando te estás iniciando y aún no tienes dinero para comprar un dominio o un servicio de alojamiento (hosting) tendrás que utilizar uno gratuito. Así que en el día de hoy te enseñaré cómo subir tus páginas a Github Pages para que el público pueda ver tus proyectos en la Web.
Primero que todo, tendrás que crear tu cuenta en Github, irás a la siguiente página y le darás al enlace de registrar, colocarás tus nombre de usuario, email y tu nueva contraseña. En la sección resaltada en rojo te aparecerá un pequeño acertijo para asegurarse de que no eres un robot. Luego de esto le das al botón de Crear Cuenta (Create Account).
Then, you will receive a verification email to your inbox, you will have to copy the code or click on the link whitin the email and your account will be verified.
Luego de esto te llegará un correo de verificación a tu bandeja de entrada, tendrás que copiar el código o hacer clic en el enlace y tu cuenta estará verificada.
Once you have your account, on the home page you will have to create a new repository, pressing the green button:
Una vez que tengas tu cuenta, en la página de inicio tendrás que crear un nuevo repositorio, presionando el botón de color verde.
Next, you will proceed to fill in the following information: the name of the repository, a short description of what your project is about (optional), determine if it will be public or private. Finally there are 3 selection boxes:
- The first one is for adding a Readme.md, a file where you give more details about your code, how to use it, terms of use, etc.
- The second one is for adding a .Gitignore file, which tells git which of the uploaded files should be ignored and their changes are ignored. (useful for password, environment variables, etc)
- The third is to add a user license, referring to intellectual property, code modification, distribution, conditions, etc.
These three options are optional, but for this example, we will select the first one to add the "Readme" file. With these three things we will create our repository by pressing the green button.
A continuación, procederás a rellenar los siguientes datos: el nombre del repositorio, una descripción sobre de qué trata tu proyecto (opcional), determinar si éste será público o privado. Por último aparecen 3 casillas de selección.
- La primera casilla es para agregar un Readme.md, un archivo donde das más detalles sobre tu código cómo utilizarlo, términos de uso, etc.
- La segunda es para agregar un archivo .gitignore, que le indica a git cuales de los archivos subidos deben ser ignorados y no se toman en cuenta sus cambios.
- La tercera casilla es para añadirle una licencia de uso, referente a la propiedad intelectual, modificación del código, distribución, condiciones, etc.
Las tres opciones son opcionales, pero para este ejemplo, seleccionaremos la primera casilla para agregar el archivo de "Léame". Con estas tres cosas crearemos nuestro repositorio presionando el botón verde.
Once the project repository has been created, you have to upload the files of your website (HTML, CSS, Javascript, etc). One way is to upload them manually from the page, through its interface, in the "Add File" button.
Una vez creado el repositorio del proyecto hay que subir los archivos de tu sitio web (HTML CSS, Javascript, etc). Una forma es subirlos manualmente desde la página, a través de su interfaz, en el botón de "Add File".
Something important you need to be aware of is that for you to upload your website there must be at least one file called "index.html", which will be the Home of your site, if it is not found, your page will not be shown.
(Un dato muy importante es que para que puedas subir tu sitio web tiene que haber al menos un archivo llamado "index.html", que será el Home de tu sitio, si no se encuentra, tu página no será mostrada).
The other, more comfortable and more used way is using the terminal or the command line.
To achieve this it is necessary that you have downloaded the GIT version control software, which you can download through its official website.
https://git-scm.com/downloads
You choose the appropriate version for your operating system (Windows, Linux, MacOS, etc) and run the installer when it is ready.
La otra forma, más cómoda y más utilizada es utilizando la terminal o la línea de comandos.
Para lograr esto es necesario que tengas descargado el software de control de versiones GIT, el cual puedes descargar a través de su página oficial.
https://git-scm.com/downloads
Eliges la versión adecuada para tu sistema operativo (Windows, Linux, MacOS, etc) y ejecutas el instalador cuando esté listo.
Once this is done, you can write any git command from your console or terminal.
Una vez hecho esto podrán escribir cualquier comando de git desde su consola o terminal.
To do this, you will go to your favorite code editor, where you have programmed your project, in my case is Visual Studio Code, you will open a new Terminal or Command Console and they will write the following commands. Every one in a different line and then press enter. But stop, first see the next step and its imagen before writing the commands.
git init
git add .
git commit -m "Descripcion: My first commit"
git remote add origin yourURL
git push origin master
Para ello, irán a su editor de código favorito, donde hayan programado su proyecto, en este caso es Visual Studio Code, abrirán una nueva Terminal o Consola de Comandos y escribirán los comandos que pueden ver arriba.
Después de escribir cada uno de los siguientes comandos deben presionar la tecla ENTER.
- Git init creates a new git "session" and prepares to upload files.
- With git add, you can add the files that are in your folder, writing their name (git add index.html). On the other hand, the period (.) Is used to upload all files.
- git commit is used to explain in a reduced way that you have added or changed in that new version of the code that you are going to upload.
- git remote add origin, remotely direct the files to your online repository.
- git push is the command used to send or upload those files to the repository.
In my case, my URL is: https: //github.com/Luism96xd/projects-portfolio.git
So the fourth command would be: - git remote add origin https://github.com/Luism96xd/projects-portfolio.git
- git push origin master
- Git init crea una nueva "sesión" de git y se prepara para subir archivos.
- Con git add, podrás añadir los archivos que se encuentren en tu carpeta, escribiendo su nombre (git add index.html). Por otra parte, el punto (.) se utiliza para subir todos los archivos.
- **git commit **se utiliza para explicar de forma reducida que has agregado o cambiado en esa nueva versión del código que vas a subir.
- git remote add origin, direcciona de forma remota los archivos que vas a subir hacia tu repositorio en línea.
- git push es el comando que se utiliza para enviar o subir esos archivos al repositorio.
En mi caso, mi URL es:
https://github.com/Luism96xd/projects-portfolio.git
Así que el cuarto comando sería:- git remote add origin https://github.com/Luism96xd/projects-portfolio.git
- git push origin master
You will wonder how you get that url.🤔
Once you create your repository you will be taken to the next page, here you will see all the files that you have uploaded and a green button that says "Code", if you press that button the following window will open that offers you the url to copy and paste in your terminal.
Te preguntarás como obtienes esa url. Una vez que creas tu repositorio serás llevado a la siguiente página, aquí podrás ver todos los archivos que has subido y un botón verde que dice "Code", si presionas ese botón se abrirá la siguiente ventanita que te ofrece la url para copiar y pegar en tu terminal.
After executing all these commands, all your files will be in Github, it only remains to configure it to be hosted in Github Pages. To do this, you will go to the options menu (Settings) and go down to the section that says Github Pages.
Here you select the branch where your project is located, in this case "master" branch, by default it is "main", so you will have to change it in that drop-down menu and finally press the save button "Save". And voila, your page is uploaded to Github Pages!
When reloading the page it will give you a link to which you can access and share it. It will be highlighted in green when you have finished the process.
Luego de ejecutar todos estos comandos, todos tus archivos estarán en Github, solo queda configurarlo para que se hospede en Github Pages. Para ello irás al menú de opciones (Settings) y bajarás a la sección que dice Github Pages.
Aquí seleccionás la rama (branch) en donde se encuentra tu proyecto, en este caso "master", por defecto es "main", así que tendrás que cambiarla en ese menú desplegable y por último presionas el botón de guardar "Save". ¡Y listo, tu página está subida a Github Pages! Al recargar la página te dará un enlace al cual podrás acceder y compartirlo. Estará resaltado en color verde cuando hayas terminado el proceso.
Sharing your projects on Github is essential, it will give you a greater reach and people will be able to know your skills. Github offers us the opportunity to host our websites for free. Similarly, you can also upload all the code behind it to Github.
What did you think of this tutorial? Do you have a website to share with us? Let me know in the comments.
Compartir tus proyectos en Github es fundamental, te dará un mayor alcance y las personas podrán conocer tus habilidades. Github nos ofrece la oportunidad de hospedar nuestros sitios web de forma gratuita. Del mismo modo, también puedes subir a Github todo el código que hay detrás.
¿Qué te ha parecido este tutorial? ¿Tienes algun sitio web para compartirnos? Déjamelo saber en los comentarios.
I hope you liked this tutorial and blog post. Bye, see you soon!
¡Saludos y espero verlos pronto!
Disclaimer:
This article is an adaptation from an article previously published on my personal blog: "My Entertainment Place"
Reference: https://my-entertainment-place.blogspot.com (2021)
All the images of this tutorial are screenshots taken from the Github website.