handmade blog

✍️

Handgemachter Blog

Lesen Sie dieses Dokument in einer anderen Sprache: ?? ?? ?? ?? ?? ?? ??

Handmade Blog ist ein leichter statischer Blog-Generator für Leute, die schnell einen Blog starten möchten. Es unterstützt Artikeltypdokumente für einen Blogbeitrag, Arbeitstypdokumente für Portfolios, Code-Highlights, KaTeX-Syntax, Fußnoten und mehr.

Demo: Hier

Vitrine

• betty-grof.github.io: https://github.com/betty-grof/betty-grof.github.io
• parksb.github.io: https://github.com/parksb/parksb.github.io

Leuchtturm-Ergebnisse

Article/0.html auf Mobilgeräten

Article/0.html auf dem Desktop

Erste Schritte

1. Klicken Sie über der Dateiliste auf die Schaltfläche „Diese Vorlage verwenden“, um ein neues Repository zu erstellen. Wenn Sie die Domäne github.io verwenden möchten, müssen Sie dem Repository den Namen {YOUR_ID}.github.io geben. (z. B. betty-grof.github.io ) Vergessen Sie nicht, die Option „Alle Zweige einbeziehen“ zu aktivieren.

   

   

2. Klicken Sie in Ihrem Repository auf die Registerkarte „Einstellungen“ und legen Sie den Quellzweig für GitHub Pages auf gh-pages branch“ fest. GitHub Pages hostet Ihre Website basierend auf gh-pages -Zweig. In wenigen Minuten können Sie über https://{YOUR_ID}.github.io/ auf die Website zugreifen.

   

   

3. Klonen Sie das Repository und installieren Sie Knotenpakete.

   $ git clone https://github.com/{YOUR_ID}/{REPOSITORY_NAME}.git # git clone https://github.com/betty-grof/betty-grof.github.io.git
   $ cd {REPOSITORY_NAME} # cd betty-grof.github.io
   $ npm install

4. Passen Sie einige Texte wie den Titel der Navigation an (in app/templates/navigations.ejs ) und führen Sie npm run build aus.

    < nav >
     < a class =" logo-link " href =" / " >
       < h1 > CUSTOMIZED BLOG TITLE </ h1 >
       < span > customized blog subtitle </ span >
     </ a >
     < small >
       < a id =" about " class =" info-link " href =" /about.html " > ?About </ a > /
       < a id =" works " class =" info-link " href =" /works.html " > Works </ a > /
       < a id =" articles " class =" info-link " href =" /articles.html " > Articles </ a >
     </ small >
   </ nav > 

   $ npm run build

5. Führen Sie npm start aus, um einen lokalen Server zu starten, http://localhost:8080/ überwacht. Der lokale Server basiert auf dist -Verzeichnis.

   $ npm run build
   $ npm start

   

6. Übernehmen Sie die Änderungen in Ihrem Arbeitsverzeichnis und übertragen Sie sie in das Remote-Repository.

   $ git add ./app/templates/navigations.ejs
   $ git commit -m " Customize the blog title and subtitle "
   $ git push origin master

7. Führen Sie das deploy aus, wenn Sie bereit sind, die Website zu hosten. Dieses Skript erstellt lokale Dateien im Verzeichnis dist und verschiebt sie in den Zweig gh-pages , der nur die Dateien im Verzeichnis dist enthält. GitHub Pages hostet Ihre Website automatisch unter https://{YOUR_ID}.github.io/ basierend auf gh-pages -Zweig.

   $ npm run deploy

Verwendung

Live-Nachladen

1. Führen Sie npm run watch aus, um Änderungen in Echtzeit zu verfolgen.
2. Führen Sie npm start aus, um den lokalen Server zu starten. ( npm run watch muss weiterhin im Hintergrund, auf einer anderen Registerkarte oder in einer anderen Sitzung ausgeführt werden.)
3. Jetzt wird es automatisch erstellt, wenn Sie Änderungen an Dateien in den Verzeichnissen app/templates , app/styles und _articles vornehmen.

Dokument verfassen und veröffentlichen

