In dit bericht zullen we een persoonlijke website maken met behulp van rails en deze implementeren op Heroku. Heroku is een cloudapplicatieplatform - een nieuwe manier om webapps te bouwen en te implementeren. Het beste van Heroku is dat je niet hoeft te betalen voor het hosten van basiswebapps, omdat Heroku ze als gratis heeft gecategoriseerd. We bouwen een single page rails applicatie en het wordt een statische website die als portfolio gebruikt kan worden.
Hieronder ziet u de momentopname van de rails-applicatie (geïmplementeerd op Heroku hier )
Laten we beginnen met het maken van deze Rails-app. Ik neem aan dat je Ruby en Rails al hebt geïnstalleerd. Zorg ervoor dat je Ruby 2.0 en Rails 4.2.2 hebt. U kunt de versie controleren vanaf de opdrachtprompt.
Opmerking: we zullen Ruby 2.0 en Rails 4.2.2 gebruiken. Als je verschillende versies van Ruby en Rails hebt, werken sommige van de stappen die in dit bericht worden weergegeven mogelijk niet voor jou.
Het project maken:
We noemen ons project als website. Gebruik het commando Rails nieuwe website om het project te maken
Rails genereert automatisch alle bestanden en installeert ook alle vereiste edelstenen door de automatisch geïnstalleerde run-bundel uit te voeren, zoals hieronder weergegeven
Nu ziet u een website-map onder uw C: -station (de locatie van waaruit we de opdracht Rails nieuwe website hebben uitgevoerd). Laten we de website-map openen in een of andere IDE. Ik heb Brackets IDE van Adobe. U kunt elke andere gebruiken, het maakt niet uit.
Project structuur:
De gegenereerde projectstructuur ziet er als volgt uit
Ook al hebben we geen code geschreven, u kunt de websitetoepassing nu meteen uitvoeren. Om de websitetoepassing uit te voeren, voert u de opdracht van Rails uit vanuit de websitemap, zoals hieronder weergegeven
Zoals je kunt zien in de bovenstaande momentopname dat onze website-app is geïmplementeerd ophttp: // localhost: 3000
U kunt het onderstaande scherm zien wanneer u de URL openthttp: // localhost: 3000
def __init__ in python
Maar we willen de hoofdpagina van onze applicatie laten zien over het openen van de URLhttp: // localhost: 3000 /.Laten we daarvoor een index.html-pagina maken onder de openbare map van ons websiteproject.
Opmerking: Rails zal automatisch de index.html-pagina bedienen bij het openen van de root-URLhttp: // localhost: 3000
Voorlopig hebben we slechts één regel op de index.html-pagina.
Laten we naar de root-URL gaanhttp: // localhost: 3000
Laten we nu wat leven in onze index.html-pagina brengen door enkele afbeeldingen toe te voegen - JS en coole CSS. We zullen grijswaardenthema gebruiken vanaf het starten van bootstrap.
Grijstinten Start Bootstrap-thema -
Hieronder ziet u de momentopname van het start-bootstrap-thema in grijswaarden dat we zullen gebruiken. We zullen dit thema aanpassen om aan onze vereisten te voldoen.
U kunt dit thema downloaden van http://startbootstrap.com/template-overviews/grayscale/
Download grijswaardenthema en kopieer de CSS, font-awesome, fonts, img, JS en index.html naar de openbare directory van het websiteproject. Hieronder ziet u de momentopname van het project na het toevoegen van CSS, JS, lettertypen, afbeeldingenmap en index.html-pagina onder de openbare map van het websiteproject.
Laten we ons websiteproject nu uitvoeren:
Bij het uitvoeren van het project krijgt u een mooie themapagina in grijstinten te zien.
We zullen de index.html-pagina (onder de openbare directory van het websiteproject) aanpassen om het een professionele uitstraling te geven.
Hieronder ziet u de momentopname van het websiteproject na het aanbrengen van de wijzigingen in de index.html-pagina. We hebben zojuist de afbeeldingen gewijzigd en een deel van de tekst bewerkt om deze specifiek voor een persoon te maken.
wat wordt toegevoegd in java
U kunt de index.html en grijstinten.CSS naar wens aanpassen. Nu zijn we klaar om onze websitetoepassing in Heroku te implementeren.
De code naar Github pushen:
Voordat we de applicatie op Heroku implementeren, moeten we onze code naar een externe Github-repository pushen. Daarvoor heb je een Github-account nodig. Als je geen Github-account hebt, maak er dan een aan op www.github.com .
U moet ook Github op uw Windows installeren. Download de Github voor Windows van https://windows.github.com/ .
Nadat je de Github op je computer hebt gedownload en geïnstalleerd, open je de Github-applicatie en configureer je je Github-inloggegevens en kies je Git Bash-shell als je standaardshell (je kunt ook elke andere optie kiezen) en sla de wijzigingen op.
U moet een repository op Github maken, waar we ons websiteproject op afstand zullen opslaan. Om een repository te maken, log je in op Github en klik je op de nieuwe repository-optie die wordt weergegeven in de groene knop.
Geef uw repository een naam (in dit geval hebben we het railtoheroku genoemd) en klik op repository-link maken zoals hieronder getoond.
Github levert de externe URL ( https://github.com/eMahtab/railtoheroku.git in dit geval) voor de railtoheroku-repository die nodig zal zijn bij het pushen van de code van de lokale machine naar Github.
Nu zijn we klaar om de projectcode van onze website naar Github te pushen. Volg de onderstaande stappen om de code naar Github te pushen.
Open Git shell en gebruik Git init commando om de website directory te initialiseren zoals hieronder getoond:
Voeg nu alle bestanden in de website-directory toe onder versiebeheer door Git add uit te voeren.
Commit alle bestanden door Git commit uit te voeren - m 'Final Commit'
Voeg de externe repository toe zoals hieronder getoond:
Nu de laatste stap die de code daadwerkelijk naar de Github-repository zal pushen:
We zijn klaar met Github. Het volgende deel is de daadwerkelijke implementatie van de applicatie naar Heroku.
De applicatie implementeren op Heroku:
Maak een Heroku-account aan op https://www.heroku.com/
Opmerking : We moeten enkele wijzigingen aanbrengen voor de implementatie van de applicatie naar Heroku. Heroku ondersteunt SqLite 3 niet, maar heeft een PostgreSQL-database. We moeten dus de sqlite3-afhankelijkheid uit gemfile verwijderen. Heroku vereist rails_12factor gem, dat door Heroku wordt gebruikt om statische items zoals afbeeldingen en stylesheets te bedienen. De twee vereiste wijzigingen in Gemfile worden hieronder samengevat:
Verwijder de regel gem ‘sqlite3’ uit Gemfile
Voeg de volgende regels toe aan Gemfile
groep: ontwikkeling,: test do #<<<< not in production gem 'sqlite3' end group :production do gem 'pg', '0.17.1' gem 'rails_12factor', '0.0.2' end
Laten we eens kijken of alles goed werkt nadat we de wijzigingen in Gemfile hebben aangebracht. Sla de Gemfile op en ren bundel installeren met een speciale vlag (–zonder productie) om de lokale installatie van productie-edelstenen te voorkomen.
Laten we de wijzigingen die in Gemfile zijn aangebracht doorvoeren naar de externe repository op Github:
Push de wijzigingen naar de externe Github-repository:
Een nieuwe applicatie aanmaken bij Heroku:
Log in op Heroku en maak een nieuwe app. Ik heb mijn app railtoheroku genoemd. U kunt het een naam geven, wat u maar wilt. Klik op app maken om de genoemde app te maken.
Github-repository verbinden met de Heroku-app:
wat is het verschil tussen een abstracte klasse en een interface?
De volgende stap is om je Github-repository te koppelen aan Heroku.
Hieronder hebben we onze Github-repository railtoheroku aangesloten
Zodra we onze Github-repository met Heroku hebben verbonden, zijn we klaar om onze applicatie te implementeren. Om de applicatie te implementeren, scrollt u naar de handmatige implementatie-optie en klikt u op de implementatie-branch-optie.
De applicatie implementeren:
Zodra je op Deploy Branch klikt, zal Heroku beginnen met het installeren van de edelstenen uit Gemfile tijdens productie:
Zodra alle edelstenen zijn geïnstalleerd en de applicatie is geïmplementeerd, ziet u het felicitatiebericht van Heroku met de tekst: 'Uw app is met succes geïmplementeerd.'
Om uw geïmplementeerde applicatie te zien, klikt u op de weergaveknop en u zult zien dat uw app succesvol is geïmplementeerd.
Als u een probleem ondervindt bij het volgen van een van de bovenstaande stappen, kunt u hieronder reageren. Ik hoop dat je deze post leuk vond.
Heeft u een vraag voor ons? Vermeld het in het opmerkingengedeelte en we nemen contact met u op.
Gerelateerde berichten:
XML-bestanden parseren met SAX Parser