Saltar al contenido

Cree un blog de Swift con Publish alojado en páginas de GitHub

Cree un blog de Swift con Publish alojado en páginas de GitHub

tecnologiapc Alexander Senior iOS Developer está probando nuevas herramientas para crear su propio blog.

Ya tengo un blog, está en WordPress y estoy cansado de todas las historias sobre actualizaciones de versiones, complementos, piratería y más. Esto literalmente mata el deseo de seguir desarrollándolo. Mi objetivo es compartir mis pensamientos y hallazgos con el mundo, pero aún así tener un control total sobre mi sitio. Más recientemente, GitHub Pages ha proporcionado la capacidad de archivar sitios simples con ellos. Sin base de datos y PHP, sitio estático como los buenos viejos. Para un blog, perfecto. Y desde entonces, el proceso de distribución pasará por GitHub, habrá un historial transparente de todos los cambios y un control total sobre lo que realmente hay en el sitio: los troyanos y otros espíritus malignos no pasarán.

Pero sugieren usar Jekyll, un generador de sitios estáticos escrito en Ruby. Todavía quiero perfeccionar mis habilidades en el idioma que usas a diario, así que como alternativa tomé un nuevo generador estático escrito en Swift por John Sundell.

Tenemos 3 cosas que hacer:

  1. Crea un blog en las páginas de GitHub.
  2. Comprenda cómo trabajar con Publish.
  3. Sube tu nuevo blog a las páginas de GitHub.

Pasemos al paso 1.

1. Crea un blog en páginas de GitHub

La instrucción oficial está disponible en https://pages.github.com.

La condición principal es que el inicio de sesión del blog debe coincidir con el inicio de sesión de GitHub (en mi caso, es brillante). Nuestras acciones:

  • iniciar sesión en GitHub,
  • vaya a https://github.com/new,
  • ingrese login.github.io como el nombre del repositorio, en mi caso fue sparklone.github.io,
  • asegúrese de que sea público,
  • haga clic en Crear repositorio,
  • todo, nuestro blog ya está disponible en https://login.github.io.

Pero hasta ahora no hay archivos en el sitio. Pasemos al segundo punto.

2. Averigüemos cómo trabajar con Pubblica.

Una vez más: Publish es un generador de sitios estático escrito en Swift que te permite construir cualquier lógica al generar un sitio: etiquetas, mapas del sitio, rss, enlaces específicos … – cualquier cosa para la que tengamos suficiente imaginación. Una de mis ideas para el futuro es intentar escribir artículos en dos idiomas, para que la plantilla personalizada pueda entenderlo y poner un interruptor en el artículo, por ejemplo. No sé si las manos llegarán alguna vez a este punto, pero como idea, interesante.

Preferí instalar directamente a través de git, creé una carpeta ~ / Developer / tools y ejecuté allí

git clone https://github.com/JohnSundell/Publish.git
cd Publish
make

A continuación, creé una carpeta donde pretendo almacenar mi sitio (más precisamente, las fuentes de su generador), en mi caso es ~ / Developer / my / blog. Dentro de esta carpeta, ejecute el comando

publish new

Esto creará un nuevo sitio y una lista de opciones para el comando se puede encontrar simplemente ejecutando Publish en la consola.

carrera pública compilará todas las fuentes e iniciará el servidor web en Python (si interrumpe con Ctrl + C, el servidor web no morirá y tendrá que hurgar en los procesos para matar a Python).

La primera compilación lleva algo de tiempo (se agregan los repositorios necesarios, se compila todo), en lanzamientos posteriores carrera pública todo pasa mucho más rápido.

Abra http: // localhost: 8000 en su navegador y vea qué tipo de sitio tenemos:

Blog de tecnologiapc sobre Swift

No mucho, pero realmente no hicimos nada para esperar nada más.

Dejaré la configuración de estilo y otros puntos para más adelante. Hoy veo las siguientes actividades frente a mí:

  1. realizar la configuración inicial del generador para nuestro sitio,
  2. cambiar las rutas por las que se encuentran los registros y personalizar el menú,
  3. agregue resaltado para los archivos de origen y cree su tema.

1. Configuración inicial del generador para nuestro sitio

Veamos qué ha generado Publish para nosotros. Dentro de la carpeta habrá un archivo Package.swift, ábralo con Xcode (puede escribir open Package.swift en la consola), y esto inicia el proceso de extracción de todas las bibliotecas necesarias. La captura de pantalla muestra cuál debería ser el resultado.

Blog de tecnologiapc en la pantalla de presentación de publicación de Swift

La publicación de prueba está en Content / posts / first-post.md. Comprobamos que podemos cambiar algo y esto se verá reflejado en el sitio: corregiremos el texto en first-post.md (puedes cambiar la fecha, las etiquetas, las descripciones y el contenido en sí).

En Xcode, seleccione Mac como el destino para el que desea iniciar y ejecutar el proyecto.

Blog de tecnologiapc en Swift blog-cómo-ejecutar

Después de eso, actualizamos la página web http: // localhost: 8000.

2. Modificamos las rutas por las que se encuentran los registros y personalizamos el menú

¿Por qué es importante hacerlo ahora? Si decide cambiar la ruta después de haber compilado algunas de las publicaciones, los enlaces entrantes a estas páginas ya no serán válidos. este no es su servidor / VPS, será bastante problemático redirigir desde enlaces antiguos a nuevas ubicaciones. No es imposible (aquí, por ejemplo, un complemento para Jekyll), pero ¿por qué darte un dolor de cabeza en el futuro si puedes evitarlo?

