Share
Vad du ska skapaDet har funnits en trend med "webbläsare med platt CMS design". Detta hänvisar helt enkelt till ett Content Management System (CMS) som inte lagrar sin information i en databas. Istället lagras all information i vanliga textfiler. Eftersom många virtuella privata servrar (VPS) idag använder RAM-baserade hårddiskar, är detta tillvägagångssätt snabbare och lite säkrare.
I den här serien av handledning kommer jag att visa dig hur du skapar ditt eget platta filsystem CMS med hjälp av standard webbteknologi. Dessa system är inte så fulla som andra, men har grunderna med en bra responstid.
Med all information på hårddisken blir filorganisationen en stor fråga. Med tanke på detta kommer platsinformationen att vara i en annan katalog än utformningen och layoutinformationen. Dessutom har varje typ av sida en egen katalog under sidmappen med en delkatalog för små delar av CMS. Detta håller allt på sin plats och gör ett flexibelt system.
I katalogen där du ska bygga projektet skapar du följande kataloger: src, webbplats, och teman. De src katalogen innehåller serverns kod, den webbplats katalogen är för all webbplatsinformation och teman katalog för layout och teman information.
I teman katalog, du måste göra en layouter och a styling katalogen. De layouter katalogen innehåller de olika webbsidlayouterna. Genom att skilja layoutinformationen från stylinginformationen blir teman mycket flexiblare. För nu kommer det att finnas en layout som heter SingleCol.
För alla styling och layout skapande, använder jag sass, Kompass, och Susy. sass är ett bearbetningsspråk för Custom Style Sheet. Det ger ett mer robust sätt att skapa CSS stilark för din webbplats. Kompass är en förlängning till Sass. Sassy knappar är en Sass-förlängning för att göra snygga knappar på webbplatsen. Susy är också en förlängning för att skapa ett rutnätlayoutsystem för din webbplats.
Eftersom Ruby är förinstallerad på alla Mac-datorer behöver du inte installera den. För att få Ruby på ett Windows-system måste du ladda ner Ruby's Windows Installer. På Linux måste du använda systemets pakethanterare för att installera Ruby.
När Ruby är på ditt system kan du installera Sass, Compass, Sassy-knappar och Susy med följande kommandoreder:
bash pärla installera sass pärla installera sassy-knappar pärla installera kompass pärla installera susy
För denna handledning använder jag Sass 3.4.16, Sassy-knappar 0.2.6, Kompass 1.0.3 och Susy 2.2.5. Beroende på systemets konfiguration kan du behöva köra dessa kommandon med sudo före dem.
För att komma igång med att skapa layouter, kör dessa kommandon i SingleCol katalogen:
bash kompass init
Detta kommer att skapa sass och formatmallar kataloger och en fil som heter config.rb. Eftersom jag gillar att använda css för stilarkatalogen, byt namn på formatmallar katalog till css. Skapa också en js katalog för alla nödvändiga JavaScript-filer för layouten. Öppna config.rb filen och få den att se ut som den här:
ruby kräver 'susy' http_path = "/" css_dir = "css" sass_dir = "sass" images_dir = "bilder" javascripts_dir = "js"
Nu, för att skapa webbsidans grundläggande layout, skapa en fil i layout katalog heter template.html. I den här filen lägger du till den här koden:
"html
"
Denna mall skapar en vanlig webbsida för webbplatsen. Varje sida har en rubrik med en navigeringsfält, ett enda sidofält, ett innehållsområde och ett sidfält. Den sista läsaren är den javascripts som behövs för webbplatsen.
Varje sektion är representerad av a styre makro. Servern expanderar makronen innan den lämnas till användaren.
I sass katalog, skapa en fil som heter base.scss och placera den här koden:
"css @ import" kompass / återställning "; @import" susy ";
$ susy: (flöde: ltr, matte: vätska, utgång: flyta, gutterposition: efter, behållare: auto, behållarposition: centrum, kolumner: 16, rännor: .25, kolonnbredd: falskt, globalt -formatering: innehållsruta, sista flöde: till, felsökning: (bild: gömma, färg: rgba (# 66f, .25), utgång: bakgrund, växla: högra höger), användningsanpassad: : true, background-options: false, box-size: true, clearfix: false, rem: true,));
kropp
@ innehåller behållare (16); bredd: 1024px; display: block;
@include span (16 av 16); marginalbotten: 20px;
marginal-topp: 20px; marginal-vänster: auto; marginal-höger: auto; bredd: 95%;
@include span (11 av 16);
.col1 @include span (5 av 10);
.col2 @include span (sista 5 av 10);
bredd: auto;
.box @include span (4 av 10);
@include span (sista 4 av 16);
@include span (16 av 16);
/ ** CSS-rullgardinsmenyn ** /
marginal-topp: 20px; marginal-vänster: auto; marginal-höger: auto; bredd: 95%;
topp: 1em; vänster: 1em; display: inline; bredd: 100%;
margin-top: 1em; display: inline; bredd: 100%;
display: inline-block; bredd: passform-innehåll
text-align: center; display: block; white-space: nowrap; marginal: 0; vaddering: 5px; text-dekoration: ingen;
list-style: none; marginal: 0px 20px 0px 20px; vaddering: 0px;
position: relativ; minhöjd: 1px; vertikaljustering: botten; bredd: passform-innehåll
position: absolute; z-index: 500; topp: 50px; vänster: 20px; display: none; vaddering: 0,5em; marginal: -1em 0 0 -1em;
#menuh ul ul li bredd: 100%;
text-align: left;
vänster: 90px;
div # menh li: sväva markör: pekare; z-index: 100;
div # meny li: sväva ul ul, div # meny li li: sväva ul ul, div # meny li li li: sväva ul ul, div # meny li li li li: sväva ul ul display: none;
div # meny li: sväva ul, div # meny li li: sväva ul, div # meny li li li: sväva ul, div # meny li li li li: sväva ul display: block;
/ * Avsluta CSS Drop Down-menyn * / "
Detta sass kodbelastningar i kompassåterställningsstilarna för att neutralisera webbläsarens standardinställningar. Sedan laddar den och sätter upp susy för att skapa rätt gridlayout för alla element på webbsidan.
De css navigationssystemet är efter att sidan definierats. De dolda nedrullningarna för menyerna blir synliga med mus-över-definitioner. Detta ger en css endast menysystem.
Alla dessa stilar definierar webbplatsens grundläggande struktur. Inget här skapar en titt på sidan, bara dess positionering. All styling hanteras av styling innehåll.
För styling katalog, skapa en katalog som heter Grundläggande. Initiera sass information som gjort för layouter / SingleCol katalogen. I den här katalogen kör följande kommandorad:
bash kompass init
Detta kommer att skapa sass och formatmallar kataloger och en fil som heter config.rb. Eftersom jag gillar att använda css för stilarkatalogen, byt namn på formatmallar katalog till css. Skapa också en js katalog för någon JavaScript för att skapa temat. Öppna config.rb filen och få den att se ut som den här:
rubin kräver "sassy-knappar" http_path = "/" css_dir = "css" sass_dir = "sass" images_dir = "bilder" javascripts_dir = "js"
För stylingknappar på webbplatsen gillar jag att använda sassy knappar. Därför krävs det först och sedan katalogstrukturen.
I Basic / sass katalog, skapa Basic.scss filen med den här informationen:
"css // Välkommen till Kompass. // I den här filen ska du skriva dina huvudstilar. (eller centralisera din import) // Importera den här filen med följande HTML eller motsvarande: // // @import 'kompass / css3'; @import sassy-knappar ';
$ style-color1: rgb (247, 237, 222); $ style-color2: # ffedd1; $ style-color3: rgb (245, 213, 166); $ style-color4: # f0d5ad;
// // Clear Fix // .clearfix: efter innehåll: '.'; display: block; klara: båda; synlighet: gömd; linjehöjd: 0; höjd: 0;
.clearfix display: inline-block;
html [xmlns] .clearfix display: block;
// // Main Styling for Wood. // @mixin standardize padding-top: 10px; stoppning-vänster: 15px; fontstorlek: 19px; linjehöjd: 1,25em;
kropp bakgrundsfärg: $ style-color2;
Accentsconagua
skriv in [typ = 'knapp'] @ inkludera sassy-knappen ('blank', 10px, 16px, $ style-color1, mörkare ($ style-color1, 20%), # 000, fetstil); .knappen @include sassy-knappen ('blank', 10px, 16px, $ style-color1, mörkare ($ style-color1, 20%), # 000, fetstil); display: ärv; marginal-vänster: auto; marginal-höger: auto; marginal-topp: 10px; marginal-botten: 10px; text-align: center; #wrap bakgrundsfärg: $ style-color1; @ include border-radius (.6em, .6em); marginal-topp: 10px; marginal-botten: 10px; gräns: 4px solid $ style-color4; #header bakgrundsfärg: $ style-color2; @ include border-radius (15px); background-repeat: no-repeat; gränsen: 2px solid $ style-color3; höjd: 130px; text-align: left; marginal-topp: 20px; typsnittstorlek: 3em; h1 a: länk, a: besökte färg: # 000; text-dekoration: ingen; vadderingstopp: 40px; stoppning-vänster: 20px; h6 font-size: .4em; typsnittstyp: kursiv; stoppning-vänster: 20px; #sidebar bakgrundsfärg: $ style-color2; @ include border-radius (.6em, .6em); vaddering: .6em; vertikaljustering: text-top; överflöde: gömd; marginal-höger: .5em; gränsen: 2px solid $ style-color3; hr färg: $ style-color2; bakgrundsfärg: $ style-color2; p, ul, li @include standardize; ul li list-stil-typ: skiva; marginal-vänster: 25px; vaddering: 0; gräns: 0; kontur: 0; typsnittstorlek: 100%; vertikaljustering: baslinje; bakgrund: transparent; li margin-bottom: 10px; h1, h2, h3, h4, h5, h6 @ include standardize; font-weight: bold; margin-top: .25em; marginalbotten: .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; inmatning [typ = 'knapp'] margin-left: 120px; klara: båda; #content input [type = 'button'] margin-left: 200px; klara: båda; h1, h2, h3, h4, h5, h6 @ include standardize; font-weight: bold; margin-top: .25em; marginalbotten: .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; marginalbotten: 30px; p, ul, li, detaljer, sammanfattning, före @include standardize; detaljer p, före margin-left: 25px; ul li list-style-type: disc; marginal-vänster: 25px; vaddering: 0; gräns: 0; kontur: 0; typsnittstorlek: 100%; vertikaljustering: baslinje; bakgrund: transparent; li margin-bottom: 10px; .box clear: both; bakgrundsfärg: $ style-color4; float: none; marginal-vänster: auto; marginal-höger: auto; margin-top: 1.0em; marginal-botten: 1em; @ include border-radius (.6em, .6em); display: block; vaddering: .5em; img @ include border-radius (10px); marginal: 20px auto 20px auto; #footer border-top: 5px; gränsstil: fast; border-color: $ style-color3; @ include border-radius (.6em, .6em); marginal-topp: 30px; p margin-bottom: .6em; @include standardize marginal-höger: 15px; // CSS-rullgardinsmenyn #navigation text-align: left; gränsen: 2px solid $ style-color3; bakgrundsfärg: $ style-color2; @ include border-radius (15px);
typsnittstorlek: 1.3em; font-family: arial, helvetica, sans-serif; bakgrundsfärg: $ style-color1;
bakgrundsfärg: $ style-color2;
bakgrundsfärg: $ style-color2; @ include border-radius (15px); gränsen: 2px solid $ style-color3;
bakgrundsfärg: $ style-color2; färg: # 000;
färg: # 000; bakgrundsfärg: $ style-color2;
färg: # 000; bakgrundsfärg: $ style-color4; @ include border-radius (5px);
// Sluta CSS Drop Down Menu // Diverse klasser. Bild border: 3px solid $ style-color3; @ include border-radius (8px); flyta till vänster; marginal: 5px 15px 15px 15px;
a: länk, a: besökte färg: mörkare ($ stil-färg1, 50); text-dekoration: ingen;
stark font-weight: bold;
bord margin: 20px; gräns: 3px solid; @ include border-radius (10px); border-color: lätta ($ style-color2, 6); th text-align: center; font-weight: bold; vaddering: 10px 0 10px 0; tbody td vaddering: 10px; tr: nth-child (2n + 1) bakgrundsfärg: mörkare ($ style-color2, 5); tr: nth-child (even) bakgrundsfärg: ljusare ($ style-color2, 2.5);
bredd: 100%; marginal-topp: 20px; marginal-vänster: 15px;
.tutorial_excerpt margin-left: 20px;
.tutorial_thumbnail float: left; marginal-höger: 20px; marginal-vänster: 20px; marginalbotten: 20px;
.tutorial_wrap margin-bottom: 50px; flyta till vänster;
img.wp-post-image -moz-border-radius: 15px; gränsstråle: 15px; boxskugga: 10px 10px 5px grå;
.showcode margin: 20px auto 20px 30px; -moz-gränsen-radien: 15px; gränsstråle: 15px; gränsen: $ style-color4 3px; gränsstil: fast; bakgrund: vit;
bredd: 700px; marginal-topp: 20px; marginal-vänster: 15px;
marginal: auto;
opacitet: 0,8; filter: alfa (opacitet = 80); -webkit-övergång: all in-out 0.2s; -moz-övergång: allt lätt in-out 0.2s; -ms-övergång: allt lätt in-out 0.2s; -överskridande: alla lätthet i 0.2s; övergång: all in-out 0.2s;
opacitet: 1; filter: alfa (opacitet = 100);
display: inline-block; höjd: 28px; bredd: 30px; bakgrundsbild: url (/images/ico-subscribe-social.png); background-repeat: no-repeat;
Bakgrundsposition: -30px 0;
Bakgrundsposition: -60px 0;
bakgrundsställning: -210px 0;
dl margin-left: 20px; marginal-topp: 20px; marginalbotten: 20px; fontstorlek: 19px; linjehöjd: 1,25em;
dt margin-left: 20px; marginalbotten: 20px; font-weight: bold;
dd margin-left: 40px; marginalbotten: 20px; "
Denna kod definierar hur webbplatsen ska se ut. Det definierar bakgrunden, färgläggning, teckensnitt etc. som utgör styling för en typisk webbplats.
De styling / Basic katalogen innehåller de filer som behövs för standardutseendet på sidorna 404, sidhuvud, sidfot och sidospår på webbplatsen. Skapa därför en fil som heter 404.html och placera den här koden:
"html
Tyvärr kunde vi inte hitta sidan.
"
Detta är en grundläggande 404 fel sida. Du måste vara försiktig med informationen som anges här, eftersom du inte vill avslöja för mycket information om hur din webbplats fungerar. Eftersom detta kommer att placeras i innehåll område på sidan, blir det enkelt för användaren att navigera bort från den.
Skapa sedan header.html fil med detta innehåll:
"html
"
Det här är bara en huvudben som inte är beskrivande, men det ger CMS något att visa.
Skapa sedan footer.html fil med detta innehåll:
"html
"Skapa sedan filen ** sidebar.html ** med det här innehållet:" htmlDetta är en grundläggande sidofält som kan ha andra gånger.
"Återigen är dessa platshållare. Alla dessa filer kopieras till katalogen ** site / parts ** och ändras enligt webbplatsens behov. Det här är så att servern har något med sina namn att använda på servern om användaren glömmer att skapa dem. ## Webbplatsstruktur Med de definierade teman och layouterna är det dags att skapa det grundläggande innehållet och strukturen för den aktuella webbplatsen. I ** -platsen **-katalogen, skapa ** -delarna * *, ** sidor **, ** inlägg **, ** bilder **, ** css **, ** js ** kataloger. ### Delar ** delar ** katalog kommer att innehålla små utdrag av * * html / css / javascript ** som kommer att göra en enda enhet placerad på flera platser på webbplatsen. Dessa delar laddas in i servern och kombineras med sidinnehållet efter behov. För vår demo-sida skapar du följande delar: - * * footer.html ** med den här koden: "html "- ** head.html ** med den här koden:" html "- ** header.html ** med den här koden:" htmlDetta är huvudsidan på testplatsen.
"- ** flatcms.md ** med den här koden:" plain ### Flat CMS Server Detta är en sida om den platta CMS-servern. "- ** about.md ** med denna kod:" plain ### About Det här är en standard om sidan. "Det här är demosidorna för webbplatsen. Den enda nödvändiga filen är ** main.html ** eftersom servern ska ladda innehållet i minnet och tjäna från minnet. Det hjälper till att påskynda laddningen av webbplatsens framsida. De andra två sidorna har ** md ** -tillägget eftersom de är i ** Markdown ** -format. Servern kommer att översätta innehållet till HTML innan det läggs in i sidlayouten. Sidor innehåller information som inte förändras mycket över tiden. De ger tittaren information om webbplatsen, dess syfte och mål. Sidor kan vara hierarkiska i naturen genom att skapa kataloger och underkataloger med sidor. Dessa katalognamn skapar adresserna till posterna i dessa sidor. ### Inlägg Till skillnad från sidor är inlägg objekt som läggs till regelbundet, till exempel dagliga / veckovisa / månatliga blogginlägg och nyheter. Detta område förväntas förändras ofta. I ** **-posten ** -katalogen skapar du två nya kataloger: ** bloggar ** och ** nyheter **. I var och en av dessa kataloger skapar du en katalog ** flatcms **. Dessa kommer att innehålla blogginlägg och nyheter för ** Flat CMS ** webbplatsen. I katalogen ** inlägg / bloggar / flatcms **, skapa följande filer: - ** index.amber ** med dessa innehåll: "plain h3 Flat CMS Blog p Detta är en vandrande blogg om en platt CMS. Mixinartikel ( $ title, $ link, $ excerpt, $ date) div.entry div.tutorial_wrap div.tutorial_div en divisionsdel för [href = $ länk] h3 # $ title h5 # $ date p.tutorial_excerpt # $ excerpt clear + article ("Flat CMS Running", "/ inlägg / bloggar / flatcms / flatcms", "Flat CMS Test Server körs!", "12 augusti 2015") "- ** flatcms.md ** med innehåll : "plain Den nya servern körs ---- Efter mycket arbete och programmering, går den platta CMS-servern. Håll dig uppdaterad! socialmedia" ** index.amber ** är en * * [Jade] (http://jade-lang.com/) ** mall för att definiera olika inlägg i bloggen. ** Jade ** HTML mallsystemet gör det enkelt att lägga till nytt innehåll med ett exakt format. Parametrarna till makronen utgör de olika objekten. Du kan hitta mer information om [Jade on Tuts +] (https://webdesign.tutsplus.com/categories/jade). Här är förlängningen som används ** gult ** eftersom ** Go-språk ** motsvarande ** Jade ** är ** [Amber] (https://github.com/eknkc/amber) **. Sedan det var där jag började, så gjorde jag det. Om du vill ändra anknytningen, kom ihåg att ändra den i rätt serverkod. I katalogen ** inlägg / nyheter / flatcms **, skapa följande filer: - ** index.amber ** med dessa innehåll: "plain h3 Flat CMS News p Här hittar du alla nyheter om vad jag gör Vänligen kom tillbaka ofta för att kolla in det! Mixinartikel ($ title, $ link, $ excerpt, $ date) div.entry div.tutorial_wrap div.tutorial_div en [href = $ länk] h3 # $ title h5 # $ date p.tutorial_excerpt # $ excerpt div.clear + article ("Flat CMS körs", "/ inlägg / nyheter / flatcms / flatcms", "Flat CMS Test Server körs!", "12 augusti, 2015 ")" - ** flatcms.md ** med det här innehållet: "Vanligt Den nya servern körs ---- Efter mycket arbete och programmering har jag äntligen allting flyttat till en goPress-server som jag skrev själv. gör det här tillgängligt för dig också. Håll dig stillad! socialmedia "Det här skapar nyheterna för demo-webbplatsen. På min webbplats använder jag samma struktur för handledning och koddemo sidor. ### Bilder Alla webbplatser har bilder. I den här inställningen finns alla bilder i katalogen ** webbplats / bilder **. För den här demotsidan kommer endast sociala medierikonen att placeras här. Du kan hämta bildfilen från hämtningsfilen. ### Site CSS Även med ** layout css ** och ** styling css ** kommer det att finnas gånger du vill ha speciella ** css ** regler. Webbplatsen ** site / css ** innehåller alla ** css ** -filer som lägger de sista inslag på webbplatsen. Alla ** layout **, ** styling ** och ** site / css ** filer kommer att sammanställas i en ** css ** -fil. Skapa därför katalogen ** site / css / final ** för att placera den sammanställda filen. Nu skapar du filen ** site / css / site.css ** med innehållet: "css .clear clear: both; height: 0px;" Inte mycket här - bara en definition för en "klar" -klass. Du kan lägga till vad du vill, men det borde vara något som inte faller in i layout eller styling kategori. ### Webbplatsskript Katalogen ** site / js ** innehåller alla speciella JavaScript-filer för webbplatsen. Dessa kommer att sammanställas och minimeras för snabbare sidladdning. För nu, skapa ** -platsen / js / final ** -katalogen för det sammanställda skriptet och en ** site / js / 01-site.js ** -fil med dessa innehåll: "javascript; // // File: Site. js // // Beskrivning: JavaScript-filen för webbplatsen. // jQuery (dokument) .ready (function () // // Koden här kommer att spåras när en sida är laddad. //); "Det finns inte mycket här just nu. Men eftersom din webbplats behöver anpassad JavaScript kan den placeras här. Eftersom skripten kommer att sammanställas, numrerar jag dem i den ordning som behövs för laddning. Rutinen för att sammanställa skript tillsammans kommer att ladda dem i numerisk ordning. ### Automatiseras med smäll Det enklaste sättet att påskynda en webbsida laddning är att få så få HTTP-förfrågningar som möjligt. Därför är det bäst att kombinera alla CSS- och JavaScript-filer i en fil vardera. Det bästa sättet att sammanställa dessa filer är med ett build script. Att utföra det varje gång servern får en förfrågan är ett slöseri med att bearbeta tiden. Mitt val av automatiseringsskript löpare är ** [Gulp] (http://gulpjs.com/) **. ** Gulp ** körs på ** [Node.js] (https://nodejs.org/) **. Gå därför till [Node.js webbplats] (https://nodejs.org/) och hämta programmet för ditt system. När du har installerat Node.js kan du installera ** Gulp ** med följande: "bash npm installera - global gulp npm installera - global gulp npm installera - global gulp-kompass npm installera - global gulp-autoprefixer npm install - global gulp-compressor npm installera - global gulp-concat "Detta installerar alla ** Gulp ** och ** Gulp ** -moduler som jag använder i build scriptet. Nu, högst upp i katalogen, skapar du filen ** gulpfile.js ** med följande innehåll: "javascript // Krav var gulp = kräver ('gulp'), kompass = kräver ('kompass-kompass'), prefix = kräver ('gulp-autoprefixer'), kompressor = kräver ('kompressor'), concat = kräver ('gulp-concat'); // Definierar sökväg till sass var Theme = "Basic"; Var Layout = "SingleCol "; var themesassRoot = 'teman / styling /' + Theme; var layoutsassRoot = 'teman / layouts /' + Layout; // Gulp-uppgift gulp.task ('tema-kompass-till-css' .src (themesassRoot + '/ sass / Basic.scss') .pipe (kompass (config_file: themesassRoot + '/config.rb', css: themesassRoot + '/ css', sass: themesassRoot + '/ sass' 'sassy-buttons')). pipa (prefix ("senaste 3 versionerna")) .pipe (gulp.dest (themesassRoot + '/ css'))); gulp.task ('layout-kompass-till-css ', funktion () return gulp.src (layoutsassRoot +' / sass / base.scss ') .pipe (kompass (config_file: layoutsassRoot +' /config.rb ', css: layoutsassRoot +' / css ', sass: layoutsassRoot + '/ sass', kräver: 'susy')). pip (prefix ("senaste 3 versionerna")). pip (gulp.dest (layoutsassRoot + '/ css'))); gulp.task ('watch-compass', funktion () // Vad ska du titta på gulp.watch (themesassRoot + '/sass/Basic.scss', funktion () // Vad ska du köra gulp.run ('theme- kompass-till-css ');); gulp.watch (layoutsassRoot +' /sass/Basic.scss ', funktion () // Vad ska köra gulp.run (' layout-compass-to-css '); );); gulp.task ('all-compass', ['tema-kompass-till-css', 'layout-kompass-till-css']); // js kompressor gulp.task ('js', funktion () gulp.src ([layoutsassRoot + '/ js / *. js', themesassRoot + '/js/*.js', 'site / js / *. js ']). pip (kompressor ()). pip (concat ("final.js")). pip (gulp.dest (' site / js / final ')); // css kompressor gulp.task ('css', ['all-compass'], funktion () gulp.src ([layoutsassRoot + '/ css / *. css', themesassRoot + '/css/*.css' , "site / css / *. css")) .pipe (kompressor ()). pip (concat ("final.css")) .pipe (gulp.dest ('site / css / final')) ; gulp.task ('default', ['all-compass', 'js', 'css']); "Detta kommer att kompilera alla CSS och JavaScript i en enda fil: i ** site / css / final / final.css ** fil för CSS, och i filen ** site / js / final / final.js ** för JavaScript. Det kommer också att lägga till webbläsarens prefixregler för CSS. Bara springa i toppkatalogen kommando: "bash gulp" ** Gulp ** sammanställer alla våra filer och lämnar dem på rätt plats. Varje uppgift som definieras i ** gulpfile.js ** kan köras individuellt genom att ge uppgiftsnamnet efter "gulp" Kommandot. Du kan lära dig mer om [Gulp on Tuts +] (https://webdesign.tutsplus.com/categories/gulpjs). ## Serverkonfigurationsfil Alla servrar behöver konfigurationsinformation. Därför skapar du i mappen i katalogen filen ** server.json ** med den här informationen: "json " CurrentLayout ":" SingleCol "," CurrentStyling ":" Basic "," ServerAddress ":" localhost: 8080 "," SiteTitle ":" Flat CMS Test Site "," Sitebase ":" ./site/ "," TemplatBase ":" ./themes/ "," Cache ": false, "MainBase": "" "Denna ** json ** -fil beskriver information om den layout som ska användas, den stil som ska användas, adressen och porten som servern ska lyssna på, huvudnamnet för webbplatsen med en underrubrik, en cache-flagga för att slå på och av cachning för felsökningsändamål och platsen för de olika katalogerna som används för webbplatsen. Genom att leverera denna information till servern i en ** json ** -fil kan servern vara flexibel, med mindre hårdkodad information. ## Ladda upp webbplatsen till en server De flesta använder en FTP-klient för att kopiera filerna till deras server. Det här är lätt att göra, men varierar mycket med det system och de program som används. Men det finns några alternativ. Du kan konfigurera en ** [Dropbox] (http://dropbox.com/) ** daemon för att ladda din webbplats från ditt Dropbox-konto. [Dropbox Wiki] (http://www.dropboxwiki.com/tips-and-tricks/install-dropbox-in-an-entirely-text-based-linux-environment) webbplatsen har detaljerade anvisningar för hur du ställer in detta. Det enda problemet är att filerna automatiskt laddas upp till servern när du gör några ändringar. Ibland vill du göra ändringar utan att de ska gå till servern. Om så är fallet, ha en plats utan plats för alla webbplatsens filer och en Dropbox-plats också. När du är klar skapar du en uppgift i filen ** Gulp ** för att kopiera de nya sidfilerna till ** Dropbox ** -platsen. ! [Dropzone 3 Setup för CMS Uploading] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F71%2Fposts%2F24547%2Fimage-1438683734928.jpg) Dropzone 3 Setup för CMS Uploading Mitt föredragna tillvägagångssätt är att använda ** [Dropzone 3] (https://aptonic.com/dropzone3/) **. Du kan programmera ** Dropzone 3 ** med ** Ruby ** eller ** Python ** för att utföra någon typ av åtgärd på en fil som är tagen på den. Det har också många inbyggda funktioner. Det finns en filåtgärd inbyggd för uppladdning till en FTP / SFTP-webbplats. Jag skapar ett ** Dropzone 3 ** mål för var och en av de viktigaste katalogerna på min webbplats. Då, när jag vill ändra eller lägga till en fil, drar jag det helt enkelt till det lämpliga mapphanteringsområdet för katalog. Du kan lära dig mer om ** Dropzone 3 ** med min handledning [Writing Dropzone 3 Actions] (https://computers.tutsplus.com/tutorials/writing-dropzone-3-actions--cms-21590). ## Slutsats Dessa grundläggande filer skapar en webbplats som ser ut så här:! [Demo Site in Browser] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F71%2Fposts%2F24547%2Fimage-1438683452983.jpg ) Demo webbplats i webbläsare Detta är bara början! Nu är det dags att bygga webbservrar med webbplatsstrukturen utlagd. Vänligen gå med i nästa handledning där jag kommer att bygga en ** [Go language] (https://golang.org/) ** -baserad webbserver för den här demo-webbplatsen.