Workshop Tu Portfolio en GitHub Pages

alt

Contenidos

Conocé más sobre el proyecto
Git cheat sheet
GitHub Pages
Pelican
Dockerizá tu entorno de desarrollo
- Ejecutar el contenedor y acceder a la consola
- Crea tu propia imagen de docker
Clonar el repositorio
Crea el sitio con Pelican
Configura el tema Flex
- Editar pelicanconf.py
Publicarlo

Conocé más sobre el proyecto

Trata del desarrollo portfolio sencillo creado con Pelican para presentarlo en un Workshop del Campus Party 2021.

Originalmente dado por LinuxChix y editado por Jucha y camilaebf.

En colaboración a la comunidad Argentina de SysArmy & Nerdearla.

Pelican

¿Qué es Pelican?

Git cheat sheet

Machete comandos básicos de git Hecho en carbon.vercel.now

# iniciar git en un proyecto
git init

# clonar desde un directorio local
git clone /ruta/al/directorio

# clonar desde un repositorio público en GitHub
git clone https://github.com/sysarmy/disneyland.git

# agregar un archivo específico a la lista
git add <nombreDeArchivo>

# agregar todos los archivos editados a la lista
git add .

# crear un commit 
git commit -m "Descripción de las modificaciones"

# actualizar el repositorio remoto
git push origin main

# agregar un repositorio remoto si no se clonó desde un repositorio
git remote add origin <servidor>

Guía comandos en git

GitHub Pages

Necesitaremos dos repositorios siguiendo esta guia : link

GitHub Pages docs.

Pero antes ...

Dockerizá tu entorno de desarrollo

Descarga la imagen o generala

Para descargar la imagen ejecuta en tu terminal:

`docker pull camilaebf/pelican-dev-env:latest`

Ejecutar el contenedor y acceder a la consola

`docker run -it --name pelicandevenv --rm --volume ${PWD}:/usr/src/app -p 8080:8000 camilaebf/pelican-dev-env:latest sh`

Este comando automáticamente descarga la imagen camilaebf/pelican-dev-env:latest

Esta imagen incluye las dependencias necesarias para tener andando tu sitio con Pelican dadas en el taller.

o bien creá un Dockerfile para modificar la imagen a gusto:

FROM python:3.9.6-alpine

WORKDIR /usr/src/app

COPY requirements.txt requirements.txt

RUN pip install -r requirements.txt
RUN apk add git

EXPOSE 8000

y un archivo de texto requirements.txt :

pelican
typogrify
markdown
ghp-import

en el mismo directorio que el archivo Dockerfile.

Ventajas: añadir más dependencias que pueda requerir según el contenido.

Contruyelo con:

`docker build -t pelicandevenv .`

No te olvides de agregar '.' al final del comando para refernciar al Dockerfile en el directorio actual.

Para ejecutarlo y acceder a la consola:

`docker run -it --name pelicandevenv --rm --volume ${PWD}:/usr/src/app -p 8080:8000 pelicandevenv:latest sh`

Para salir de la consola del container escribi: exit

TIP: Curso docker por Pelado Nerd

Clonar el repositorio

Desde el directorio raiz del proyecto, donde inicialmente te encuentras, vamos a clonar el repositorio:

`git clone https://github.com/<nombreDeUsuario>/<nombreDeUsuario>.github.io.git`

TIP: puedes verificar en dónde te encuentras con el comando pwd También podes verificar cual es el servidor remoto git remote -v

Ahora verás actualizado el directorio con el nombre del repositorio. Accedemos a él:

`cd <nombreDeUsuario>.github.io`

Rama src

Crear la rama y acceder a ella:

`git checkout -b src`

TIP: puedes verificar el estado de tu rama con git status.

Ahora pasemos a crear el archivo .gitignore:

`touch .gitignore`

Para verificar que se creo el archivo: ls -a

Y en VS Code, o tu IDE de preferencia, abrimos el archivo .gitignore y pegamos lo siguiente:

# Byte-compiled / optimized / DLL files
__pycache__/
*.py[cod]

# C extensions
*.so

# Distribution / packaging
.Python
env/
build/
develop-eggs/
dist/
downloads/
eggs/
.eggs/
lib/
lib64/
parts/
sdist/
var/
*.egg-info/
.installed.cfg
*.egg

# PyInstaller
#  Usually these files are written by a python script from a template
#  before PyInstaller builds the exe, so as to inject date/other infos into it.
*.manifest
*.spec

# Installer logs
pip-log.txt
pip-delete-this-directory.txt

# Unit test / coverage reports
htmlcov/
.tox/
.coverage
.coverage.*
.cache
nosetests.xml
coverage.xml
*,cover
tests/output

# Translations
*.mo
*.pot

# Django stuff:
*.log

# Sphinx documentation
docs/_build/

# PyBuilder
target/

venv

# NPM
node_modules

Esto evitará que se almacene contenido que no es necesario en el repositorio remoto.

Definimos el usuario para git:

/usr/src/app/usuario.github.io # git config --global user.email [email protected]
/usr/src/app/usuario.github.io # git config --global user.name tuUsuarioDeGitHub

Hacemos un commit para guardar los cambios:

`git add .`
`git commit -m "agrega git ignore"`

Crea el sitio con Pelican

Para crear el sitio con Pelican, ejecuta en tu terminal:

`pelican-quickstart`

Hará unas preguntas para su inicialización:

