Share
När vi bestämmer oss för att skapa en ny blogg, är det en viss grad av komplexitet att överväga. Vilken typ av databas kommer du att behöva? Behöver du PHP, Node.js, mySQL? Hur hanterar du säkerheten i dina databaser och adminområden? Vad kommer ditt underhållsschema för plugin och tema uppdateringar att vara?
Om allt du behöver är en enkel blogg kan den här typen av komplexitet bli överkill. Med CMS.js kan du dock lägga till allt åt sidan och ha en enkel, helt klientblads blogg utan någon av de ovan nämnda problemen. Och du kan ställa in det på några minuter.
I denna handledning börjar vi med en snabb titt på vad CMS.js är, så lär du dig hur du slutför den snabba installationsprocessen. När du har en webbplats igång går vi igenom hur du lägger till och distribuerar innehåll. Låt oss börja!
CMS.js är en väldigt lätt webbplats generator genererad i JavaScript. Utanför lådan är det bara 94Kb, bestående av bara sexton filer. I jämförelse är WordPress runt 24 MB och över 1400 filer.
Den är utformad i "Jekyll-andan", vilket i grunden betyder att du kan skriva inlägg och sidor som markerade textmarkdown-filer och få dem att automatiskt bearbetas och matas ut i ett bloggformat.
Liksom Jekyll, med CMS.js kan du få din webbplats värd (gratis) på GitHub Pages. Med det här alternativet använder CMS.js GitHubs API för att dynamiskt hämta Markdown-filer från ditt förråd och tjäna dem som inlägg och sidor. Detta är känt som "GitHub Mode", och det är det första av två lägen som finns tillgängliga i CMS.js.
Förresten, om du gillar ljudet av det här läget men inte är bekant med Github, oroa dig inte. Vi ska visa dig hur du använder det på ett sådant sätt att du kommer att vara bekväm även om du aldrig har rört dig git innan i ditt liv. Alternativt, om du föredrar din egen hosting, kan du istället gå med "Server Mode".
Det här läget är förmodligen det enklaste, så låt oss gå igenom hur man använder det första.
Det första du behöver göra är att ladda ner CMS.js. Gå till https://github.com/cdmedia/cms.js och klicka på den gröna Klon eller nedladdning Knappen längst upp till höger och välj sedan Hämta ZIP.
Notera: med den här processen kommer vi att anta att du inte vill använda GitHub alls, utan att ladda ner CMS.js, varför vi bara tar en ZIP istället för att klona repo. Men om du föredrar att klona repo med egna metoder kan du säkert göra det.
Annars, när du har hämtat ZIP, extrahera det och du borde se det här innehållet:
Gå nu in i "js" -mappen och öppna filen "config.js" för redigering. Hitta läge inställning, (på rad 52 i den aktuella versionen) och ändra den från 'Github' till 'Server'.
Du får även se inställningar för ditt webbplatsnamn, webbplatsnamn, webbplatsens e-postadress och webbplatsens författarnamn, så det är en bra tid att ändra dem också.
Om du redan känner till de föremål som du vill ha i nav-menyn kan du redigera siteNavItems inställning nu också.
Värdet satte sig mot namn egenskapen bestämmer etiketten som visas på menyalternativet. De href egenskapen låter dig ange vilken webbadress du vill att nav-objektet ska länka till. De nytt fönster egendom bestämmer om länken kommer att öppnas i ett nytt fönster när det klickas.
Om du vill länka till en intern sida lämna båda href och nytt fönster egenskaper ut och bara använda namn egendom med sitt värde satt till den aktuella sidan av titeln (mer om hur sidtitlar fungerar senare). Detta ställer automatiskt in nav-objektets permalink med formatet #sida/
Om en intern sida du vill länka till använder mellanslag i dess titel, till exempel "Om mig", använd mellanslag i motsvarande namn egendom, t.ex.. namn: "om mig"
För att se din webbplats när du är i "serverläge" måste du överföra den till en server som använder antingen Apache eller NGINX. Du kan ladda upp den direkt till din webbhotell via din föredragna FTP-klient om du vill, men det är vanligtvis att föredra att arbeta på saker offline först och ladda upp dem när du är klar. Som sådant rekommenderar jag att du använder ett program för att skapa en offline-server och arbeta inom den.
För denna handledning använder vi MAMP, som är tillgängligt för Mac och Windows, men om du redan använder och föredrar ett annat alternativ som XAMPP som är lika passande.
Skapa en ny mapp med namnet "cms_js" (eller vad du föredrar) i din MAMP-installations mapp "htdocs", för att hysa din offline CMS.js-webbplats:
Kopiera alla dina CMS.js-filer till den här mappen:
Och det är det, din webbplats är igång och redo att gå!
För att se det går du till offlineadressen för din webbplats, (som tillhandahålls av MAMP), t.ex. http: // localhost: 8888 / cms_js
Med "GitHub-läge" kan du få din CMS.js-webbplats värdfri på GitHub Pages, och du kan hantera din webbplats via ett GitHub-arkiv som lagrar ditt innehåll.
Med GitHub Pages kan du få ett obegränsat antal gratis webbplatser. en "huvud" -plats per konto, och sedan också en per projekt / förråd. Var dock medveten om att gratis GitHub-konton används vanligtvis för öppen källkod, delbara projekt så att dina repositorier (inklusive de med tillhörande webbplatser) inte är privata.
Notera: Om du inte har ett GitHub-konto registrerar du dig på: https://github.com/join
För att hålla saker så rakt fram som möjligt använder vi GitHub Desktop för den här processen. Om du inte har GitHub Desktop gå och ta det här: https://desktop.github.com/
Om du är bekant med kommandoraden för git och du vill använda det istället fungerar det lika bra, men tänk på att handledningen inte kommer att täcka kommandon som ska användas vid varje steg.
Gå till CMS.js-arkivet och klicka på Gaffel ikonen längst upp till höger. Detta skapar ett nytt förvar i ditt konto med alla CMS.js-filer som kopierats till den.
När du använder GitHub Pages kommer webbadressen till din webbplats att rita från ditt repo namn, dvs. http: //
Gå in i inställningar Fliken, fyll i ett nytt namn i Förvaringsnamn fält och klicka sedan på Döpa om.
Gå tillbaka till Koda fliken och klicka på den gröna Klon eller nedladdning knappen, som vi gjorde under serverns inställning. Men den här gången väljer du Öppna i skrivbordet istället.
GitHub Desktop öppnas och du blir uppmanad att välja den plats du vill klona till. Det här är den mapp du arbetar offline för att hantera din webbplats, så välj en lämplig plats och klicka sedan på Klona. Alla CMS.js-filerna dras ner till din angivna plats, redo för användning.
Accentsconagua
gh-pages GrenNästa sak du behöver är a gh-pages gren i ditt klonade repo, eftersom det här är filialen GitHub API kommer att dra innehåll från och därmed är den du behöver jobba på din webbplats. Men CMS.js-repo har redan en gh-pages gren som den använder för sin egen projektsida så vi måste ta bort det först.
Byt från huvudgrenen till gh-pages gren.
Gå till Gren menyn och välj Ta bort "gh-sidor", Bekräfta sedan genom att klicka Radera i dialogrutan som dyker upp.
Nu är du fri att skapa din egen gh-pages gren. Klicka på knappen för liten grenikon, skriv "gh-sidor" i namn fält och klicka sedan på Skapa filial.
När detta är klart klickar du på Publicera knappen längst upp till höger för att få din nyskapade gh-sidor filial online.
Du har nu din egen gh-pages gren, inuti din egen klon av CMS.js, och du är redo att gå.
I Finder, eller Utforskaren i Windows, går du till den mapp du klonade in i.
Tips: högerklicka på repo-namnet i den vänstra kolumnen och välj Öppna i Finder eller Öppna i Explorer.
Härifrån måste du följa samma steg som du vill om du använder "Serverläge", vilket är att redigera dina config-inställningar. Gå in i mappen "js" och öppna "config.js" för redigering.
"Mode" kommer redan att ställas till "Github" som standard så du behöver inte redigera den inställningen. Men du måste redigera githubUserSettings, (på rad 55 i nuvarande utgåva).
Ange det första värdet till ditt GitHub användarnamn, och det andra till namnet på repo du just skapat (gaffelt in).
Som vi gjorde med "Serverläge" bör du också redigera ditt sajtnamn, webbplatsnamn, webbplatsens e-postadress, inställningar för webbplatsens författarnamn.
Om du vill ställa in dina navobjekt nu, hänvisar du till avsnittet "Redigera navelement (valfritt)" tidigare i den här handledningen.
Gå nu tillbaka till GitHub Desktop och du bör se en knappläsning 1 Ej godkänd ändring. Detta beror på att GitHub Desktop har upptäckt dina ändringar av filen "config.js". Om du trycker på knappen i fråga och tittar på koden nedan kommer du att se den markera grön de ändringar du har gjort.
Ge dina ändringar en snabb titt över och, när du är lycklig, fyll i den lilla blanken längst ner till vänster med en grundläggande beskrivning av de förändringar du begår.
Klicka sedan Begå gh-sidor. När det är klart, klicka på Synkronisera knappen uppe till höger, (där Publicera knappen var förut), för att få de ändringar du bara begått laddade upp till din repo.
Du kan kontrollera att ändringarna i din config-fil har laddats upp genom att gå till webbsidan för din repo gh-pages gren och letar efter om ditt engagemang har dykt upp där:
Nu är din webbplats redo att visa! Din URL kommer att ta formatet http: //
Gå till webbplatsens webbadress och kolla in den!
Nu när CMS.js-webbplatsen är igång kan du börja lägga till innehåll i form av sidor och inlägg. Båda dessa läggs till genom att skapa Markdown (.md) -filer i sidans respektive sidor och sidor.
Det är värt att vara medveten om att om du vill använda inline-HTML, för att lägga till video i inlägg, bör du ändra en Markdown-inställning för din webbplats. I slutet av filen "config.js" hittar du dessa inställningar:
Byta sanitize från Sann till falsk för att tillåta inline HTML. Om du inte ändrar inställningen kommer någon inline HTML att visas som vanlig text snarare än att bli renderad.
För att lägga till ett inlägg skapa en Markdown (.md) -fil i mappen "inlägg" och namnge den med ett format som kombinerar datum och titel så här: YYYY-MM-DD_post-title.md. Se till att datum och titel skiljs åt av ett understreck.
Till exempel "2016-08-06_five-minute-blog-setup.md".
Överst i filen måste du lägga till en del frontmaterial som anger posttiteln, och sedan nedan skriver du in ditt inläggs innehåll, t.ex..
--- titel: Detta är en exempel Titel --- Och inläggets innehåll börjar här.
Om du vill migrera från en Jekyll-sida, kopiera alla dina inlägg från sin "_posts" -mapp till din CMS.js-webbplatsens "inlägg" -mapp. Om dina inlägg har bilder i dem, var noga med att ta över den mapp som innehåller dem också.
Notera: Se till att filförlängningen av dina inlägg är ".md" inte ".markdown".
För att lägga till en sida skapa en Markdown (.md) -fil i mappen "sidor". Du behöver inte ett datum i namnet på en sidfil, men filnamnet ska matcha titeln som används på sidans främre del. Det ska också vara bindestreck i filnamnet som motsvarar några mellanslag i sidtiteln.
Till exempel bör en sidfil med namnet "about-me.md" ha den här främre delen:
--- titel: Om mig --- Och sidinnehållet börjar här.
För att återskapa vad vi nämnde tidigare, om du vill länka till en sida från navets nav-meny, kommer namn egendom som används i din config-fil siteNavItems objekt borde matcha nämnda sidans titel, med mellanslag som ingår:
// Navigation artiklar siteNavItems: [name: 'About Me'],
Om du flyttar från en Jekyll webbplats kan du kopiera alla dina sidor över från sin rotmapp till din CMS.js-webbplatsens "sidor" -mapp. Ge var och en en snabb titt över för att se till att titeln matchar filnamnet som beskrivits ovan, och att filtillägget är ".md" inte ".markdown".
Att få ditt nya innehåll online i serverläget handlar bara om att ladda upp de nya filerna till din värd via din föredragna FTP-klient.
Notera: Det verkar uppdatera befintligt innehåll när det är lite knepigt i "Serverläge", med ändringar som inte visas i innehåll eller att innehåll försvinner ihop. Om du arbetar i "Server-läge" är det för närvarande det bästa sättet att förbereda dina postfiler på annat håll och överföra dem till din "inlägg" -mapp när du är säker på att de är färdiga.
Att få nytt innehåll på nätet är faktiskt lite lättare att hantera i "GitHub Mode" eftersom du inte behöver manuellt hålla reda på filerna du lagt till eller ändrat. Istället kan du bara gå till GitHub Desktop och det kommer automatiskt att upptäcka alla tillägg eller ändrade filer.
Därifrån följer samma process som du gjorde när du redigerade din config-fil.
Notera: helt nytt innehåll ska dyka upp genast men efter att ha redigerat befintligt innehåll kan det hända att du måste vänta lite innan du ser dina ändringar på din levande webbplats.
Givet CMS.js är i smak av Jekyll, hittar du många Jekyll teman kommer att passa en CMS.js webbplats ganska bra. Som sådan är det möjligt att delvis konvertera ett Jekyll-tema för användning på din webbplats. Jekyll har funktioner CMS.js gör det inte så att du inte kommer att kunna fullt ut överföra alla funktioner i vissa Jekyll-teman, men du kommer att kunna ta med en bra mängd utseende och känsla.
Genom att slutföra denna process kommer du att känna till HTML, CSS och JavaScript, så om du känner dig bekväm med dessa tre språk kan du konvertera ett tema till ett skott. Att gå igenom exakta steg för omvandling ligger utanför handledningen, men grundprocessen är:
I det här exemplet har jag konverterat temat "Astro" för Jekyll och använt det på den här CMS.js-webbplatsen:
Och det är allt som krävs för att konfigurera en CMS.js blogg! Om du inte behöver klockor och visselpipor och bara vill ha en rakt tillvägagångssätt för att få en blogg på nätet, får den här tekniken dig snabbt.
Tack så mycket till Chris Diana, skaparen av CMS.js, för att skapa detta fantastiska verktyg och dela det fritt.
Kolla in CMS.js för dig själv och ta det för en tur; du kan hitta dig själv en ny favorit bloggplattform!
