Crear un blog con Jekyll + Firebase + Circle CI
Mi sitio personal estaba construido con Jekyll y lo tenía hosteado en Github solo pagaba el dominio, pero solo bajo HTTP, revisando las opciones de tenerlo bajo HTTPS y Firebase me pareció buena opción, asi que decidi migrar.
En este post revisamos los pasos a seguir para montar un blog con Jekyll + Firebase + Circle CI
Crear un proyecto local Jekyll
Instalar Jekyll de forma local
Para instalar Jekyll no hay mejor documentación que la oficial asi que dejo las ligas para los diferentes entornos
Crear un proyecto Jekyll
Una vez que se ha instalado Jekyll creamos un nuevo proyecto con el siguiente comando desde la terminal e ingresamos a la carpeta del proyecto creado
1
2
3
~ $ jekyll new my-awesome-blog
~ $ cd my-awesome-blog
~/my-awesome-blog $
Lo anterior nos creara la estructura vacía de un proyecto
a la cual podremos agregar páginas, entradas
modificar estilos, agregar plugins entre otras cosas,
para tener mejor referencia puedes ver la documentación oficial.
Correr el proyecto de forma local
para poder ver el proyecto corriendo de forma local lo hacemos con el siguiente comando.
1
2
3
~/my-awesome-blog $ bundle exec jekyll serve
Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.
Lo anterior creará un servicio http sobre el puerto 4000, solo necesitamos ir al navegador y veremos una página corriendo, como lo muestra la figura siguiente.
Firebase
Crear un proyecto en firebase
Creamos una cuenta en Firebase
Creamos un nuevo proyecto desde la Consola de Firebase con nombre my-awesome-blog.
Creamos un proyecto
Vista de un proyecto creado
Instalar firebase-tools de forma global
Para instalar firebase-tools es necesario tener instalado Node
Se instala firebase-tools via NPM
1
~ $ npm install -g firebase-tools
Conectamos a la cuenta
1
2
3
4
5
6
7
8
9
10
11
~ $ firebase login
i Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.
? Allow Firebase to collect CLI usage and error reporting information? (Y/n) n
Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=0000
Waiting for authentication...
✔ Success! Logged in as myMail@gmail.com
Inicializar el proyecto Jekyll como proyecto de Firebase
Para inicializar el proyecto como firebase
1
~/my-awesome-blog $ firebase init
1
2
3
4
5
6
7
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
Seleccionamos la opción de Hosting
1
2
3
4
5
6
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.
◯ Database: Deploy Firebase Realtime Database Rules
◯ Firestore: Deploy rules and create indexes for Firestore
◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
◯ Storage: Deploy Cloud Storage security rules
Optamos por un proyecto existente
1
2
3
4
5
? Please select an option: (Use arrow keys)
❯ Use an existing project
Create a new project
Add Firebase to an existing Google Cloud Platform project
Don't set up a default project
Seleccionamos el proyecto que creamos anteriormente
1
2
? Select a default Firebase project for this directory: (Use arrow keys)
❯ my-awesome-blog-ce3f1 (my-awesome-blog)
Indicamos que el directorio a desplegar será la carpeta _site
1
2
3
4
5
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? _site
Indicamos que NO configurar como single-page
1
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) N
Al término de este proceso tendremos un archivo de nombre firebase.json como se muestra a continuación. Lo importante de este archivo es que cuando generemos un jekyll build se generará en la carpeta _site un sitio estático y esta carpeta es la que se enviará a firebase hosting
1
2
3
4
5
6
7
8
9
10
{
"hosting": {
"public": "_site",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
Integración Continua (CI)
Crear el archivo de configuración
Creamos un archivo .circleci/config.yml con el siguiente contenido, en pocas palabras cuando se realice un push sobre la rama master se generará un build, este build tomará la carpeta _site y lo desplegará en el hosting de firebase
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
version: 2.1
orbs:
ruby: circleci/ruby@0.1.2
jobs:
build:
docker:
- image: circleci/ruby:2.6.0-node
working_directory: ~/repo
steps:
- checkout
- run:
name: Install npm
command: npm install
- run:
name: Install Bundler
command: gem install bundler:2.0.2
- run:
name: Install Bundle
command: bundle check || bundle install
- run:
name: Install Firebase Tools
command: sudo npm install -g firebase-tools
- run:
name: Build Jekyll Site
command: bundle exec jekyll build --verbose
- run:
name: Deploy to Firebase
command: firebase deploy --token=$FIREBASE_TOKEN --non-interactive
workflows:
version: 2
build_and_deploy:
jobs:
- build:
filters:
branches:
only: master
Estructura final del sitio Jekyll
1
2
3
4
5
6
7
8
9
10
11
12
13
├── .circleci
│ └── config.yml
├── 404.html
├── Gemfile
├── Gemfile.lock
├── _config.yml
├── _posts
│ └── 2019-10-17-welcome-to-jekyll.markdown
├── _site
├── about.markdown
├── firebase.json
└── index.markdown
Crear un repositorio en bitbucket
Creamos una cuenta en Bitbucket
Creamos un repositorio donde alojaremos el código con nombre my-awesome-blog.
Creamos un repositorio
Vista de un repositorio creado
llevamos nuestro proyecto a bitbucket
Inicializamos el proyecto como git
1
2
3
~/my-awesome-blog $ git init
~/my-awesome-blog $ git add .
~/my-awesome-blog $ git commit -m "initial commit"
Conectamos nuestro proyecto a Bitbucket
1
2
~/my-awesome-blog $ git remote add origin git@bitbucket.org:saidmlx/my-awesome-blog.git
~/my-awesome-blog $ git push -u origin master
Configurar integración continua entre Bitbucket y Circle CI
Crear una cuenta en Circle ci
Creamos una cuenta en Circle CI utilizando la cuenta de bitbucket que tiene el repositorio
Dentro de nuestro dashboard agregamos el proyecto con el botón Set Up Project
Para desplegar la construcción del sitio en necesario un token por parte de Firebase que otorgue la capacidad de conectar a firebase.
1
2
3
4
5
6
7
8
9
10
11
12
13
~/my-awesome-blog $ firebase login:ci
Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=xyz9753...
Waiting for authentication...
✔ Success! Use this token to login on a CI server:
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
Example: firebase deploy --token "$FIREBASE_TOKEN"
Este token lo agregamos como variable de entorno (Environment Variables)
Después de eso generamos un build al proyecto
Regresamos a la consola de firebase y veremos que se ha generado una implementación
Si vemos desplegado nuestro sitio
Con esto tenemos todo nuestro sitio configurado y listo para ser usado