Share
Meestal is er een zekere mate van complexiteit om te overwegen wanneer we een nieuw blog willen maken. Wat voor soort database heeft u nodig? Hebt u PHP, Node.js, mySQL nodig? Hoe gaat u de beveiliging van uw databases en admingebieden beheren? Wat zal uw onderhoudsschema voor plug-ins en thema-updates zijn?
Als alles wat je nodig hebt een eenvoudige blog is, kan dit soort complexiteit overdreven zijn. Met CMS.js kun je echter alles opzij zetten en een eenvoudige, volledig klantgerichte blog hebben zonder de bovengenoemde zorgen. En u kunt het binnen enkele minuten instellen.
In deze zelfstudie beginnen we met een korte blik op wat CMS.js is, waarna u precies leert hoe u het snelle installatieproces kunt voltooien. Zodra u een site hebt geïnstalleerd, gaan we door hoe u inhoud kunt toevoegen en implementeren. Laten we beginnen!
CMS.js is een zeer lichte site-generator geschreven in JavaScript. Uit de doos is het slechts 94Kb, bestaande uit slechts zestien bestanden. Ter vergelijking: WordPress is ongeveer 24 MB en meer dan 1.400 bestanden.
Het is ontworpen in "de geest van Jekyll", wat betekent dat je berichten en pagina's kunt schrijven als Markdown-bestanden zonder opmaak en ze automatisch laten verwerken en uitvoeren naar een blog-formaat.
Net als Jekyll kunt u met CMS.js uw site (gratis) laten hosten op GitHub Pages. Met deze optie zal CMS.js de GitHub-API gebruiken om Markdown-bestanden dynamisch op te halen in uw repository en ze als berichten en pagina's te presenteren. Dit staat bekend als "GitHub-modus" en het is de eerste van twee modi die beschikbaar zijn in CMS.js.
Trouwens, als je het geluid van deze modus leuk vindt maar niet bekend bent met Github, maak je geen zorgen. We zullen je laten zien hoe je het moet gebruiken op een manier die je comfortabel zal maken, zelfs als je nog nooit in je leven hebt geraakt. Als alternatief, als u de voorkeur geeft aan uw eigen hosting, kunt u in plaats daarvan kiezen voor "Server Mode".
Deze modus is misschien wel de eenvoudigste, dus laten we eens kijken hoe je die het eerst gebruikt.
Het eerste dat je moet doen is CMS.js. downloaden. Ga naar https://github.com/cdmedia/cms.js en klik op het groene pictogram Kloon of download knop naar de rechterbovenhoek en kies vervolgens ZIP downloaden.
Notitie: met dit proces gaan we ervan uit dat je GitHub helemaal niet wilt gebruiken, buiten het downloaden van CMS.js, daarom pakken we gewoon een ZIP in plaats van de repo te klonen. Maar als je de repo liever met je eigen methodes zou klonen, dan kun je dat zeker doen.
Anders, als je eenmaal de ZIP hebt gedownload, pak het uit en je zou deze inhoud moeten zien:
Ga nu naar de map "js" en open het bestand "config.js" om te bewerken. Vind de mode instellen, (op regel 52 in de huidige release) en wijzigen van 'Github' naar 'Server'.
U ziet ook de instellingen voor uw sitenaam, site-tagline, e-mailadres van de site en de naam van de site-auteur, dus het is een goed moment om deze ook te wijzigen.
Als u al weet welke items u in uw nav-menu wilt weergeven, kunt u de siteNavItems nu ook instellen.
De waarde ingesteld tegen de naam property bepaalt het label dat op uw menu-item wordt weergegeven. De href eigenschap stelt u in staat om de URL op te geven waarnaar u het nav-item wilt koppelen. De nieuw raam property bepaalt of de link wordt geopend in een nieuw venster wanneer erop wordt geklikt.
Als u naar een interne pagina wilt linken, verlaat u beide href en nieuw raam eigenschappen uit en gebruik gewoon de naam eigenschap waarvan de waarde is ingesteld op de titel van de betreffende pagina (meer informatie over hoe paginatitels later werken). Hiermee wordt de permalink van het nav-item automatisch ingesteld met het formaat #pagina/
Als een interne pagina waarnaar u wilt linken spaties in de titel gebruikt, zoals 'Over mij', gebruikt u spaties in de bijbehorende pagina naam eigendom ook, bijv. naam: 'Over mij'
Als u uw site wilt bekijken in de "servermodus", moet u deze naar een server overbrengen die Apache of NGINX gebruikt. Je kunt het rechtstreeks naar je webhosting uploaden via je favoriete FTP-client als je dat wilt, maar het is over het algemeen beter om eerst offline aan dingen te werken en ze te uploaden wanneer je klaar bent. Daarom raad ik aan om een programma te gebruiken om een offline server te maken en er in te werken.
Voor deze zelfstudie gebruiken we MAMP, dat beschikbaar is voor Mac en Windows, maar als je het al gebruikt en de voorkeur geeft aan een andere optie zoals XAMPP die even geschikt is.
Maak in de "htdocs" -map van je MAMP-installatie een nieuwe map met de naam "cms_js" (of wat je maar wilt) om je offline CMS.js-site te huisvesten:
Kopieer al uw CMS.js-bestanden naar deze map:
En dat is het, uw site is in gebruik en klaar voor gebruik!
Als u wilt zien dat deze naar de offline URL voor uw site gaat (zoals verstrekt door MAMP), bijvoorbeeld http: // localhost: 8888 / cms_js
Met de "GitHub-modus" kunt u uw CMS.js-site gratis laten hosten op GitHub-pagina's, en u kunt uw site beheren via een GitHub-repository waarin uw inhoud wordt opgeslagen.
Met GitHub Pages kunt u een onbeperkt aantal gratis sites hebben; één "hoofd" -site per account en dan ook één per project / repository. Houd er echter rekening mee dat gratis GitHub-accounts meestal worden gebruikt voor open source, deelbare projecten, zodat uw repositories (inclusief die met bijbehorende sites) niet privé zijn.
Notitie: Als u nog geen GitHub-account hebt, meldt u zich aan op: https://github.com/join
Om de zaken zo rechtlijnig mogelijk te houden, gebruiken we GitHub Desktop voor dit proces. Als je GitHub Desktop niet hebt, ga je gang en pak je het hier: https://desktop.github.com/
Als je bekend bent met de opdrachtregel voor git en dat zou je graag willen gebruiken, zal het net zo goed werken, maar houd er rekening mee dat de tutorial niet de commando's omvat die in elke fase gebruikt moeten worden.
Ga naar de CMS.js-repository en klik op de Vork pictogram naar rechts bovenaan. Hiermee wordt een nieuwe repository in uw account gemaakt met alle CMS.js-bestanden erin gekopieerd.
Wanneer u GitHub-pagina's gebruikt, zal de URL van uw site afkomstig zijn van de naam van uw repo, d.w.z.. http: //
Ga naar de instellingen tab, vul een nieuwe naam in de Repository naam veld en klik vervolgens op andere naam geven.
Ga terug naar de Code tab en klik op de groene Kloon of download knop, zoals we deden tijdens het instellen van de servermodus. Maar deze keer, kies Open in Desktop in plaats daarvan.
GitHub Desktop wordt geopend en u wordt gevraagd de locatie te selecteren waarnaar u wilt klonen. Dit is de map die u offline gebruikt om uw site te beheren, dus kies een geschikte locatie en klik vervolgens op Clone. Alle CMS.js-bestanden worden naar beneden getrokken naar uw opgegeven locatie, klaar voor gebruik.
Accentsconagua
gh-pagina's TakHet volgende dat je nodig hebt is een gh-pagina's branch in je gekloonde repo, omdat dit de branch is waar de GitHub API inhoud uit zal trekken en daarom is het de enige die je nodig hebt om op je site te werken. De repository van CMS.js heeft echter al een gh-pagina's branch die het gebruikt voor zijn eigen projectpagina, dus we moeten dit eerst verwijderen.
Schakel van de hoofdtak naar de gh-pagina's tak.
Ga naar de Tak menu en selecteer Verwijder 'gh-pages', bevestig vervolgens door te klikken op Verwijder in het dialoogvenster dat verschijnt.
Nu ben je vrij om je eigen te maken gh-pagina's tak. Klik op de kleine vertakkingspictogramknop, typ "gh-pages" in de Naam veld en klik vervolgens op Maak filiaal.
Zodra dit is gebeurd, klikt u op Publiceren klik rechtsboven in de knop om uw nieuw gecreëerde gh-pagina's online te bekijken.
Je hebt nu je eigen gh-pagina's branch, in je eigen kloon van CMS.js, en je bent klaar om te gaan.
Ga in Finder of Windows Verkenner naar de map waarin je bent gekloond.
Tip: klik met de rechtermuisknop op de naam van de repo in de linkerkolom en kies Openen in Finder of Openen in Explorer.
Hierna moet je dezelfde volgende stap volgen als bij het gebruik van "Server Mode", dit is om je configuratie-instellingen te bewerken. Ga naar de map "js" en open "config.js" om te bewerken.
De "modus" is standaard al ingesteld op 'Github', dus u hoeft die instelling niet te bewerken. U moet echter wel bewerken githubUserSettings, (op regel 55 in de huidige release).
Stel de eerste waarde in op uw GitHub-gebruikersnaam en de tweede op de naam van de repo die u zojuist hebt gemaakt (gevorkt in).
Net als bij 'Servermodus' moet u ook uw sitenaam, site-tagline, e-mailadres van site, naam van de site-auteursnaam bewerken.
Als u uw nav-items nu wilt instellen, raadpleegt u het gedeelte 'Nav Items bewerken (optioneel)' eerder in deze zelfstudie.
Ga nu terug naar GitHub Desktop en je zou een knopweergave moeten zien 1 Niet-gecommitteerde wijziging. Dit komt omdat GitHub Desktop je aanpassingen van het bestand "config.js" heeft gedetecteerd. Als u op de desbetreffende knop drukt en naar de code hieronder kijkt, ziet u dat de wijzigingen die u hebt aangebracht groen worden gemarkeerd.
Geef uw wijzigingen snel een kijkje en vul, zodra u tevreden bent, het kleine formulier onderaan links in met een basisbeschrijving van de wijzigingen die u aanbrengt.
Dan klikken Verbinden met gh-pagina's. Wanneer dat is gebeurd, klikt u op de Synchroniseren knop omhoog rechtsboven, (waar de Publiceren knop was eerder), om de wijzigingen die u zojuist hebt vastgelegd te uploaden naar uw repo.
U kunt controleren of de wijzigingen in uw configuratiebestand zijn geüpload door naar de webpagina voor uw repo's te gaan gh-pagina's branch en kijken of uw commit-bericht daar is verschenen:
Nu is uw site klaar om te bekijken! Uw URL heeft de indeling http: //
Ga naar de URL van uw site en bekijk deze!
Nu uw CMS.js-site actief is, kunt u beginnen met het toevoegen van inhoud in de vorm van pagina's en berichten. Beide worden toegevoegd door Markdown (.md) -bestanden te maken in de mappen "pagina's" en "berichten" van uw site.
Het is de moeite waard om hier bewust te zijn dat als u inline HTML wilt gebruiken, voor taken zoals het toevoegen van video aan berichten, u een Markdown-instelling voor uw site moet wijzigen. Aan het einde van het bestand "config.js" vindt u de volgende instellingen:
Verandering ontsmetten van waar naar vals om inline HTML toe te staan. Als u deze instelling niet wijzigt, wordt inline HTML als platte tekst weergegeven in plaats van weergegeven.
Als u een bericht wilt toevoegen, maakt u een Markdown-bestand (.md) in de map "posts" en geeft u dit de naam met een combinatie van datum en titel als volgt: YYYY-MM-DD_post-title.md. Zorg ervoor dat de datum en titel gescheiden zijn door een onderstrepingsteken.
Bijvoorbeeld: "2016-08-06_five-minute-blog-setup.md".
Bovenaan het bestand moet je een aantal hoofdzaken toevoegen die de titel van het bericht specificeren, waarna je hieronder de inhoud van je bericht, bijvoorbeeld.
--- title: Dit is een voorbeeldtitel --- en de inhoud van het bericht begint hier.
Als u wilt migreren vanaf een Jekyll-site, kopieert u al uw berichten vanuit de map '_posts' naar de map 'posts' van uw CMS.js-site. Als uw berichten afbeeldingen bevatten, zorg er dan voor dat u de map met deze afbeeldingen ook overneemt.
Notitie: zorg dat de bestandsextensie van uw berichten ".md" niet ".markdown" is.
Om een pagina toe te voegen, maakt u een Markdown (.md) bestand in de map "pages". U hebt geen datum in de naam van een paginabestand nodig, maar de bestandsnaam moet overeenkomen met de titel die in de frontzaak van de pagina wordt gebruikt. Er moeten ook streepjes in de bestandsnaam voorkomen die overeenkomen met spaties in de paginatitel.
Een paginabestand met de naam "about-me.md" zou bijvoorbeeld deze hoofdmaterie moeten hebben:
--- title: About Me --- En de inhoud van de pagina begint hier.
Om samen te vatten wat we eerder noemden, als je naar een pagina wilt linken vanuit het nav-menu van je site, de naam eigenschap gebruikt in uw configuratiebestanden siteNavItems object moet overeenkomen met de titel van de pagina, inclusief spaties:
// Site met navigatie-itemsNavItems: [name: 'About Me'],
Als u migreert van een Jekyll-site, kunt u al uw kopiëren pagina's vanaf de hoofdmap naar de map 'pagina's' van uw CMS.js-site. Geef iedereen snel een kijkje om te controleren of de titel overeenkomt met de bestandsnaam zoals hierboven beschreven en of de extensie ".md" niet ".markdown" is.
Uw nieuwe inhoud online krijgen in de servermodus is gewoon een kwestie van de nieuw toegevoegde bestanden uploaden naar uw host via uw favoriete FTP-client.
Notitie: het lijkt erop dat het bijwerken van bestaande inhoud in 'Servermodus' op dit moment een beetje lastig kan zijn, met bewerkingen die ofwel niet in de inhoud verschijnen of waardoor inhoud allemaal samen verdwijnt. Als u in de "Server-modus" werkt, is het de beste keuze om uw postbestanden elders voor te bereiden en vervolgens over te zetten naar uw "berichten" -map als u zeker weet dat ze zijn voltooid.
Nieuwe inhoud online krijgen is eigenlijk een beetje makkelijker te beheren in de "GitHub-modus", omdat je de bestanden die je hebt toegevoegd of gewijzigd niet handmatig hoeft bij te houden. In plaats daarvan kun je gewoon naar GitHub Desktop gaan en het zal automatisch eventuele toegevoegde of gewijzigde bestanden detecteren.
Volg vanaf hier hetzelfde proces als toen je je configuratiebestand bewerkte.
Notitie: gloednieuwe inhoud zou meteen moeten verschijnen, maar na het bewerken van bestaande inhoud moet je mogelijk even wachten voordat je je wijzigingen op je live site ziet.
Gezien CMS.js in de smaak valt van Jekyll, zult u merken dat veel Jekyll-thema's goed op een CMS.js-site passen. Als zodanig is het mogelijk om een Jekyll-thema gedeeltelijk te converteren voor gebruik op uw site. Jekyll heeft functies CMS.js niet, dus je zult niet in staat zijn om alle eigenschappen van sommige Jekyll-thema's volledig over te nemen, maar je zult in staat zijn om een goede hoeveelheid van de look and feel over te brengen.
Het voltooien van dit proces vereist enige bekendheid met HTML, CSS en JavaScript, dus als u zich op uw gemak voelt met deze drie talen, kunt u een thema een keer omzetten. Het doorlopen van de exacte stappen van de conversie valt buiten het bestek van deze zelfstudie, maar het basisproces is:
In dit voorbeeld heb ik het 'Astro'-thema voor Jekyll geconverteerd en op deze CMS.js-site toegepast:
En dat is alles wat nodig is om een CMS.js-blog te maken! Als je geen toeters en bellen nodig hebt en gewoon een straight-to-the-point manier wilt om een blog online te krijgen, brengt deze methode je daar snel.
Heel erg bedankt aan Chris Diana, de maker van CMS.js, voor het maken van deze geweldige tool en deze gratis te delen.
Bekijk CMS.js voor jezelf en doe er een draai aan; je zou jezelf een nieuw favoriet blogplatform kunnen vinden!
