Net­li­fy CMS

SCREENGUIDE - - Inneres - TEXT: Meinolf Dros­te

Ein Re­dak­ti­ons­sys­tem für sta­ti­sche Web­sites

In den letz­ten Jah­ren schos­sen Sta­tic Web­site En­gi­nes wie Pil­ze aus dem Bo­den. Nun fol­gen ent­spre­chen­de Con­tent-Ma­nage­ment-Sys­te­me für sta­ti­sche Web­sites. Man­che funk­tio­nie­ren le­dig­lich mit ei­ner be­stimmm­ten En­gi­ne, an­de­re – wie et­wa das Net­fli­fy CMS – kön­nen mit je­der die­ser En­gi­nes ar­bei­ten.

Die Fir­ma Net­li­fy ist An­bie­ter ei­ner Hos­ting-, De­ploy­ment- und Build-In­fra­struk­tur für sta­ti­sche Web­sites. Seit ein paar Wo­chen stellt die Fir­ma jetzt auch ein CMS für sta­ti­sche Web­sites zur Ver­fü­gung [net­li­fy­cms.org]. Um mit dem Net­li­fy CMS zu ar­bei­ten, be­nö­ti­gen Sie ei­nen Github und ei­nen Net­li­fy Ac­count. Was wie ein gro­ßer Nach­teil aus­sieht, bie­tet aber auch sehr vie­le Vor­tei­le. Selbst der kos­ten­freie Ac­count bei Net­li­fy er­mög­licht es, un­be­grenzt vie­le Si­tes als Sub­do­mains an­zu­le­gen. Ge­ra­de zum Aus­pro­bie­ren neu­er Tech­no­lo­gi­en, sei es ei­ne neue Sta­tic Si­te En­gi­ne oder eben ein CMS für sta­ti­sche Si­tes, ist der kos­ten­freie Ac­count voll­kom­men aus­rei­chend.

DIE IN­STAL­LA­TI­ON

Um sich mit dem CMS ver­traut zu ma­chen, kön­nen Sie die au­to­ma­ti­sche In­stal­la­ti­on ver­wen­den, die die Fir­ma Net­li­fy an­bie­tet [net­li­fy­cms.org/docs/test-dri­ve]. Ein­fach auf den De­ploy-But­ton drü­cken, „Con­nect to github” wäh­len, Na­me des Re­po­si­to­ries an­ge­ben und „Sa­ve & De­ploy” kli­cken. Kurz dar­auf steht Ih­nen ei­ne Si­te un­ter ei­ner Sub­do­main bei Net­li­fy zur Ver­fü­gung. Den Na- men der Sub­do­main kön­nen Sie in den Set­tings der Si­te än­dern. Die Sta­tic Si­te En­gi­ne, die bei die­ser In­stal­la­ti­on zum Ein­satz kommt, heißt Hu­go und zeich­net sich durch ei­ne ho­he Per­for­mance und kei­ner­lei Ab­hän­gig­kei­ten aus. Der größ­te Un­ter­schied

zwi­schen Hu­go und den an­de­ren En­gi­nes ist die ein­ge­setz­te Pro­gram­mier­spra­che: Go – ei­ne Open-Sour­ce-Pro­gram­mier­spra­che, die von Goog­le ent­wi­ckelt wur­de. Go ist ei­ne Com­pi­ler-Spra­che und da­mit schnel­ler als In­ter­pre­ter-Spra­chen wie Ru­by und No­deJS. Die­ser Um­stand trägt da­zu bei, dass Hu­go die schnells­te En­gi­ne ist. Das Ge­ne­rie­ren ei­ner sta­ti­schen HTML-Da­tei soll nur 1 ms dau­ern. Da­durch kön­nen auch Tau­sen­de von Sei­ten in we­ni­gen Se­kun­den ge­ne­riert wer­den. Hu­go läuft auf MacOS-, Win­dows- und Li­nux-Sys­te­men. Die In­stal­la­ti­on un­ter­schei­det sich auch von den an­de­ren Sys­te­men. Hu­go kann ein­fach run­ter­ge­la­den und ir­gend­wo ent­packt wer­den. Auf MacOS kön­nen Sie Hu­go auch mit „br­ew in­stall hu­go” in­stal­lie­ren – wenn Home­brew auf Ih­rem Mac in­stal­liert ist.

