Website für den Programmierer [auf Node.js]. Einfach. Stylisch. Kostenlos

  • Tutorial

Die meisten Programmierer benötigen eine Website oder zumindest eine eigene Webseite. Was ist es für Programmierer, fast alle normalen Menschen haben bereits eine eigene Website, auch wenn in Form eines Vkontakte-Kontos.

Ich habe einen VKontakte-Account und auch bei Facebook passt meine Seite nicht. Zu viel überflüssiges, auferlegtes Format und andere Unannehmlichkeiten.

Wenn ich kein Webentwickler wäre, müsste ich weinen und an einem Kaktus knabbern. Zum Glück bin ich einer von ihnen, also habe ich beschlossen, eine Website für mich zu erstellen. Um Artikel wie diesen darauf zu posten, kleine Hobbyprojekte, und damit im Feld "Site" des Profils auf Habré etwas zu vermerken.

Wenn Sie auch eine Site haben möchten, auf der Sie die volle Kontrolle haben, auf der alles genau so ist, wie Sie es möchten, aber Ihre Hände haben es nicht geschafft, es herauszufinden und es zu tun, dann ist dieser Artikel für Sie.

Einige Kenntnisse in HTML und JS werden sich als nützlich erweisen. Erfahrung mit Node.js ist optional.


Ich empfehle, dass Sie sofort die im Artikel beschriebenen Schritte ausführen und dann nach dem Lesen bereits eine Website wie diese bereit haben .

Also fangen wir an.

Erstellen Sie ein Repository in Github


Was macht ein Programmierer, der zuerst ein neues Projekt starten möchte? Erstellt ein Repository in einem Versionskontrollsystem. Wir werden Github verwenden, weil:

  • Dies ist der bequemste und funktionalste Dienst für die Versionskontrolle.
  • Das Erstellen eines neuen Projekts dauert nur ein paar Minuten, auch wenn Sie noch nicht registriert sind.
  • Es ist kostenlos

Registrieren Sie sich bei GitHub, wenn Sie dort noch keinen Account haben.

Wir konfigurieren Git im System. Der Github hat ein gutes Handbuch für jedes System: https://help.github.com/articles/set-up-git .

