Jekyll hulp nodig

Freedom publiceert helaas niets over het zelf maken van een website met Jekyll op hun platform.

Ik kan wel wat hulp gebruiken.

Wie weet hoe er in kramdown een tabel met lijenen gemaakt moet worden. Het lijkt er op dat daarvoor een style sheelt nodig is, matr het drukken op de + om directories of files aan te maken doet effectief niets, ja het vraagt om een naam, maar daarna is het weer weg.

image

Ook niet als.je op ‘enter’ klikt? Je kunt ook een bestand aanmaken en er vervolgens heen slepen.

Even fröbelen, maar het werkt echt.

In markdown maak je met de volgende code wijze een tabel in je/op je webpagina

| prijs      |  tekst     |
| -----------|------------|
| 1.23       | appels     |
| 2.23       | peren      |

de volgende tabel: (als resultaat)

prijs tekst
1.23 appels
2.23 peren

Zie voor meer info: Markdown table: How to Create a Great Looking Table - Markdown Land

Na ‘enter’ is de naam weg en gebeurt er niets. Ik kan dus ook geen directories aanmaken.

Maar na file slepen blijken alle files en directories die ik eerder probeerde te maken er wel te zijn.

Heel erg vaag.

Die tabel krijg ik niet zo mooi, want ik moet nog ergens een stijl document blijkbaar toevoegen.

Nu heb ik:

|:--------:+:----:+:---------------------:|
| Diameter | Gain | Opening angle (-3 dB) |
| \[m\] | \[dBi\] | \[degrees\] |
|---------:+-----:+----------------------:|
| 1	  | 20.4 | 14.8 |
| 1.5	| 24.0 |  9.8 |
| 2	  | 26.5 |  7.4 |
| 2.5	| 28.4 |	5.9 |
| 3	  | 30.0 |	4.9 |
| 3.5	| 31.3 |	4.2 |
| 25	| 48.4 |	0.6 |

en dat geeft:
image

Vandaar dat ik files wil kunnen aanmaken om bijvorbeeld style documenten te kunnen maken

Het webscherm van website van Freedom is ook vaag.
Doorgaans wanneer je clickt op het [+] wordt er een entry aangemaakt die je een naam geeft. Daarna is het beste om op het floppy (save) icoon te clicken om het te bewaren.
NB er zijn twee type +-jes die voor folder en voor file.
Wanneer iets niet (b)lijkt te reageren, kan het soms helpen om even op F5 te drukken zodat de pagina ververst wordt zoals de server die heeft. E.e.a. wordt aangestuurd door een nogal grote onderliggende JavaScript die soms de weg kan kwijtraken.

NB2: wanneer je staand op folder, een + doet voor folder, kan het zijn dat de folderregel daarvan zelf niet openklapt. Click dan eerst op de foldernaam om die open te klappen waarin dan een invoerbox staat om de nieuwe folder een naam te geven.

Jekyll en Mark-Down hebben zelf geen uitgebreide tabelopmaak. Hiervoor zijn add-ons nodig die Freedom aka. Soverin niet voor ons geïnstalleerd heeft.

Wanneer je eigen styles wil gebruiken zal je dat overeenkomstig in <html> code moeten vertellen aan je webpagina door met bv opnemen van een inline style-sheet bv:


<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>

of als bestand

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="folder/styles.css">
</head>
<body>

waarbij het bestand folder/styles.css aanwezig is. Die Style refereer je dan weer op de code van je pagina met
<h1 style="color:blue;">A Blue Heading</h1>

NB een truc kan zijn om de default Mark-Down style te overschrijven met een eigen style.

Dit is dus de oplossing! Dank je wel.

Omdat het mij totaal onduidelijk is welke extensies er geimplementeerd zijn helpt google me niet echt.

Hie kan ik bijvoorbeeld het font van mijn pagina veranderen, in een style file het liefst.

En kan ik ook met LaTeX formules toevoegen zoals door sommige google paginas gesuggereerd wordt?
Dat is me ook nog niet gelukt.

