[Docker] Erstellen Sie eine Site mit Hugo und veröffentlichen Sie sie auf GitHub
Überblick
Ich werde das Verfahren zum Erstellen einer Hugo-Site in Docker und zum Veröffentlichen auf GitHub zusammenfassen.
Annahme
- Grundkenntnisse in Git
- Ich habe einen GitHub-Account
- Grundkenntnisse in Docker --Terminal ist verfügbar
Umgebung
Der Name des Arbeitsordners lautet "Docker Hugo". Informationen zu docker-compose.yml zum Starten der virtuellen Umgebung von Hugo finden Sie unter [Docker] Erstellen einer Umgebung für die Verwendung von Hugo.
DockerHugo
├── docker-compose.yml
Gesamtbild
Die folgende Abbildung zeigt den lokal mit dem Container durchgeführten Fluss.
Erstellen Sie eine neue Hugo-Site
Geben Sie den folgenden Befehl in den Container ein
Container
hugo new site hoge
Im Stammordner wird ein Hoge-Ordner erstellt (hier der Ordner "Docker Hugo"). Der Inhalt des Hoge-Ordners lautet wie folgt
hoge
├── archetypes
│ └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
6 directories, 2 files
Laden Sie das gewünschte Thema herunter
Viele Vorlagen werden von hugo bereitgestellt. Die Vorlage, die Sie verwenden möchten, finden Sie unter theme.gohugo.io. Referenz: Hugo Theme Ranking Site
Wählen Sie hier Lernen. Klicken Sie auf [Demo], um die Websites anzuzeigen, die das Thema verwenden.
Klicken Sie auf [Download], um die Github-Seite anzuzeigen.
Kopieren Sie den in [Code] angegebenen Link.
Starten Sie ein Terminal auf Ihrem lokalen PC und führen Sie im Ordner "DockerHugo" Folgendes aus:
Lokaler PC
git init
git submodule add https://github.com/matcornic/hugo-theme-learn.git hoge/themes/learn
Der Inhalt des Themas / Lernordners lautet wie folgt
learn
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── archetypes
│ └── default.md
├── data
│ └── webpack_assets.json
├── exampleSite
│ ├── config.toml
│ ├── content
│ │ ├── _index.md
│ │ ├── about
│ │ │ └── _index.md
│ │ ├── contact.md
│ │ └── post
│ │ ├── _index.md
│ │ ├── chapter-1.md
・
・
・
26 directories, 101 files
Sie können bestätigen, dass die für die Site-Konfiguration erforderlichen Dateien wie HTML und CSS heruntergeladen wurden.
Zu config.toml hinzugefügt
Führen Sie im Hoge-Ordner Ihres lokalen PC-Terminals Folgendes aus
Lokaler PC
echo 'theme = "learn"' >> config.toml
Zur Datei config.toml hinzugefügt
config.toml
baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "learn"
Inhaltsdatei hinzufügen
Wenn Sie den Befehl "hugo new" ausführen, werden die Inhaltsdateien unten gespeichert
Inhalt / angegebener Ordnername / Dateiname
Führen Sie im Hoge-Ordner des Containerterminals Folgendes aus
Container
hugo new posts/my-first-post.md
Wenn Sie die erstellte Datei überprüfen, werden die folgenden Elemente hinzugefügt
my-first-post.md
---
title: "My First Post"
date: 2020-09-16T13:53:14Z
draft: true
---
Der Standardwert ist "Entwurf: wahr", und Entwürfe werden nicht erstellt (Befehl "hugo"). Stellen Sie sicher, dass "Draft: false" festgelegt ist, wenn Sie erstellen möchten
Da es sich bei dieser Datei um eine Datei handelt, die den Inhalt der Webdatei beschreibt, fügen Sie sie wie folgt hinzu
#Titel
Versuchen Sie, eine Hoge-Site zu erstellen
Starten Sie den Hugo-Server
Starten Sie den Hugo-Server, um vor dem Erstellen den Browser einzuchecken
Führen Sie im Hugo-Ordner des Containerterminals Folgendes aus
Container
hugo server -D
Wenn Sie "-D" hinzufügen, wird auch der Entwurf angezeigt.
Überprüfen Sie die erstellte Website
Öffnen Sie http: // localhost: 1313 / in Ihrem Browser
Die Seitenanpassung wird in einem separaten Artikel beschrieben
Ändern Sie die Datei config.toml
Die Gesamtkonfiguration der Site erfolgt in der Datei config.toml.
Geändert wie folgt
config.toml
baseURL = "" #Nicht erforderlich, wenn der relative Pfad auf true gesetzt ist
languageCode = "ja" #Nicht erforderlich, da nicht mehrere Sprachen unterstützt werden."ja"Ändern
title = "My New Hugo Site"
theme = "learn"
publishDir = "../docs" #Dateispeicher wird gespeichert, wenn der Befehl hugo ausgeführt wird
relativeURLs = true #Ändern, um als relativer Pfad zu speichern (standardmäßig absoluter Pfad (relativeURLs)=false）)
Weitere Informationen zu Parametern finden Sie unter Hugo konfigurieren.
Ergänzende Erläuterung zum Grund für die Änderung von "PublishDir =" docs ""
Dieses Mal werden wir die Website auf GitHub Pages veröffentlichen. In Github Pages können Sie nur den Ordner [(root)] oder [docs] als Ordner angeben, in dem die Dateien gespeichert sind, die die Webseite erstellen. Also habe ich es in "publishDir =" ../ docs "geändert Standardmäßig ist der Ordner "public" angegeben.
Das folgende Bild ist der Einstellungsbildschirm von GitHub Pages
Ergänzende Erklärung zum Grund für das Setzen von "relativeURLs =" true ""
Durch den Wechsel von einem absoluten Pfad zu einem relativen Pfad ist es jetzt möglich, Ordner auch beim Verschieben zu verarbeiten.
Erstellen Sie eine statische Site
Führen Sie im Ordner "Docker Hugo" (Stammordner) des Containers Folgendes aus
Container
hugo
Da "PublishDir =" docs "" in config.toml beschrieben wurde, wurden HTML- und CSS-Dateien im Ordner docs generiert.
docs $ tree
.
├── 404.html
├── categories
│ ├── index.html
│ └── index.xml
├── css
│ ├── atom-one-dark-reasonable.css
│ ├── auto-complete.css
│ ├── featherlight.min.css
・
・
・
8 directories, 82 files
Veröffentlicht auf GitHub-Seiten
Veröffentlichen Sie auf GitHub Pages mit dem Befehl git oder SourceTree Weitere Informationen finden Sie im folgenden Artikel ・ [Terminal] Verwalten von git / github