Webseite auf github.io: jekyll erzeugt keine Menüs

berni51

Open-Net-FreeBSD user
Eigentlich überhaupt keine BSD-Frage, aber vermutlich sind hier einige github-Kenner:

Für ein Blog-Projekt, dass auf github laufen soll, stell ich gerade die ersten Versuche an. Hab mit jekyll noch nie etwas gemacht, aber einiges mit hugo. Dachte also, ich komm schnell rein. Falsch gedacht!
Das ganze soll ausschliesslich auf github lauffen, es gibt also keine lokales Repository.

Ich erstelle eine _config.yml und eine index.md, damit krieg ich schonmal die Basis-Seite auf den Browser. Jetzt war ich der Meinung, durch das Einstellen einiger xxx.md-Seiten in die Verzeichnisse _pages und _posts quasi automatisch eine Menü-Struktur und die ersten Blog-Einträge zu bekommen. Kommt aber nix, die Basis-Seite bleibt wie sie ist: Kein Menü, kein Blog. Fehlermeldungen gibt es nicht, die Prozesse laufen ordentlich durch.

Schätze, ich hab irgendwas Grundsätzliches komplett übersehen, aber ich komm nicht drauf. Irgendwo denke ich vermutlich zu hugo-mäßig.

Wo könnte mein Fehler liegen? Der Versuchskram liegt auf berni51.github.io.

Berni
 

midnight

OpenBSD & FreeBSD
Hier ist die Doku von Jekyll ganz hilfreich:


Du benoetigst im Prinzip ein entsprechendes Template mit .html-Dateien. In diesen .html-Dateien designst Du dein Layout und mit der Template-Sprache "Liquid" kannst Du dann z.B. ueber deine Posts "loopen".

Beispiel:

Du legst Postings wie z.B. "/_posts/2022-11-20-my_first_post.md" mit folgenden Variablen an:

Code:
---
layout: post
title: My first posting
author: Berni51
date: 2022-11-20 12:00
---
Hier kommt dein Content-Text rein...

Diese Variablen kannst Du dann z.B. in einer "/post.html" anzeigen lassen:

Code:
---
layout: default
---
<!-- POST HTML -->
<article id="post">
  <div class="container">

    {% for post in site.posts limit:8 %}
    <h1>{{ post.title }}</h1>
    <p>by {{ post.author }} - Posted on {{ post.date | date: "%B %d, %Y" }}</p>
    <p>{{ post.content }}</p>
    {% endfor %}

    {% if page.previous.url %}
    <a href="{{ page.previous.url }}">Previous article</a>
    {% endif %}

    {%if page.next.url %}
    <a href="{{ page.next.url }}">Next article</a>
    {% endif %}

  </div>
</article>

Ich habe den Code jetzt auf die Schnelle hingeschrieben und nicht getestet. Aber es soll auch nur darstellen, wie das so ungefaehr funktioniert.
 

midnight

OpenBSD & FreeBSD
PS. Wenn du ein fertiges Template nimmst, welches dir gefällt und deine entsprechenden Blog-Funktionen enthält, musst du auch nichts in den HTML-Dateien mit Liquid machen. Nur wenn du was eigenes machen willst.
 

berni51

Open-Net-FreeBSD user
Danke @midnight, das hab ich verstanden, und so bekomme ich jetzt auch die posts auf die Seite. Was noch immer nicht klappt, ist das Menü, das eine Handvoll statischer Seiten aufrufen kann.
Bisher (mit hugo) hatte ich wohl nur solche themes, die das Menü über die Inhalte des Ordners _page erstellt haben. Das muss ich dann wohl so ähnlich machen wie in deinem Beispiel oben mit den posts.
Doch, ich habs verstanden, muss es jetzt nur noch umsetzen. :o
 

midnight

