[RUBY] Jekyll Super Einführung # 1 ab 0 - Umweltkonstruktion
Dieser Artikel ist der erste Artikel in Jekyll Super Primer ab 0.
-
1 Umgebungskonstruktion <- Diesmal
- # 2 Original-Theme-Erstellung
Einführung
Was in dieser Serie zu tun ist
- Lassen Sie uns vorerst eine Site mit Jekyll erstellen
- Erstellen Sie Ihre eigene Vorlage
- Stellen Sie die fertige Site bereit, um sie zu vernetzen und zu veröffentlichen
Ziel
- Personen, die eine Site mit Jekyll von 0 mit ihrem eigenen Design erstellen möchten
Vorausgesetztes Wissen
- Ich verstehe HTML und CSS irgendwie
- Ich weiß, dass es auch JavaScript gibt
- Verstehe, wie man Markdown schreibt
- Ich weiß, was der statische Site-Generator macht
- Du kannst Git benutzen ――Sie können irgendwie mit CUI arbeiten
Es ist notwendig, Ruby zu installieren, aber da wir nicht glauben, dass diese Serie die Erstellung von Plug-Ins usw. beinhalten wird. Sie müssen nicht wissen, was Ruby vorerst tun wird.
Umgebung erforderlich, um Jekyll auszuführen (erforderlich)
Ich denke nicht, dass es so schwierig ist, eine Umgebung aufzubauen, deshalb werde ich es hier nicht erklären.
--Ruby v2.5.0 und höher: Sie können mit ruby -v überprüfen.
--RubyGems: Du kannst es mit gem -v überprüfen.
--GCC und make: Sie können mit gcc -v / g ++ -v und make -v prüfen.
Aus Jekylls offiziellen Dokumenten. https://jekyllrb.com/docs/installation/#requirements
Versuchen Sie, ein Projekt zu erstellen
Der erste Schritt besteht darin, ein Projekt zu erstellen. Versuchen Sie, einen Ordner für Ihr Projekt an einem geeigneten Ort zu erstellen. Unten wird der Ordner für das Projekt mit geeigneten Wörtern wie "Projektstamm" oder "im Arbeitsstammverzeichnis" gelesen, aber bitte lesen Sie alle.
Installation der erforderlichen Bibliotheken
Ich benutze ein Tool namens Bundler. Dies erleichtert die Verwaltung von Edelsteinen pro Projekt. Führen Sie Folgendes in Ihrem Arbeitsstammverzeichnis aus:
$ gem install bundler
$ bundle init
Wenn eine Datei namens Gemfile generiert wird, ist sie erfolgreich. Bearbeiten Sie dann die Gemfile wie folgt:
Gemfile
# frozen_string_literal: true
source "https://rubygems.org"
git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
gem "jekyll"
Wenn Sie können, gehen Sie wie folgt vor:
$ bundle config set path 'vendor/bundle'
$ bundle install
Ich denke, es wird mehr Dateien in "Vendor / Bundle" geben, also behalten Sie es im Auge. (Es benötigt viel Zeit) Wenn Sie fertig sind, gehen Sie wie folgt vor:
$ bundle exec jekyll -v
Wenn es wie folgt zurückkehrt, ist es erfolgreich.
jekyll x.x.x
Erstellen eines Jekyll-Projekts
Erstellen Sie ein Jekyll-Projekt. Führen Sie den folgenden Befehl aus:
$ bundle exec jekyll new . --force
$ bundle install
Ich habe es ein wenig weggelassen, aber ich denke, es wird so aussehen.
./
├── 404.html
├── Gemfile
├── Gemfile.lock
├── _config.yml
├── _posts
│ └── 2020-05-19-welcome-to-jekyll.markdown
├── about.markdown
└── index.markdown
Damit ist die Projekterstellung abgeschlossen. Probieren wir es aus. Führen Sie den folgenden Befehl aus:
$ bundle exec jekyll s
...Unterlassung
...
Auto-regeneration: enabled for '<path-to-project-folder>'
Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.
Wenn es so aussieht, sind Sie erfolgreich. Versuchen wir, auf http: // localhost: 4000 / zuzugreifen. Standardmäßig werden die Themenminima angewendet, sodass bereits eine feste Seite generiert werden sollte.
Jekyll ist übrigens ein statischer Site-Generator. Wenn Sie ihn ausführen, wird der Quellcode der statischen Site ausgespuckt.
Wenn Sie sich / _site ansehen, können Sie den Quellcode der Spit-Site sehen.
Versuchen Sie, Jekyll Admin hinzuzufügen
Mit Jekyll können Sie Ihre Artikel mithilfe eines CMS-ähnlichen Administrationsbildschirms mithilfe eines Plugins (Tools) namens Jekyll Admin verwalten. Es funktioniert ohne es, aber es ist relativ leicht zu verstehen, also lasst es uns vorstellen.
Bearbeiten Sie die Gemfile.
Gemfile
source "https://rubygems.org"
gem "jekyll", "~> 4.0.1"
# ..Abkürzung..
group :jekyll_plugins do
gem "jekyll-feed", "~> 0.12"
gem "jekyll-admin" # <-hinzufügen
end
# ..Abkürzung..
gem "wdm", "~> 0.1.1", :install_if => Gem.win_platform?
Wenn Sie die Gem-Datei bearbeitet haben, können Sie sie installieren, indem Sie den folgenden Befehl ausführen.
$ bundle install
Versuchen Sie es erneut, nachdem Sie fertig sind.
$ bundle exec jekyll s
Greifen wir auf http: // localhost: 4000 / admin zu.
Wenn Sie einen solchen Bildschirm sehen, sind Sie erfolgreich.
- Bitte seien Sie versichert, dass Sie nur dann auf diesen Bildschirm zugreifen können, wenn Sie den Server starten, indem Sie in der lokalen Umgebung "jekyll s" ausführen.
Wenn Sie den Post-Bildschirm von der Registerkarte daneben aus betrachten, können Sie die Artikel sehen.
Versuchen Sie, einen Artikel hinzuzufügen
Fügen wir einen Artikel als Testversion hinzu.
In Jekyll können Sie Artikel hinzufügen, indem Sie eine MD-Datei im Verzeichnis / _posts hinzufügen. Sie können jedoch auch Artikel von Jekyll Admin hinzufügen.
Jekyll Admin erstellt am Ende automatisch eine Datei in / _ppsts, sodass sich das, was Sie tatsächlich tun, nicht ändert. Da die Datei jedoch automatisch eingerichtet und benannt wird, verwenden Sie zunächst Jekyll Admin. Es kann besser sein, es zu tun.
Dieses Mal werde ich es über Jekyll Admin hinzufügen. Sie können eine neue Seite hinzufügen, indem Sie die Seite mit den Posts auf der Registerkarte neben Jekyll Admin öffnen und auf Neue Posts klicken.
Geben Sie einen Titel in den Titel ein und schreiben Sie den Inhalt des Artikels in Body. Jekyll ist grundsätzlich in Markdown-Notation geschrieben. Es gibt viele Artikel über Abschriften, daher werde ich sie hier nicht erklären. Es ist so.
Wenn Sie fertig sind, klicken Sie auf "Neues Metadatenfeld" und geben Sie ** layout ** in den Schlüssel ein. Wählen Sie "Post".
Dies bedeutet, dass das Post-Layout des automatisch installierten Themas (Minima) verwendet wird. Ich werde die Details später erklären, daher ist es in Ordnung, hier ein leichtes Gefühl zu haben, dass es magisch ist (ein klassisches Täuschungswort).
Wenn Sie fertig sind, klicken Sie auf Erstellen. Sie sehen eine Schaltfläche mit dem Namen "Ansicht". Wenn Sie darauf klicken, wird der Artikel erfolgreich hinzugefügt.
Es wurde auch dem Beitrag auf der obersten Seite hinzugefügt.
Vorläufig konnte ich die Umgebung aufbauen und das Projekt erstellen, daher denke ich diesmal darüber nach, hier herumzugehen. Im Moment verwende ich immer noch das Standardthema Minima. Ich möchte es so gestalten, wie ich es mag! Ich denke, es gibt viele Leute, die das sagen.
Viele Themen werden auf GitHub usw. veröffentlicht, daher ist es eine gute Idee, das zu finden, das Ihnen gefällt. Ich muss es jedoch selbst machen! Ich denke, es gibt auch einen solchen Ort.
Nächstes Mal werde ich erklären, wie Sie einen Artikel selbst erstellen. (Ich werde mein Bestes geben, um zu schreiben!
Bis zum nächsten Mal!
Recommended Posts