Share
In genere, quando ci proponiamo di creare un nuovo blog, c'è un certo grado di complessità da considerare. Che tipo di database hai bisogno? Avrai bisogno di PHP, Node.js, mySQL? Come gestirai la sicurezza dei tuoi database e delle aree di amministrazione? Quale sarà il tuo programma di manutenzione per gli aggiornamenti di plugin e temi?
Se tutto ciò di cui hai bisogno è un semplice blog, questo tipo di complessità può essere eccessivo. Con CMS.js, tuttavia, puoi mettere tutto da parte e avere un blog semplice, completamente sul lato client, senza alcuna delle preoccupazioni di cui sopra. E puoi configurarlo in pochi minuti.
In questo tutorial inizieremo con una rapida occhiata a cosa è CMS.js, quindi imparerai esattamente come completare la procedura di configurazione rapida. Una volta installato e attivo il sito, analizzeremo come aggiungere e distribuire il contenuto. Cominciamo!
CMS.js è un generatore di siti molto leggero scritto in JavaScript. Fuori dalla scatola è solo 94Kb, comprendente solo sedici file. In confronto, WordPress è di circa 24 Mb e oltre 1.400 file.
È progettato in "lo spirito di Jekyll", che in pratica significa che puoi scrivere post e pagine come file Markdown in testo semplice e farli elaborare automaticamente e generare in un formato blog.
Come Jekyll, con CMS.js puoi avere il tuo sito ospitato (gratuitamente) su GitHub Pages. Con questa opzione CMS.js utilizzerà l'API di GitHub per recuperare in modo dinamico i file Markdown dal tuo repository e servirli come post e pagine. Questo è noto come "GitHub Mode" ed è la prima delle due modalità disponibili in CMS.js.
A proposito, se ti piace il suono di questa modalità ma non hai familiarità con Github, non preoccuparti. Ti mostreremo come usarlo in un modo tale che ti sentirai a tuo agio anche se non l'hai mai toccato prima nella tua vita. In alternativa, se preferisci il tuo hosting, puoi utilizzare invece "Modalità server".
Questa modalità è probabilmente la più semplice, quindi vediamo come usarla per prima.
La prima cosa che devi fare è scaricare CMS.js. Vai a https://github.com/cdmedia/cms.js e fai clic sul verde Clona o scarica pulsante verso l'alto a destra, quindi scegliere Scarica ZIP.
Nota: con questo processo assumeremo che tu non voglia utilizzare GitHub affatto, a parte il download di CMS.js, motivo per cui stiamo semplicemente acquisendo un ZIP piuttosto che clonando il repository. Tuttavia, se preferisci clonare il repository con i tuoi metodi, puoi certamente farlo.
Altrimenti, una volta scaricato il file ZIP, estrailo e dovresti vedere questi contenuti:
Ora vai nella cartella "js" e apri il file "config.js" per la modifica. Trovare la modalità impostazione, (sulla linea 52 nella versione attuale), e cambiarlo da 'Github' a 'Server'.
Vedrai anche le impostazioni per il nome del tuo sito, la tagline del sito, l'indirizzo email del sito e il nome dell'autore del sito, quindi è un buon momento per cambiare anche quelli.
Se conosci già gli elementi che desideri siano visualizzati nel menu di navigazione, puoi modificare siteNavItems impostazione ora pure.
Il valore impostato contro il nome la proprietà determinerà l'etichetta che appare sulla voce del menu. Il href proprietà ti consente di specificare l'URL al quale vuoi che l'oggetto nav si colleghi. Il nuova finestra proprietà determina se il collegamento si aprirà in una nuova finestra quando si fa clic.
Se vuoi collegarti a una pagina interna, lascia entrambi href e nuova finestra proprietà fuori e basta usare il nome proprietà con il suo valore impostato sulla pagina nel titolo della domanda (più su come funzionano i titoli delle pagine in seguito). Questo imposterà automaticamente il permalink dell'oggetto nav con il formato #pagina/
Se una pagina interna a cui desideri collegare utilizza spazi nel titolo, ad esempio "Informazioni personali", utilizza gli spazi nel corrispondente nome proprietà anche, ad es. nome: 'About Me'
Per vedere il tuo sito quando si è in "modalità server" è necessario trasferirlo su un server che utilizza Apache o NGINX. Puoi caricarlo direttamente nel tuo hosting web tramite il tuo client FTP preferito, se preferisci, ma in genere è preferibile lavorare prima su cose offline e caricarle quando hai finito. Pertanto, consiglio di utilizzare un programma per creare un server offline e lavorare al suo interno.
Per questo tutorial useremo MAMP, che è disponibile per Mac e Windows, ma se già usi e preferisci un'altra opzione come XAMPP che è ugualmente adatta.
Nella cartella "htdocs" dell'installazione MAMP, crea una nuova cartella denominata "cms_js" (o qualsiasi altra cosa tu preferisca) per ospitare il tuo sito CMS.js offline:
Copia tutti i tuoi file CMS.js in questa cartella:
E questo è tutto, il tuo sito è attivo e funzionante e pronto per l'uso!
Per vederlo vai all'URL offline del tuo sito, (come previsto da MAMP), ad es. http: // localhost: 8888 / cms_js
Con "Modalità GitHub" puoi avere il tuo sito CMS.js ospitato gratuitamente su GitHub Pages, e puoi gestire il tuo sito tramite un repository GitHub che memorizza i tuoi contenuti.
Con GitHub Pages puoi avere un numero illimitato di siti gratuiti; un sito "principale" per account e poi anche uno per progetto / repository. Si noti tuttavia che gli account GitHub gratuiti vengono in genere utilizzati per progetti condivisibili e open source in modo che i repository, inclusi quelli con siti associati, non siano privati.
Nota: Se non si dispone ancora di un account GitHub, iscriversi all'indirizzo https://github.com/join
Per mantenere le cose il più avanti possibile, utilizzeremo GitHub Desktop per questo processo. Se non hai GitHub Desktop vai avanti e prendilo qui: https://desktop.github.com/
Se hai familiarità con la riga di comando di git e vorresti utilizzarlo, funzionerà altrettanto bene, ma tieni presente che il tutorial non coprirà i comandi da utilizzare in ogni fase.
Vai al repository CMS.js e fai clic su Forchetta icona verso l'alto a destra. Questo creerà un nuovo repository nel tuo account con tutti i file CMS.js copiati in esso.
Quando usi GitHub Pages, l'URL del tuo sito attingerà dal nome del tuo repository, ad es. http: //
Vai nel impostazioni scheda, inserire un nuovo nome nel Nome del repository campo quindi fare clic Rinominare.
Torna al Codice scheda e fare clic sul verde Clona o scarica pulsante, come abbiamo fatto durante l'impostazione della modalità Server. Ma questa volta, scegli Apri in desktop anziché.
GitHub Desktop si aprirà e ti verrà richiesto di selezionare la posizione che desideri clonare. Questa sarà la cartella in cui lavori offline per gestire il tuo sito, quindi scegli una posizione appropriata e poi fai clic Clone. Tutti i file CMS.js verranno estratti nella posizione specificata, pronti per l'uso.
Accentsconagua
GH-pagine RamoLa prossima cosa di cui avrai bisogno è a GH-pagine ramo nel repository clonato, perché questo è il ramo dal quale l'API GitHub estrarrà il contenuto e quindi è quello sul quale è necessario lavorare sul tuo sito. Tuttavia il repository CMS.js ha già un GH-pagine ramo che sta utilizzando per la propria pagina di progetto, quindi dovremo eliminarlo prima.
Passa dal ramo principale al GH-pagine ramo.
Vai al Ramo menu e selezionare Elimina "gh-pages", quindi confermare facendo clic Elimina nella finestra di dialogo che si apre.
Ora sei libero di crearne uno tuo GH-pagine ramo. Fare clic sul pulsante icona piccola filiale, digitare "gh-pages" nel Nome campo quindi fare clic Crea un ramo.
Una volta fatto, fai clic su Pubblicare pulsante in alto a destra per ottenere online il tuo nuovo gh-pages branch.
Ora hai il tuo GH-pagine filiale, all'interno del tuo clone di CMS.js, e sei pronto per partire.
In Finder o Esplora risorse, vai alla cartella in cui sei stato clonato.
Mancia: fare clic con il tasto destro sul nome del repository nella colonna di sinistra e selezionare Apri nel Finder o Apri in Explorer.
Da qui, dovrai seguire lo stesso passo successivo che avresti se usassi "Modalità server", che è quello di modificare le impostazioni di configurazione. Vai nella cartella "js" e apri "config.js" per la modifica.
La "modalità" sarà già impostata su "Github" per impostazione predefinita, quindi non dovrai modificare questa impostazione. Tuttavia è necessario modificare githubUserSettings, (sulla linea 55 nella versione attuale).
Imposta il primo valore sul tuo nome utente GitHub e il secondo sul nome del repository appena creato (forked in).
Come abbiamo fatto con "Modalità server", dovresti anche modificare il nome del tuo sito, la tagline del sito, l'indirizzo email del sito, le impostazioni del nome dell'autore del sito.
Se desideri impostare ora gli elementi della tua nav, fai riferimento alla sezione "Modifica elementi Nav (Opzionale)" in questo tutorial.
Ora torna a GitHub Desktop e dovresti vedere un pulsante di lettura 1 Cambiamento non eseguito. Questo perché GitHub Desktop ha rilevato le modifiche del file "config.js". Se premi il pulsante in questione e guardi il codice del codice sottostante, lo vedrai evidenziare in verde le modifiche che hai apportato.
Dai una rapida occhiata alle tue modifiche e, una volta che sei felice, compila il piccolo modulo in basso a sinistra con una descrizione di base delle modifiche che stai commettendo.
Quindi fare clic Impegnati a gh-pages. Al termine, fai clic su Sync pulsante in alto a destra, (dove il Pubblicare era prima), per ottenere le modifiche appena trasferite sul repository.
Puoi verificare che le modifiche al tuo file di configurazione siano state caricate correttamente andando nella pagina web per i repository GH-pagine ramo e cercando di vedere se il tuo messaggio di commit è apparso lì:
Ora il tuo sito è pronto per la visualizzazione! Il tuo URL avrà il formato http: //
Vai all'URL del tuo sito e controlla!
Ora che il tuo sito CMS.js è attivo e funzionante, puoi iniziare ad aggiungere contenuti ad esso sotto forma di pagine e post. Entrambi vengono aggiunti creando file Markdown (.md) all'interno delle cartelle "pages" e "posts" del tuo sito rispettivamente.
Qui vale la pena di essere a conoscenza del fatto che se si desidera utilizzare HTML in linea, per attività come l'aggiunta di video ai post, è necessario modificare un'impostazione di Markdown per il proprio sito. Alla fine del file "config.js" troverai queste impostazioni:
Modificare sanitizzare a partire dal vero a falso per consentire l'HTML in linea. Se non si modifica questa impostazione, qualsiasi HTML incorporato verrà visualizzato come testo normale anziché essere visualizzato.
Per aggiungere un post, crea un file Markdown (.md) nella cartella "posts" e assegnagli un formato che combina la data e il titolo in questo modo: YYYY-MM-DD_post-title.md. Assicurati che la data e il titolo siano separati da un trattino basso.
Ad esempio, "2016-08-06_five-minute-blog-setup.md".
Nella parte superiore del file dovrai aggiungere alcuni argomenti che specificano il titolo del post, quindi di seguito digitare il contenuto del tuo post, ad es..
--- titolo: questo è un titolo di esempio --- E il contenuto del post inizia qui.
Se vuoi migrare da un sito di Jekyll, copia tutti i tuoi post dalla sua cartella "_posts" nella cartella "posts" del tuo sito CMS.js. Se i tuoi post contengono immagini, assicurati di portare anche la cartella che li contiene.
Nota: assicurati che l'estensione del file dei tuoi post sia ".md" not ".markdown".
Per aggiungere una pagina, crea un file Markdown (.md) nella cartella "pages". Non hai bisogno di una data nel nome di un file di paging, tuttavia il nome del file deve corrispondere al titolo utilizzato nel frontespizio della pagina. Ci dovrebbero anche essere trattini nel nome del file corrispondente a qualsiasi spazio nel titolo della pagina.
Ad esempio un file di pagina chiamato "about-me.md" dovrebbe avere questo aspetto:
--- title: About Me --- E il contenuto della pagina inizia qui.
Per ricapitolare ciò che abbiamo menzionato prima, se vuoi collegarti a una pagina dal menu di navigazione del tuo sito, il nome proprietà usata nel tuo file di configurazione siteNavItems l'oggetto deve corrispondere al titolo della pagina, con gli spazi inclusi:
// Elementi di navigazione siteNavItems: [name: 'About Me'],
Se stai migrando da un sito di Jekyll puoi copiare tutto il tuo pagine dalla sua cartella radice nella cartella "pagine" del tuo sito CMS.js. Dare a ciascuno una rapida occhiata per assicurarsi che il titolo corrisponda al nome del file come descritto sopra, e che l'estensione del file sia ".md" non ".markdown".
Ottenere i tuoi nuovi contenuti online in modalità server è solo questione di caricare i nuovi file aggiunti al tuo host tramite il tuo client FTP preferito.
Nota: sembra che aggiornare i contenuti esistenti quando in "Modalità server" possa essere un po 'complicato al momento, con modifiche che non compaiono nel contenuto o fanno sparire tutti i contenuti. Se stai lavorando in "Modalità server", al momento la soluzione migliore è preparare i tuoi file post altrove e poi trasferirli nella cartella "post" quando sei certo che siano finalizzati.
Ottenere nuovi contenuti online è in realtà un po 'più semplice da gestire in "Modalità GitHub" perché non dovrai tenere traccia manualmente dei file che hai aggiunto o modificato. Invece, puoi semplicemente andare su GitHub Desktop e rileverà automaticamente qualsiasi file aggiunto o modificato.
Da lì segui la stessa procedura che hai fatto quando hai modificato il tuo file di configurazione.
Nota: i nuovi contenuti dovrebbero essere visualizzati immediatamente, ma dopo aver modificato i contenuti esistenti potrebbe essere necessario attendere un po 'prima di vedere le modifiche sul tuo sito live.
Dato che CMS.js è nel gusto di Jekyll, molti temi di Jekyll si adattano abbastanza bene a un sito CMS.js. In quanto tale è possibile convertire parzialmente un tema di Jekyll da utilizzare sul tuo sito. Jekyll ha funzioni CMS.js no, quindi non sarai in grado di trasferire completamente tutte le funzionalità di alcuni temi di Jekyll, ma sarai in grado di portare una buona quantità di aspetto e aspetto.
Il completamento di questo processo richiederà una certa familiarità con HTML, CSS e JavaScript, quindi se ti senti a tuo agio con queste tre lingue, converti un tema in una sequenza. Passare attraverso i passaggi esatti della conversione va oltre lo scopo di questo tutorial, ma il processo di base è:
In questo esempio ho convertito il tema "Astro" per Jekyll e l'ho applicato a questo sito CMS.js:
E questo è tutto ciò che serve per configurare un blog CMS.js! Se non hai bisogno di campane e fischietti e vuoi semplicemente un modo diretto per ottenere un blog online, questo metodo ti porta lì velocemente.
Grazie infinite a Chris Diana, il creatore di CMS.js, per aver creato questo fantastico strumento e averlo condiviso liberamente.
Controlla CMS.js per te stesso e prendilo per un giro; potresti trovarti una nuova piattaforma di blogging preferita!