De forma predeterminada, todas las publicaciones se encuentran en la carpeta de publicaciones. Teniendo en cuenta que desea acceder a categorías en el futuro y publicar es un nombre común, es mejor cambiar el nombre de la carpeta a artículos. Tampoco está de más agregar una página de información. Pero nuestro generador aún no sabe nada al respecto.

En main.swift, cambie a

struct Blog: Website {
    enum SectionID: String, WebsiteSectionID {
        case articles
        case about
    }
}

Agreguemos un archivo about.md en la carpeta Satisfacer e ingrese alguna información sobre usted.

Por cierto, estoy escribiendo este artículo en XCode, editando el archivo md y lanzando periódicamente el proyecto para ver cómo se ve en el navegador.

Durante mucho tiempo he dudado si preocuparme por la fecha de los archivos * .md, por ejemplo. no lo llame my-article.md, sino, por ejemplo, 2020-07-10-my-article.md. Sin embargo, he decidido abandonar esta idea: t. los propios archivos md tienen metadatos (campo de fecha), esto, si lo desea, le permitirá agregar automáticamente la fecha en el futuro. Y no es necesario controlar la exactitud de la fecha en el nombre del archivo; además, le evitará discrepancias si el nombre del archivo tiene una fecha y los metadatos dentro, otra. La desventaja de tal solución, veo, es que hipotéticamente puede haber colisiones en los nombres de archivo md en el futuro, pero aún es poco probable, además, lo averiguaremos al crear una publicación y no al guardar.

3. Agregue resaltado para los archivos de origen

El autor del editor también escribió la biblioteca Splash, que le permite resaltar los códigos fuente. Está registrado como un paquete en Swift Package Manager.

Abra el archivo Package.swift y agregue el soporte, de hecho, necesita agregar 2 líneas. Esto es lo que tengo:

let package = Package(
    name: "Blog",
    products: [
        .executable(
            name: "Blog",
            targets: ["Blog"]
        )
    ],
    dependencies: [
        .package(name: "Publish", url: "https://github.com/johnsundell/publish.git", from: "0.6.0"),
        .package(name: "SplashPublishPlugin", url: "https://github.com/johnsundell/splashpublishplugin", from: "0.1.0")
    ],
    targets: [
        .target(
            name: "Blog",
            dependencies: [
                "Publish",
                "SplashPublishPlugin"
            ]
        )
    ]
)

Y para que el resaltado comience a aplicarse durante la compilación, debe conectar el complemento en main.swift:

try Blog().publish(withTheme: .foundation)

Me cambié a

try Blog().publish(
    withTheme: .foundation,
    plugins: [.splash(withClassPrefix: "")]
)

No olvide agregar un main.swift import plug-in import SplashPublishPlugin.

Si generamos el sitio ahora veremos que se resaltarán los bloques con el código, pero no resaltarán: esto se debe a que necesitamos agregar CSS, usaremos el que está usando el autor del complemento por defecto.

Pero aquí está el problema: ¿dónde agregar este CSS? Si profundiza en el código fuente, verá que todo esto se resuelve a nivel de tema. Nuestro tema es estándar: Fundacióny está en la propia caja Publicar a lo largo de la ruta Sources / Publish / API / Theme + Foundation.swift.

Dentro de su proyecto (Blog) en la carpeta donde main.swift, Creé un archivo similar Tema + Blog.swift… Aún dentro de la carpeta de Recursos, creé una carpeta de Blog e inserté el archivo styles.css. Dentro del archivo, inserto el contenido CSS del tema Foundation y el CSS de Splash. Sí, sería mejor separar, o incluso poner los temas en un paquete separado, pero no compliquemos las cosas antes de tiempo.

En total, tuve que cambiar el tema en el archivo así:

import Plot
import Publish

public extension Theme {
    static var blog: Self {
        Theme(
            htmlFactory: BlogHTMLFactory(),
            resourcePaths: ["resources/blog/styles.css"]
        )
    }
}

Si hubiéramos agregado otro CSS, no solo tendríamos que agregarlo a resourcePaths, sino también agregarlo a cada encabezado de página, lo que absolutamente no quería hacer en ese momento.

.head(for: item, on: context.site, stylesheetPaths: ["/styles.css", "/splash.css"])

Como resultado, la estructura de mi archivo de proyecto ahora se ve así:

tecnologiapc Blog sobre la estructura final de Swift

3. Sube tu nuevo blog a las páginas de GitHub.

Luego, usamos la herramienta de publicación incorporada para subir nuestro blog. EN main.swift insertar

.deploy(using: .gitHub("login/login.github.io", useSSH: false))

Me las arreglé

try Blog().publish(
    withTheme: .blog,
    deployedUsing: .gitHub("sparklone/sparklone.github.io", useSSH: false),
    plugins: [.splash(withClassPrefix: "")]
)

Comprobemos por última vez que todo funciona. El toque final: me parece que no tiene sentido almacenar en git nuestro repositorio con plantillas, cómo construir un sitio, el contenido de la carpeta de salida, para esto tendremos un repositorio separado, lo mismo login.github.io. Si está de acuerdo, excluya esta carpeta de .gitignore agregando la línea / Producción al final. Si todo está bien, ejecútelo en la consola (desde la carpeta donde ejecutamos el nuevo público)

git add .
git commit -m "post title or some description"
git push origin
publish deploy

En un minuto, las páginas de GitHub detectarán los cambios y todo estará en línea.

¡Felicidades! 🙂

Si encuentra un error, seleccione un fragmento de texto y presione Ctrl + Entrar