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

berni51

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
 
Hier ist die Doku von Jekyll ganz hilfreich:

jekyllrb.com

Quickstart

Jekyll is a static site generator. It takes text written in your favorite markup language and uses layouts to create a static website. You can tweak the site’s look and feel, URLs, the data displayed on the page, and more.
jekyllrb.com jekyllrb.com

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.
 
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.
 
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
 
berni51 schrieb:
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
Zum Vergrößern anklicken....
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?
 
@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)
 
Evtl. ist ja dieses Theme was fuer dich:

github.com

GitHub - cotes2020/jekyll-theme-chirpy: A minimal, responsive, and feature-rich Jekyll theme for technical writing.

A minimal, responsive, and feature-rich Jekyll theme for technical writing. - cotes2020/jekyll-theme-chirpy
github.com github.com

So sieht es live aus:

chirpy.cotes.page

Chirpy

A minimal, responsive and feature-rich Jekyll theme for technical writing.
chirpy.cotes.page chirpy.cotes.page

Oder wenns minimalistischer sein soll:

Hacker-Blog

A Jekyll Blog Theme For Hackers
ashishchaudhary.in

github.com

GitHub - tocttou/hacker-blog: Hacker-Blog is a minimalistic, responsive jekyll theme built for hackers. https://ashishchaudhary.in/hacker-blog

Hacker-Blog is a minimalistic, responsive jekyll theme built for hackers. https://ashishchaudhary.in/hacker-blog - tocttou/hacker-blog
github.com github.com

Farben usw. kann man sich nach eigenen Vorstellungen selbst via css anpassen. Es geht auch mehr ums Prinzip.
 
Zuletzt bearbeitet:
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.
 
berni51 schrieb:
@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.
Zum Vergrößern anklicken....
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...
 
Och, das ist schon alles? Hab ich das richtig verstanden, dass alles auf GH abläuft und nicht auf einem lokalen Repo?
 
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/
 
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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben