Jupyter Notebook is an incredibly versatile tool for working with code and data interactively and collaboratively. In this article, I'll guide you through an exciting journey that begins with an introduction to Jupyter and its Notebooks, moves on to using a GitHub template or forking, and finally, reaches the setup and deployment on Vercel.

What Jupyter and Notebooks Are

Jupyter Notebook is an open-source tool that allows you to create and share interactive documents that combine code, visualizations, and explanatory text all in one place. It's widely used in fields like data science, programming, scientific research, and education.

Note: The Jupyter Lite team offers excellent documentation for deploying Notebooks on GitHub Pages https://jupyterlite.readthedocs.io/en/latest/quickstart/deploy.html. However, in this post, we'll show you how to achieve the same process on Vercel.

Using the GitHub Template or Forking

You can kickstart your Jupyter Lite Notebook project by using this Github template Vercel / Netlify Jupyter Lite Template.

Setting Up on Vercel

1. Sign up for Vercel (if you haven't already).

2. Create a new project on Vercel and follow the instructions to connect your GitHub repository with Vercel.

   

   

3. Configure deployment options and follow the steps to guide you through the deployment process.

   • Set a name for your project

   • Open "Build and Outputs Settings"

   • Enable "Build Command" and add this text: bash ./deploy.sh

   • Enable "Output Directory" and add this text: dist

   • Click on "Deploy"

4. Once deployment is complete, your Jupyter Notebook project will be online and accessible.

Setting Up on Netlify

1. Sign up for Netlify (if you haven't already).

2. Create a new project on Netlify and follow the instructions to connect your GitHub repository with Netlify.

   

   

3. Configure deployment options and follow the steps to guide you through the deployment process.

   • Set a name for your project

   • Set "Build command" with this text: bash ./deploy.sh

   • Set "Publish directory" with this text: dist

   • Click on "Deploy {projectname}"

     

4. Once deployment is complete, your Jupyter Notebook project will be online and accessible.

Demo

Before starting your own project, we invite you to explore a demo of what you'll accomplish with Jupyter Lite Notebook on Vercel / Netlify.

You can see the demo in action at:

https://jupyter.vercel.app.

https://jupyterlite.netlify.app/

Description: This Docker image is designed to provide an ultra-lightweight HTTP server optimized for efficiently serving static files. It is based on the Busybox system and utilizes the Applet HTTPD for web server functionality.

General Image Details:

• Base Image: diegofcornejo/httpd-lite:latest

• Purpose: Efficiently serve static files.

• Size: The image size has been optimized to be as lightweight as possible, making it ideal for quick and efficient deployments of static content in containerized environments. (158kb)

Example Usage

Serving Static Files from your Host Machine

# Serve static files from the current directory
# Create a configuration file if you don't have one
touch httpd.conf 
# Run the container with the following command:
docker run -p 80:8080 --init --rm -ti -v "$(PWD):/home/static" diegofcornejo/httpd-lite:latest

Using in a Dockerfile

Here's an example of how to use this image. The CMD instruction is optional but can be used to replace the parameters as needed:

FROM diegofcornejo/httpd-lite:latest as production

EXPOSE 8080

# Copy your static files
COPY . .

CMD ["/busybox", "httpd", "-f", "-v", "-p", "8080", "-c", "httpd.conf"]

(Vite) React App built inside a turborepo full example

Assuming you have a project structure like this:

├── turbo.json
├── package.json
├── yarn.lock
├── README.md
└── apps
    └── myapp
        ├── src
        ├── index.html
        └── Dockerfile

# Base image
FROM alpine:3.18.4 as build

RUN apk update
RUN apk add --no-cache nodejs npm
RUN npm install -g yarn

# Create app directory
WORKDIR /app

# Copy the whole project
COPY ../../ .

# Install dependencies
RUN yarn install

# Build the app
RUN yarn workspace myapp build

# Production stage
FROM diegofcornejo/httpd-lite:latest as production

# Copy build artifacts from the build-vite stage
COPY --from=build /app/apps/myapp/dist .

EXPOSE 8080

Build image and run container

# To build the docker image, run the following command:
docker build -f apps/myapp/Dockerfile -t myreactapp:latest .

# To run the docker image, run the following command:
docker run -p 80:8080 --init --rm -ti myreactapp:latest

# Or in detach mode (background):
docker run -p 80:8080 --init --rm -d myreactapp:latest

# Now Open your browser and go to http://localhost:80

# To stop the docker image, run the following command:
docker stop <container_id>

Note: When running the container, sending a TERM signal to your TTY won't get propagated due to how Busybox is built. Instead, you can call docker stop (or docker kill if you can't wait 15 seconds). Alternatively, you can run the container with docker run -it --rm --init, which will propagate signals to the process correctly.

aws ssm put-parameter --name "/my-app/my-param-name" --value "my-param-value" --type "String"

Replace "/my-app/my-param-name" with the desired path and name for the parameter. Note that the path must begin with a forward slash (/) and can include multiple levels separated by forward slashes. Also, if the path does not exist, the put-parameter command will create it automatically.

Make sure you have permission to create parameters in the SSM parameter store, and specify any necessary additional parameters like --region or --profile.

2. Create the bash script

The script sets some parameters like APP, SERVICE, ENVIRONMENT, and REGION. These variables are used to construct the SSM path to retrieve the parameters.

The script uses the aws ssm get-parameters-by-path command to retrieve all SSM parameter names under the given path. Then, it loops through each parameter and exports it as an environment variable. The script also appends the export statements to the ~/.bashrc file so that they persist on future logins.

Finally, the script reloads the ~/.bashrc file with the source command.

Create a file for the script

nano export-ssm-params.sh
#or
vim export-ssm-params.sh

Copy/paste the following code.

Here's the script:

#!/bin/bash

# This script will export all SSM parameters under a given path as environment variables
# It will also append the export statements to the ~/.bashrc file so that they are available on future logins

# Set some parameters
APP="myapp"
SERVICE="api"
ENVIRONMENT="production"
REGION="us-east-1"

# Set the SSM path
SSM_PATH="/$APP/$SERVICE/$ENVIRONMENT"

# Get all SSM parameter names under the given path
SSM_PARAMETER_NAMES=$(aws ssm get-parameters-by-path \
  --region $REGION \
  --path "$SSM_PATH" \
  --recursive \
  --with-decryption \
  --query 'Parameters[].Name' \
  --output text)

# Loop through each parameter and export it as an environment variable
for name in $SSM_PARAMETER_NAMES; do
  value=$(aws ssm get-parameter \
    --region $REGION \
    --name $name \
    --with-decryption \
    --query 'Parameter.Value' \
    --output text)
  if [ ! -z "$name" ] && [ ! -z "$value" ]; then
    name=$(echo $name | awk -F/ '{print toupper($NF)}')
    export "$name"="$value"
    echo "Exported variable: $name=$value"
    echo "export $name=$value" >> ~/.bashrc
  fi
done

# Reload the bashrc file
source ~/.bashrc

3. How to Run the Script

To use this script, you need to have the AWS client (awscli) installed and configured to authenticate to an AWS account. Then, simply execute the script with Bash in a terminal.

You can save the script in a file with .sh extension, for example export-ssm-params.sh.

nano export-ssm-params.sh
#or
vim export-ssm-params.sh

Don't forget add execution permission

chmod +x export-ssm-params.sh

Now you can run the script with the following command:

bash export-ssm-params.sh
#or
./export-ssm-params.sh

Conclusion

In summary, this bash script is useful to export AWS Systems Manager parameters as environment variables. This can be helpful in different situations, for example, to avoid the need to repeatedly call the AWS API to get the parameter values.

Additionally, the script also adds the export statements to the ~/.bashrc file, meaning that the environment variables will be available in future Bash terminal sessions.

Create and Setup Cluster and required policies

1. Create Fargate Cluster

eksctl create cluster --region us-west-1 --name express-api --version 1.25 --fargate

Note: This command create a stack in cloudformation

2. Enable cluster to use IAM

eksctl utils associate-iam-oidc-provider --region us-west-1 --cluster express-api --approve

3. Download the IAM policy to allow AWS Load Balancer Controller to make requests to AWS API's

curl -o iam_policy.json https://raw.githubusercontent.com/kubernetes-sigs/aws-load-balancer-controller/v2.4.4/docs/install/iam_policy.json

4. Create an IAM policy with the file downloaded in step 3

aws iam create-policy \
   --policy-name AWSLoadBalancerControllerIAMPolicy \
   --policy-document file://iam_policy.json

5. To create a service account named aws-load-balancer-controller in the kube-system namespace for the AWS Load Balancer Controller, run the following command:

eksctl create iamserviceaccount \
  --cluster=express-api \
  --namespace=kube-system \
  --name=aws-load-balancer-controller \
  --attach-policy-arn=arn:aws:iam::{org-id}:policy/AWSLoadBalancerControllerIAMPolicy \
  --override-existing-serviceaccounts \
  --approve \
  --region us-west-1

Note: This command create a stack in cloudformation

6. To verify that the new service role is created, run one of the following commands:

eksctl get iamserviceaccount --region us-west-1 --cluster express-api --name aws-load-balancer-controller --namespace kube-system
#or
kubectl get serviceaccount aws-load-balancer-controller --namespace kube-system

Install the AWS Load Balancer Controller using Helm

1. Add the Amazon EKS chart repo to Helm

helm repo add eks https://aws.github.io/eks-charts

2. Install the TargetGroupBinding custom resource definitions (CRDs)

kubectl apply -k "github.com/aws/eks-charts/stable/aws-load-balancer-controller//crds?ref=master"

3. Install helm chart

helm install aws-load-balancer-controller eks/aws-load-balancer-controller \
    --set clusterName=express-api \
    --set serviceAccount.create=false \
    --set region=us-west-1 \
    --set vpcId={vpc-id} \
    --set serviceAccount.name=aws-load-balancer-controller \
    -n kube-system

Setup AWS Load Balancer Controller

1. Create a Fargate profile

eksctl create fargateprofile --cluster express-api --region us-west-1 --name express-api-profile --namespace express-api-namespace

2. Deploy YML file

Download: https://gist.github.com/diegofcornejo/5b271c7ec69b2e813804bdcbe2bd0684#file-express-api-alb-yml

kubectl apply -f express-api-alb.yml

Note: If you want https on your load balancer, you need to create it before in the same region when you are deployed your cluster (us-west-1 for this example), then pass the certificate arn in the file.yml

3. Verify that the Ingress resource was created

kubectl get ingress/express-api-ingress -n express-api-namespace
#or
kubectl get ingresses.networking.k8s.io express-api-ingress -n express-api-namespace

Output:

NAME                  CLASS   HOSTS   ADDRESS                                                                 PORTS   AGE
express-api-ingress   alb     *       k8s-expressa-expressa-xxxxxxxxxx-xxxxxxxx.us-west-2.elb.amazonaws.com   80      12m

Note: If your Ingress isn't created after several minutes, view the AWS Load Balancer Controller logs by running the following command:

kubectl logs -n kube-system deployment.apps/aws-load-balancer-controller

4. Open the browser and paste the load balancer url or your custom domain

Note: Remember create an A record in route 53 or your domain admin point to load balancer

5. Scale your deployment

kubectl scale deployments express-api-deployment --replicas=3 -n express-api-namespace

References

https://repost.aws/knowledge-center/eks-alb-ingress-controller-fargate

https://aws.amazon.com/blogs/containers/how-to-expose-multiple-applications-on-amazon-eks-using-a-single-application-load-balancer/

Delete Cluster

eksctl delete cluster --region us-west-1 --name express-api

Todos estos pasos son fácilmente reemplazables al importar tu repositorio hexo en vercel, pero si por alguna razón no quieres usar vercel, sigue leyendo.

Para esto necesitamos:

• Una cuenta en godaddy.com con un dominio
• Una cuenta en cloudflare.com
• Una cuenta en github.com
• Git Bash (https://git-scm.com/downloads) u otra bash en la que puedas ejecutar comandos git
• Node JS (https://nodejs.org)

Proceso

1. Entrar a cloudflare.com y agregar un sitio

2. Entrar a godaddy.com y configurar nameservers

Configurar Nameservers

Click en "DNS" En la sección "Nameservers" click en "Change"

Seleccionar custom y agregar nameservers obtenidos en cloudflare.com

Eliminar cualquier otro nameserver que exista.

Cloudflare nameservers

• joan.ns.cloudflare.com
• nash.ns.cloudflare.com

Validar Nameservers

Según Cloudflare y Godaddy este proceso de cambio de nameservers puede tomar hasta 24 horas, pero normalmente toma unos pocos minutos, para validar si el cambio se realizó podemos hacerlo de dos formas:

Desde la cli o línea de comandos

Abrir la terminal o cmd y pegar el siguiente comando

$ nslookup -type=ns randomtechguy.com

Desde la web

Ingresar a https://dnschecker.org/

3. Crear repositorio en Github

Ingresar a github.com y crear repositorio Agregar nombre al nuevo repositorio y hacer click en "Create repository"

4. Verificar disponibilidad de certificado de seguridad (SSL)

Para este punto nuestro dominio ya está siendo administrado por cloudflare por lo que contamos con un certificado SSL. Ingresar a cloudflare.com Click en nuestrio sitio creado en el paso 1 Click en Crypto y verificamos el estado del certificado, que debería estar activo como muestra la imagen abajo: Ir a sección "Always Use HTTPS" y marca la casilla en "On"

Desde aquí usaremos la consola o terminal (o como la llames) :D

5. Instalar hexo (https://hexo.io/)

Abrir la terminal en la que tienes acceso a los comandos git y npm

# Instalar hexo globalmente
$ npm install hexo-cli -g
# Iniciar un proyecto hexo
$ hexo init myawesomeblog
# myawesomeblog es el nombre de la carpeta que se creará, pueden usar cualquier nombre pero para poder guiarnos mejor vamos a usar el mismo nombre del repositorio que creamos en el paso 3.
# Entrar a la carpeta del proyecto e instalar dependencias
$ cd myawesomeblog
$ npm install
# Probar nuestro blog creado con hexo
hexo server
# Este comando debería retornar lo siguiente
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

Abrir nuestro navegador en la dirección http://localhost:4000 para ver nuestro nuevo blog No cierres la terminal la vamos a usar mas adelante.

Los siguientes pasos son basados en el excelente artículo de Jeff Ferrari https://www.poweredbyjeff.com/2018/05/14/Deploying-Hexo-website-to-Github-Pages/

6. Configurar hexo para subir a Github

Editar archivo _config.yml

Editar URL url: https://randomtechguy.com #nuestro dominio con https Editar public dir from public to docs public_dir: docs Comentar configuracion de Deploy

#deploy:
#   type:

7. Generar archivos y subir a Github

Abrir la terminal en la que tienes acceso a los comandos git y npm

Generar archivos

# Remover Plugins
$ npm uninstall hexo-generator-cname hexo-deployer-git
# Crear archivo CNAME en carpeta source, usar nano, vim o el editor de su preferencia
$ nano source/CNAME #Sin extensión todo en mayúsculas
# Escribir nuestro dominio en el archivo CNAME
$ echo myawesomeblog.com > source/CNAME
# Generar archivos
hexo generate
# Este comando generará una carpeta docs en nuestro proyecto

Agregar origen remoto de repositorio y hacer el primer commit

Puedes ver el artículo completo en la ayuda de Github https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/

$ git init
$ git add .
$ git commit -m "First commit"
# Agregar origen remoto URL de nuestro repositorio creado en el paso 3
$ git remote add origin remote https://github.com/diegofcornejo/myawesomeblog.git 
# Verificar la nueva URL remota
git remote -v 
# Push cambios
$ git push origin master

8. Configurar Github Pages

Ingresar nuestro repositorio en la web https://github.com/diegofcornejo/myawesomeblog Veremos que ahora nuestro repositorio tiene archivos Click en el Tab "Settings" En la sección "Github Pages" Seleccionar master branch / docs folder y Salvar

9. Finalmente abrimos nuestro navegador y escribimos nuestro dominio (randomtechguy.com) y veremos nuestro blog funcionando.

Those this steps are really easy replacement by import your hexo repo into vercel , but if for any reason you don't want to use vercel, keep reading.

We need:

• A godaddy.com account with a domain
• A cloudflare.com account
• A github.com account
• Git Bash (https://git-scm.com/downloads)
• Node JS (https://nodejs.org)

Process

1. Enter to cloudflare.com and add a site

2. Enter to godaddy.com and config nameservers

Setup Nameservers

Click on "DNS" In the section "Nameservers" click on "Change"

Select custom and add cloudflare's nameservers

Delete any nameserver if exist.

Cloudflare nameservers

• joan.ns.cloudflare.com
• nash.ns.cloudflare.com

Validate Nameservers

According to Cloudflare and Godaddy the process to change nameservers can take up to 24 hours, but normally take a few minutes, you can validate in two ways:

From CLI

Open the terminal and paste next command

$ nslookup -type=ns randomtechguy.com

From web

Enter to https://dnschecker.org/

3. Create a repo in Github

Enter to github.com and create repo Add a name to your new repo and click on "Create repository"

4. Verifies security certs availability(SSL)

At this time your domain is management by cloudflare so we have an SSL certificate. Enter to cloudflare.com Click on your site created at step 1 Click on Crypto and verify certificate status, it should be active like under image: Go to section "Always Use HTTPS" and check "On"

From here we will use the terminal :D

5. Install hexo (https://hexo.io/)

Open the terminal

# Install hexo globally
$ npm install hexo-cli -g
# Start a hexo project
$ hexo init myawesomeblog
# Enter to project folder and install dependencies
$ cd myawesomeblog
$ npm install
# Test our new blog
hexo server
# This command should return
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

Open a browser with url http://localhost:4000. Don't close the terminal, we will use later

The next steps are based on a awesome post by Jeff Ferrari https://www.poweredbyjeff.com/2018/05/14/Deploying-Hexo-website-to-Github-Pages/

6. Setup hexo for upload to Github

Edit _config.yml

Edit URL url: https://randomtechguy.com #your domain with https

Edit public dir from public to docs public_dir: docs

Comment deploy config

#deploy:
#   type:

7. Generate files and upload to Github

Open the terminal

Generate files

# Remove plugins
$ npm uninstall hexo-generator-cname hexo-deployer-git
# Create CNAME file in source folder, use nano, vim or your prefer editor
$ nano source/CNAME #no extension, all uppercase
# The contents of this file should be the domain of your website
$ echo myawesomeblog.com > source/CNAME
# Generate files
hexo generate
# This commando should generate a folder named docs

Add remote origin and make first commit

You can see original post in Github Help https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/

$ git init
$ git add .
$ git commit -m "First commit"
# Add remote origin URL, use URL from your repo created at the step 3
$ git remote add origin remote https://github.com/diegofcornejo/myawesomeblog.git 
# Verifies the new remote URL
git remote -v 
# Push changes
$ git push origin master

8. Setup Github Pages

Open your repo on the web Now should see files in your repo Click on Tab "Settings" On section "Github Pages" Select master branch / docs folder and Save

9. Finally open a browser and write your domain, will see your blog running on your domain.