OpenBSD & FreeBSD
Danke @midnight, das hab ich verstanden, und so bekomme ich jetzt auch die posts auf die Seite. Was noch immer nicht klappt, ist das Menü, das eine Handvoll statischer Seiten aufrufen kann.
Bisher (mit hugo) hatte ich wohl nur solche themes, die das Menü über die Inhalte des Ordners _page erstellt haben. Das muss ich dann wohl so ähnlich machen wie in deinem Beispiel oben mit den posts.
Doch, ich habs verstanden, muss es jetzt nur noch umsetzen. :o
Du meinst statische Links mit, wie z.B. <a href="contact.html">Contact</a> oder eher sowas wie Kategorien, die Du anklicken kannst und dann werden die entsprechenden Blogposts dieser Kategorie angezeigt? Hast Du mal eine Beispielseite oder so?
 

berni51

Open-Net-FreeBSD user
@foxit: Github ist quasi mit Jekyll verheiratet. Theoretisch soll es auch mit Hugo und anderen zu machen sein, aber auf spezielle Klimmzüge hab ich wirklich keine Lust, Github ist mir schon chaotisch genug. Dann lieber ein bisschen in Jekyll reinfuckeln.

@midnight:
Genau das meine ich, also die Navigation durch die Seite. Etwas so wie hier: Beispiel (mit Hugo)
 

midnight

OpenBSD & FreeBSD
Evtl. ist ja dieses Theme was fuer dich:


So sieht es live aus:


Oder wenns minimalistischer sein soll:



Farben usw. kann man sich nach eigenen Vorstellungen selbst via css anpassen. Es geht auch mehr ums Prinzip.
 
Zuletzt bearbeitet:

berni51

Open-Net-FreeBSD user
Danke für die Tipps, @midnight. Mit dem chirpy-theme wäre ich vermutlich bestens bedient, aber es steht nicht in der Liste der von Github unterstützten themes.
Vielleicht wäre es besser, den Blog doch lokal mit GH-Repo zu führen, anstatt alles auf GH zu machen. Heute abend werde ich mal lokal Jekyll installieren und das chirpy-theme einbinden. Mal schauen, ob das so funktioniert.
 

foxit

Well-Known Member
@foxit: Github ist quasi mit Jekyll verheiratet. Theoretisch soll es auch mit Hugo und anderen zu machen sein, aber auf spezielle Klimmzüge hab ich wirklich keine Lust, Github ist mir schon chaotisch genug. Dann lieber ein bisschen in Jekyll reinfuckeln.
Das ist wirklich keine grosse Sache. Die Hugo Verzeichnisse wie: content, layout, themes müssen im root Verzeichnis des Git Repos liegen inkl. der Datei config.toml. In der Config muss die baseURL= "https://berni51.github.io/<REPONAME>" richtig gesetzt sein. Gebaut wird per Github Action:

.github/workflows/build.yml:
Code:
---
name: Build Hugo

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-22.04
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - uses: actions/checkout@v2
        with:
          fetch-depth: 0

      - name: prepare
        uses: peaceiris/actions-hugo@v2
        with:
          version: '0.106.0'

      - name: build
        run: hugo --minify

      - name: deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public
          keep_files: false
Auf Github im Repo: "Settings" -> "Pages" noch die passenden Einstellungen vornehmen. Der gerenderte HTML Output von Hugo ist im Branch: gh-pages gespeichert. Das müsste es eigentlich schon gewesen sein...
 

berni51

Open-Net-FreeBSD user
Och, das ist schon alles? Hab ich das richtig verstanden, dass alles auf GH abläuft und nicht auf einem lokalen Repo?
 

foxit

Well-Known Member
Ja auf GH läuft alles. Wo bzw. wie soll das sonst gehen? GH Action baut dir deinen Hugo Source und speichert diesen auf dem Branch: gh-pages. Dieser Branch wiederum ist dann unter der URL: "https://berni51.github.io/<REPONAME" erreichbar. So haben wir das auch mit dem Wiki hier gemacht [1], nur verwenden wir hier Sphinx und nicht Hugo.

[1] https://wiki.bsdforen.de/
 

berni51

Open-Net-FreeBSD user
Es wäre ja auch denkbar, alles auf einem lokalen Repo zu machen und dann mit GH zu synchronisieren. Aber das will ich ja genau nicht.
 
Oben