Wir gehen in das Repository, das ich mit der Site erstellt habe ( http://github.com/daeq/programmer-site ) und klicken auf die Schaltfläche "Fork" in der oberen linken Ecke.

Gabel

Ihre Kopie des Codes ist unter http://github.com/<Ihr Name> / programmer-site verfügbar . Wenn Ihnen der Name nicht gefällt, können Sie ihn im Abschnitt "Admin" umbenennen.

Jetzt haben wir ein Repository und es gibt sogar schon einen Prototyp einer zukünftigen Site. Lass uns weitermachen.

Erstellen Sie eine Anwendung auf Heroku


Nachdem wir den Code und den Ort zum Speichern haben, müssen wir ein Hosting auswählen. Ich habe mich für den Anwendungsdienst Heroku entschieden , weil:

  • Das Einrichten des Hostings ist so einfach wie möglich. Nur ein paar Befehle in der Konsole - und Sie haben eine stabile Website. In Zukunft erfolgen die Berechnungen des Standorts in einem Team.
  • Unter dem Anwendungsserver das übliche Ubuntu. Wenn Sie also etwas anderes als einen http-Server benötigen, ist die Verwendung einfach.
  • Es ist kostenlos (für unsere Bedürfnisse).

Registrieren Sie sich auf heroku.com , falls noch nicht geschehen .

Nach der Registrierung sehen Sie einen solchen Hinweis:
Heroku-Setup

Sie müssen tun, was darauf geschrieben steht: Toolbelt herunterladen und installieren und dann in der Konsole "heroku login" ausführen.

Füllen Sie die Seite auf Heroku


Es gibt einen Hosting-Service - es ist Zeit, eine Website darauf zu stellen.

Öffnen Sie die Konsole, wechseln Sie in das Verzeichnis auf der Festplatte, auf dem Sie den Code haben, und geben Sie die Konsole ein:

git clone git@github.com: <dein github login> / programmer-site
CD-Programmierer-Site
Heroku-Apps: Erstellen Sie <Ihren App-Namen>

Der Name sollte für alle Heroku-Anwendungen eindeutig sein. Sie können beispielsweise die Adresse Ihrer zukünftigen Site verwenden.

Als Antwort sehen Sie ungefähr Folgendes:

Geben Sie Ihre Heroku-Zugangsdaten ein.
E-Mail: bratchenko@gmail.com
Passwort (Eingabe wird ausgeblendet): 
Authentifizierung erfolgreich.
Erstellen der Programmer-Site ... fertig, Stack ist Zeder
http://programmer-site.herokuapp.com/ | git@heroku.com: programmer-site.git
Git Remote Heroku hinzugefügt

Heroku unterstützt das Layout einer Site, indem es sie einfach in das Git-Repository schiebt. Wir tippen die Konsole ein:

Git Push Heroku Meister

Wenn keine Fehler aufgetreten sind, haben Sie alles richtig gemacht und Ihre Site ist unter <Name Ihrer Anwendung> .herokuapp.com verfügbar (z. B. http://programmer-site.herokuapp.com/ ).

Richten Sie Ihre Domain ein


Es ist unwahrscheinlich, dass die Adresse auf herokuapp.com für Ihre persönliche Website geeignet ist. Wir werden unsere eigene Domain binden.

Wenn Sie noch keine eigene Domain haben, können Sie diese beispielsweise in der .tk-Zone kostenlos registrieren.

Wir gehen zu http://dot.tk

Geben Sie den Namen Ihrer zukünftigen Domain ein. Geben Sie

dot.tk starten

in das IP-Eingabefeld eine der von heroku bereitgestellten IP- Adressen ein . Eg 75.101.145.87.

dot.tk IP eingeben

Fertig

dot.tk bereit

Wir gehen zu den Anwendungseinstellungen auf Heroku , gehen zu der erstellten Anwendung, dem Abschnitt "Einstellungen", geben Sie Ihre zukünftige Domain in das Feld "Domains" ein, klicken Sie auf "Hinzufügen". Fertig

Heroku Domain-Einstellungen

Ihre Site sollte innerhalb einer halben Stunde auf der registrierten Domain verfügbar sein.

Wir erstellen das Erscheinungsbild der Website


Obwohl die Websitevorlage in meinem Beispiel unvergleichlich und genial ist, möchten Sie sie kaum verlassen. Daher der nächst schwierigere, aber auch der angenehmste Teil: der Site das Aussehen zu verleihen, das Ihnen gefällt.

Für das Frontend der Seite empfehle ich Twitter Bootstrap, weil:

  • Dies ist ein sehr einfaches, elegantes Front-End-Framework.
  • Das Beste seiner Art an Funktionen: In Bezug auf die Anzahl der Elemente, Standard- und Zusatz-Widgets.
  • Viele Leute benutzen es und entwickeln es weiter. Wenn Sie eine Änderung oder ein nicht standardmäßiges Element benötigen, hat dies höchstwahrscheinlich bereits jemand getan.

Wenn Sie nicht bei jeder geringfügigen Verbesserung der Website Kontakt mit dem Designer aufnehmen möchten, verwenden Sie Twitter Bootstrap.

Es gibt drei Möglichkeiten, um das Design für Sie geeignet zu machen:

  • Bitten Sie den Designer, ein Site-Layout mit Twitter Bootstrap-Elementen im PSD-Format zu erstellen und es dann aus vorgefertigten Elementen zusammenzusetzen (oder bitten Sie erneut jemanden, dies zu tun).
  • Kaufen Sie ein fertiges Thema, zum Beispiel hier: https://wrapbootstrap.com/
  • Machen Sie sich aus den vorhandenen Elementen ein Design.

Für den dritten Absatz können die folgenden Links hilfreich sein:


In meinem Beispiel befindet sich das gesamte Layout im Ordner tpl, und CSS, JS und andere Dateien befinden sich im öffentlichen Ordner.

Änderungen speichern und veröffentlichen


Nachdem Sie die erforderlichen Änderungen an der Site vorgenommen haben, sollten Sie diese speichern und die neue Version auf das Hosting stellen.

Führen Sie im Stammverzeichnis der Site in der Konsole Folgendes aus:

git commit -a -m "Beschreibung der vorgenommenen Änderungen"
Git Push Heroku Meister
Git Push Origin Master

Es kann überflüssig erscheinen, jedes Mal 3 Befehle einzugeben, um Änderungen im Repository zu speichern und auf der Site zu speichern. Dieses Verfahren kann automatisiert und vereinfacht werden, aber ich habe bereits viel Text geschrieben. Denken Sie selbst nach.

Wenn sich herausstellt, dass dieser Artikel interessant genug ist (mindestens ein paar Dutzend Pluspunkte), wird es eine Fortsetzung geben.

Im zweiten Teil, ich plane , zu beschreiben , wie eine Website mit einem einfachen , aber flexibel und funktional Programmierer Blog mit dem Repository auf GitHub alle gleich, mit dem Abschlag, Kommentare Teile auf soziale Netzwerke, und sogar ein paar wesentlichen Merkmale :) erstellt hinzufügen

Schreiben in den Kommentaren, Welche Funktionen möchten Sie auf Ihrer Website sehen, auf die nicht zugegriffen werden kann oder die in vorgefertigten Engines nicht gut funktionieren?

Jetzt auch beliebt: