-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 8beaca6
Showing
32 changed files
with
6,123 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
root = true | ||
|
||
[*] | ||
indent_style = space | ||
indent_size = 2 | ||
charset = utf-8 | ||
trim_trailing_whitespace = true | ||
insert_final_newline = false | ||
|
||
|
||
[*.{json,md,yaml}] | ||
indent_size = 2 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
name: Build and deploy to GitHub Pages | ||
|
||
on: | ||
push: | ||
branches: [main] | ||
|
||
jobs: | ||
build-and-deploy: | ||
runs-on: ubuntu-latest | ||
steps: | ||
- name: Checkout 🛎️ | ||
uses: actions/[email protected] | ||
|
||
- name: Install and Build 🔧 | ||
run: | | ||
npm ci | ||
npm run build | ||
- name: Deploy 🚀 | ||
uses: JamesIves/[email protected] | ||
with: | ||
branch: gh-pages | ||
folder: dist |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,109 @@ | ||
#Junk | ||
.DS_Store | ||
.vscode/ | ||
.idea/ | ||
|
||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
lerna-debug.log* | ||
|
||
# Diagnostic reports (https://nodejs.org/api/report.html) | ||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json | ||
|
||
# Runtime data | ||
pids | ||
*.pid | ||
*.seed | ||
*.pid.lock | ||
|
||
# Directory for instrumented libs generated by jscoverage/JSCover | ||
lib-cov | ||
|
||
# Coverage directory used by tools like istanbul | ||
coverage | ||
*.lcov | ||
|
||
# nyc test coverage | ||
.nyc_output | ||
|
||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) | ||
.grunt | ||
|
||
# Bower dependency directory (https://bower.io/) | ||
bower_components | ||
|
||
# node-waf configuration | ||
.lock-wscript | ||
|
||
# Compiled binary addons (https://nodejs.org/api/addons.html) | ||
build/Release | ||
|
||
# Dependency directories | ||
node_modules/ | ||
jspm_packages/ | ||
|
||
# TypeScript v1 declaration files | ||
typings/ | ||
|
||
# TypeScript cache | ||
*.tsbuildinfo | ||
|
||
# Optional npm cache directory | ||
.npm | ||
|
||
# Optional eslint cache | ||
.eslintcache | ||
|
||
# Microbundle cache | ||
.rpt2_cache/ | ||
.rts2_cache_cjs/ | ||
.rts2_cache_es/ | ||
.rts2_cache_umd/ | ||
|
||
# Optional REPL history | ||
.node_repl_history | ||
|
||
# Output of 'npm pack' | ||
*.tgz | ||
|
||
# Yarn Integrity file | ||
.yarn-integrity | ||
|
||
# dotenv environment variables file | ||
.env | ||
.env.test | ||
|
||
# parcel-bundler cache (https://parceljs.org/) | ||
.parcel-cache | ||
|
||
# Next.js build output | ||
.next | ||
|
||
# Nuxt.js build / generate output | ||
.nuxt | ||
dist | ||
|
||
# Gatsby files | ||
.cache/ | ||
# Comment in the public line in if your project uses Gatsby and *not* Next.js | ||
# https://nextjs.org/blog/next-9-1#public-directory-support | ||
# public | ||
|
||
# vuepress build output | ||
.vuepress/dist | ||
|
||
# Serverless directories | ||
.serverless/ | ||
|
||
# FuseBox cache | ||
.fusebox/ | ||
|
||
# DynamoDB Local files | ||
.dynamodb/ | ||
|
||
# TernJS port file | ||
.tern-port |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"minifySvg": false | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
{ | ||
"extends": [ | ||
"@parcel/config-default" | ||
], | ||
"reporters": [ | ||
"...", | ||
"parcel-reporter-clean-dist" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
{ | ||
"plugins": { | ||
"posthtml-include": { | ||
"root": "./src" | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
{ | ||
"printWidth": 80, | ||
"useTabs": false, | ||
"semi": true, | ||
"singleQuote": true, | ||
"trailingComma": "es5", | ||
"bracketSpacing": true, | ||
"arrowParens": "avoid", | ||
"proseWrap": "always" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
{ | ||
"includePaths": [ | ||
"node_modules" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
# Parcel template | ||
|
||
This project was created with Parcel. For familiarization and setting additional features [refer to documentation](https://parceljs.org/). | ||
|
||
## Preparing a new project | ||
|
||
1. Make sure you have an LTS version of Node.js installed on your computer. | ||
[Download and install](https://nodejs.org/en/) if needed. | ||
2. Clone this repository. | ||
3. Change the folder name from `parcel-project-template` to the name of your project. | ||
4. Create a new empty GitHub repository. | ||
5. Open the project in VSCode, launch the terminal and link the project to the GitHub repository | ||
[by instructions](https://docs.github.com/en/get-started/getting-started-with-git/managing-remote-repositories#changing-a-remote-repositorys-url). | ||
6. Install the project's dependencies in the terminal with the `npm install` command. | ||
7. Start development mode by running the `npm start` command. | ||
8. Go to [http://localhost:1234](http://localhost:1234) in your browser. | ||
This page will automatically reload after saving changes to the project files. | ||
|
||
## Files and folders | ||
|
||
- All stylesheet parshas should be in the `src/sass` folder and imported into the page stylesheets. For example, for `index.html` the style file is named `index.scss`. | ||
- Add images to the `src/images` folder. The assembler optimizes them, but only when deploying the production version of the project. All this happens in the cloud so as not to burden your computer, as it can take a long time on weak machines. | ||
|
||
## Deploy | ||
|
||
To set up a project deployment, you need to perform a few additional steps to set up your repository. Go to the `Settings` tab and in the `Actions` subsection select the `General` item. | ||
|
||
![GitHub actions settings](./assets/actions-config-step-1.png) | ||
|
||
Scroll the page to the last section, in which make sure the options are selected as in the following image and click `Save`. Without these settings, the build will not have enough rights to automate the deployment process. | ||
|
||
![GitHub actions settings](./assets/actions-config-step-2.png) | ||
|
||
The production version of the project will be automatically built and deployed to GitHub Pages, in the `gh-pages` branch, every time the `main` branch is updated. For example, after a direct push or an accepted pull request. To do this, you need to edit the `homepage` field and the `build` script in the `package.json` file, replacing `your_username` and `your_repo_name` with your own, and submit the changes to GitHub. | ||
|
||
|
||
```json | ||
"homepage": "https://your_username.github.io/your_repo_name/", | ||
"scripts": { | ||
"build": "parcel build src/*.html --public-url /your_repo_name/" | ||
}, | ||
``` | ||
|
||
Next, you need to go to the settings of the GitHub repository (`Settings` > `Pages`) and set the distribution of the production version of files from the `/root` folder of the `gh-pages` branch, if this was not done automatically. | ||
|
||
![GitHub Pages settings](./assets/repo-settings.png) | ||
|
||
### Deployment status | ||
|
||
The deployment status of the latest commit is displayed with an icon next to its ID. | ||
|
||
- **Yellow color** - the project is being built and deployed. | ||
- **Green color** - deployment completed successfully. | ||
- **Red color** - an error occurred during linting, build or deployment. | ||
|
||
More detailed information about the status can be viewed by clicking on the icon, and in the drop-down window, follow the link `Details`. | ||
|
||
![Deployment status](./assets/status.png) | ||
|
||
### Live page | ||
|
||
After some time, usually a couple of minutes, the live page can be viewed at the address specified in the edited `homepage` property. For example, here is a link to a live version for this repository | ||
[https://goitacademy.github.io/parcel-project-template](https://goitacademy.github.io/parcel-project-template). | ||
|
||
If a blank page opens, make sure there are no errors in the `Console` tab related to incorrect paths to the CSS and JS files of the project (**404**). Most likely you have the wrong value for the `homepage` property or the `build` script in the `package.json` file. | ||
|
||
## How it works | ||
|
||
![How it works](./assets/how-it-works.png) | ||
|
||
1. After each push to the `main` branch of the GitHub repository, a special script (GitHub Action) is launched from the `.github/workflows/deploy.yml` file. | ||
2. All repository files are copied to the server, where the project is initialized and built before deployment. | ||
3. If all steps are successful, the built production version of the project files is sent to the `gh-pages` branch. Otherwise, the script execution log will indicate what the problem is. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,100 @@ | ||
# Parcel template | ||
|
||
Este proyecto fue creado con Parcel. [Consulte la documentación](https://parceljs.org/). | ||
para conocer y personalizar las funciones adicionales. | ||
|
||
## Preparación de un nuevo proyecto | ||
|
||
1. Asegúrate de que la versión LTS de Node.js está instalada en tu equipo. | ||
[Descárgala e instálala](https://nodejs.org/en/) si es necesario. | ||
2. Clona este repositorio. | ||
3. Cambie el nombre de la carpeta con `parcel-project-template` por el nombre de tu proyecto. | ||
4. Crea un nuevo repositorio vacío en GitHub. | ||
5. Abre el proyecto en VSCode, ejecuta el terminal y enlaza el proyecto con el repositorio de GitHub | ||
[según las instrucciones](https://docs.github.com/en/get-started/getting-started-with-git/managing-remote-repositories#changing-a-remote-repositorys-url). | ||
6. Instala las dependencias del proyecto en el terminal con el comando `npm install`. | ||
7. Inicia el modo de desarrollo, ejecutando el comando `npm start`. | ||
8. Ve a la dirección [http://localhost:1234](http://localhost:1234) en tu navegador. | ||
Esta página se recargará automáticamente después de guardar los cambios en los | ||
archivos del proyecto. | ||
|
||
## Archivos y carpetas | ||
|
||
- Todos los partials de los archivos de estilo deben estar en la carpeta `src/sass` | ||
y ser importados en los archivos de estilos de la página. Por ejemplo, para | ||
`index.html` el archivo de estilos se llama `index.scss`. | ||
- Añade las imágenes a la carpeta `src/images`. El ensamblador las optimizará, | ||
pero sólo cuando se cargue la versión de producción del proyecto. Todo esto | ||
se hace en la nube, para no sobrecargar tu ordenador, ya que puede tardar | ||
mucho en máquinas poco potentes. | ||
|
||
## Deploy | ||
|
||
Para configurar un proyecto para ser implementado, hay algunos pasos adicionales | ||
para configurar tu repositorio. Ve a la pestaña `Settings` y en la subsección | ||
`Actions`, selecciona la opción `General`. | ||
|
||
![GitHub actions settings](./assets/actions-config-step-1.png) | ||
|
||
Baja hasta la última sección, asegurándote de que las opciones esten seleccionadas | ||
como en la siguiente imagen, y haz clic en `Save`. Sin estas opciones, la compilación | ||
no tendrá suficientes permisos para automatizar el proceso de implementación. | ||
|
||
![GitHub actions settings](./assets/actions-config-step-2.png) | ||
|
||
La versión de producción del proyecto se compilará e implementará automáticamente | ||
en GitHub Pages, en la rama `gh-pages`, cada vez que se actualice la rama `main`. | ||
Por ejemplo, después de un push directo o de un pool request aceptado. Para | ||
ello, edita el campo `homepage` y el script `build` en el archivo `package.json`, | ||
sustituyendo `your_username` y `your_repo_name` por los tuyos propios, y envía | ||
los cambios a GitHub. | ||
|
||
```json | ||
"homepage": "https://your_username.github.io/your_repo_name/", | ||
"scripts": { | ||
"build": "parcel build src/*.html --public-url /your_repo_name/" | ||
}, | ||
``` | ||
|
||
A continuación, hay que ir a la configuración del repositorio de GitHub | ||
(`Settings` > `Pages`) y seleccionar que la versión de producción de los archivos | ||
se distribuya desde la carpeta `/root` de la rama `gh-pages`, si no se hizo automáticamente. | ||
|
||
![GitHub Pages settings](./assets/repo-settings.png) | ||
|
||
### Estado del deploy | ||
|
||
El estado del deploy del último commit se indica con un icono junto a su identificador. | ||
|
||
- **Color amarillo** - el proyecto se está compilando y desplegando. | ||
- **Color verde** - el deploy se completó con éxito. | ||
- **Color rojo** - Se ha producido un error durante el linting, la compilación o el deploy. | ||
|
||
Se puede ver información de estado más detallada haciendo clic en el icono y | ||
en el enlace `Details` de la ventana desplegable. | ||
|
||
![Deployment status](./assets/status.png) | ||
|
||
### Página activa | ||
|
||
Después de un tiempo, normalmente un par de minutos, la página activa se puede | ||
ver en la dirección especificada en la propiedad `homepage`. Por ejemplo, aquí | ||
está el enlace a la versión activa de este repositorio. | ||
[https://goitacademy.github.io/parcel-project-template](https://goitacademy.github.io/parcel-project-template). | ||
|
||
Si se abre una página en blanco, asegúrese de que no haya errores en la pestaña | ||
`Console` relacionados con rutas incorrectas a los archivos CSS y JS del proyecto (**404**). | ||
Lo más probable es que tenga un valor incorrecto para la propiedad `homepage` o el | ||
script `build` en el archivo `package.json`. | ||
|
||
## ¿Cómo funciona? | ||
|
||
![How it works](./assets/how-it-works.png) | ||
|
||
1. Después de cada push a la rama `main` del repositorio GitHub, se ejecuta un | ||
script especial (GitHub Action) del archivo `.github/workflows/deploy.yml`. | ||
2. Todos los archivos del repositorio se copian en el servidor, donde el | ||
proyecto se inicializa y se compila antes de ser desplegado. | ||
3. Si todos los pasos tienen éxito, la versión de producción compilada de los | ||
archivos del proyecto se envía a la rama `gh-pages`. De lo contrario, el | ||
registro de ejecución del script indicará cuál es el problema. |
Oops, something went wrong.