Jetzt ha­ben Sie ei­ne Si­te und ein Re­po­si­to­ry, aber kein CMS. Sie müs­sen Net­li­fy ein paar Rech­te für das neue Github Re­po­si­to­ry ge­ben und sich von Github Api Keys ge­ne­rie­ren las­sen. Da­zu ein­fach github.com/set­tings/de­ve­l­o­pers auf­ru­fen und auf den But­ton „Re­gis­ter new ap­p­li­ca­ti­on” kli­cken. Im fol­gen­den For­mu­lar ge­ben Sie die Sub­do­main als URL zur Home­page ein und tra­gen bei Aut­ho­riza­t­i­on call­back URL „https://api.net­li­fy.com/auth/ do­ne” ein. Da­nach ste­hen Ih­nen ei­ne Cli­ent-ID und ein Cli­en­tSe­cret zur Ver­fü­gung.

Auf Ih­rer Si­te bei Net­li­fy kli­cken Sie auf den Rei­ter „Ac­cess” und dann auf den But­ton „In­stall Pro­vi­der”. Dort Cli­ent-ID und Key ein­ge­ben und spei­chern. Wenn Sie jetzt die URL Ih­rer Sub­do­main plus „/ad­min” auf­ru­fen, ge­lan­gen Sie zum Lo­gin Ih­res CMS. Git­hu­bPass­wort ein­ge­ben, und Sie sind drin.

Der Auf­ruf des CMS über ei­ne URL der Web­site be­deu­tet, dass das Net­li­fy-CMS kein so­ge­nann­tes „De­cou­p­led” oder „He­ad­less” CMS ist. Im Ge­gen­teil, es ist an die Web­site ge­bun­den.

DAS BACKEND

Das Backend ist sehr schlicht und über­sicht­lich (Abb. 1). Es kön­nen le­dig­lich In­hal­te an­ge­legt, edi­tiert und ge­löscht wer­den. Die Na­vi­ga­ti­on be­steht aus vier Icons:

• Ein Icon zum Ein- und Aus­klap­pen ei­ner Si­de­bar • Ein Ho­me Icon, das zum CMS-Dash­board führt • Ein Icon zum Hin­zu­fü­gen von In­halt • Ein Icon mit Bild des an­ge­mel­de­ten Be­nut­zers zum Ab­mel­den

Die­ses spar­ta­ni­sche Backend birgt nicht die Ge­fahr, dass ein Be­nut­zer sich in ei­ner un­über­schau­ba­ren Men­ge von Op­tio­nen und Kon­fi­gu­ra­ti­ons­mög­lich­kei­ten ver­lie­ren kann.

Die Si­de­bar: In der Si­de­bar wer­den zwei Be­rei­che an­ge­zeigt – Pu­blis­hing und Collec­tions. Pu­blis­hing ent­hält ei­nen Link zum Dash­board, und un­ter Collec­tions wer­den Links zu Samm­lun­gen von In­halt­s­ty­pen, zum Bei­spiel Blog- oder News­ein­trä­gen und Pages, an­ge­bo­ten. Pages kön­nen Sei­ten wie Im­pres­sum, FAQ, Da­ten­schutz usw. sein. Ein Klick auf den Link ei­ner Collec­tion ruft ei­ne Sei­te mit ei­ner Auf­lis­tung al­ler Ein­trä­ge die­ses In­halt­s­typs auf. Es han­delt sich so­zu­sa­gen um den Con­tent-Ma­nage­ment-Be­reich.

In­halt hin­zu­fü­gen: Durch ei­nen Klick auf das Plus-Icon wird ein Ein­ga­be­for­mu­lar zur Er­fas­sung ei­ner neu­en Sei­te ei­nes be­stimm­ten In­halt­s­typs ge­la­den. Auf der lin­ken Sei­te sind die Fel­der zu fin­den, auf der rech­ten Sei­te ist ei­ne In­stant-Vor­an­sicht zu se­hen (Abb. 2). Die­se Vor­an­sicht ak­tua­li­siert sich, wäh­rend Sie die lin­ken Fel­der mit In­halt fül­len. Das ist ein sehr an­ge­neh­mes Fea­tu­re, funk­tio­niert aber lei­der nur im Chro­me-Brow­ser.