> Where do you want to create your new web site? [.]
> What will be the title of this web site? nombreDeUsuario
> Who will be the author of this web site? nombreDeUsuario
> What will be the default language of this web site? [en] es
> Do you want to specify a URL prefix? e.g., Y
> What is your URL prefix? (see above example; no trailing slash) https://example.com   (Y/n) https://nombreDeUsuario.github.io
> Do you want to enable article pagination? (Y/n) Y
> How many articles per page do you want? [10] Y
> What is your time zone? [Europe/Paris] America/Buenos_Aires
> Do you want to generate a tasks.py/Makefile to automate generation and publishing? (Y/n) *Y*
> Do you want to upload your website using FTP? (y/N) N
> Do you want to upload your website using SSH? (y/N)  N
> Do you want to upload your website using Dropbox? (y/N) N
> Do you want to upload your website using S3? (y/N) N
> Do you want to upload your website using Rackspace Cloud Files? (y/N) N
> Do you want to upload your website using GitHub Pages? (y/N) Y
Done. Your new project is available at /usr/src/app

Contenido por defecto

Generamos el contenido de la página:

`/usr/src/app # pelican content`

Ejecutá el sitio

`/usr/src/app # pelican --listen -b 0.0.0.0`

Accede

En tu navegador ingresá a:

`http://localhost:8080`

alt

Publicar en GitHub Pages

Debemos actualizar el output de nuestro sitio:

$ pelican content -o output -s pelicanconf.py
$ ghp-import output -b gh-pages
$ git push [email protected]:NOMBREDEUSUARIO/NOMBREDEUSUARIO.github.io.git gh-pages:src

GitHub Pages Docs

Configura el tema Flex

Primero agregamos la carpeta themes al .gitignore

themes

Flex es el tema minimalista de Pelican.

Para instalarlo primero vamos a clonarlo:

git clone https://github.com/alexandrevicenzi/Flex.git themes/Flex

Editar `pelicanconf.py`

Inicialmente tenemos:

#!/usr/bin/env python
# -*- coding: utf-8 -*- #

AUTHOR = 'nombreDeUsuario'
SITENAME = 'nombreDeUsuario'
SITEURL = ''

PATH = 'content'

TIMEZONE = 'America/Buenos_Aires'

DEFAULT_LANG = 'es'

# Feed generation is usually not desired when developing
FEED_ALL_ATOM = None
CATEGORY_FEED_ATOM = None
TRANSLATION_FEED_ATOM = None
AUTHOR_FEED_ATOM = None
AUTHOR_FEED_RSS = None

# Blogroll
LINKS = (('Pelican', 'https://getpelican.com/'),
         ('Python.org', 'https://www.python.org/'),
         ('Jinja2', 'https://palletsprojects.com/p/jinja/'),
         ('You can modify those links in your config file', '#'),)

# Social widget
SOCIAL = (('You can add links in your config file', '#'),
          ('Another social link', '#'),)

DEFAULT_PAGINATION = 10

# Uncomment following line if you want document-relative URLs when developing
#RELATIVE_URLS = True

Quedando:

#!/usr/bin/env python
# -*- coding: utf-8 -*- #
from datetime import datetime
AUTHOR = 'CamilaEBF'
SITENAME = 'CamilaEBF'
SITEURL = 'http://localhost:8080'

PATH = 'content'

TIMEZONE = 'America/Buenos_Aires'

DEFAULT_LANG = 'es'
DATE_FORMATS = {
    "es": "%d-%m-%Y",
}

USE_FOLDER_AS_CATEGORY = False
COPYRIGHT_YEAR = datetime.now().year
DEFAULT_PAGINATION = 7

# Theme Settings
SITELOGO = "/images/title.jpg"
FAVICON = "/images/favicon.ico"
THEME = "themes/Flex"
PYGMENTS_STYLE = "native"

# Feed generation is usually not desired when developing
FEED_ALL_ATOM = None
CATEGORY_FEED_ATOM = None
TRANSLATION_FEED_ATOM = None
AUTHOR_FEED_ATOM = None
AUTHOR_FEED_RSS = None


# Main Menu
MAIN_MENU = True
MENUITEMS = (("Categories", "/categories"), ("Tags", "/tags"),)

# Blogroll
LINKS = (("Home", "https://camilaebf.xyz"),)

# Social widget
SOCIAL = (
    ("linkedin", "https://www.linkedin.com/in/camilablancfick/"),
    ("github", "https://github.com/CamilaEBF")
)

# Formatting for URLS
ARTICLE_URL = "{slug}"
PAGE_URL = "pages/{slug}"
CATEGORY_URL = "category/{slug}"
TAG_URL = "tag/{slug}"
AUTHOR_SAVE_AS = False
AUTHORS_SAVE_AS = False

DEFAULT_PAGINATION = 10

# Uncomment following line if you want document-relative URLs when developing
#RELATIVE_URLS = True

Para poder personalizar el tema primero necesitamos:

Ingresar a la carpeta themes/Flex/pygments

cd themes/Flex/pygments

Ejecutamos ./generate.py para generar los estilos que luego usaremos.

Volvemos a la carpeta themes/Flex, allí necesitamos correr npm install, y ahora gulp pygments para finalizar la generación de los archivos de estilos.

Luego, pasamos instalar el tema con pelican:

pelican-themes --install themes/Flex --verbose

Generamos los nuevos archivos del sitio:

pelican content -o output -s pelicanconf.py

Verificamos que se haya generado el sitio:

pelican --listen -b 0.0.0.0

Publicarlo

Los archivos del sitio se encuentran en la rama src y vamos a guardar la compilacion de la pagina en la rama main:

ghp-import output -b main

Pusheamos los cambios en github, si todavía no configuraste GitHub Pages, ingresa a la pagina de configuraciones del pryecto, bajo la pestaña Pages y selecciona la opcion "Source" y luego "Publish site".

Ahí seleccionas la rama en que se encuentran los archivos y publicas la pagina.

Podes chequear el mío acá.

Like it? Star it