Share
Hva du skal skapeDet har vært en trend med "flat CMS design" webservers. Dette refererer bare til et Content Management System (CMS) som ikke lagrer sin informasjon i en database. I stedet lagres all informasjon i enkle tekstfiler. Siden mange virtuelle private servere (VPS) i disse dager bruker RAM-baserte harddisker, er denne tilnærmingen raskere og litt sikrere.
I denne serien av opplæringsprogrammer vil jeg vise deg hvordan du lager ditt eget flate filsystem CMS ved hjelp av standard webteknologi. Disse systemene er ikke så fullverdige som andre, men har det grunnleggende med en god responstid.
Med all informasjon på harddisken blir filorganisasjonen et stort problem. Med dette i bakhodet vil nettstedinformasjonen være i en annen katalog enn utformingen og oppsettinformasjonen. Også hver type side har sin egen katalog under sidemappen med en delkatalog for små deler av CMS. Dette holder alt på sitt eget sted og gjør et fleksibelt system.
I katalogen der du skal bygge prosjektet, opprett følgende kataloger: src, nettstedet, og temaer. De src katalogen vil inneholde serverkoden, den nettstedet katalogen er for all informasjon om nettstedet, og temaer katalog for layout og temainformasjon.
I temaer katalog, du må lage en oppsett og a styling katalogen. De oppsett katalogen vil inneholde de forskjellige websidelayoutene. Ved å skille layoutinformasjonen fra stylingsinformasjonen blir temaene mye mer fleksible. For nå vil det bli en layout kalt SingleCol.
For alle styling og layout opprettelse, bruker jeg sass, Kompass, og Susy. sass er et språk for behandling av tilpasset stilark. Det gir en mer robust måte å lage CSS stilark for nettstedet ditt. Kompass er en forlengelse til Sass. Sassy-knapper er en Sass-utvidelse for å lage flotte knapper på nettstedet. Susy er også en utvidelse for å opprette et grid layout system for nettstedet ditt.
Siden Ruby er forhåndsinstallert på alle Mac-maskiner, trenger du ikke å installere den. For å få Ruby på et Windows-system, må du laste ned Ruby's Windows Installer. På Linux må du bruke systemets pakkebehandling til å installere Ruby.
Når Ruby er på systemet, kan du installere Sass, Compass, Sassy-knapper og Susy med disse kommandolinjene:
bash gem installasjon sass perle installere sassy-knapper perle installasjon kompass perle installasjon susy
For denne opplæringen bruker jeg Sass 3.4.16, Sassy-knapper 0.2.6, Compass 1.0.3 og Susy 2.2.5. Avhengig av systemets konfigurasjon, må du kanskje kjøre disse kommandoene med sudo før dem.
For å komme i gang med å lage oppsett, kjør disse kommandoene i SingleCol katalogen:
bash kompass init
Dette vil skape sass og stilark kataloger og en fil som heter config.rb. Siden jeg liker å bruke css For stilarkatalogen, endre navn på stilark katalog til css. Lag også en js katalog for eventuelle nødvendige JavaScript-filer for oppsettet. Åpne config.rb fil og få det til å se slik ut:
ruby krever 'susy' http_path = "/" css_dir = "css" sass_dir = "sass" images_dir = "bilder" javascripts_dir = "js"
Nå, for å lage grunnleggende layout på nettstedet, opprett en fil i oppsett katalog kalt template.html. I denne filen legger du til denne koden:
"html
"
Denne malen oppretter en standard nettside for nettstedet. Hver side har en header med en navigeringslinje, et enkelt sidebar, et innholdsområde og et bunntekstområde. Den siste lasten er javascripts som trengs for nettstedet.
Hver seksjon er representert med en styre makro. Serveren utvider makroene før den blir gitt til brukeren.
I sass katalog, opprett en fil som heter base.scss og plasser denne koden:
"css @ import" kompass / reset '; @import' susy ';
$ susy: (flyt: ltr, matte: fluid, utgang: flyt, gutterposisjon: etter, container: auto, beholderposisjon: senter, kolonner: 16, takrenner: .25, kolonnebredde: falsk, global boks -formatering: innholds boks, siste strøm: til, feilsøking: (bilde: skjul, farge: rgba (# 66f, .25), utgang: bakgrunn, veksle: øverst til høyre,), bruk-tilpasset: : true, background-options: false, box-size: true, clearfix: false, rem: true,));
kropp
inkludere beholder (16); bredde: 1024px; skjerm: blokk;
@include span (16 av 16); margin-bunn: 20px;
margin-topp: 20px; margin-left: auto; margin-høyre: auto; bredde: 95%;
@include span (11 av 16);
.col1 @include span (5 av 10);
.col2 @include span (siste 5 av 10);
bredde: auto;
.boks @include span (4 av 10);
@include span (siste 4 av 16);
@include span (16 av 16);
/ ** CSS dropdown-menyen ** /
margin-topp: 20px; margin-left: auto; margin-høyre: auto; bredde: 95%;
topp: 1em; igjen: 1em; skjerm: inline; bredde: 100%;
margin-topp: 1em; skjerm: inline; bredde: 100%;
display: inline-block; Bredde: Fit-Content;
text-align: center; display: block; white-space: NOWRAP; margin: 0; polstring: 5px; tekst-dekorasjon: ingen;
listestil: none; margin: 0px 20px 0px 20px; polstring: 0px;
posisjon: relativ; min høyde: 1px; vertikaljustering: bunn; Bredde: Fit-Content;
posisjon: absolutt; z-indeks: 500; topp: 50px; venstre: 20px; skjerm: ingen; polstring: 0.5em; margin: -1em 0 0 -1em;
#menuh ul ul li bredde: 100%;
tekstjustering: venstre;
venstre: 90px;
div # meny li: svever markør: pointer; z-index: 100;
div # meny li: svever ul ul, div # meny li li: svever ul ul, div # meny li li li: svever ul ul, div # meny li li li li: sveve ul ul display: none;
div # meny li: sveve ul, div # meny li li: sveve ul, div # meny li li li: sveve ul, div # meny li li li li: sveve ul display: block;
/ * Slutt CSS Drop Down Menu * / "
Dette sass kodebelastninger i kompass-reset-stilene for å nøytralisere nettleserens standardinnstillinger. Så laster den og setter opp susy for å skape riktig gridoppsett for alle elementene på nettsiden.
De css navigasjonssystemet er etter at siden har definert. De skjulte rullegardinmenyene for menyene blir synlige med mus-over-definisjoner. Dette gir en css kun menysystem.
Alle disse stilene definerer grunnstrukturen på nettstedet. Ingenting her skaper en titt på siden, bare posisjoneringen. Alle styling blir håndtert av styling innhold.
For styling katalog, opprett en katalog som heter grunn~~POS=TRUNC. Initialiser sass informasjon som gjort for oppsett / SingleCol katalogen. I denne katalogen kjører du følgende kommandolinje:
bash kompass init
Dette vil skape sass og stilark kataloger og en fil som heter config.rb. Siden jeg liker å bruke css For stilarkatalogen, endre navn på stilark katalog til css. Lag også en js katalog for noe JavaScript for å lage temaet. Åpne config.rb fil og få det til å se slik ut:
ruby krever 'sassy-knapper' http_path = "/" css_dir = "css" sass_dir = "sass" images_dir = "bilder" javascripts_dir = "js"
For styling knapper på nettstedet, liker jeg å bruke Sassy-knapper. Derfor er det nødvendig først, og deretter katalogstrukturen.
I Basic / sass katalog, opprett Basic.scss fil med denne informasjonen:
"css // Velkommen til kompass. // I denne filen skal du skrive dine hovedtyper. (eller sentralisere importen din) // Importer denne filen ved hjelp av følgende HTML eller tilsvarende: // // @import 'kompass / css3'; @import sassy-knapper ';
$ style-color1: rgb (247, 237, 222); $ style-color2: # ffedd1; $ style-color3: rgb (245, 213, 166); $ style-color4: # f0d5ad;
// // Clear Fix // .clearfix: etter innhold: '.'; skjerm: blokk; klare: begge; synlighet: skjult; linjehøyde: 0; høyde: 0;
.clearfix display: inline-block;
html [xmlns] .clearfix display: block;
// // Main Styling for Wood. // @mixin standardize padding-top: 10px; polstring-venstre: 15px; skriftstørrelse: 19px; linjehøyde: 1,25em;
kropp bakgrunnsfarge: $ style-color2;
Accentsconagua
input [type = 'button'] @include sassy-knappen ('skinnende', 10px, 16px, $ style-color1, mørkere ($ style-color1, 20%), # 000, fet); . knapp @include sassy-knappen ('skinnende', 10px, 16px, $ style-color1, mørkere ($ style-color1, 20%), # 000, fet); skjerm: arve; margin-left: auto; margin-høyre: auto; margin-topp: 10px; margin-bunn: 10px; tekst-align: center; #wrap bakgrunnsfarge: $ style-color1; @include border-radius (.6em, .6em); margin-topp: 10px; margin-bunn: 10px; grense: 4px solid $ style-color4; #header bakgrunnsfarge: $ style-color2; @include border-radius (15px); bakgrunn-gjentak: ikke-gjenta; grense: 2px solid $ style-color3; høyde: 130px; tekstjustering: venstre; margin-topp: 20px; skriftstørrelse: 3em; h1 a: link, a: besøkt farge: # 000; tekst-dekorasjon: ingen; polstringstopp: 40px; polstring-venstre: 20px; h6 font-size: .4em; font-style: kursiv; polstring-venstre: 20px; #sidebar bakgrunnsfarge: $ style-color2; @include border-radius (.6em, .6em); polstring: .6em; vertikaljustering: tekst-topp; overløp: skjult; margin-høyre: .5em; grense: 2px solid $ style-color3; hr color: $ style-color2; bakgrunnsfarge: $ style-color2; p, ul, li @include standardize; ul li listestil-type: plate; margin-venstre: 25px; polstring: 0; grense: 0; oversikt: 0; skriftstørrelse: 100%; vertikaljustering: basislinje; bakgrunn: gjennomsiktig; li margin-bottom: 10px; h1, h2, h3, h4, h5, h6 @include standardize; font-weight: bold; margin-topp: .25em; margin-bunn: .25em; h1 font-size: 2.5em; h2 font-size: 2em; h3 font-size: 1.5em; h4 font-size: 1em; h5 font-size: .8em; h6 font-size: .6em; input [type = 'button'] margin-left: 120px; klare: begge; #content input [type = 'button'] margin-left: 200px; klare: begge; h1, h2, h3, h4, h5, h6 @include standardize; font-weight: bold; margin-topp: .25em; margin-bunn: .25em; h1 font-size: 2.5em; h2 font-size: 2em; h3 font-size: 1.5em; h4 font-size: 1em; h5 font-size: .8em; h6 font-size: .6em; hr margin-top: 30px; margin-bunn: 30px; p, ul, li, detaljer, sammendrag, pre @include standardize; detaljer p, pre margin-left: 25px; ul li liste-stil-type: plate; margin-venstre: 25px; polstring: 0; grense: 0; oversikt: 0; skriftstørrelse: 100%; vertikaljustering: basislinje; bakgrunn: gjennomsiktig; li margin-bottom: 10px; .box clear: both; bakgrunnsfarge: $ style-color4; flyte: ingen; margin-left: auto; margin-høyre: auto; margin-topp: 1.0em; margin-bunn: 1em; @include border-radius (.6em, .6em); skjerm: blokk; polstring: .5em; img @ include border-radius (10px); margin: 20px auto 20px auto; #footer border-top: 5px; border-style: solid; border-farge: $ style-color3; @include border-radius (.6em, .6em); margin-topp: 30px; p margin-bunn: .6em; @include standardize; margin-høyre: 15px; // CSS dropdown menyen #navigation text-align: left; grense: 2px solid $ style-color3; bakgrunnsfarge: $ style-color2; @include border-radius (15px);
fontstørrelse: 1.3em; font-familie: arial, helvetica, sans-serif; bakgrunnsfarge: $ style-color1;
bakgrunnsfarge: $ style-color2;
bakgrunnsfarge: $ style-color2; @include border-radius (15px); grense: 2px solid $ style-color3;
bakgrunnsfarge: $ style-color2; farge: # 000;
farge: # 000; bakgrunnsfarge: $ style-color2;
farge: # 000; bakgrunnsfarge: $ style-color4; @include border-radius (5px);
// End CSS Drop Down Menu // Diverse klasser. Bilde border: 3px solid $ style-color3; @include border-radius (8px); flyte: venstre; margin: 5px 15px 15px 15px;
a: link, a: besøkt color: darken ($ style-color1, 50); tekst-dekorasjon: ingen;
sterk font-weight: bold;
bord margin: 20px; grense: 3px solid; @include border-radius (10px); border-color: lighten ($ style-color2, 6); th text-align: center; font-weight: bold; polstring: 10px 0 10px 0; tbody td polstring: 10px; tr: nth-barn (2n + 1) bakgrunnsfarge: mørkere ($ style-color2, 5); tr: nth-barn (jevn) bakgrunnsfarge: lyser ($ stil-farge2, 2,5);
bredde: 100%; margin-topp: 20px; margin-venstre: 15px;
.tutorial_excerpt margin-left: 20px;
.tutorial_thumbnail float: left; margin-høyre: 20px; margin-venstre: 20px; margin-bunn: 20px;
.tutorial_wrap margin-bottom: 50px; flyte: venstre;
img.wp-post-image -moz-border-radius: 15px; border-radius: 15px; boks-skygge: 10px 10px 5px grå;
.showcode margin: 20px auto 20px 30px; -moz-grense-radius: 15px; border-radius: 15px; border: $ style-color4 3px; border-style: solid; bakgrunn: hvit;
bredde: 700px; margin-topp: 20px; margin-venstre: 15px;
margin: auto;
opasitet: 0,8; filter: alfa (opasitet = 80); -webkit-overgang: alt lett-in-out 0.2s; -moz-overgang: alt lett-in-out 0.2s; -ms-overgang: alt lett-in-out 0.2s; -o-overgang: alt lett-in-out 0.2s; Overgang: Alt lett-i-ut 0,2s;
opasitet: 1; filter: alfa (opasitet = 100);
display: inline-block; høyde: 28px; bredde: 30px; bakgrunnsbilde: url (/images/ico-subscribe-social.png); bakgrunn-gjentak: ikke-gjenta;
bakgrunnsposisjon: -30px 0;
bakgrunnsposisjon: -60px 0;
bakgrunnsposisjon: -210px 0;
dl margin-left: 20px; margin-topp: 20px; margin-bunn: 20px; skriftstørrelse: 19px; linjehøyde: 1,25em;
dt margin-left: 20px; margin-bunn: 20px; font-weight: bold;
dd margin-left: 40px; margin-bunn: 20px; "
Denne koden definerer hvordan nettstedet skal se ut. Det definerer bakgrunnen, fargene, skrifter, etc. som utgjør stylingen til et typisk nettsted.
De styling / Basic katalog inneholder filene som trengs for standard utseendet på sidene 404 sider, topptekst, bunntekst og sidebar på nettstedet. Opprett derfor en fil som heter 404.html og plasser denne koden:
"html
Beklager, vi kunne ikke finne siden.
"
Dette er en grunnleggende 404 feil side. Du må være forsiktig med informasjonen som er oppgitt her, da du ikke vil avsløre for mye informasjon om hvordan nettstedet fungerer. Siden dette vil bli plassert i innhold område på siden, vil det være enkelt for brukeren å navigere bort fra den.
Deretter lager du header.html fil med dette innholdet:
"html
"
Dette er bare en bare-bones header som ikke er beskrivende, men det gir CMS noe å vise.
Deretter lager du footer.html fil med dette innholdet:
"html
"Lag deretter filen ** sidebar.html ** med dette innholdet:" htmlDette er en grunnleggende sidebar som kan ha andre tider.
"Igjen, dette er plassholdere. Alle disse filene blir kopiert til katalogen ** site / parts ** og endret i henhold til nettstedets behov. Dette er her slik at serveren har noe med navnene deres til å bruke på serveren Hvis brukeren glemmer å opprette dem. ## Nettstedsstruktur Med de definerte temaer og layouter er det på tide å lage grunnleggende innhold og struktur for det aktuelle nettstedet. Opprett ** deler i katalogen ** side ** *, ** sider **, ** innlegg **, ** bilder **, ** css **, ** js ** kataloger. ### Deler ** deler ** katalogen vil inneholde små utdrag av * * html / css / javascript ** som vil gjøre en enkelt enhet plassert i flere steder på nettstedet. Disse delene lastes inn i serveren og kombineres med sidens innhold etter behov. For vårt demo-nettsted, opprett følgende deler: - * * footer.html ** med denne koden: "html "- ** head.html ** med denne koden:" html "- ** header.html ** med denne koden:" htmlDette er hovedsiden til teststedet.
"- ** flatcms.md ** med denne koden:" vanlig ### Flat CMS Server Dette er en side om den flate CMS-serveren. "- ** about.md ** med denne koden:" plain ### Om Dette vil være en standard om siden. "Dette er demo-sidene for nettstedet. Den eneste nødvendige filen er ** main.html ** som serveren vil laste inn dette sidens innhold i minnet og tjene fra minnet. Dette bidrar til å øke hastigheten Lastingen av forsiden av nettstedet. De andre to sidene har ** md ** -utvidelsen fordi de er i ** Markdown ** -format. Serveren vil oversette innholdet til HTML før det legges inn i sidelayout. , sidene inneholder informasjon som ikke endres mye over tid. De gir seeren informasjon om nettstedet, dens formål og mål. Sider kan være hierarkiske i naturen ved å lage kataloger og underkataloger med sider. Disse katalognavnene oppretter adressene til postene i disse sidene. ### Innlegg I motsetning til sider er innlegg elementer som blir lagt til regelmessig, for eksempel daglige / ukentlige / månedlige blogginnlegg og nyheter. Dette området forventes å endres ofte. I ** posten ** -katalogen, opprett to nye kataloger: ** blogger ** og ** nyheter **. I hver av disse katalogene lager du en katalog ** flatcms **. Disse vil inneholde blogginnlegg og nyhetsartikler for ** Flat CMS ** nettstedet. I katalogen ** innlegg / blogger / flatcms **, opprett følgende filer: - ** index.amber ** med dette innholdet: "plain h3 Flat CMS Blog p Dette er en ramblende blogg om en flat CMS. $ title, $ link, $ utdrag, $ date) div.entry div.tutorial_wrap div.tutorial_div en [href = $ link] h3 # $ title h5 # $ date p.tutorial_excerpt # $ excerpt div. Clear + article ("Flat CMS Running", "/ innlegg / blogger / flatcms / flatcms", "Flat CMS Test Server kjører!", "12 august 2015") "- ** flatcms.md ** med dette innholdet : "ren Den nye serveren kjører ---- Etter mye arbeid og programmering kjører den flate CMS-serveren. Hold deg oppdatert for flere nyheter! socialmedia" ** index.amber ** er en * * [Jade] (http://jade-lang.com/) ** mal for å definere de forskjellige innleggene i bloggen. ** Jade ** HTML-malsystemet gjør det enkelt å legge til nytt innhold med et eksakt format. Parametrene til makroene utgjør de forskjellige elementene. Du finner mer informasjon om [Jade on Tuts +] (https://webdesign.tutsplus.com/categories/jade). Her er utvidelsen brukt ** rav ** fordi ** Go språk ** tilsvarende ** Jade ** er ** [Amber] (https://github.com/eknkc/amber) **. Siden det var der jeg startet, så gjorde jeg det. Hvis du vil endre utvidelsen, husk å endre den i riktig serverkode også. I katalogen ** innlegg / nyheter / flatcms **, opprett følgende filer: - ** index.amber ** med dette innholdet: "plain h3 Flat CMS News p Her finner du alle nyheter om hva jeg gjør Vennligst kom tilbake ofte for å sjekke det ut! Mixin artikkel ($ title, $ link, $ utdrag, $ date) div.entry div.tutorial_wrap div.tutorial_div en [href = $ link] h3 # $ title h5 # $ date p.tutorial_excerpt # $ excerpt div.clear + artikkelen ("Flat CMS kjører", "/ innlegg / nyheter / flatcms / flatcms", "Flat CMS Test Server kjører!", "12. august, 2015 ")" - ** flatcms.md ** med dette innholdet: "ren Den nye serveren kjører ---- Etter mye arbeid og programmering har jeg endelig alt flyttet til en goPress-server som jeg skrev selv. Jeg vil gjør dette tilgjengelig for deg også. Hold deg oppdatert! socialmedia "Dette lager nyhetsartikler for demoområdet. På min side bruker jeg samme struktur for opplæringsprogrammer og kodedemosider. ### Bilder Alle nettsteder har bilder. I dette oppsettet er alle bildene i katalogen ** site / images **. For dette demonstrasjonsstedet vil bare de sosiale medier-ikonene bli plassert her. Du kan få bildefilen fra nedlastingsfilen. ### Site CSS Selv med ** layout css ** og ** styling css **, vil det være ganger du vil ha spesielle ** css ** regler. Katalogen ** site / css ** inneholder alle ** css ** -filer som legger de siste detaljene på nettsiden. Alle ** ** layout **, ** styling **, og ** site / css ** filer vil bli samlet sammen i en ** css ** fil. Opprett derfor ** katalogen ** site / css / final ** for å plassere denne kompilerte filen. Nå lager du filen ** site / css / site.css ** med dette innholdet: "css .clear clear: both; height: 0px;" Ikke mye her - bare en definisjon for en "klar" klasse. Du kan legge til hva du vil, men det bør være noe som ikke faller inn i layout eller styling kategorien. ### Nettstedskript ** -siden / js ** -katalogen inneholder alle spesielle JavaScript-filer for nettstedet. Disse blir samlet sammen og minimert for raskere lasting av laster. For øyeblikket lager du ** -siden / js / final ** -katalogen for det kompilerte skriptet og en ** site / js / 01-site.js ** -fil med dette innholdet: "javascript; // // File: Site. js // // Beskrivelse: JavaScript-filen for nettstedet. // jQuery (dokument) .ready (function () // // Koden her vil bli løp når en side er lastet. //); "Det er ikke mye her akkurat nå. Men siden nettstedet ditt trenger tilpasset JavaScript, kan den plasseres her. Siden skriptene blir samlet sammen, nummererer jeg dem i den rekkefølgen som er nødvendig for lasting. Rutinen for å kompilere skriptene sammen vil laste dem i numerisk rekkefølge. ### Automatisering Med Gulp Den enkleste måten å øke hastigheten på en nettsidebelastning er å ha så få HTTP-forespørsler som mulig. Derfor er det best å kombinere alle CSS- og JavaScript-filer til én fil hver. Den beste måten å kompilere disse filene på er med et byggeskript. Å utføre det hver gang serveren mottar en forespørsel, er bortkastet behandlingstid. Mitt valg av automatiseringsskriptløpere er ** [Gulp] (http://gulpjs.com/) **. ** Gulp ** kjører på ** [Node.js] (https://nodejs.org/) **. Derfor, gå til [Node.js nettsted] (https://nodejs.org/) og last ned programmet for systemet ditt. Når du har installert Node.js, kan du installere ** Gulp ** med følgende: "bash npm install - global gulp npm installere - global gulp npm installere - global gulp-kompass npm installere - global gulp-autoprefixer npm install - global gulp-kompressor npm installere - global gulp-concat "Dette vil installere alle ** Gulp ** og ** Gulp ** modulene som jeg bruker i byggeskriptet. Nå, øverst i katalogen, opprett filen ** gulpfile.js ** med dette innholdet: "javascript // Krav var gulp = krever ('gulp'), kompass = krever ('gulp-kompass'), prefiks = krever ('gulp-autoprefixer'), kompressor = krever ('gulp-kompressor'), concat = krever ('gulp-concat'); // Definerer sti til sass var Tema = "Grunnleggende"; Var Layout = "SingleCol "; var themesassRoot = 'temaer / styling /' + Theme; var layoutsassRoot = 'temaer / layouts /' + Layout; // Gulp-oppgave gulp.task ('tema-kompass-til-css', funksjon .src (themesassRoot + '/ sass / Basic.scss') .pipe (kompass (config_file: themesassRoot + '/config.rb', css: themesassRoot + '/ css', sass: themesassRoot + '/ sass' 'sassy-knapper')) .pipe (prefix ("siste 3 versjoner")) .pipe (gulp.dest (themesassRoot + '/ css'))); gulp.task ('layout-kompass-til-css ', funksjon () return gulp.src (layoutsassRoot +' / sass / base.scss '). pipe (kompass (config_file: layoutsassRoot +' /config.rb ', css: layoutsassRoot +' / css ', sass: layoutsassRoot + '/ sass', krever: 'susy') .pipe (prefix ("siste 3 versjoner")). pip (gulp.dest (layoutsassRoot + '/ css'))); gulp.task ('watch-compass', funksjon () // Hva å se gulp.watch (themesassRoot + '/sass/Basic.scss', funksjon () // Hva skal du kjøre gulp.run ('theme- kompass-til-css ');); gulp.watch (layoutsassRoot +' /sass/Basic.scss ', funksjon () // Hva kjører gulp.run (' layout-kompass-til-css '); );; gulp.task ('all-compass', ['tema-kompass-til-css', 'layout-kompass-til-css']); // js kompressor gulp.task ('js', funksjon () gulp.src ([layoutsassRoot + '/ js / *. js', themesassRoot + '/js/*.js', 'site / js / *. jp '). pipe (kompressor ()). pipe (concat ("final.js")). pipe (gulp.dest (' site / js / final '));); // css kompressor gulp.task ('css', ['all-compass'], funksjon () gulp.src ([layoutsassRoot + '/ css / *. css', themesassRoot + '/css/*.css' , 'site / css / *. css')) .pipe (kompressor ()). pip (concat ("final.css")). pip (gulp.dest ('site / css / final')) ; gulp.task ('standard', ['all-compass', 'js', 'css']); "Dette vil kompilere alle CSS og JavaScript i en enkelt fil: i ** site / css / final / final.css ** -fil for CSS, og i filen ** site / js / final / final.js ** for JavaScript. Det vil også legge til prefiksreglene for nettleseren for CSS. Bare kjør i toppkatalogen på kommando: "bash gulp" ** Gulp ** vil kompilere alle våre filer og legge dem på riktig sted. Hver oppgave definert i ** gulpfile.js ** kan kjøres individuelt ved å gi oppgavenavnet etter "gulp" '. Du kan lære mer om [Gulp on Tuts +] (https://webdesign.tutsplus.com/categories/gulpjs). ## Serverkonfigurasjonsfil Alle servere trenger konfigurasjonsinformasjon. Derfor, i roten til katalogen, opprett filen ** server.json ** med denne informasjonen: "json " CurrentLayout ":" SingleCol "," CurrentStyling ":" Basic "," ServerAddress ":" localhost: 8080 "," SiteTitle ":" Flat CMS Test Site "," Sitebase ":" ./site/ "," TemplatBase ":" ./themes/ "," Cache ": false, "MainBase": "" "Denne ** json ** -filen beskriver informasjon om utformingen som skal brukes, stylingen som skal brukes, adressen og porten serveren skal lytte til, hovednavnet for nettstedet med en undertittel, et caching-flagg for å slå på og av caching for feilsøking, og plasseringen av de forskjellige katalogene som brukes til nettstedet. Ved å levere denne informasjonen til serveren i en ** json ** -fil, kan serveren være fleksibel, med mindre hardkodet informasjon. ## Last opp nettstedet til en server De fleste bruker en FTP-klient for å kopiere filene til serveren. Dette er enkelt å gjøre, men varierer sterkt med hensyn til systemet og programmene som brukes. Men det er noen alternativer. Du kan sette opp en ** [Dropbox] (http://dropbox.com/) ** daemon for å laste nettstedet ditt fra Dropbox-kontoen din. [Dropbox Wiki] (http://www.dropboxwiki.com/tips-and-tricks/install-dropbox-in-an-entirely-text-based-linux-environment) nettstedet har detaljerte instruksjoner for å sette opp dette. Det eneste problemet er at filene automatisk lastes opp til serveren når du gjør noen endringer. Noen ganger vil du ønsker å gjøre endringer uten at de skal til serveren. Hvis dette er tilfelle, ha en ikke-Dropbox-plassering av alle nettstedets filer og en Dropbox-plassering også. Når du er ferdig, opprett en oppgave i ** Gulp ** -filen din for å kopiere de nye nettstedene til ** Dropbox ** -posisjonen. ! [Dropzone 3 Setup for CMS Uploading] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F71%2Fposts%2F24547%2Fimage-1438683734928.jpg) Dropzone 3 Oppsett for CMS Uploading Min foretrukne tilnærming er å bruke ** [Dropzone 3] (https://aptonic.com/dropzone3/) **. Du kan programmere ** Dropzone 3 ** med ** Ruby ** eller ** Python ** for å utføre enhver type handling på en fil som er tapt på den. Det har også mange innebygde funksjoner. Det er en filhandling innebygd for opplasting til et FTP / SFTP-nettsted. Jeg lager en ** Dropzone 3 ** mål for hver av hovedkatalogene på nettstedet mitt. Da, når jeg vil endre eller legge til en fil, drar jeg det bare til det riktige katalogen dropzone målet. Du kan lære mer om ** Dropzone 3 ** med min veiledning [Skrive Dropzone 3 Handlinger] (https://computers.tutsplus.com/tutorials/writing-dropzone-3-actions--cms-21590). ## Konklusjon Disse grunnleggende filene vil opprette et nettsted som ser slik ut:! [Demo Site i nettleser] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F71%2Fposts%2F24547%2Fimage-1438683452983.jpg ) Demo Site i nettleser Dette er bare begynnelsen! Nå, med nettstedstrukturen lagt ut, er det på tide å begynne å bygge webservere. Vennligst bli med meg i neste opplæring hvor jeg skal bygge en ** [Go language] (https://golang.org/) ** -basert webserver for dette demo-nettstedet.