In­halt be­ar­bei­ten: Ne­ben ein­fa­chen Text­fel­dern, wie zum Bei­spiel dem Ti­tel­feld, kennt das CMS Mark­down-Fel­der. Die­se

“We’re ho­ping that Net­li­fy CMS will do for the JAMstack what Wor­dPress did for dy­na­mic si­tes back in the day.”

Net­li­fy zur Mis­si­on des CMS

ver­fü­gen über ei­nen sehr ein­fa­chen WYSIWYG-Edi­tor, der et­was ver­steckt ist. Er wird über ei­nen Dop­pel­klick im Feld auf­ge­ru­fen. Wur­de vor­her Text aus­ge­wählt, ste­hen Ih­nen But­tons für h1, h2, bold, ita­lic und Links zur Ver­fü­gung. Der But­ton mit den spit­zen Klam­mern (<>) wech­selt zum Mark­down-Co­deE­di­tor, der al­le be­kann­ten Mark­down-Ele­men­te ver­steht.

Durch ei­ne Text­aus­wahl wird auch im Co­de-Mo­dus die klei­ne Tool­bar an­ge­zeigt. Das CMS stellt kein Au­to­sa­ve zur Ver­fü­gung. Um al­so Sei­ten zu spei­chern, müs­sen Sie den Sa­ve But­ton be­nut­zen. Ein­fa­che Zei­len­um­brü­che kön­nen Sie nur im Co­de-Mo­dus ein­fü­gen. Im WYSIWYG -Mo­dus führt ei­ne Be­tä­ti­gung der ENTERTas­te im­mer zum Hin­zu­fü­gen ei­nes Ab­sat­zes. Au­ßer­dem wird dann ein **\+**-Icon an­ge­zeigt, mit des­sen Hil­fe Sie an die­ser Stel­le im Text ein Bild hin­zu­fü­gen kön­nen.

Im Ab­schnitt „Für Ent­wick­ler” auf der nächs­ten Sei­te wird er­läu­tert, wie Sie In­halt­s­ty­pen und Fel­der in der con­fig.yml an­le­gen. Es gibt kein User-In­ter­face da­für.

In­hal­te su­chen: Bei Si­tes mit sehr vie­len Sei­ten kann die Su­che nach ei­nem be­stimm­ten Ein­trag im oben ge­nann­ten Con­ten­tMa­nage­ment-Be­reich sehr müh­sam sein. Aus die­sem Grund gibt es in der Na­vi­ga­ti­ons­leis­te ein Such­feld. Ge­sucht wird in den Ti­teln der Ein­trä­ge. Auf Groß- oder Kleinschreibung müs­sen Sie bei Ein­ga­be ei­nes Be­griffs nicht ach­ten. Teil­strings wer­den auch ge­fun­den. Der String „lify” wür­de al­so ei­nen Ein­trag mit ei­nem Ti­tel fin­den, der das Wort „Net­li­fy” ent­hält – das ist sehr prak­tisch.

Das Dash­board – Edi­to­ri­al Work­flow: Das Dash­board zeigt Ih­nen al­le Ein­trä­ge an, die noch nicht ver­öf­fent­licht wur­den (Abb. 3). Ein Nach­teil ist, dass be­reits ver­öf­fent­lich­te Bei­trä­ge dort nicht an­ge­zeigt wer­den. Ein wei­te­rer Man­gel er­gibt sich aus der Tat­sa­che, dass sich Bei­trä­ge grund­sätz­lich nur im Dash­board lö­schen las­sen. Was wie­der­um be­deu­tet, dass Sie ei­nen be­reits ver­öf­fent­lich­ten Bei­trag nur lö­schen kön­nen, in­dem Sie ihn zu­erst be­ar­bei­ten. Ein be­ar­bei­te­ter Ein­trag taucht näm­lich au­to­ma­tisch un­ter den Drafts im Dash­board auf. Dort kann er dann ge­löscht wer­den. Aber gut, Sei­ten im Web sol­len ja ei­gent­lich auch nicht ge­löscht wer­den.

An­sons­ten ist das Dash­board recht nütz­lich und an­ge­nehm zu be­die­nen. Ein­trä­ge kön­nen in die Sek­tio­nen Drafts, Re­a­dy for Re­view und Re­a­dy for Pu­blish ver­scho­ben wer­den.

