Share
În mod obișnuit, atunci când ne-am propus să creăm un nou blog, există un anumit grad de complexitate care trebuie luat în considerare. Ce tip de bază de date aveți nevoie? Veți avea nevoie de PHP, Node.js, mySQL? Cum veți gestiona securitatea bazelor de date și a zonelor administrative? Care va fi programul de întreținere pentru actualizările de plugin și temă?
Dacă tot ce aveți nevoie este un blog simplu, acest tip de complexitate poate fi depășit. Cu CMS.js, cu toate acestea, puteți pune totul deoparte și să aveți un blog simplu, pe deplin client-side, fără nici unul dintre preocupările menționate mai sus. Și o puteți pune în câteva minute.
În acest tutorial vom începe cu o scurtă privire la ceea ce este CMS.js, atunci veți afla exact cum să finalizați procesul de configurare rapidă. Odată ce ați instalat un site, vom vedea cum să adăugăm și să implementăm conținut. Sa incepem!
CMS.js este un generator de site foarte ușor, scris în JavaScript. Din cutie sunt numai 94Kb, cuprinzând doar șaisprezece fișiere. Prin comparație, WordPress este în jur de 24MB și peste 1.400 de fișiere.
Acesta este conceput în "spiritul lui Jekyll", ceea ce înseamnă că puteți să scrieți mesaje și pagini ca fișiere Markdown în text simplu și să le procesați automat și să le transmiteți într-un format de blog.
Ca și Jekyll, cu CMS.js puteți avea site-ul găzduit (gratuit) pe paginile GitHub. Cu această opțiune, CMS.js va folosi API-ul GitHub pentru a prelua în mod dinamic fișierele Markdown din depozit și pentru a le servi ca mesaje și pagini. Acesta este cunoscut sub numele de "modul GitHub", și este primul dintre cele două moduri disponibile în CMS.js.
Apropo, dacă vă place sunetul acestui mod, dar nu sunteți familiarizați cu Github, nu vă faceți griji. Vă vom arăta cum să o utilizați într-o manieră astfel încât să vă simțiți confortabil, chiar dacă nu ați atins niciodată git în viața voastră. Alternativ, dacă preferați propria dvs. hosting, puteți merge cu "Server Mode" în loc.
Acest mod este, probabil, cel mai simplu, așa că hai să trecem prin modul în care să-l folosim mai întâi.
Primul lucru pe care trebuie să-l faceți este să descărcați CMS.js. Accesați https://github.com/cdmedia/cms.js și faceți clic pe verde Clonați sau descărcați butonul spre dreapta sus, apoi alegeți Descărcați ZIP.
Notă: cu acest proces vom presupune că nu doriți să utilizați GitHub deloc, în afara descărcării CMS.js, motiv pentru care noi luăm doar un ZIP, în loc să clonăm repo-ul. Cu toate acestea, dacă preferați să clonați repo-ul cu propriile metode, puteți face acest lucru cu siguranță.
În caz contrar, odată ce ați descărcat ZIP-ul, extrageți-l și ar trebui să vedeți acest conținut:
Acum intrați în folderul "js" și deschideți fișierul "config.js" pentru editare. Găsi mod setare (pe linia 52 din versiunea curentă) și modificați-o 'Github' la 'Server'.
Veți vedea, de asemenea, setări pentru numele site-ului dvs., sloganul site-ului, adresa de e-mail a site-ului și numele autorului site-ului, deci este un moment bun pentru a le schimba și pe acestea.
Dacă știți deja elementele pe care doriți să le apăreați în meniul nav, puteți să le editați siteNavItems stabilind și acum.
Valoarea stabilită față de Nume proprietatea va determina eticheta care apare pe elementul de meniu. href proprietatea vă permite să specificați adresa URL la care doriți să se facă trimiterea elementului nav. fereastră nouă proprietatea determină dacă linkul se va deschide într-o fereastră nouă atunci când se face clic.
Dacă doriți să vă conectați la o pagină internă, lăsați ambele href și fereastră nouă proprietăți afară și utilizați doar Nume proprietate cu valoarea stabilită la titlul paginii în cauză (mai multe despre modul în care funcționează mai târziu titlurile paginilor). Aceasta va seta automat permalink-ul elementului nav cu formatul #pagină/
Dacă o pagină internă pe care doriți să o conectați să folosească spații în titlu, cum ar fi "Despre mine", utilizați spațiile corespunzătoare Nume proprietate, de ex. nume: 'Despre mine'
Pentru a vedea site-ul dvs. în "server mode", va trebui să îl transferați pe un server care utilizează fie Apache, fie NGINX. Puteți să o încărcați direct pe gazda dvs. prin intermediul clientului FTP preferat, dacă doriți, dar este preferabil să lucrați mai întâi la lucrurile offline și să le încărcați când ați terminat. Ca atare, vă recomand să folosiți un program pentru a crea un server offline și a lucra în cadrul acestuia.
Pentru acest tutorial vom folosi MAMP, care este disponibil pentru Mac și Windows, dar dacă deja utilizați și preferați o altă opțiune cum ar fi XAMPP care este la fel de potrivit.
În directorul "htdocs" al instalării MAMP, creați un nou folder numit "cms_js", (sau orice doriți), pentru a găzdui site-ul offline CMS.js:
Copiați toate fișierele CMS.js în acest director:
Și asta este, site-ul dvs. este în funcțiune și este gata să plece!
Pentru ao vedea mergeți la adresa URL offline pentru site-ul dvs. (așa cum este furnizată de MAMP), de ex. http: // localhost: 8888 / cms_js
Cu "modul GitHub" puteți avea site-ul CMS.js găzduit gratuit pe paginile GitHub și puteți gestiona site-ul dvs. printr-un depozit GitHub care stochează conținutul dvs..
Cu paginile GitHub puteți avea un număr nelimitat de site-uri gratuite; un site "principal" pe cont, și apoi unul pentru fiecare proiect / depozit. Fiți conștienți, totuși, că conturile GitHub gratuite sunt de obicei utilizate pentru proiecte cu sursă deschisă, care pot fi stocate, astfel încât depozitele dvs. (inclusiv cele cu site-uri asociate) să nu fie private.
Notă: Dacă nu aveți încă un cont GitHub, vă puteți înscrie la: https://github.com/join
Pentru a păstra lucrurile cât mai direct posibil, vom folosi GitHub Desktop pentru acest proces. Dacă nu aveți GitHub Desktop mergeți și luați-l aici: https://desktop.github.com/
Dacă sunteți familiarizat cu linia de comandă pentru git și doriți să utilizați acest lucru, va funcționa la fel de bine, dar nu uitați că tutorialul nu va acoperi comenzile de utilizat în fiecare etapă.
Accesați depozitul CMS.js și faceți clic pe Furculiţă pictograma spre dreapta sus. Acest lucru va crea un depozit nou în contul dvs. cu toate fișierele CMS.js copiate în acesta.
Când utilizați Pagini GitHub, adresa URL a site-ului va fi extrasă din numele repo-ului dvs., adică. http: //
Du-te în Setări filă, completați un nou nume în Numele repozitoriei apoi faceți clic pe Redenumiți.
Întoarceți-vă la Cod și faceți clic pe verde Clonați sau descărcați , așa cum am făcut în timpul configurației modului server. Dar de data asta, alegeți Deschideți în spațiul de lucru in schimb.
GitHub Desktop se va deschide și vi se va solicita să selectați locația la care doriți să faceți clona. Acesta va fi folderul pe care îl lucrați offline pentru a vă gestiona site-ul, deci alegeți o locație potrivită, apoi faceți clic pe Clone. Toate fișierele CMS.js vor fi trase în jos în locația specificată, gata de utilizare.
Accentsconagua
GH-pagini ramurăUrmătorul lucru de care ai nevoie este a GH-pagini ramificație în replica dvs. clonată, deoarece aceasta este ramura pe care API-ul GitHub va desena conținutul și, prin urmare, este cea pe care trebuie să o lucrați în site-ul dvs. Totuși repo-ul CMS.js are deja o GH-pagini ramură pe care o folosește pentru propria pagină de proiect, așa că va trebui să o ștergem mai întâi.
Treceți de la ramura master în GH-pagini ramură.
Mergeți la ramură meniu și selectați Ștergeți "paginile gh", apoi confirmați făcând clic pe Șterge în caseta de dialog care apare.
Acum ești liber să îți creezi propriul GH-pagini ramură. Faceți clic pe butonul mic de simbol ramură, tastați "gh-pages" în Nume apoi faceți clic pe Creați filiale.
Odată ce ați terminat, faceți clic pe Publica butonul de sus în partea dreaptă sus pentru a-ți crea online noul magazin gh-pages.
Acum aveți propria dvs. GH-pagini ramură, în interiorul clonei dvs. de CMS.js, și sunteți gata să plecați.
În Finder sau în Windows Explorer, mergeți la dosarul în care ați fost clonat.
Bacsis: faceți clic dreapta pe numele repo în coloana din stânga și alegeți Deschideți în Finder sau Deschideți în Explorer.
De aici, va trebui să urmați același pas pe care vi-l urmați dacă utilizați "Server Mode", care este de a edita setările config. Accesați folderul "js" și deschideți "config.js" pentru editare.
"Modul" va fi deja setat la "Github" în mod prestabilit, astfel încât nu va trebui să editați acea setare. Cu toate acestea, va trebui să editați githubUserSettings, (pe linia 55 din versiunea curentă).
Setați prima valoare în numele dvs. de utilizator GitHub, iar al doilea în numele repo-ului pe care tocmai l-ați creat (în furcă).
Așa cum am făcut și în "Server Mode", trebuie să editați și numele site-ului dvs., sloganul site-ului, adresa de e-mail a site-ului, setările pentru numele autorului site-ului.
Dacă doriți să setați acum articolele dvs. nav, vă rugăm să consultați secțiunea "Editați articolele din Nav (opțional)" din acest tutorial.
Acum mergeți înapoi la GitHub Desktop și ar trebui să vedeți un buton de citire 1 Schimbare neangajată. Acest lucru se datorează faptului că GitHub Desktop a detectat modificările fișierului "config.js". Dacă apăsați butonul în cauză și uitați-vă la corpul de cod de mai jos, veți vedea că subliniază în verde modificările pe care le-ați făcut.
Dați schimbărilor dvs. o privire rapidă și, odată ce sunteți fericit, completați formularul mic din partea stângă jos cu o descriere de bază a modificărilor pe care le comiteți.
Apoi apasa Angajați-vă la paginile gh. După ce faceți asta, faceți clic pe Sincronizare butonul de sus în partea dreaptă sus (unde Publica a fost înainte), pentru a obține modificările pe care tocmai le-ați angajat încărcate în repo.
Puteți verifica dacă modificările aduse fișierului dvs. de configurare au fost încărcate cu succes prin accesarea paginii web pentru repo GH-pagini ramură și căutați să vedeți dacă mesajul dvs. de comitet a apărut acolo:
Acum, site-ul dvs. este gata pentru vizualizare! Adresa dvs. URL va lua formatul http: //
Accesați adresa URL a site-ului dvs. și verificați-l!
Acum, dacă site-ul dvs. CMS.js este în desfășurare, puteți începe să adăugați conținut în acesta sub formă de pagini și postări. Ambele se adaugă prin crearea fișierelor Markdown (.md) în dosarele "pagini" și "postări" ale site-ului respectiv.
Merită să fiți conștienți de faptul că dacă doriți să utilizați HTML inline, pentru sarcini cum ar fi adăugarea videoclipurilor la postări, trebuie să modificați setarea Markdown pentru site-ul dvs. La sfârșitul fișierului "config.js" veți găsi aceste setări:
Schimbare dezinfecta din Adevărat la fals pentru a permite HTML inline. Dacă nu modificați această setare, orice HTML inline va fi afișat ca text simplu, în loc să fie redat.
Pentru a adăuga o postare, creați un fișier Markdown (.md) în dosarul "mesaje" și denumiți-l cu un format care combină data și titlul astfel: YYYY-MM-DD_post-title.md. Asigurați-vă că data și titlul sunt separate printr-o subliniere.
De exemplu, "2016-08-06_five-minute-blog-setup.md".
În partea de sus a fișierului, va trebui să adăugați o chestiune frontală care să precizeze titlul postului, apoi sub acest tip de conținut, de ex..
--- titlu: Acesta este un Titlu Exemplu --- Și conținutul postului începe aici.
Dacă doriți să migrați de pe un site Jekyll, copiați toate postările de pe dosarul "_posts" în dosarul "mesaje" al site-ului dvs. CMS.js. Dacă postările dvs. au imagini în ele, asigurați-vă că le aduceți și dosarul care le conține.
Notă: asigurați-vă că extensia fișierelor dvs. este ".md" nu ".markdown".
Pentru a adăuga o pagină creați un fișier Markdown (.md) în dosarul "pagini". Nu aveți nevoie de o dată în numele unui fișier de pagină, dar numele fișierului ar trebui să se potrivească cu titlul utilizat în materia frontală a paginii. Ar trebui să existe și liniuțe în numele fișierului care corespund cu orice spații din titlul paginii.
De exemplu, un fișier de pagină numit "despre-me.md" ar trebui să aibă această chestiune frontală:
--- titlu: Despre mine --- Și conținutul paginii începe aici.
Pentru a revedea ceea ce am menționat mai devreme, dacă doriți să vă conectați la o pagină din meniul de navigare al site-ului dvs., Nume proprietate folosită în fișierul config siteNavItems obiect ar trebui să se potrivească cu titlul paginii respective, cu spații incluse:
// Elemente de navigare siteNavItems: [nume: 'Despre mine'],
Dacă migrați de pe un site Jekyll puteți copia toate dvs. pagini din dosarul rădăcină în dosarul "pagini" al site-ului dvs. CMS.js. Dați fiecăruia o privire rapidă pentru a vă asigura că titlul se potrivește cu numele fișierului descris mai sus și că extensia de fișier este ".md" nu ".markdown".
Obținerea noului dvs. conținut online în modul server este doar o chestiune de încărcare a fișierelor nou adăugate în gazdă prin intermediul clientului FTP preferat.
Notă: se pare că actualizarea conținutului existent atunci când în "Server Mode" poate fi un pic dificil în prezent, cu modificări care nu apar în conținut sau care determină ca conținutul să dispară împreună. Dacă lucrați în "Server Mode", în momentul de față cel mai bun pariu este să vă pregătiți fișierele post în altă parte, apoi să le transferați în folderul "posturi" atunci când sunteți sigur că au fost finalizate.
Obținerea de conținut online online este într-adevăr mai ușor de administrat în "modul GitHub", deoarece nu va trebui să țineți evidența manuală a fișierelor adăugate sau modificate. În schimb, puteți să accesați desktopul GitHub și va detecta automat orice fișiere adăugate sau modificate.
De acolo urmați același proces pe care l-ați făcut atunci când ați editat fișierul config.
Notă: conținut nou nou ar trebui să apară imediat, însă după editarea conținutului existent, este posibil să trebuiască să așteptați puțin înainte de a vedea modificările pe site-ul dvs. live.
Având în vedere că CMS.js este în aroma lui Jekyll, veți găsi multe teme Jekyll care se vor potrivi destul de bine unui site CMS.js. Ca atare, este posibil să convertiți parțial o temă Jekyll pentru a fi utilizată pe site-ul dvs. Jekyll are funcții CMS.js nu, deci nu veți putea să transferați pe deplin toate trăsăturile unor teme Jekyll, dar veți putea să aduceți o bună cantitate de aspect și simț.
Finalizarea acestui proces va avea o oarecare familiaritate cu HTML, CSS și JavaScript, așa că dacă vă simțiți confortabil cu aceste trei limbi, dați posibilitatea de a transforma o temă într-o fotografie. Trecerea prin pașii exacti de conversie este dincolo de scopul acestui tutorial, dar procesul de bază este:
În acest exemplu am transformat tema "Astro" pentru Jekyll și l-am aplicat pe acest site CMS.js:
Și asta e tot ce este necesar pentru a configura un blog CMS.js! Dacă nu aveți nevoie de clopote și fluiere și doriți doar o cale directă la punct pentru a obține un blog online, această metodă vă ajunge acolo rapid.
Mulțumesc foarte mult lui Chris Diana, creatorul CMS.js, că a creat acest instrument minunat și l-a împărtășit liber.
Check out CMS.js pentru tine și ia-o pentru o rotire; s-ar putea să vă găsiți o nouă platformă preferată de blogging!
