Share
Vanligvis, når vi går ut for å lage en ny blogg, er det en viss grad av kompleksitet å bli vurdert. Hva slags database vil du trenge? Vil du trenge PHP, Node.js, mySQL? Hvordan vil du administrere sikkerheten til databaser og administrasjonsområder? Hva vil din vedlikeholdsplan for plugin og temaoppdateringer være?
Hvis alt du trenger er en enkel blogg, kan denne typen kompleksitet være overkill. Med CMS.js kan du imidlertid legge alt til side og ha en enkel, fullstendig klientsideblogg uten noen av de nevnte bekymringene. Og du kan sette opp det på få minutter.
I denne opplæringen begynner vi med en rask titt på hva CMS.js er, så lærer du nøyaktig hvordan du fullfører den hurtige oppsettprosessen. Når du har et nettsted oppe, går vi gjennom hvordan du legger til og distribuerer innhold. La oss begynne!
CMS.js er en veldig lett nettsted generator skrevet i JavaScript. Utenfor boksen er det bare 94Kb, bestående av bare seksten filer. Til sammenligning er WordPress rundt 24 MB og over 1400 filer.
Den er utformet i "Jekyll-ånden", som i utgangspunktet betyr at du kan skrive innlegg og sider som ren tekst Markdown-filer og få dem automatisk behandlet og utdata til et bloggformat.
Som Jekyll, med CMS.js kan du ha nettstedet ditt hostet (gratis) på GitHub Pages. Med dette alternativet vil CMS.js bruke GitHubs API for å hente Markdown-filer dynamisk fra lageret ditt og tjene dem som innlegg og sider. Dette er kjent som "GitHub-modus", og det er det første av to moduser som er tilgjengelige i CMS.js.
Forresten, hvis du liker lyden av denne modusen, men ikke er kjent med Github, ikke vær redd. Vi viser deg hvordan du bruker den på en måte slik at du vil være komfortabel, selv om du aldri har rørt git før du er i livet ditt. Alternativt, hvis du foretrekker din egen hosting, kan du i stedet bruke "Server Mode".
Denne modusen er uten tvil det enkleste, så la oss gå gjennom hvordan du bruker det først.
Det første du må gjøre er å laste ned CMS.js. Gå til https://github.com/cdmedia/cms.js og klikk på den grønne Klon eller nedlasting knappen øverst til høyre, velg deretter Last ned ZIP.
Merk: Med denne prosessen vil vi anta at du ikke vil bruke GitHub i det hele tatt, uten å laste ned CMS.js, derfor tar vi bare en ZIP i stedet for kloning av repo. Men hvis du foretrekker å klone repoen med dine egne metoder, kan du sikkert gjøre det.
Ellers, når du har lastet ned ZIP, trekk det ut og du bør se dette innholdet:
Gå nå inn i "js" -mappen og åpne filen "config.js" for redigering. Finn modus innstilling, (på linje 52 i gjeldende utgave), og endre den fra 'Github' til 'Server'.
Du får også se innstillinger for nettstednavnet ditt, nettstedets tagline, e-postadressen til nettstedet og nettstedets forfatternavn, så det er også en god tid å endre dem også.
Hvis du allerede kjenner de elementene du vil ha vist på navmenyen, kan du redigere siteNavItems innstiller nå også.
Verdien satt mot Navn Egenskapen bestemmer etiketten som vises på menyelementet. De href Egenskapen lar deg spesifisere nettadressen du vil at nav-elementet skal lenke til. De nytt vindu Egenskapen bestemmer om koblingen vil åpne i et nytt vindu når det klikkes.
Hvis du vil koble til en intern side, forlater du begge href og nytt vindu egenskaper ut og bare bruk Navn eiendom med verdien satt til den aktuelle sidenes tittel (mer om hvordan titler fungerer senere). Dette vil automatisk sette nav-elementets permalink med formatet #side/
Hvis en intern side du vil koble til, bruker mellomrom i tittelen, for eksempel "Om meg", bruk mellomrom i det tilsvarende Navn eiendom også, f.eks. navn: 'om meg'
For å se nettstedet ditt når du er i "servermodus", må du overføre det til en server som bruker enten Apache eller NGINX. Du kan laste den opp direkte til webverten din via din foretrukne FTP-klient hvis du vil, men det er generelt å foretrekke å jobbe med ting offline først og laste dem opp når du er ferdig. Som sådan anbefaler jeg at du bruker et program for å opprette en frakoblet server og jobbe i den.
For denne opplæringen bruker vi MAMP, som er tilgjengelig for Mac og Windows, men hvis du allerede bruker og foretrekker et annet alternativ som XAMPP som er like egnet.
I mappen MAMP-installasjonens "htdocs" -mappe, opprett en ny mappe kalt "cms_js", (eller hva du foretrekker), for å huse ditt offline CMS.js-nettsted:
Kopier alle CMS.js-filene dine i denne mappen:
Og det er det, nettstedet ditt er oppe og klar til å gå!
For å se det, gå til nettadressen for nettadressen for nettstedet ditt, (som levert av MAMP), f.eks. http: // localhost: 8888 / cms_js
Med "GitHub-modus" kan du få CMS.js-nettstedet ditt hostet gratis på GitHub Pages, og du kan administrere nettstedet ditt via et GitHub-lager som lagrer innholdet ditt.
Med GitHub Pages kan du få et ubegrenset antall gratis nettsteder; ett "hoved" -nettsted per konto, og deretter også ett per prosjekt / lager. Vær imidlertid oppmerksom på at gratis GitHub-kontoer vanligvis brukes til åpen kildekode, delbare prosjekter, slik at lagrene dine (inkludert de med tilknyttede nettsteder) ikke er private.
Merk: Hvis du ikke har en GitHub-konto, kan du registrere deg på: https://github.com/join
For å holde ting så rett frem som mulig, bruker vi GitHub Desktop for denne prosessen. Hvis du ikke har GitHub Desktop, fortsett og ta det her: https://desktop.github.com/
Hvis du er kjent med kommandolinjen for git og du vil bruke det i stedet, vil det fungere like bra, men husk at opplæringen ikke vil dekke kommandoene som skal brukes på hvert trinn.
Gå til CMS.js-depotet og klikk på Gaffel ikonet øverst til høyre. Dette vil opprette et nytt lager i kontoen din med alle CMS.js-filene kopiert til den.
Når du bruker GitHub Pages, vil URLen til nettstedet ditt trekke fra repoens navn, dvs.. http: //
Gå inn i innstillinger kategorien, fyll inn et nytt navn i Oppbevaringsnavn feltet, klikk deretter Gi nytt navn.
Gå tilbake til Kode fanen og klikk den grønne Klon eller nedlasting knappen, som vi gjorde under installering av servermodus. Men denne gangen, velg Åpne i skrivebordet i stedet.
GitHub Desktop åpnes, og du blir bedt om å velge stedet du vil klone til. Dette blir mappen du jobber i frakoblet for å administrere nettstedet ditt, så velg et passende sted og klikk deretter Clone. Alle CMS.js-filene blir trukket ned til den angitte plasseringen, klar til bruk.
Accentsconagua
GH-sider BranchDet neste du trenger er a GH-sider gren i din klonte repo, fordi dette er grenen GitHub API vil tegne innhold fra og dermed er den du trenger å jobbe på nettstedet ditt. Men CMS.js-repoen har allerede en GH-sider gren som den bruker for sin egen prosjektside, så vi må slette det først.
Bytt fra hovedgrenen til GH-sider gren.
Gå til Branch menyen og velg Slett 'gh-sider', bekreft deretter ved å klikke Slett i dialogboksen som dukker opp.
Nå er du fri til å lage din egen GH-sider gren. Klikk på den lille grenikonknappen, skriv "gh-sider" i Navn feltet, klikk deretter Opprett gren.
Når dette er gjort, klikker du på publisere knappen øverst til høyre for å få din nyopprettede gh-sider filial online.
Du har nå din egen GH-sider gren, inne i din egen klon av CMS.js, og du er klar til å gå.
I Finder, eller Windows Utforsker, går du til mappen du klonet inn i.
Tips: Høyreklikk på repo-navnet i den venstre kolonnen, og velg Åpne i Finder eller Åpne i Explorer.
Herfra må du følge det samme neste trinnet du vil hvis du bruker "Server Mode", som er å redigere config-innstillingene dine. Gå inn i "js" -mappen og åpne "config.js" for redigering.
Modusen er allerede satt til 'Github' som standard, slik at du ikke må redigere den innstillingen. Men du må redigere githubUserSettings, (på linje 55 i gjeldende utgivelse).
Sett den første verdien til ditt GitHub brukernavn, og den andre til navnet på repoen du nettopp har opprettet (forkjørt).
Som vi gjorde med "Servermodus", bør du også redigere nettstednavnet ditt, nettsted tagline, nettsted e-postadresse, innstillingene for nettsted forfatternavn.
Hvis du vil sette nav-elementene dine nå, kan du se delen "Rediger Nav-elementer (Valgfritt)" tidligere i denne opplæringen.
Gå nå tilbake til GitHub Desktop, og du bør se en knappavlesning 1 Ubegrenset endring. Dette skyldes at GitHub Desktop har oppdaget endringene av filen "config.js". Hvis du trykker på den aktuelle knappen og ser på koden nedenfor, ser du den grønne endringene du har gjort.
Gi dine endringer et raskt blikk over, og når du er glad, fyll inn den lille skjemaet nede nederst til venstre med en grunnleggende beskrivelse av endringene du begår.
Klikk deretter Forplikte seg til gh-sider. Når det er gjort, klikk på Sync knappen øverst til høyre, (hvor publisere knappen var før), for å få endringene du nettopp har begått lastet opp til din repo.
Du kan kontrollere at endringene i konfigurasjonsfilen din har blitt lastet opp ved å gå til nettsiden for repoene dine GH-sider gren og ser for å se om din forpliktelsesmelding har dukket opp der:
Nå er nettstedet ditt klar til å se! Nettadressen din tar formatet http: //
Gå til webområdet ditt, og sjekk det ut!
Nå som CMS.js-siden din er oppe, kan du begynne å legge til innhold i form av sider og innlegg. Begge disse legges til ved å opprette Markdown (.md) -filer i henhold til sidens respektive sider og mapper.
Det er verdt å være klar over at hvis du ønsker å bruke inline HTML, for oppgaver som å legge til video i innlegg, bør du endre en Markdown-innstilling for nettstedet ditt. På slutten av "config.js" -filen finner du disse innstillingene:
Endring rense fra ekte til falsk for å tillate inline HTML. Hvis du ikke endrer denne innstillingen, vil HTML-innholdet vises som vanlig tekst, snarere enn å bli gjengitt.
For å legge til et innlegg, opprett en Markdown (.md) -fil i mappen "innlegg" og navngi den med et format som kombinerer dato og tittel slik: YYYY-MM-DD_post-title.md. Sørg for at datoen og tittelen er skilt med en underskrift.
For eksempel "2016-08-06_five-minute-blog-setup.md".
Øverst på filen må du legge til noen frontmateriell som spesifiserer posttittelen, og under det som skriver ut innleggets innhold, f.eks..
--- tittel: Dette er et eksempeltittel --- Og innleggets innhold begynner her.
Hvis du vil migrere fra et Jekyll-område, kopier du alle innleggene dine fra sin «_posts» -mappe til CMS.js-nettstedets «innlegg» -mappe. Hvis innleggene dine har bilder i dem, må du ta med den mappen som inneholder dem også.
Merk: Kontroller at filtypen for innleggene dine er ".md" ikke ".markdown".
For å legge til en side opprett en Markdown (.md) -fil i "sider" -mappen. Du trenger ikke en dato i navnet på en sidefil, men filnavnet skal samsvare med tittelen som brukes i sidens forside. Det bør også være bindestreker i filnavnet som svarer til eventuelle mellomrom i sidetittelen.
For eksempel bør en sidefil med navnet "about-me.md" ha dette fremre problemet:
--- tittel: Om meg --- Og sidens innhold begynner her.
Hvis du vil koble til det vi nevnte tidligere, hvis du vil koble til en side fra navets nav-meny, vil Navn Egenskapen som brukes i konfigurasjonsfilen din siteNavItems objektet bør samsvare med sidenes tittel, med mellomrom inkludert:
// Navigasjonsartikler siteNavItems: [name: 'About Me'],
Hvis du migrerer fra et Jekyll-område, kan du kopiere alle dine sider over fra sin rotmappe til CMS.js nettstedets "sider" -mappe. Gi hver enkelt en rask titt over for å sikre at tittelen stemmer overens med filnavnet som beskrevet ovenfor, og at filtypen er ".md" ikke ".markdown".
Å få ditt nye innhold online i servermodus handler bare om å laste opp de nylig lagt til filene til verten din via din foretrukne FTP-klient.
Merk: Det ser ut til å oppdatere eksisterende innhold når det er litt vanskelig i øyeblikket, i "Server Mode", med redigeringer som ikke vises i innhold eller forårsaker at innhold forsvinner sammen. Hvis du jobber i "Server-modus", er det for øyeblikket den beste innsatsen å klargjøre postfilene dine andre steder, og overfør dem til mappen "innlegg" når du er sikker på at de er ferdige.
Å få nytt innhold på nettet er faktisk litt enklere å administrere i "GitHub-modus", fordi du ikke må manuelt holde oversikt over filene du har lagt til eller endret. I stedet kan du bare gå til GitHub Desktop, og det vil automatisk oppdage eventuelle tilføyede eller endrede filer.
Derfra følger du samme prosess du gjorde da du redigerte konfigurasjonsfilen din.
Merk: helt nytt innhold skal dukke opp med en gang, men etter at du har redigert eksisterende innhold, må du kanskje vente litt før du ser endringene dine på ditt nettsted.
Gitt CMS.js er i smaken av Jekyll, finner du mange Jekyll-temaer som passer godt til et CMS.js-nettsted. Som sådan er det mulig å konvertere et Jekyll-tema delvis til bruk på nettstedet ditt. Jekyll har funksjoner CMS.js gjør det ikke, så du vil ikke være i stand til å fullt ut overføre alle funksjonene i noen Jekyll-temaer, men du vil kunne få over en god mengde utseende og følelse.
Når du fullfører denne prosessen, blir det kjent med HTML, CSS og JavaScript, så hvis du føler deg komfortabel med disse tre språkene, kan du konvertere et tema til et skudd. Å gå gjennom de eksakte trinnene for konvertering er utenfor omfanget av denne opplæringen, men den grunnleggende prosessen er:
I dette eksemplet har jeg konvertert "Astro" -temaet til Jekyll og brukt det på dette CMS.js-nettstedet:
Og det er alt som trengs for å sette opp en CMS.js blogg! Hvis du ikke trenger klokkene og fløyter og bare vil ha en rett måte å få en blogg på nettet, får du denne metoden raskt.
Tusen takk til Chris Diana, skaperen av CMS.js, for å skape dette flotte verktøyet og dele det fritt.
Sjekk ut CMS.js for deg selv og ta det for et spinn; du kan finne deg selv en ny favoritt blogging plattform!