Net­li­fy CMS ver­fügt über kein Rol­len- und Rech­te­sys­tem, das Sie viel­leicht aus an­de­ren Sys­te­men ge­wohnt sind. Je­der Be­nut­zer, der an­ge­mel­det ist, darf In­hal­te er­stel­len und ver­öf­fent­li­chen. Be­nut­zer wer­den auch nicht über das CMS hin­zu­ge­fügt, son­dern auf Github. Das ist nur lo­gisch, da die Au­then­ti­fi­zie­rung über Github er­folgt.

IST DAS AL­LES?

Ja, was das Backend des CMS be­trifft, ist das be­reits al­les. Das CMS ist sehr über­sicht­lich und ein­fach zu be­die­nen. Je­der Re­dak­teur oder Con­tent Ma­na­ger wird nach ei­ner hal­ben St­un­de Ei­n­ar­bei­tungs­zeit mit dem Sys­tem ar­bei­ten kön­nen. Es gibt nichts, was die Ar­beit be­hin­dert oder un­nö­tig kom­pli­ziert macht.

Aber: Es braucht ei­nen Ent­wick­ler, der das CMS für die Ar­beit mit ei­ner be­stimm­ten Sta­tic Si­te En­gi­ne kon­fi­gu­riert. Das ist al­ler­dings bei klas­si­schen CMS, wie Wor­dpress, Joom­la! und Dru­pal, in den meis­ten Fäl­len auch nicht an­ders. Ent­wick­ler wer­den auch für das Front­end (Lay­out und De­sign) der Web­site be­nö­tigt. Es sei denn, Sie set­zen ein fer­ti­ges The­me ein. Die meis­ten pro­fes­sio­nel­len The­mes gibt es für die Sta­tic-Si­te-Ge­ne­ra­to­ren Je­kyll und Hu­go. Für Hu­go fin­den Sie die The­mes un­ter the­mes.go­hu­go.io; dort ste­hen an die 200 The­mes kos­ten­los zur Ver­fü­gung (Abb. 4). Im Ge­gen­satz zu vie­len Wor­dpress The­mes sind al­le Hu­go The­mes Open-Sour­ce-Pro­jek­te.

Ein The­me lässt sich mit zwei ein­fa­chen Be­feh­len im Ter­mi­nal in­stal­lie­ren:

Al­le The­mes ste­hen als Github Re­po­si­to­ry zur Ver­fü­gung. Auf der Web­site gibt es zu je­dem The­me ei­ne Do­ku­men­ta­ti­on. Dort ist auch der Pfad zum Re­po­si­to­ry zu fin­den.

FÜR ENT­WICK­LER – DIE KON­FI­GU­RA­TI­ON DES CMS

Am An­fang die­ses Ar­ti­kels wur­de die In­stal­la­ti­on mit­hil­fe ei­nes von Net­li­fy be­reit­ge­stell­ten De­ploy But­tons be­schrie­ben. Möch­ten Sie ei­ne an­de­re Sta­tic Si­te En­gi­ne als Hu­go ein­set­zen, ge­schieht die In­stal­la­ti­on fol­gen­der­ma­ßen: Zu­nächst le­gen Sie ein Ver­zeich­nis mit dem Na­men /ad­min im Sour­ce-Ver­zeich­nis der Sta­tic Si­te En­gi­ne an. In die­ses Ver­zeich­nis pa­cken Sie zwei Da­tei­en: in­dex.html und con­fig.yml. Das Net­li­fy-CMS ist ei­ne Re­act App, und die­se wird mit zwei ein­fa­chen Zei­len in der in­dex.html ein­ge­bun­den:

Schau­en wir uns den Co­de der con­fig.yml im Ein­zel­nen an. Die ers­ten Zei­len der con­fig.yml stel­len die Ver­bin­dung zum Github Re­po­si­to­ry her.

Oh­ne die fol­gen­de Zei­le steht dem End­be­nut­zer kein Dash­board (Edi­to­ri­al Work­flow) zur Ver­fü­gung.

