I dette innlegget vil vi lage et personlig nettsted ved hjelp av skinner og distribuere det til Heroku. Heroku er en skyapplikasjonsplattform - en ny måte å bygge og distribuere webapper på. Det beste med Heroku er at du ikke trenger å betale for å være vert for grunnleggende webapper, siden Heroku har kategorisert dem som gratis. Vi vil bygge en enkeltsides railsapplikasjon, og det vil være et statisk nettsted som kan brukes som en portefølje.
Nedenfor er øyeblikksbildet av rails-applikasjonen (distribuert på Heroku her )
La oss komme i gang med å lage dette Rails-programmet. Jeg antar at du allerede har installert Ruby and Rails. Forsikre deg om at du har Ruby 2.0 og Rails 4.2.2. Du kan sjekke versjonen fra ledeteksten.
Merk: Vi vil bruke Ruby 2.0 og Rails 4.2.2. Hvis du har noen forskjellige versjoner av Ruby and Rails, kan det hende at noen av trinnene som vises i dette innlegget ikke fungerer for deg.
Opprette prosjektet:
Vi vil kalle prosjektet vårt som nettsted. For å opprette prosjektet, bruk kommandoen Rails nytt nettsted
Rails genererer automatisk alle filene, og det vil også installere alle nødvendige perler ved å kjøre kjørepakken installert automatisk som vist nedenfor
Nå vil du se en nettstedsmappe under C: -stasjonen din (stedet der vi utførte Rails new website command). La oss åpne nettsidemappen i noen IDE. Jeg har Brackets IDE fra Adobe. Du kan bruke alle andre da det ikke betyr noe.
Prosjektstruktur:
Den genererte prosjektstrukturen vil se ut som nedenfor
Selv om vi ikke har skrevet noen kode, kan du kjøre nettsøknadsprogrammet akkurat nå. For å kjøre nettstedsapplikasjonen, kjør Rails s-kommando fra nettsidemappen som vist nedenfor
Som du kan se i øyeblikksbildet ovenfor som nettstedsappen vår har blitt distribuert påhttp: // localhost: 3000
Du vil kunne se skjermen nedenfor for å få tilgang til URL-enhttp: // localhost: 3000
Men vi vil vise applikasjonens hovedside om tilgang til URL-enhttp: // localhost: 3000 /.For det la oss lage en index.html-side under den offentlige mappen til nettstedsprosjektet vårt.
Merk: Skinner vil automatisk vise index.html-siden når du får tilgang til rot-URL-enhttp: // localhost: 3000
Foreløpig har vi bare en linje på index.html-siden.
La oss få tilgang til rotnettadressenhttp: // localhost: 3000
La oss nå sette litt liv i index.html-siden vår ved å legge til noen bilder - JS og kul CSS. Vi vil bruke gråtonetema fra start bootstrap.
c ++ omfang operatør
Gråtone Start Bootstrap Theme -
Nedenfor er øyeblikksbildet av det gråtonestart bootstrap-temaet vi skal bruke. Vi vil tilpasse dette temaet for å oppfylle våre krav.
Du kan laste ned dette temaet fra http://startbootstrap.com/template-overviews/grayscale/
Last ned gråtonetema og kopier CSS, font-awesome, fonts, img, JS og index.html til den offentlige katalogen til nettsideprosjektet. Nedenfor er øyeblikksbildet av prosjektet etter å ha lagt til CSS, JS, fonter, bildemappe og index.html-side under offentlig katalog over nettstedsprosjektet.
La oss kjøre nettsideprosjektet vårt nå:
Når du kjører prosjektet, vil du bli presentert med en flott, gråtonetema-side.
Vi vil endre index.html-siden (under offentlig katalog over nettsideprosjekt) for å gi den et profesjonelt utseende.
Nedenfor er øyeblikksbildet av nettsideprosjektet etter endringene i index.html-siden. Vi har nettopp endret bildene og redigert noe av teksten for å gjøre den spesifikk for et individ.
Du kan endre index.html og gråtoner.CSS som du vil. Nå er vi klare til å distribuere nettstedssøknaden vår til Heroku.
Å skyve koden til Github:
Før vi distribuerer applikasjonen til Heroku, må vi skyve koden vår til et eksternt Github-lager. For det trenger du en Github-konto. Hvis du ikke har en Github-konto, kan du gå og opprette en på www.github.com .
Du må også installere Github på Windows. Last ned Github for windows fra https://windows.github.com/ .
Når du har lastet ned og installert Github på maskinen din, åpner du Github-applikasjonen, konfigurerer Github-legitimasjonen din og velger Git Bash-skall som standardskall (du kan velge hvilket som helst annet alternativ også som du vil) og deretter lagre endringene.
Du må opprette et lager på Github, hvor vi vil lagre nettstedsprosjektet vårt eksternt. For å opprette et depot, logg inn på Github og klikk på nytt depotalternativ som vises i den grønne knappen.
Navngi depotet ditt (i dette tilfellet har vi kalt det railtoheroku) og klikk på Opprett depotkobling som vist nedenfor.
Github vil oppgi ekstern URL ( https://github.com/eMahtab/railtoheroku.git i dette tilfellet) for railtoheroku-arkivet som vil være nødvendig når du skyver koden fra lokal maskin til Github.
Nå er vi klare til å skyve prosjektkoden til nettstedet vårt til Github. Følg trinnene nedenfor for å skyve koden til Github.
Åpne opp Git-skallet og bruk Git init-kommandoen til å initialisere nettstedskatalogen som vist nedenfor:
Legg nå til alle filene i nettstedskatalogen under versjonskontroll ved å utføre Git add.
Forplikt alle filene ved å utføre Git commit –m “Final Commit”
Legg til det eksterne depotet som vist nedenfor:
Nå det siste trinnet som faktisk vil skyve koden til Github repository:
Vi er ferdige med Github. Den neste delen er den faktiske distribusjonen av applikasjonen til Heroku.
Distribuere applikasjonen til Heroku:
Opprett en Heroku-konto på https://www.heroku.com/
Merk : Vi må gjøre noen endringer for distribusjon av applikasjonen til Heroku. Heroku støtter ikke SqLite 3, men har i stedet PostgreSQL-database. Så vi må fjerne sqlite3 avhengighet fra gemfile. Heroku krever rails_12factor perle, som brukes av Heroku til å betjene statiske eiendeler som bilder og stilark. De to endringene som kreves i Gemfile er oppsummert nedenfor:
Fjern linje perlen ‘sqlite3’ fra Gemfile
Legg til følgende linjer i Gemfile
gruppe: utvikling,: test do #<<<< not in production gem 'sqlite3' end group :production do gem 'pg', '0.17.1' gem 'rails_12factor', '0.0.2' end
La oss sjekke om alt fungerer bra etter at vi har gjort endringene i Gemfile. Lagre Gemfile og løp pakkeinstallasjon med et spesielt flagg (uten produksjon) for å forhindre lokal installasjon av produksjonsperler.
Lar oss forandre endringene som er gjort i Gemfile til eksternt arkiv på Github:
Skyv endringene til det eksterne Github-depotet:
Opprette en ny applikasjon på Heroku:
Logg på Heroku og opprett en ny app. Jeg har kalt appen min railtoheroku. Du kan gi den navnet hva du vil. Klikk på Opprett app for å opprette den navngitte appen.
Koble Github-depot til Heroku-appen:
Neste trinn er å koble Github-arkivet til Heroku.
Nedenfor har vi koblet Github repository railtoheroku
Når vi kobler Github-depotet vårt til Heroku, er vi klare til å distribuere applikasjonen vår. For å distribuere applikasjonen, rull ned til alternativet for manuell distribusjon og klikk på alternativet for distribusjonsgren.
Distribuere applikasjonen:
Når du klikker på Deploy Branch, begynner Heroku å installere perlene fra Gemfile på produksjon:
Når alle perlene er installert og applikasjonen er distribuert, vil du se gratulasjonsmeldingen fra Heroku som sier: 'Appen din er vellykket distribuert.'
For å se den distribuerte applikasjonen, klikker du bare på visningsknappen, og du vil kunne se at appen din blir distribuert.
Hvis du møter et problem mens du følger noen av trinnene ovenfor, kan du kommentere nedenfor. Håper du likte dette innlegget.
Har du et spørsmål til oss? Vennligst nevn det i kommentarfeltet, så kommer vi tilbake til deg.
Relaterte innlegg:
Analyse av XML-filer ved bruk av SAX Parser