Share
Normalerweise muss bei der Erstellung eines neuen Blogs ein gewisses Maß an Komplexität berücksichtigt werden. Welche Art von Datenbank benötigen Sie? Benötigen Sie PHP, Node.js, mySQL? Wie verwalten Sie die Sicherheit Ihrer Datenbanken und Administrationsbereiche? Wie sieht Ihr Wartungsplan für Plugin- und Design-Updates aus??
Wenn Sie nur ein einfaches Blog benötigen, kann diese Komplexität übertrieben sein. Mit CMS.js können Sie jedoch alles beiseite legen und haben einen einfachen, vollständig clientseitigen Blog ohne die oben genannten Bedenken. Und Sie können es in wenigen Minuten einrichten.
In diesem Tutorial beginnen wir mit einem kurzen Überblick über CMS.js. Anschließend lernen Sie genau, wie Sie den schnellen Einrichtungsprozess abschließen können. Sobald Sie eine Site eingerichtet haben, erfahren Sie, wie Sie Inhalte hinzufügen und bereitstellen. Lass uns anfangen!
CMS.js ist ein sehr einfacher Site-Generator, der in JavaScript geschrieben ist. Aus der Box sind es nur 94 KB, bestehend aus nur sechzehn Dateien. Zum Vergleich: Bei WordPress sind es rund 24 MB und über 1.400 Dateien.
Es ist im „Geist von Jekyll“ gestaltet, was im Wesentlichen bedeutet, dass Sie Posts und Seiten als Nur-Text-Markdown-Dateien schreiben und automatisch verarbeiten und in ein Blog-Format ausgeben lassen können.
Wie bei Jekyll können Sie Ihre Website mit CMS.js (kostenlos) auf GitHub-Seiten hosten lassen. Mit dieser Option verwendet CMS.js die API von GitHub, um Markdown-Dateien dynamisch aus Ihrem Repository abzurufen und als Beiträge und Seiten bereitzustellen. Dies wird als "GitHub-Modus" bezeichnet und ist der erste von zwei in CMS.js verfügbaren Modi.
Übrigens, wenn Sie den Klang dieses Modus mögen, aber nicht mit Github vertraut sind, machen Sie sich keine Sorgen. Wir zeigen Ihnen, wie Sie es so verwenden, dass Sie sich auch dann wohl fühlen, wenn Sie in Ihrem Leben noch nie mit Git angefasst haben. Wenn Sie lieber Ihr eigenes Hosting bevorzugen, können Sie alternativ den "Server-Modus" wählen.
Dieser Modus ist wohl der einfachste, also gehen wir erst einmal durch, wie man ihn benutzt.
Als erstes müssen Sie CMS.js herunterladen. Gehen Sie zu https://github.com/cdmedia/cms.js und klicken Sie auf das grüne Klonen oder herunterladen nach rechts oben und wählen Sie dann ZIP herunterladen.
Hinweis: Bei diesem Prozess wollen wir davon ausgehen, dass Sie GitHub nicht verwenden möchten, außer CMS.js herunterzuladen. Aus diesem Grund packen wir einfach eine ZIP-Datei, anstatt das Repo zu klonen. Wenn Sie das Repo jedoch lieber mit Ihren eigenen Methoden klonen möchten, können Sie dies natürlich tun.
Wenn Sie die ZIP-Datei heruntergeladen haben, entpacken Sie sie, und Sie sollten den folgenden Inhalt sehen:
Gehen Sie nun in den Ordner "js" und öffnen Sie die Datei "config.js" zur Bearbeitung. Finden Sie das Modus (Zeile 52 in der aktuellen Version) und ändern Sie es von 'Github' zu 'Server'.
Es werden auch Einstellungen für den Site-Namen, den Site-Tagline, die E-Mail-Adresse und den Namen des Site-Autors angezeigt. Sie sollten diese also auch ändern.
Wenn Sie bereits wissen, welche Elemente in Ihrem Navigationsmenü angezeigt werden sollen, können Sie das bearbeiten siteNavItems jetzt auch einstellen.
Der gegen den Wert eingestellte Wert Name Diese Eigenschaft bestimmt das Etikett, das in Ihrem Menüelement angezeigt wird. Das href Mit dieser Eigenschaft können Sie die URL angeben, zu der das Navigationselement verlinkt werden soll. Das neues Fenster Diese Eigenschaft legt fest, ob der Link in einem neuen Fenster geöffnet wird, wenn Sie darauf klicken.
Wenn Sie auf eine interne Seite verlinken möchten, verlassen Sie beide href und neues Fenster Eigenschaften heraus und benutze einfach die Name Eigenschaft, deren Wert auf die Seite des Fragentitels festgelegt ist (mehr dazu, wie die Seitentitel später funktionieren). Dadurch wird automatisch der Permalink des Navigationselements mit dem Format festgelegt #Seite/
Wenn eine interne Seite, auf die Sie verlinken möchten, Leerzeichen im Titel verwendet, z. B. „Über mich“, verwenden Sie Leerzeichen im entsprechenden Bereich Name auch Eigentum, z.B.. name: 'Über mich'
Um Ihre Site im "Server-Modus" anzuzeigen, müssen Sie sie auf einen Server übertragen, der entweder Apache oder NGINX verwendet. Wenn Sie möchten, können Sie es über Ihren bevorzugten FTP-Client direkt in Ihr Webhosting hochladen. In der Regel ist es jedoch vorzuziehen, zunächst offline zu arbeiten und sie anschließend hochzuladen. Daher empfehle ich, ein Programm zu verwenden, um einen Offline-Server zu erstellen und darin zu arbeiten.
Für dieses Tutorial verwenden wir MAMP, das für Mac und Windows verfügbar ist. Wenn Sie jedoch bereits eine andere Option wie XAMPP verwenden und diese Option bevorzugen, ist diese Option ebenfalls geeignet.
Erstellen Sie im Ordner "htdocs" Ihrer MAMP-Installation einen neuen Ordner mit dem Namen "cms_js" (oder was auch immer Sie bevorzugen), um Ihre Offline-Site CMS.js aufzunehmen:
Kopieren Sie alle Ihre CMS.js-Dateien in diesen Ordner:
Und das ist es auch schon, Ihre Website ist betriebsbereit und bereit für den Start!
Um es anzuzeigen, gehen Sie zur Offline-URL Ihrer Website (wie von MAMP bereitgestellt), z. http: // localhost: 8888 / cms_js
Mit "GitHub-Modus" können Sie Ihre CMS.js-Site kostenlos auf GitHub-Pages hosten lassen und Ihre Site über ein GitHub-Repository verwalten, in dem Ihre Inhalte gespeichert werden.
Mit GitHub Pages können Sie eine unbegrenzte Anzahl kostenloser Websites einrichten. Eine "Hauptstelle" pro Konto und dann auch eine pro Projekt / Repository. Beachten Sie jedoch, dass kostenlose GitHub-Konten in der Regel für Open Source-Projekte verwendet werden, die gemeinsam genutzt werden können, sodass Ihre Repositorys (einschließlich der mit verknüpften Sites) nicht privat sind.
Hinweis: Wenn Sie noch kein GitHub-Konto haben, melden Sie sich unter: https://github.com/join an
Um die Dinge so einfach wie möglich zu halten, verwenden wir GitHub Desktop für diesen Prozess. Wenn Sie GitHub Desktop nicht haben, holen Sie es hier ab: https://desktop.github.com/
Wenn Sie mit der Befehlszeile für git vertraut sind und dies gerne verwenden möchten, funktioniert es genauso gut. Beachten Sie jedoch, dass das Tutorial nicht die Befehle behandelt, die in jeder Phase verwendet werden sollen.
Gehen Sie zum Repository CMS.js und klicken Sie auf die Schaltfläche Gabel Symbol nach rechts oben. Dadurch wird ein neues Repository in Ihrem Konto erstellt, in das alle CMS.js-Dateien kopiert werden.
Wenn Sie GitHub Pages verwenden, bezieht sich die URL Ihrer Site auf den Namen Ihres Repos, d. H. http: //
Geh in die die Einstellungen Geben Sie im Register einen neuen Namen ein Repository-Name Feld dann klicken Umbenennen.
Gehe zurück zum Code Tab und klicken Sie auf das Grün Klonen oder herunterladen Taste, wie wir es im Server-Modus gemacht haben. Aber diesmal wähle In Desktop öffnen stattdessen.
GitHub Desktop wird geöffnet und Sie werden aufgefordert, den Ort auszuwählen, an dem Sie klonen möchten. Dies ist der Ordner, in dem Sie offline arbeiten, um Ihre Site zu verwalten. Wählen Sie einen geeigneten Speicherort aus und klicken Sie auf Klon. Alle CMS.js-Dateien werden an Ihrem angegebenen Speicherort abgerufen und können sofort verwendet werden.
Accentsconagua
gh-pages AstDas nächste, was Sie brauchen, ist ein gh-pages Verzweigen Sie sich in Ihrem geklonten Repo, da dies der Zweig ist, aus dem die GitHub-API Inhalt bezieht, und daher ist es der, in dem Sie auf Ihrer Site arbeiten müssen. Das CMS.js-Repo verfügt jedoch bereits über ein gh-pages Verzweigung, die es für seine eigene Projektseite verwendet, also müssen wir diese zuerst löschen.
Wechseln Sie vom Master-Zweig in den gh-pages Ast.
Gehe zum Ast Menü und wählen Sie "Gh-pages" löschen, dann bestätigen Sie mit Löschen in der sich öffnenden Dialogbox.
Jetzt können Sie Ihre eigenen erstellen gh-pages Ast. Klicken Sie auf die kleine Schaltfläche für das Zweig-Symbol und geben Sie "gh-pages" in die Name Feld dann klicken Niederlassung erstellen.
Klicken Sie anschließend auf die Schaltfläche Veröffentlichen Klicken Sie oben rechts auf die Schaltfläche, um Ihren neu erstellten gh-pages-Zweig online zu stellen.
Du hast jetzt deine eigene gh-pages Branch, in Ihrem eigenen Klon von CMS.js, und schon kann es losgehen.
Wechseln Sie im Finder oder Windows Explorer zu dem Ordner, in den Sie geklont haben.
Spitze: Klicken Sie mit der rechten Maustaste auf den Repo-Namen in der linken Spalte und wählen Sie Im Finder öffnen oder Im Explorer öffnen.
Von hier aus müssen Sie den nächsten Schritt ausführen, den Sie auch im „Server-Modus“ verwenden würden, dh die Konfigurationseinstellungen zu bearbeiten. Gehen Sie in den Ordner "js" und öffnen Sie "config.js" zur Bearbeitung.
Der „Modus“ ist bereits standardmäßig auf „Github“ eingestellt, sodass Sie diese Einstellung nicht bearbeiten müssen. Sie müssen jedoch bearbeiten githubUserSettings, (in Zeile 55 der aktuellen Version).
Setzen Sie den ersten Wert auf Ihren GitHub-Benutzernamen und den zweiten auf den Namen des Repos, den Sie gerade erstellt haben..
Wie im „Servermodus“ sollten Sie auch den Namen Ihrer Site, die Tag-Zeile, die E-Mail-Adresse der Site und die Einstellungen des Site-Autornamens bearbeiten.
Wenn Sie Ihre Navigationselemente jetzt festlegen möchten, lesen Sie den Abschnitt "Navigationselemente bearbeiten (optional)" weiter oben in diesem Lernprogramm.
Gehen Sie jetzt zurück zu GitHub Desktop und Sie sollten eine Schaltfläche sehen 1 Nicht festgeschriebene Änderung. Dies liegt daran, dass GitHub Desktop Ihre Änderungen an der Datei „config.js“ erkannt hat. Wenn Sie die betreffende Schaltfläche drücken und den untenstehenden Code sehen, werden die vorgenommenen Änderungen grün hervorgehoben.
Sehen Sie sich Ihre Änderungen kurz an und füllen Sie das kleine Formular unten links mit einer grundlegenden Beschreibung der vorgenommenen Änderungen aus, sobald Sie zufrieden sind.
Dann klick Commit für gh-pages. Wenn das erledigt ist, klicken Sie auf Sync Taste oben rechts (wo der Veröffentlichen Schaltfläche war vor), um die Änderungen zu übernehmen, die Sie gerade in Ihr Repo hochgeladen haben.
Sie können überprüfen, ob die Änderungen an Ihrer Konfigurationsdatei erfolgreich hochgeladen wurden, indem Sie zur Webseite für Ihre Repos gehen gh-pages verzweigen und schauen, ob Ihre Commit-Nachricht dort erschienen ist:
Jetzt ist Ihre Website für die Anzeige bereit! Ihre URL nimmt das Format an http: //
Gehen Sie zur URL Ihrer Website und checken Sie sie aus!
Nun, da Ihre CMS.js-Site läuft, können Sie Inhalte in Form von Seiten und Beiträgen hinzufügen. Beide werden hinzugefügt, indem Sie Markdown-Dateien (.md) innerhalb der Ordner "pages" und "posts" Ihrer Site erstellen.
Beachten Sie hierbei, dass Sie, wenn Sie Inline-HTML verwenden möchten, für das Hinzufügen von Videos zu Beiträgen eine Markdown-Einstellung für Ihre Website ändern müssen. Am Ende der Datei "config.js" finden Sie diese Einstellungen:
Veränderung sanieren von wahr zu falsch für Inline-HTML. Wenn Sie diese Einstellung nicht ändern, wird Inline-HTML nicht als gerendert, sondern als einfacher Text angezeigt.
Um einen Beitrag hinzuzufügen, erstellen Sie eine Markdown-Datei (.md) im Ordner "posts" und benennen Sie sie mit einem Format, das Datum und Titel wie folgt kombiniert: YYYY-MM-DD_post-title.md. Stellen Sie sicher, dass Datum und Titel durch einen Unterstrich getrennt sind.
Zum Beispiel "2016-08-06_five-minute-blog-setup.md".
Oben in der Datei müssen Sie ein paar Titel hinzufügen, in denen der Beitragstitel angegeben ist. Geben Sie anschließend den Inhalt Ihres Beitrags ein, z.
--- title: Dies ist ein Beispieltitel --- Und der Beitrag beginnt hier.
Wenn Sie von einer Jekyll-Site migrieren möchten, kopieren Sie alle Ihre Posts aus dem Ordner "_posts" in den Ordner "posts" Ihrer CMS.js-Site. Wenn Ihre Beiträge Bilder enthalten, stellen Sie sicher, dass Sie auch den Ordner mitnehmen, der sie enthält.
Hinweis: Stellen Sie sicher, dass die Dateierweiterung Ihrer Beiträge ".md" und nicht ".markdown" ist..
Um eine Seite hinzuzufügen, erstellen Sie eine Markdown-Datei (.md) im Ordner "pages". Sie benötigen kein Datum im Namen einer Seitendatei, der Dateiname sollte jedoch mit dem Titel in der Vorderseite der Seite übereinstimmen. Der Dateiname sollte auch Bindestriche enthalten, die den Leerzeichen im Seitentitel entsprechen.
Zum Beispiel sollte eine Seitendatei mit dem Namen "about-me.md" folgende Bedeutung haben:
--- title: About Me --- Und der Seiteninhalt beginnt hier.
Um das, was wir zuvor erwähnt haben, noch einmal zusammenzufassen, wenn Sie im Navigationsmenü Ihrer Website auf eine Seite verlinken möchten Name Eigenschaft, die in Ihrer Konfigurationsdatei verwendet wird siteNavItems Das Objekt sollte mit dem Titel der Seite übereinstimmen und Leerzeichen enthalten:
// Navigationselemente siteNavItems: [Name: 'Über mich'],
Wenn Sie von einer Jekyll-Site migrieren, können Sie alle Ihre Website kopieren Seiten aus dem Stammordner in den Ordner "pages" Ihrer CMS.js-Site. Sehen Sie sich die einzelnen Dateien kurz an, um sicherzustellen, dass der Titel wie oben beschrieben mit dem Dateinamen übereinstimmt und dass die Dateierweiterung ".md" und nicht ".markdown" lautet..
Um Ihre neuen Inhalte im Servermodus online zu stellen, müssen Sie nur die neu hinzugefügten Dateien über Ihren bevorzugten FTP-Client auf Ihren Host hochladen.
Hinweis: Das Aktualisieren vorhandener Inhalte im "Server-Modus" scheint momentan etwas schwierig zu sein. Änderungen werden entweder nicht im Inhalt angezeigt oder der Inhalt wird nicht mehr alle angezeigt. Wenn Sie im "Server-Modus" arbeiten, ist es derzeit am besten, Ihre Post-Dateien an anderer Stelle vorzubereiten. Übertragen Sie sie dann in den Ordner "Posts", wenn Sie sicher sind, dass sie fertiggestellt sind.
Die Online-Bereitstellung neuer Inhalte ist im GitHub-Modus etwas einfacher zu verwalten, da Sie die hinzugefügten oder geänderten Dateien nicht manuell nachverfolgen müssen. Stattdessen können Sie einfach zu GitHub Desktop wechseln und automatisch hinzugefügte oder geänderte Dateien erkennen.
Folgen Sie dort dem Vorgang, den Sie beim Bearbeiten Ihrer Konfigurationsdatei durchgeführt haben.
Hinweis: brandneue Inhalte sollten sofort angezeigt werden, aber nachdem Sie vorhandene Inhalte bearbeitet haben, müssen Sie möglicherweise etwas warten, bevor Sie Ihre Änderungen auf Ihrer Live-Site sehen.
Wenn sich CMS.js im Geschmack von Jekyll befindet, werden Sie feststellen, dass viele Jekyll-Designs gut zu einer CMS.js-Site passen. Daher ist es möglich, ein Jekyll-Thema für Ihre Website teilweise zu konvertieren. Jekyll verfügt nicht über Funktionen, die CMS.js nicht hat, daher können Sie nicht alle Funktionen einiger Jekyll-Designs vollständig übernehmen, aber Sie können einen guten Eindruck von Look und Feel haben.
Wenn Sie diesen Vorgang abschließen, müssen Sie sich mit HTML, CSS und JavaScript auskennen. Wenn Sie sich also mit diesen drei Sprachen wohl fühlen, können Sie ein Thema umwandeln. Die genauen Schritte der Konvertierung zu durchlaufen, würde den Rahmen dieses Tutorials sprengen. Der grundlegende Prozess lautet jedoch:
In diesem Beispiel habe ich das Astro-Thema für Jekyll konvertiert und auf diese CMS.js-Site angewendet:
Und das ist alles, um einen CMS.js-Blog einzurichten! Wenn Sie kein Schnickschnack brauchen und nur einen direkten Weg wollen, um einen Blog online zu stellen, bringt Sie diese Methode schnell ans Ziel.
Vielen Dank an Chris Diana, den Erfinder von CMS.js, der dieses großartige Tool erstellt und es frei zur Verfügung gestellt hat.
Überzeugen Sie sich selbst von CMS.js und machen Sie eine Runde mit. Möglicherweise finden Sie sich selbst als neue Lieblings-Blogging-Plattform!