Das Net­li­fy-CMS er­mög­licht na­tür­lich den Upload von Bil­dern über das Backend. Al­ler­dings muss es wis­sen, wo Bil­der ge­spei­chert wer­den sol­len. Die Ver­zeich­nis­struk­tur ei­ner Sta­tic Si­te En­gi­ne ver­fügt meis­tens über solch ein Ver­zeich­nis.

Der Pa­ra­me­ter me­di­a_­fol­der de­fi­niert das Ver­zeich­nis, in dem hoch­ge­la­de­ne Da­tei­en im Github Re­po ge­spei­chert wer­den. Der pu­bli­c_­fol­der de­fi­niert das Ver­zeich­nis, in dem Bil­der für die ge­ne­rier­te Si­te ab­ge­legt wer­den. Die­se Ver­zeich­nis­se kön­nen sich je nach Sta­tic Si­te En­gi­ne un­ter­schei­den.

Collec­tions de­fi­nie­ren die Struk­tur der un­ter­schied­li­chen In­halt­s­ty­pen ei­ner Web­site. Ty­pi­sche Bei­spie­le für Collec­tions sind Ar­ti­kel, Blog-Bei­trä­ge, News oder Pro­duk­te. Die Fel­der, die hier de­fi­niert wer­den, müs­sen für die Si­te En­gi­ne na­tür­lich auch im so­ge­nann­ten Front­mat­ter-Be­reich exis­tie­ren. Hier soll es nur um die Kon­fi­gu­ra­ti­on für das CMS ge­hen.

Auch kom­ple­xe­re ver­schach­tel­te Fel­der mit ei­ner un­be­grenz­ten An­zahl von hin­zu­füg­ba­ren Ein­trä­gen sind mög­lich:

Das Net­li­fy-CMS ver­fügt über fol­gen­de Wid­gets für Fel­der:

• String: ein­fa­ches Text­feld

• Text: mehr­zei­li­ges Text­feld für un­for­ma­tier­ten Text

• Mark­down: mehr­zei­li­ges Text­feld für Mark­down

• Da­te: Da­tums­feld mit Ka­len­der-Pop-up

• Image: Bild-Upload-Wid­get mit Drag & Drop In­ter­face

• Num­ber: Wid­get für Zah­len mit But­tons für + und –

• List: Wid­get für ver­schach­tel­te In­put-Fel­der. Das Wid­get stellt ein Drag & Drop In­ter­face für ei­ne un­be­grenz­te An­zahl von Ein­trä­gen zur Ver­fü­gung. Je­des Wid­get in der Lis­te kann meh­re­re Fel­der be­inhal­ten. Die ein­zel­nen Be­rei­che las­sen sich auf- und zu­klap­pen.

• Hi­d­den: ver­steck­tes Feld. Kann für Kon­fi­gu­ra­tio­nen und Wer­te be­nutzt wer­den, die nicht auf der Web­site an­ge­zeigt wer­den sol­len, zum Bei­spiel für un­ter­schied­li­che Lay­out-Tem­pla­tes.

Ei­ne Va­li­die­rung der Be­nut­zer­ein­ga­ben ist auch mög­lich. Hier ein ein­fa­ches Bei­spiel:

Au­ßer­dem kön­nen Re­act-Ent­wick­ler ei­ge­ne Wid­gets schrei­ben und das CMS an vie­len an­de­ren Stel­len er­wei­tern, zum Bei­spiel mit ei­ge­nen Pre­views und Edi­tor-Plug­ins.

KLAS­SI­SCHE FUNK­TIO­NEN

Und was ist mit den Funk­tio­nen, die klas­si­sche, dy­na­mi­sche Con­tent-Ma­nage­ment-Sys­te­me bie­ten? Al­so et­wa ver­schie­de­ne Be­nut­zer­rol­len, Rech­te für ei­nen Work­flow, For­mu­la­re oder Kom­men­tarund Shop-Funk­tio­nen? „Out of the box” bie­tet die ProVer­si­on von Net­li­fy die Mög­lich­keit, For­mu­la­re in den Tem­pla­tes der Sta­tic Si­te En­gi­ne ein­zu­bin­den. Die­ses Fea­tu­re hat nichts mit dem Net­li­fy-CMS zu tun.

