So erstellen Sie eine kostenlose statische Site mit GitHub Pages in 10 Minuten

Statische Sites sind aus gutem Grund in Mode gekommen - sie sind unglaublich schnell und mit einer ständig wachsenden Anzahl unterstützter Hosting-Services ziemlich einfach einzurichten.

Ich werde hier nicht auf alle wer, was, wann, wo oder warum von statischen Sites eingehen. Ich gehe davon aus, dass Sie zumindest eine vage Vorstellung davon haben, was sie sind, oder einfach nur Ihre eigene Website erstellen möchten und sich nicht um die anderen Details kümmern. In jedem Fall ist dieser Beitrag für Sie.

Zunächst möchte ich, dass Sie wissen, dass ich dies für ein möglichst breites Publikum schreibe. Sie benötigen keine Programmierkenntnisse, um mitzukommen, aber eine gewisse Vertrautheit mit der Befehlszeile und Git wird viel helfen.

Wie können Sie mit GitHub in 10 Minuten eine statische Site erstellen?

Wir werden mit zwei spezifischen Tools arbeiten: GitHub Pages, das speziell für statische Inhalte entwickelt wurde, und einem statischen Inhaltsgenerator namens Jekyll.

Jekyll ist ein Ruby-Juwel zum einfachen Erstellen statischer Websites. Wenn Sie Jekyll verwenden möchten, muss Ruby auf Ihrem Computer installiert sein. Wenn Sie OSX haben, haben Sie höchstwahrscheinlich bereits eine Version von Ruby (obwohl Sie diese möglicherweise aktualisieren müssen). Wenn Sie dies nicht tun oder sich auf einem Windows-Computer befinden, erfahren Sie hier mehr über die Installation: Ruby installieren.

Öffnen Sie damit eine neue Terminal-Witwe und geben Sie ein gem install bundler jekyll. Dadurch werden Bundler (ein Ruby-Paketverwaltungstool) und Jekyll installiert.

Jekyll new my-static-siteGeben Sie nach der Installation dieser Edelsteine ​​(Ruby-Pakete) Folgendes ein (benennen Sie es wie Sie möchten), um Jekylls Generator auszuführen und Ihr Projekt in einem neuen Verzeichnis zu erstellen. Nachdem Ihre Site erstellt wurde, springen Sie durch Eingabe cd my-static-site(oder wie auch cdimmer Sie Ihr Projekt genannt haben) in Ihr neu erstelltes Site-Verzeichnis .

Öffnen Sie Ihr Projekt in einem Texteditor und Sie sehen mehrere Dateien und Ordner, die Jekyll für Sie erstellt hat. Im Moment müssen Sie sich nur mit dem Gemfile befassen (nicht mit Gemfile.lock). Die Gem-Datei ist eine Ruby-Datei, die alle zugehörigen Ruby-Pakete verwaltet, die zum Ausführen eines Projekts erforderlich sind.

Die Datei enthält eine Zeile mit der Jekyll-Version. Kommentieren Sie sie aus:

#gem "jekyll", "~> 4.0.0" 

Fügen Sie dann diese Zeile hinzu:

gem "github-pages", group: :jekyll_plugins 

Bei der Installation des GitHub Pages-Edelsteins kann es zu vielen Fallstricken kommen - manchmal sind die Edelsteine, von denen es abhängt, veraltet oder die lokal installierten Edelsteine ​​sind für GitHub Pages zu modern.

Ich habe festgestellt, dass dies das Erstellen und Testen meiner Jekyll-Site vor Ort erschweren kann. Es ist möglicherweise am einfachsten, Ihre Site lokal zu testen und die Erstellung zu speichern, bis Sie zur Bereitstellung bereit sind. Zum Zeitpunkt dieses Schreibens können Sie diese Abhängigkeitsversionen jedoch in Ihrer Gemfile angeben, und Jekyll funktioniert sowohl lokal als auch mit GitHub-Seiten:

gem "jekyll", "~> 3.8.5" gem "github-pages","~> 202" , group: :jekyll_plugins group :jekyll_plugins do gem "jekyll-feed", "~> 0.11.0" end 

Vielen Dank an Alex Waibel von StackOverflow für die neueste Konfiguration.

Führen Sie bundle exec Jekyll servein Ihrer Befehlszeile aus, um Ihre Site in Aktion zu sehen . Dadurch wird ein Server gestartet und Sie können Ihre Site anzeigen, indem Sie "localhost: 4000" in die URL-Leiste eines Browsers eingeben.

Voila! Sie haben mit Jekyll eine statische Site erstellt und befinden sich im Projektverzeichnis. Sie sind zu etwa 50% fertig.

Lass uns das online bekommen

Gehen Sie zu GitHub.com und melden Sie sich an. Wenn Sie bereits ein Konto haben, klicken Sie auf die Schaltfläche "Neu" und erstellen Sie ein Repository. Es ist wichtig, dass Sie Ihr Repository nach dem Link benennen, den Ihr GitHub Pages-Konto bereitstellen wird. Dies ist Ihr_Benutzername.github.io. Zum Beispiel ist mein GitHub-Benutzername tfantina und mein Blog ist tfantina.github.io, daher heißt mein GitHub-Repo "tfantina.github.io".

