bitrock website

Bitrock-Website

Bei dieser Website handelt es sich um eine VuePress-Instanz mit einem darauf angewendeten benutzerdefinierten Design. Sie können die offizielle Dokumentation lesen, um zu erfahren, wie Sie Inhalte bearbeiten oder wie das Design funktioniert.

Voraussetzungen

Um loslegen zu können, muss die folgende Software auf Ihrem Computer installiert sein:

• Node.js neueste stabile Version
• Yarn-Paketmanager Beide können über Homebrew in MacOS- und Linux-Umgebungen installiert werden.

Erstellen Sie eine lokale Entwicklungsumgebung

Klonen Sie das Repo lokal

$ git clone [email protected]:bitrockteam/bitrock-website.git

Bewegen Sie sich in den Ordner und installieren Sie Abhängigkeiten mit Yarn

$ cd bitrock-website && yarn

Starten Sie den Entwicklungs-Webserver auf localhost:8080

$ yarn start

Autorenschaft

Inhalte werden über Markdown-Dateien im Ordner ./src bereitgestellt. Es gibt keinen integrierten visuellen Editor, sodass sie überall, aber in der richtigen Reihenfolge erstellt werden können. Vue-Komponenten werden im Markdown-Inhalt unterstützt und es kann in Betracht gezogen werden, einige benutzerdefinierte Komponenten hinzuzufügen, um Autoren zusätzliche Funktionen zu ermöglichen. Metadaten werden mithilfe der Frontmatter-Spezifikation bereitgestellt.

Fügen Sie eine Seite hinzu

Erstellen Sie einen Unterordner im ./src und erstellen Sie darin eine Datei readme.md . Fügen Sie oben in der Datei die folgenden Daten hinzu:

---
layout : Page
---

Beispiel : Die Datei ./src/about-us/readme.md wird zur Seite https://bitrock.it/about-us .

Um eine Seite im Navigationsmenü hinzuzufügen, muss ./src/.vuepress/config.js aktualisiert werden.

Fügen Sie einen Blogbeitrag hinzu

Erstellen Sie einen Unterordner im Pfad ./src/blog und erstellen Sie darin eine Datei readme.md . Fügen Sie oben in der Datei die folgenden Daten hinzu:

---
title : Hello world!
image : /img/hello.jpg
author : writer
publish : 2018-12-21
layout : Post
category : news
tags :
  - greetings
  - hello
---

Beispiel : Die Datei ./src/blog/hello-world/readme.md wird zur Seite https://bitrock.it/blog/hello-world .

Beiträge werden in umgekehrter chronologischer Reihenfolge (das Neueste zuerst) auf der Hauptseite angezeigt.

Bilder

Site-weite Bilder müssen im Ordner „./src/.vuepress/public/img“ hinzugefügt werden. Beachten Sie, dass, wenn Sie ein Bild innerhalb eines Beitrags oder Seitenordners hinzufügen, es außerhalb der Seiten-URL nicht über einen relativen Pfad erreichbar ist.

Es gibt keinen automatisierten Optimierungsprozess. Seien Sie daher vorsichtig bei der Größe der Bilder, die Sie veröffentlichen.

Entwicklung

Alle Entwicklungsquelldateien befinden sich im Ordner ./src/.vuepress/theme .

In ./src/.vuepress/public können alle Arten von Assets abgelegt werden, die als statische Ressourcen auf der Stammebene der Bereitstellungsdomäne verfügbar sein müssen. Unterordner bleiben erhalten.

Vuepress-Plugins

• Wenn Sie @vuepress/plugin-google-analytics mit der Google Analytics-Überwachungs-ID angeben, wird der erforderliche Code in die Seiten eingefügt.
• @vuepress/plugin-pwa generiert in der Build-Phase einen Services Worker, der alle statischen Assets für das Offline-Caching zuordnet. Es wird nicht das zum Auslösen von PWA-Funktionen erforderliche Webmanifest generiert, das manuell erstellt und im öffentlichen Ordner bereitgestellt wird.
• @vuepress/plugin-back-to-top fügt einfach die Pfeilschaltfläche „Zurück nach oben“ hinzu, nachdem man vom ursprünglichen Ansichtsfenster etwas nach unten gescrollt hat.
• @vuepress/nprogress fügt beim Laden neuer Inhalte den Fortschrittsbalken oben auf den Seiten hinzu, ähnlich wie bei YouTube.

JS-Dienstprogramme

Die Hauptabhängigkeit hier ist die Vue.js-Bibliothek, die zum Erstellen der Komponenten verwendet wird, alles andere ist Vanilla Javascript.

CSS-Dienstprogramme

Wir verwenden diese CSS-Bibliotheken:

• Mit normalize.css rendern Browser alle Elemente konsistenter und entsprechen modernen Standards.
• typebase.css ein Ausgangspunkt für Webtypografie.
• Hamburger CSS-animiertes Hamburger-Menü.

Verzweigungspolitik

Dieses Projekt folgt einer einfachen Verzweigungsrichtlinie:

• master enthält nur stabilen Code und sollte nicht direkt aktualisiert werden
• development bei der entwickelter oder experimenteller Code geschrieben wird
• gh-pages , auf denen die verteilbaren statischen Dateien bereitgestellt werden, aber ** Sie sollten es vermeiden, hier direkt festzuschreiben/zu pushen **

Führen Sie development NICHT direkt mit master zusammen ( sie ist für den Administrator gesperrt... ), sondern senden Sie immer eine PR, um eine Überprüfung zu erhalten.

Aktualisieren und bereitstellen

Jedes Mal, wenn der master -Zweig aktualisiert wird (ein direktes Commit oder ein zusammengeführter PR), wird ein neuer Travis CI-Job ausgelöst, der aus den folgenden Schritten besteht:

1. Abhängigkeiten installieren
2. Vuepress erstellt die Website mit allen zugehörigen Dateien im Ordner /dist
3. Wenn der Build erfolgreich ist, wird der Ordner /dist auf GitHub Pages bereitgestellt
4. Das neue Deploy ist unter bitrock.it verfügbar

Es steht ein NPM-Skript zur Verfügung, das Sie manuell im gh-pages -Zweig von Ihrem lokalen Computer aus bereitstellen können (Sie müssen das Projekt zuerst lokal erstellen):

$ yarn gh:pages

Bitte nutzen Sie es aber nur, wenn es wirklich nötig ist.

Lizenz

Die Logos der Databiz Group, Bitrock und Radicalbit sind eingetragene Marken. Der Code wird unter der GNU AGPLv3-Lizenz verteilt. Die enthaltenen Stockfotos wurden von Unsplash zur Verfügung gestellt.