1. Schreiben Sie ein Dokument in das Verzeichnis _articles oder _works .
2. Führen Sie das Skript npm run publish article oder npm run publish work aus, um Markdown-Dokumente in HTML zu konvertieren.
3. Vorschau des konvertierten Dokuments auf dem lokalen Server mithilfe npm start .
4. Übernehmen Sie die Änderungen, übertragen Sie sie in das Repository und führen Sie zum Bereitstellen npm run deploy aus.

Bearbeitungsvorlage

Ändern Sie eine EJS-Vorlage, um den Inhalt der vorhandenen Seite zu ändern. Wenn Sie beispielsweise ein Bild auf der Zielseite einfügen möchten, öffnen Sie die Datei app/templates/index.ejs und fügen Sie das Tag img zum Element main-container hinzu.

 < main id =" main-container " >
  < img src =" ../assets/profile.jpg " alt =" My profile picture " />
  < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ p >
</ main >

Führen Sie dann npm run build script aus, um die geänderte Zielseite zu veröffentlichen und eine Vorschau der Änderungen auf dem lokalen Server mithilfe npm start script anzuzeigen.

$ npm run build
$ npm start

Wenn Sie zur Bereitstellung bereit sind, führen Sie das Skript npm run deploy aus. Auf diese Weise können Sie nicht nur die Zielseite, sondern alle Seiten ändern. (Möglicherweise müssen Sie die Projektstruktur verstehen.)

Hinzufügen einer benutzerdefinierten Domäne

Erstellen Sie eine CNAME-Datei im Stammverzeichnis. Der Erstellungsprozess übernimmt automatisch den CNAME für Sie und Sie können Ihr Blog von Ihrer benutzerdefinierten Domain aus bereitstellen.

Um mehr darüber zu erfahren, wie Github CNAMEs verwaltet, schauen Sie sich die Dokumente an

Projektstruktur

• _articles – Markdown-Dateien für die Blogbeiträge.
• _works – Markdown-Dateien für das Portfolio.
• app
  • assets – Alle Dateien, die von HTML-Dateien importiert werden sollen, z. B. Bilder, Schriftarten usw.
  • public – Vom publish generierte HTML-Dateien. server und dist Verzeichnis basiert auf diesem Verzeichnis. Ändern Sie die Dateien in diesem Verzeichnis nicht direkt.
    • article – HTML-Dateien, die aus dem Verzeichnis _articles konvertiert wurden.
    • work – HTML-Dateien, die aus _works Verzeichnis konvertiert wurden.
  • styles – CSS-Quellcode, der von HTML-Dateien importiert werden soll.
  • static – Alle statischen Dateien, die nicht vom build -Skript kompiliert werden, wie robots.txt , sitemap.xml oder SEO-Dateien. build -Skript kopiert alle Dateien in diesem Verzeichnis in das Verzeichnis dist .
  • templates – EJS-Vorlagendateien. Das publish konvertiert Vorlagen in diesem Verzeichnis in HTML-Dateien.
• dist – Vom build -Skript kompilierte Dateien. start öffnet den lokalen Server basierend auf diesem Verzeichnis, und das deploy stellt eine Website auf GitHub-Seiten basierend auf diesem Verzeichnis bereit. Ändern Sie die Dateien in diesem Verzeichnis nicht direkt.
• services – Quellcode zur Implementierung publish .
  • classes
  • models
• tools – Quellcode zur Implementierung verschiedener NPM-Skripte.

Verfügbare Skripte

npm start

Startet den lokalen Entwicklungsserver, der http://localhost:8080/ überwacht.

npm run publish

Konvertiert Vorlagen in HTML-Dateien.

$ npm run publish article

Konvertiert alle Artikel.

$ npm run publish works

Konvertiert alle Werke.

$ npm run publish article 5

Konvertiert einen Artikel mit der ID 5.

$ npm run publish work 3

Konvertiert ein Werk mit der ID 3.

$ npm run publish page

Konvertiert alle Seiten.

npm run watch

Erstellt Vorlagendateien im templates , CSS-Dateien im styles -Verzeichnis und Markdown-Dateien im _articles -Verzeichnis automatisch neu, wenn die Dateien geändert werden.

npm run build

Erstellt Dateien mit Parcel Bundler.

npm run deploy

Erstellt die Dateien und stellt sie bereit.

Lizenz

Dieses Projekt ist unter der MIT-Lizenz lizenziert – Einzelheiten finden Sie in der LIZENZ-Datei.