Hier ook weinig idee hoe dingen met wat precies is ingericht.
Tot op de dag van vandaag geeft Freedom/Soverin daar geen inhoudelijke informatie over.

Voor formules is dit bv bij mij werkend:

  • $\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$ --> $$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$$
    en produceert dan (via mathjax dat kennelijk in Kramdown is geladen als hier gebruikt Jekyll) de volgende afbeelding:
  • Freedom_website_Jekyll_Formula_Screenshot from 2023-04-08 17-21-31
    Zie voor info: Writing mathematical expressions - GitHub Docs

Mmm dat werkt bij mij niet:

## Antenna

For radio astronomy using a parabolic antenna is very common. Based on the forumulas on page 15.65 of the [ARRL Antenna book, 24th edition, june 2019](https://home.arrl.org/action/Store/Product-Details/productId/114288), the characteristics of such a parabolic antenna, based on an effenciency factor of 0.5, are depending on size:

$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$ --> $$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$$

|:--------:+:----:+:---------------------:|
| Diameter | Gain    | Opening angle <br> (-3 dB) |
| \[m\]    | \[dBi\] | \[&#0176;\]                |
|:--------:+:----:+:---------------------:|
| 1	  | 20.4 | 14.8 |
| 1.5	| 24.0 |  9.8 |
| 2	  | 26.5 |  7.4 |
| 2.5	| 28.4 |	5.9 |
| 3	  | 30.0 |	4.9 |
| 3.5	| 31.3 |	4.2 |
| 25	| 48.4 |	0.6 |

Geeft het volgende resultaat:

Moet er nog ergens in een configuratie wat worden geladen?

Je hebt gelijk, ik zag wat over het hoofd en je tabel ziet er al mooi gelijnd uit.
Voorafgaand moet ergens het volgende worden opgenomen dat ik in mijn header heb staan:

  • <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

Dit script faciliteert de genoemde mathjax syntax.
NB: Als altijd check de bron/reference voor/met gebruik van Node Package Manager modules of die OK zijn.
Zelf twijfel ik - voor spielerij - niet aan https://cdn.jsdelivr.net (zie ook Github). Eventueel copy & neem je de script-inhoud over op in/op je eigen pagina/inhoud.

Mooi,dat werkt, moet het wel bovenaan in de .md file zetten.
Het plaatsen in default.html werkt niet:

<!DOCTYPE html>
<html>
<head>
  <title>{{site.title}}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
</head>
<body>
  {{content}}
</body>
</html>

En er moeten wat meer $ tekens in de string voor de formule:
$$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$$ → $$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$$

Maar als ik het zo in default.html zet werkt het wel:

<!DOCTYPE html>
<html>
<head>
  <title>{{site.title}}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
  {{content}}
</body>
</html>

Waar ik
<link rel="stylesheet" href="styles/styles_pjb.css"/>
kwijt zo moeten zodat hij die style sheet pakt, weekt ik niet:

<style>
  table{
    border-collapse: collapse;
    border-spacing: 1;
    border:3px solid #000000;
}

th{
    border:2px solid #000000;
    border-spacing: 1;
    width: 120px;
}

td{
    border:2px solid #000000;
}
</style>

Die code moet ik nog steeds in de .md file zetten.

Leuk zo wat ter m()eerdere glorie heen en weer te coden.

Heb je in je index.md een referentie staan naar het default html raamwerk ?

  • de eerste regels van een Jekyll-bestand tussen --- en --- configureert Jekyll zaken die gaat kijken met wat geldig is voor die file-pagina:
---
layout: default
---
blablabla markdown, tekst of html

Het “layout: default” statement, instrueert de Jekyll-generator dat file ‘default.html’ in folder _default dient als raamwerk voor de inhoudelijk (bv index.md) webpagina.

Een _default/default.html heeft bv de volgende inhoud:

<!DOCTYPE html>
<html>
<head>
  <title>{{site.title}}</title>
  <meta name="viewport" content="width=device-width, initial-scale=4" />
  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
  <link rel="stylesheet" href="styles/styles_pjb.css"/>
  <link rel="shortcut icon" href="/favicon.ico?" />
</head>
<body>
  pagina opmaak: _layout/default.html met als inhoud:<hr>
  {{content}}
</body>
</html>

Het Liquid{{content}}’ statement vertelt dat de Jekyll-generator om daar de inhoud neer te zetten van de file/pagina die refereert via dus de header-sequentie "- - - layout: default - - - "
Je style file staat dan in folder “styles” waarin bestand “styles_pjb.css” s aangemaakt.

Die inline-style kun evt ook los (inline) in _layout\default.html neerzetten.nemen. Werken met css fles is doorgaans bij onderhou, op termijn netter.
Goed te weten dat er (mee en geavanceerde) andere manieren om CSS te coderen en/of waar die te plaatsen, o.a. met includes (via Jekyll statement { include styles123.html %}) te werken die dan bv de style file, inline als include) oppikt uit jouw Jekyll-folder “_include” .
Belangrijk hier is je blijven te realiseren dat Jekyll een CMS is en je dus - eenmaal wetend hoe - eerst het raamwerk maakt als vormgeving om pas “je” daarna bezig te houden met de inhoud (die verwijst naar een raamwerk) die moet worden getoond.

FYI: Liquid statement zijn waarden tussen dubbele accolades ‘{{ ... }}’ en foldernamen die beginnen met een onderstreep _folder worden door Jekyll gebruikt als bron referentie waarin zaken staan die worden gebruikt om de site te genereren.

Weet je zeker dat het in ‘_default’ moet zijn? Als je de website aanmaakt staat het standaard in ‘_layouts’
En het lijkt ook zo te werken, want de daarin opgenomen

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

werkt.
Ik zie nu een foutje in

<link rel="stylesheet" href="styles/styles_pjb.css"/>

Dat moet zijn

<link rel="stylesheet" href="assets/styles/styles_pjb.css"/>

Mara het rare is dat hij dan als de style voor de tabel alleen in assets/styles/styles_pjb.css staat hij het volgende er van maakt:

image

Terwijl als exact diezelfde style definitie in de .md file staat hij het volgende er van maakt:
image

Die laatste is de bedoeling en mooier.

:+1: Het is idd folder ‘_layouts’ (saturday late night).

NB: die style verandering met inline (enkele) versus file (dubbellijn), komt mogelijk dat het css bestand nog <style> </style> tags/regels bevat. Oea manier, pakt dan de opmaak iets anders uit. Ben verder geen kenner en anderen zullen wellicht meer weten van html en laat staan css. Met F12 kan je wel eenvoudig de in werking zijnde CSS bekijken.

PS. Het mag best " <link rel="stylesheet" href="styles/styles_pjb.css"/>" zijn mits de stylefile t.w. “styles_pjb.css” dan (ook) in (dan nog zelf te maken folder) ‘styles’ plaatst.

Die asset folder is onderdeel van een gebruiksstandaard op internet van mappen hoe men Jekyll sites opmaakt.

Zoals je merkt is het bij details, vooral “zoeken” zonder dat we helaas (echt zeker) weten wat de precieze instellingen allemaal zijn die voor ons zijn bedacht.

Dat was inderdaad het probleem. Hartelijk dank voor de suggestie!

En dat is een gemiste kans voor Freedom!
Ik zou verwachten dat over deze optie het een en ander op de helpdesk pagina’s te vinden zou zijn.

Ook mis ik een goede uitleg over de diverse DNS instellingen. En in dit geval dan met name hoe een en ander ingesteld moet zijn voor de eigen websites.

Heel erg fijn dat ik het met behulp van dit forum en dan met name @PtrO krijg opgelost. Maar Freedom zou van dit soort discussies moeten leren en een en ander op de helpdesk pagina’s moeten zetten. Dat is het stapje extra dat ik van een internet provider als Freedom verwacht.

Eensch dat het een vaag gebied is en oea manier toont ook de leverancier van Freedom (Soverin) weinig focus voor de website functie dat in vergane tijden lijkt te zijn ontstaan als “I-can-do-too” lijkt te zijn ontstaan
Hierbij opgemerkt dat veel “gebruikers” zelf geen behoefte lijken omdat Github/FB/Insta/TikTok ruimte genoeg biedt om tot zelfexpressie te komen.

Zover het helpt om wat meer wegwijs te raken met inhoudelijk “website” kan het informatief zijn om een site op basis van de template te maken en die verder te doorgronden:


een standaard thema voorbeeld als aangeduid op Start Bootstrap wier opzet inhoudelijk wat wordt beschreven in/op How Jekyll Works | ruhoh universal static blog generator
Het genoemde thema zelf is voor beginners tamelijk complex en dient vooral als “startpunt” om het verder uit te werken tot gelikte (responsive) website.

Eeb tip voor @Freedom zou zijn als Freedom ook een simpeler/platter thema zou neerzetten zodat beginners, gelijk een mooi startpunt hebben.
Eenmaal wat bekend met de opzet, is het niet heel moeilijk (soms wel ergelijk bewerkelijk) om de pareltjes van reeds bestaande Jekyll-website thema’s te verbouwen naar wat werkt in de website functie.

En dan het volgende probleem

Nieuwe website aangemaakt, op dezelfde manier als de twee anderen, inclusief DNS instelling.
internet.nl ziet de nieuwe site en geeft 97% score net als op de andere twee.

Maar de nieuwe geeft een ‘404 Not Found’ melding, alsof de website niet gerenderd is.
Alles staat er net zo in als bij de andere twee.

Iemand een idee wat er aan de hand kan zijn?


index.md

---
layout: default
---


# Foto's nieuw

Dit is een test

_config.yml

# General configuration
title: een titel
host: senang.---naam website ---.nl
baseurl: /

_layouts/default.html

<!DOCTYPE html>
<html>
<head>
  <title>{{site.title}}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
  {{content}}
</body>
</html>

tldr; check en (her)bouw stap voor stap je website, desnoods onder een andere naam, voordat je die uitbreidt.

  • Check iig met ping naar welk IPadres de fqdn van je website gaat.
  • Check ook of je niet al een andere website hebt die mogelijk een yaml-host:-statement bevat die ook verwijst naar jouw gewenste CNAME.
    Kortom zorg in al je websites, dat jde “host:” referentie altijd uniek is zodat er geen kruisfout kan ontstaan.
  • Kan idd ook zijn dat je website die (eeuwig) staat te wachten op rendering en mogelijk op toekennen van een certificaat. In een ver(der) verleden duurde het soms weken voordat iets ineens wel actief werd 9ws nadat ergens weer een schop was gegeven).
  • Verder kun je - zo ja - helaas geen zg. sublevel.websites maken op je domein, ook iets dat Soverin/Freedom niet faciliteert (omdat ze ws hebben moeten rotzooien met o.a. certificaat toekenningen, routines voor/met Letsencrypt grenzen heeft).
    – Je kan wel “https://een.jouwdomwin.nl”, “https://twee.jouwdomwin.nl” , "https://een.jouwdomwin.nl/twee " tot leven brengen maar niet een sublevel website van “https://een.twee.jouwdomwin.nl”. Eén van de achtergronden is dat Soverin geen certificaten maakt op domein-niveau maar voor elk FQDN en die dan beperkt tot het eerste ‘level’.
  • Onderzoek ook stap voor stap de (op)bouw je website om te ontdekken op precies welk punt het fout gaat. Ik heb zelf meermalen gemerkt dat in één keer een website maken - met denken te weten dat ik geen fouten maak - soms onverklaarbaar misgaat. Mij helpt het dan om stap voor stap, nieuw uit doos, een website te maken. de vervuilde website, parkeer je dan weg door de host:naam aan te passen zodat die niet (meer) wordt geselecteerd bij aanroep.