Camila E. Blanc Fick

Workshop Tu Portfolio en GitHub Pages

alt

Contenidos

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 tuCorreoDeLaCuentaEnGitHub@algo.com
/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 git@github.com: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

almost 2 years ago

Camila Blanc
Links on this note ↗