Schieben Sie Ihre Jekyll-Site in Ihrem Terminalfenster von Ihrem Computer auf GitHub, indem Sie die folgenden Befehle ausführen:

git init git remote add origin [email protected]:/.git git commit -am “Setting up Jekyll!” git push -u origin master 

(Wenn Sie Ihren Benutzernamen und Projektnamen ersetzen, müssen Sie nicht öffnen und schließen.)

Sobald Ihre Änderungen in Ihr Repository übertragen wurden, sollten Sie über eine funktionierende statische Site verfügen. Dies liegt daran, dass Sie das Juwel GitHub Pages verwenden und Ihr Repository so benannt haben, dass GitHub versteht, dass Sie es mit GitHub Pages bereitstellen möchten.

Sie können dies entweder bestätigen, indem Sie Ihre Site besuchen oder auf der Registerkarte Einstellungen von GitHub zum Seitenbereich blättern. In einem grünen Feld wird angezeigt, wo Ihre Website veröffentlicht wurde:

Sie werden auch feststellen, dass Sie Ihr Thema auch hier problemlos ändern können. GitHub bietet einige Standardthemen für Jekyll, aber Sie können natürlich auch Ihre eigenen erstellen.

Wenn Ihre Website angibt, dass sie veröffentlicht wurde, aber leer aussieht, müssen Sie möglicherweise eine Aktualisierung durchführen oder versuchen, Ihre Website in einem privaten Fenster anzuzeigen. Dies mag offensichtlich erscheinen, bringt mich aber fast jedes Mal dazu, wenn ich eine neue Jekyll-Instanz einrichte.

Wenn alles nach Plan lief, sollte Ihre Website ungefähr so ​​aussehen:

Los geht's - in wenigen Minuten haben Sie eine statische Website mit GitHub-Seiten erstellt und bereitgestellt. Aber Sie möchten wahrscheinlich in der Lage sein, Inhalte auf Ihre Seite zu setzen.

Ich habe versprochen, dass dies nur zehn Minuten dauern würde, damit ich nicht auf alle Details von Seiten, Titelseiten oder der Liquid-Template-Sprache eingehen werde. Das ist ein Beitrag für einen anderen Tag. Aber ich werde Ihnen mitteilen, wie Sie Ihren ersten Beitrag erstellen.

Öffnen Sie in Ihrem Texteditor den Ordner "_posts". Es gibt bereits einen Beitrag, in dem Sie in Ihrem neuen Blog begrüßt werden. Erstellen Sie eine neue Markdown-Datei und speichern Sie sie unter einem Namen in diesem Format: YEAR-MONTH-DAY-TITLE.markdown (siehe unten):

Ein Jekyll-Beitrag enthält zwei Abschnitte: vordere Materie und Körper.

Die vordere Angelegenheit gibt Jekyll spezifische Anweisungen, wie z. B. wie der Titel des Beitrags lauten wird, welches Layout verwendet werden soll und wann der Beitrag geschrieben wurde.

Die vordere Materie ist sehr anpassbar. Zum Beispiel wollte ich, dass meine Posts Heldenbilder enthalten, also habe ich ein lead_imageTag erstellt und eine Syntax in mein Layout eingefügt, um in der Titelseite jedes Posts gezielt nach Lead-Bildern zu suchen. Die Liquid-Template-Sprache erleichtert das Abrufen von Inhalten aus dem Vordergrund in Ihr Thema.

Es gibt noch viel mehr, was Sie mit der vorderen Materie tun können, aber beginnen wir mit einem allgemeinen Beispiel.

Die Standardvorderseite sieht folgendermaßen aus:

— layout: post title: "Welcome to Jekyll!" date: 2019-11-09 18:07:11 -0600 categories: jekyll update — 
  • Layout teilt Jekyll mit, auf welchem ​​Layout der Inhalt angezeigt werden soll. Sie können mehrere Layouts für verschiedene Seiten oder Beitragstypen verwenden.
  • Der Post-Titel
  • Das Datum der Veröffentlichung
  • Kategorien, die im Wesentlichen Tags sind. Sie können so wenige oder so viele hinzufügen, wie Sie möchten, getrennt durch Leerzeichen.

Nach der ersten Angelegenheit kann Ihr Beitrag in Markdown geschrieben werden, was Ihnen viel Flexibilität beim Schreiben Ihres Beitragsinhalts gibt.

Sobald Ihr Beitrag fertig ist, speichern Sie ihn und öffnen Sie Ihr Terminalfenster.

git commit -am “Publishes first post git push

Nach einer Minute (und möglicherweise einer Aktualisierung) können Sie Ihren Beitrag sehen.

Hoffentlich haben Sie jetzt eine funktionierende statische Site auf GitHub-Seiten, die mit Jekyll erstellt wurden! Wenn Sie Probleme oder Fragen haben, twittern Sie bitte @tfantina oder schreiben Sie mir eine E-Mail an [email protected]