Für vie­le der an­de­ren dy­na­mi­schen Fea­tu­res, die ei­ne Web­site so be­nö­tigt, bie­ten sich ex­ter­ne Di­ens­te und APIs an (das A im JAMstack). Für Kom­men­ta­re eig­net sich et­wa Dis­qus, das sich be­quem mit ein we­nig Em­bed-Co­de der ei­ge­nen Si­te hin­zu­fü­gen lässt. Oder wenn Sie die Kom­men­ta­re nicht auf ei­nem frem­den Ser­ver spei­chern möch­ten: Sta­ticman [sta­ticman.net]. Da­bei ist Sta­ticman nicht nur für Kom­men­ta­re ge­eig­net, son­dern für je­de Art von User Ge­ne­ra­ted Con­tent. Sta­ticman ar­bei­tet wie das Net­li­fy-CMS mit GitHub, um den In­halt von Usern zu spei­chern. Das ist ein gro­ßer Schritt für sta­ti­sche Web­sites. Snip­cart, Sho­pi­fy und an­de­re ex­ter­ne Di­ens­te bie­ten E-Com­mer­ce-Funk­tio­nen, die Sie re­la­tiv ein­fach ein­bin­den kön­nen.

Dar­über hin­aus hat die Fir­ma Net­li­fy ein paar Open-Sour­cePro­jek­te vor­ge­stellt, die ei­ni­ge der ge­wünsch­ten Fea­tu­res zur Ver­fü­gung stel­len.

• GoTell: GoTell ist ei­ne API, um Kom­men­ta­re auf sta­ti­schen Web­sites ein­bin­den zu kön­nen [goo.gl/B6HIZd]

• GoT­rue: GoT­rue kann ge­nutzt wer­den, um auf sta­ti­schen Si­tes User-Re­gis­trie­run­gen zu er­mög­li­chen [goo.gl/yBW­sor]

• GoJo­in: Mi­ni-API als Wrap­per für Stri­pe Sub­scrip­ti­ons, ei­nen Ser­vice für wie­der­keh­ren­de Zah­lun­gen [goo.gl/IBz­rcW]

• GoCom­mer­ce: GoCom­mer­ce ist ei­ne voll­stän­di­ge E-Com­mer­ceLö­sung für JAMstack Si­tes [goo.gl/6OvrDk]

FA­ZIT

Die ers­te Ver­si­on des Net­li­fy CMS ist si­cher­lich noch nicht aus­ge­reift. Es bleibt zu hof­fen, dass sich vie­le Ent­wick­ler an die­sem Open-Sour­ce-Pro­jekt be­tei­li­gen und die ak­tu­el­len Män­gel schnell be­ho­ben wer­den. Aber das Pro­jekt zeigt, wo­hin es in Zu­kunft mit Con­tent-Ma­nage­ment-Sys­te­men ge­hen wird. Si­cher­lich wird es auch wei­ter­hin die gro­ßen, be­kann­ten Sys­te­me wie Wor­dpress, Joom­la! und Dru­pal ge­ben, aber sie wer­den Markt­an­tei­le ver­lie­ren. Ins­be­son­de­re die Tat­sa­che, dass sich das Net­li­fy CMS an na­he­zu je­den Sta­tic Web­site Ge­ne­ra­tor an­bin­den lässt, macht es für un­ter­schied­li­che Pro­jek­te in­ter­es­sant. So könn­ten Sie zum Bei­spiel Ih­re Re­act Apps mit dem Ge­ne­ra­tor „Pheno­mic” und Net­li­fy CMS er­wei­tern.

Meinolf Dros­te ist seit über 20 Jah­ren in der Webent­wick­lung tä­tig und seit 12 Jah­ren In­ha­ber der auf Dru­pal spe­zia­li­sier­ten Web-Agen­tur mdwp* [mdwp]. Seit zwei Jah­ren ge­hö­ren auch die in die­sem Ar­ti­kel be­schrie­be­nen Tools und Tech­ni­ken zum Port­fo­lio.

Abb. 2: Der Edi­tor mit Vor­an­sicht

Abb. 1: Das sehr über­sicht­li­che CMS-Backend

Abb. 3: Edi­to­ri­al Work­flow – das Dash­board

Abb. 4: Screen­shot von Hu­go Bu­si­ness The­mes

Newspapers in German

Newspapers from Germany

© PressReader. All rights reserved.