Der Aufstieg der Butt-Website weniger

0
69

Wie es scheint, alle coolen kids haben gliedert sich in zwei Cliquen: die Kopflose CMS Publikum auf der einen Seite und der Statischen Website-Generator – Publikum auf der anderen. Während ich zugeben, sind das ziemlich Coole team-Namen, ich fand mich nicht in der Lage zu pick-a-Seite. In Anlehnung an Groucho Marx, “I don’ T care to belong to any club, der mich als Mitglied.”

Für meine eigenen einfachen blog (das ist peinlich im moment leer), eine statische Website-generator könnte eine gute Passform. Systeme wie Hugo und Jekyll haben beide dringend empfohlen, die von Entwicklern, die ich Liebe und Vertrauen und sehen toll aus auf den ersten Blick, aber ich schlug Stolpersteine bei der wollte ich mein theme oder die Einrichtung komplexer JavaScript und Interaktionen auf allen Seiten. Es gibt Möglichkeiten, beide lösen diese Probleme, aber das ist nicht die Art von Wochenende möchte ich haben.

Außer, dass ich Liebe, zu Experimentieren, neue Dinge, und ich habe eine große crush auf Vue im moment. Mit einem Headless-CMS-setup mit einem front-end, das entkoppelt ist von der back-end könnte eine gute Kombination für mich, aber nach 7+ Jahren PHP anschlagen mit WordPress, das ganze setup fühlt sich an wie overkill für meine Grundbedürfnisse.

Was ich wirklich will, ist ein statischer Website-generator, lassen Sie mich einen blog schreiben als einen Bestandteil einer größeren single-page-app, so habe ich Raum, um neue Dinge auszuprobieren und haben noch die volle Kontrolle über styling, ohne die Notwendigkeit für eine Datenbank oder irgendeine Art von back-end. Dies ist ein langer Weg, Ihnen zu sagen, dass ich gefunden habe, meinem eigenen club zu verbinden, die mit einem dezidiert un-Cooler name.

Machen Sie sich bereit für…

Der Butt-Website weniger

Da gibt es keine back-end, get it? 😶

Es dauert ein paar Schritte zu gehen butt-weniger:

  1. Einrichten eines single-page-app mit Vue
  2. Generieren Sie jede route zur build-Zeit
  3. Blog erstellen und Artikel-Komponenten
  4. Integrieren Webpack zu Parsen von Markdown-Inhalten
  5. Erweitern der Funktionalität mit plugins
  6. Gewinn!

Dieser Letzte Punkt hat zu ein Teil von jedem Vorschlag, richtig?

Ich weiß, es sieht aus wie eine Menge von Schritten, aber das ist nicht ganz so schwer, wie es scheint. Lassen Sie uns brechen Sie die Schritte zusammen.

Einrichten eines single-page-app mit Vue

Let ‘ s get Vue und läuft. Wir gehen zu müssen, um Webpack zu tun.

Ich bekomme es, Webpack ist ziemlich einschüchternd, auch wenn Sie wissen, was Los ist. Es ist wahrscheinlich am besten, lassen Sie jemand anderes tun, die wirklich harte Arbeit, so werden wir den Vue Progressive Web-App Boilerplate, wie unsere Stiftung und machen Sie ein paar tweaks.

Wir konnten mit dem Standard-setup aus dem repo, aber schon während ich diesen Artikel schrieb, gab es änderungen gibt. Im Interesse der nicht mit dieser ganzen Pause auf uns, wir werden ein repo, die ich erstellt für Demo-Zwecke. Die repo hat eine Zweigstelle für jeden Schritt werden wir über die in diesem Beitrag zu helfen, Folgen.

Blick auf GitHub

Das Klonen der repo-und check-out der Schritt-1-Zweig:

$ git clone https://github.com/evanfuture/vue-yes-blog.git Schritt-1
$ cd-vue-ja-blog
$ npm install
$ npm führen dev

Einer meiner Lieblings-Teile der modernen Entwicklung ist, dass es dauert nur dreißig Sekunden, um eine progressive web-app und läuft!

Als Nächstes wollen wir die Dinge zu komplizieren.

Generieren Sie jede route zur build-Zeit

Out of the box, single-page-apps haben nur einen einzigen Punkt. In anderen Worten, in der es lebt, lebt in einer einzigen URL. Dies macht Sinn, in manchen Fällen, aber wir wollen, dass unsere app so zu fühlen, wie eine normale website.

Wir müssen von der Geschichte-Modus in den Vue-Router-Datei, um das zu tun. Zuerst werden wir wiederum, indem-Modus: “Geschichte”, um die Router-Objekt Eigenschaften etwa so:

// src/router/index.js
Vue.verwenden(Router);

export-Standard-Router({
Modus: ‘Geschichte’,
Routen: [
// …

Unsere starter-app hat zwei Routen. Neben Hallo, wir haben eine zweite view-Komponente, genannt Banane, das Leben an der route /Banane. Ohne den history-Modus die URL für diese Seite wäre http://localhost:1982/#/banana. History Modus-reinigt bis zu http://localhost:1982/banana. Viel eleganter!

All das funktioniert Recht gut in der Entwicklung-Modus (npm führen dev), aber lassen Sie uns nehmen einen Blick an, was Sie Aussehen würde wie in der Produktion. Hier ist, wie wir kompilieren alles:

$ npm run bauen

Dieser Befehl wird erstellen Sie Ihre Vue-Website in der ./dist-Ordner. Zu sehen, es zu Leben, es einen einfachen Befehl für die Gründung einer super-einfachen HTTP-server auf Ihrem Mac:

$ cd dist
$ python -m SimpleHTTPServer

Sorry Windows-Leute, ich weiß nicht äquivalent!

Besuchen Sie nun localhost:8000 in Ihrem browser. Sie werden sehen, Ihre Website, wie es erscheint in einer Produktionsumgebung. Klicken Sie auf den Bananen-link, und alles ist gut.

Aktualisieren Sie die Seite. Oops! Dies zeigt unser erstes problem mit single-page-apps: es gibt nur eine HTML-Datei generiert wird zur build-Zeit, so gibt es keine Möglichkeit für den browser, um zu wissen, dass /Banane sollte Ziel der Haupt-app-Seite und laden Sie die route ohne fancy Apache-Stil leitet!

Natürlich, es gibt eine app dafür. Oder zumindest ein plugin. Die grundlegende Verwendung ist bereits in der Vue Progressive Web-App Boilerplate-Dokumentation. Hier ist, wie es sagt, wir können das drehen bis das plugin:

$ npm install-D prerender-spa-plugin

Nun fügen wir unsere Routen zu den Webpack Produktion Konfigurationsdatei:

// ./build/webpack.prod.conf.js
// …
const SWPrecacheWebpackPlugin = require(‘sw-precache-webpack-plugin’)
const PrerenderSpaPlugin = require(‘prerender-spa-plugin’)
const loadMinified = require(‘./Last-minified’)
// …
const webpackConfig = merge(baseWebpackConfig, {
// …
plugins: [
// …
neue SWPrecacheWebpackPlugin({
// …
verkleinern: true,
stripPrefix: ‘dist/’
}),
// prerender-app
neue PrerenderSpaPlugin(
// Pfad zum kompilierten app
Pfad.join(__dirname, ‘../dist’),
// Liste der Endpunkte, die Sie möchten, prerender
[ ‘/’, ‘/Bananen’ ]
)
]
})

Das ist es. Nun, wenn Sie ein neues bauen, jede route im array dargestellt werden sollen, wie ein neuer Einstiegspunkt in die app. Herzlichen Glückwunsch, wir haben im Grunde nur aktiviert statische Website generation!

Blog erstellen und Artikel-Komponenten

Wenn Sie überspringen, wir sind jetzt bis zu dem Schritt-2 Zweig meiner demo-repo. Gehen Sie voran und check it out:

$ git checkout-Schritt-2

Dieser Schritt ist ziemlich einfach. Wir erstellen zwei neue Komponenten, und diese verknüpfen.

Blog-Komponente

Lassen Sie uns registrieren Sie den blog-Komponente. Wir erstellen eine neue Datei namens YesBlog.vue in der /src/components Verzeichnis-and-drop in das markup für die Ansicht:

// ./src/components/YesBlog.vue
<Vorlage>
<div class=”blog”>
<h1>Blog</h1>
<router-link=”/”>Home</router-link>
<hr/>
<Artikel v-=”Artikel-Artikel” :key=”Artikel.slug” class=”Artikel”>
<router-link class=” – Artikel__link”:=”`/blog/${ article.slug }`”>
<h2 class=”article__title”>{{ Artikel.title }}</h2>
<p class=” – Artikel__description”>{{Artikel.Beschreibung}}</p>
</router-link>
</article>
</div>
</template>

<script>
export default {
name: ‘blog’,
berechnet: {
Artikel() {
return [
{
“slug”: “first-article’,
Titel: ‘Artikel’,
Beschreibung: “Dieser Artikel ist one’s Beschreibung’,
},
{
“slug”: “zweiter Artikel”,
Titel: ‘Artikel Zwei’,
Beschreibung: “Dieser Artikel ist zwei ‘s Beschreibung’,
},
];
},
},
};
</script>

Alles, was wir wirklich schaffen hier ein Platzhalter array (Artikel) gefüllt wird, die mit Artikel-Objekte. Dieses array erstellt unsere Artikel-Liste und benutzt die nacktschnecke parameter wie die post-ID. Der Titel und die Beschreibung Parameter füllen Sie die details veröffentlichen. Für jetzt, es ist alles hard-codiert, während wir uns den rest unseres Verhaltenskodex.

Artikel-Komponente

Die Artikel-Komponente ist ein ähnlicher Vorgang. Wir erstellen eine neue Datei namens YesArticle.vue, und stellen Sie den markup-Code für die anzeigen:

// ./src/components/YesArticle.vue
<Vorlage>
<div class=”Artikel”>
<h1 class=”blog – __ – Titel”>{{Artikel.title}}</h1>
<router-link=”/blog”>Zurück</router-link>
<hr/>
<div class=”article__body-v-html=”Artikel.body”></div>
</div>
</template>

<script>
export default {
name: ‘YesArticle’,
Requisiten: {
id: {
Typ: Zeichenfolge,
erforderlich: true,
},
},
Daten() {
return {
Artikel: {
Titel: dies.id,
body: ‘<h2>Prüfung</h2><p>Ok, let’s machen jetzt mehr!</p>’,
},
};
},
};
</script>

Wir verwenden die Requisiten übergeben, das zusammen mit dem router zu wissen, was die Artikel-ID, mit der wir arbeiten. Für jetzt, wir benutzen Sie einfach, dass, wie der post-Titel, und fest der Körper.

Routing

Wir können nicht vorankommen, bis fügen wir unsere neue Ansichten auf den router. Dadurch wird sichergestellt, dass unsere URLs sind gültig und können unsere navigation, um ordnungsgemäß zu funktionieren. Hier ist die Gesamtheit der router-Datei:

// ./src/router/index.js
import-Router von ‘vue-router’;
importieren Hallo aus ‘@/Komponenten/Hallo’;
import von Bananen aus ‘@/Komponenten/Banane’;
import YesBlog von ‘@/Komponenten/YesBlog’;
import YesArticle von ‘@/Komponenten/YesArticle’;

Vue.verwenden(Router);

export-Standard-Router({
Modus: ‘Geschichte’,
Routen: [
{
path: ‘/’,
name: ‘Hallo’,
Komponente: Hallo,
},
{
Pfad: ‘/Banane’,
name: ‘Banane’,
Komponente: Banane,
},
{
Pfad: ‘/blog’,
name: ‘YesBlog’,
Komponente: YesBlog,
},
{
Pfad: ‘/blog/:id’,
name: ‘YesArticle’,
Requisiten: true,
Komponente: YesArticle,
},
],
});

Beachten Sie, dass wir haben, angehängt /:id um die YesArtcle Komponente Pfad, und legen Sie seine Requisiten zu wahren. Diese sind von entscheidender Bedeutung, denn Sie schaffen die dynamischen routing setzen wir in der Komponente props-array der Komponente Datei.

Schließlich, wir können hinzufügen, einen link zu unserer homepage, die Punkte auf den blog. Dies ist, was wir fallen in die Hallo.vue-Datei zum laufen bringen:

<router-link=”/blog”>Blog</router-link>
Pre-rendering

Wir haben viel Arbeit gemacht so weit, aber keiner wird es bleiben, bis wir die pre-render unsere Routen. Pre-rendering ist eine ausgefallene Art zu sagen, dass wir sagen der app, welche Routen gibt es und dump die richtige markup in die richtige route. Wir haben ein Webpack plugin für das früher, so ist hier, was wir können, hinzufügen, um unsere Webpack Produktion Konfigurationsdatei:

// ./build/webpack.prod.conf.js
// …
// Liste der Endpunkte, die Sie möchten, prerender
[ ‘/’, ‘/Banane’, ‘/blog’, ‘/blog/Erster-Artikel’, ‘/blog/zweiter Artikel’ ]
// …

Ich muss zugeben, dieser Vorgang kann mühsam und nervig. Ich meine, wer berühren will, mehrere Dateien, um eine URL zu erstellen?! Zum Glück, können wir automatisieren, wir werden decken Ihr weiter unten.

Integrieren Webpack zu Parsen von Markdown-Inhalten

Wir sind jetzt bis zu dem Schritt-3 Zweig. Check it out, wenn Sie gerade mitlesen in den code:

$ git checkout-Schritt 3
Die Beiträge

Wir werden mit Markdown zu schreiben, unsere Beiträge, mit einigen FrontMatter zu erstellen meta-Daten-Funktionalität.

Zünden Sie sich eine neue Datei in der Beiträge Verzeichnis zu erstellen unseren ersten post:

// ./src/posts/first-Artikel.md

Titel: Artikel aus MD
Beschreibung: In dem der held beginnt frisch
erstellt: 2017-10-01T08:01:50+02
aktualisiert:
status: veröffentlichen

Hier ist der text des Artikels. Es ist ziemlich großartig, nicht wahr?

// ./src/posts/Sekunde-Artikel.md

Titel: Zwei Artikel aus MD
Beschreibung: Dies ist ein weiterer Artikel
erstellt: 2017-10-01T08:01:50+02
aktualisiert:
status: veröffentlichen

## Beginnen wir mit einem H2
Und dann einige text
Und dann code:
“html
<div class=”container”>
<div class=”main”>
<div class=”Artikel einfügen-wp-tags-hier”>
<h1>Titel</h1>
<div class=”article-content”>
<p class=”intro”>Intro-Text</p>
<p></p>
</div>
<div class=”article-meta”></div>
</div>
</div>
</div>

Dynamisches Routing

Eine lästige Sache ist im moment, dass wir brauchen, um fest unsere Routen für die pre-rendering-plugin. Zum Glück, es ist nicht kompliziert zu machen, diese Dynamik mit ein wenig Knoten Magie. Zunächst erstellen wir einen Helfer in unserem utility-Datei um die Dateien zu finden:

// ./build/utils.js
// …
const ExtractTextPlugin = require(‘Extrakt-text-webpack-plugin’)
const fs = require(‘fs’)

die Exporte.filesToRoutes = function (Verzeichnis, Erweiterung, routePrefix = “) {
Funktion findFilesInDir(startPath, filter){
lassen Sie Ergebnisse = []
if (!fs.existsSync(startPath)) {
console.log(“nicht dir “, startPath)
zurück
}
const Dateien = fs.readdirSync(startPath)
for (let i = 0; i < Dateien.length; i++) {
const Dateiname = Pfad.join(startPath, files[i])
const stat = fs.lstatSync(mit dem Namen)
if (stat.isDirectory()) {
Ergebnisse = Ergebnisse.concat(findFilesInDir(filename, filter)) //recurse
} else if (filename.indexOf (“filter”) > = 0) {
Ergebnisse.push(mit dem Namen)
}
}
die Ergebnisse zurückgeben
}

zurück findFilesInDir(path.join(__dirname, – Verzeichnis) – Erweiterung)
.Karte((filename) => {
Rückkehr mit dem Namen
.replace(path.join(__dirname, Verzeichnis), routePrefix)
.replace(Dateiendung, “)
})
}

die Exporte.assetsPath = function (_path) {
// …

Dies kann eigentlich nur kopiert und eingefügt werden, aber was wir hier getan haben, erstellen Sie eine utility-Methode genannt filesToRoutes (), die in einem Verzeichnis, Erweiterung, und eine optionale routePrefix, und liefert ein array von Routen basierend auf einem rekursiven Datei-Suche in diesem Verzeichnis.

Alles, was wir tun müssen, damit unsere blog-post-Routen dynamisch Zusammenführen dieses neue array in unsere PrerenderSpaPlugin Routen. Die macht des ES6 macht das wirklich einfach:

// ./build/webpack.prod.conf.js
// …
neue PrerenderSpaPlugin(
// Pfad zum kompilierten app
Pfad.join(__dirname, ‘../dist’),
// Liste der Endpunkte, die Sie möchten, prerender
[
‘/’,
‘/Banane’,
‘/blog’,
…utils.filesToRoutes(‘../src/posts’, ‘.md’, ‘/blog’)
]
)

Da wir bereits importierten utils an den Anfang der Datei für andere Zwecke, wir können nur die Verwendung der spread-operator … Zusammenführen die neue dynamische Routen-array in diese ein, und wir sind fertig. Jetzt unsere pre-rendering ist völlig dynamisch, hängt nur von uns hinzufügen einer neuen Datei!

Webpack-Frontlader

Wir sind jetzt bis zu dem Schritt-4 Zweig:

$ git checkout-Schritt 4

Um tatsächlich unser Markdown-Dateien zu analysieren,-können Inhalte, wir müssen einige Webpack Lader im Ort. Wieder jemand anderes getan hat, all die Arbeit für uns, so dass wir nur noch zu installieren und fügen Sie Sie zu unserer config.

$ npm install-D json-loader markdown-es-vor-Materie-loader markdown-es highlight.js yaml front-matter

Wir werden nur den Aufruf des json-loader und markdown-es-vor-Materie-loader von unserer Webpack config, aber letztere hat peer Abhängigkeiten von markdown-und highlight.js also installieren wir diese bei der gleichen Zeit. Auch, nichts warnt uns davor, aber auf yaml front-matter ist auch erforderlich, damit der obige Befehl fügt hinzu, dass, wie gut.

Verwenden Sie diese schicke neue Lader, den wir gehen, um einen block hinzufügen zu unserer Webpack base-config:

// ./build/webpack.base.conf.js
// …
– Modul.Exporte = {
// …
Modul: {
Regeln: [
// …
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: “url-loader’,
Optionen: {
limit: 10000,
name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]’)
}
},
{
test: /.md$/,
Lader: [‘json-loader’, ‘markdown-es-vor-Materie-loader’],
},
]
}
}

Jetzt, jede Zeit Webpack trifft auf eine require-Anweisung mit ein .md-Erweiterung zu verwenden, wird die front-matter-loader (wird korrekt Parsen der Metadaten-block von unserem Artikel als auch die code-Blöcke), und nehmen Sie die JSON-Ausgabe und führen Sie es durch die json-loader. Auf diese Weise wissen wir, dass wir am Ende mit einem Objekt für jeden Artikel, der wie folgt aussieht:

// first-Artikel.md [Objekt]
{
Körper: “<p>Hier ist der text des Artikels. Es ist ziemlich großartig, nicht wahr?</p>n”
erstellt: “2017-10-01T06:01:50.000 Z”
Beschreibung: “In dem der held beginnt frisch”
raw: “nnHere ist der text des Artikels. Es ist ziemlich großartig, nicht wahr?n”
“slug”: “first-Artikel”
status: “veröffentlichen”
Titel: “Ein Artikel von MD”
aktualisiert: null
}

Das ist genau das, was wir brauchen, und es ist ziemlich einfach zu erweitern, mit anderen Metadaten, wenn Sie müssen. Aber so weit dies nicht alles tun! Wir müssen verlangen, diese in eine unserer Komponenten, so dass Webpack finden und laden Sie es.

Wir könnten einfach schreiben:

require(‘../posts/first-Artikel.md’)

…aber dann hätten wir zu tun, dass für jeden Artikel, den wir schaffen, und das ist kein Spaß, wie unser blog wächst. Wir brauchen eine Möglichkeit, dynamisch Voraus, dass alle Markdown-Dateien.

Dynamische Erfordern

Zum Glück Webpack tut dies! Es war nicht leicht zu finden, die Dokumentation für diese, aber hier ist es. Es gibt eine Methode namens erfordern.Rahmen (), die wir verwenden können, um zu tun genau das, was wir brauchen. Wir werden hinzufügen, um den script-Bereich unserer YesBlog Komponente:

// ./src/components/YesBlog.vue
// …
<script>
const Beiträge = {};
const req = erforderlich.Kontext(‘../posts/’, false,’/.md$/);
req.- Tasten().forEach((key) => {
posten[key] = req(key);
});

export default {
name: ‘blog’,
berechnet: {
Artikel() {
const articleArray = [];
Objekt.Schlüssel(Beiträge).forEach((key) => {
const Artikel = posts[key];
Artikel.slug = Schlüssel.replace(‘./’, “).replace(‘.md’, “);
articleArray.push(Artikel);
});
zurück articleArray;
},
},
};
</script>
// …

Was ist hier Los? Wir schaffen ein Pfosten-Objekt, das wir zuerst füllen Sie mit den Artikeln, benutzen Sie dann später innerhalb der Komponente. Da wir pre-rendering alle unsere Inhalte, das Objekt sofort zur Verfügung.

Das erfordern.Rahmen () – Methode akzeptiert drei Argumente.

  • das Verzeichnis, in dem Sie suchen werden
  • oder nicht, ob auch Unterverzeichnisse
  • ein regex-filter, um Dateien zu gelangen

In unserem Fall, wir wollen nur die Markdown-Dateien in die Beiträge-Verzeichnis, also:

erfordern.Kontext(‘../posts/’, false,’/.md$/);

Diese geben uns eine Art seltsame neue Funktion/Objekt, das müssen wir analysieren, um zu verwenden. Das ist, wo erf.keys() uns ein array mit den relativen Pfaden zu jeder Datei. Wenn wir call-req(key), dieser wird wieder dem Artikel Objekts, wollen wir, damit wir zuordnen können, die Wert auf einen passenden Schlüssel in unserer Beiträge-Objekt.

Schließlich, in der berechneten Artikel () – Methode, werden wir automatisch generieren unsere slug, indem ein slug Schlüssel zu jedem post, mit dem Wert den Dateinamen ohne Pfad oder Erweiterung. Wenn wir wollten, könnte dies geändert werden, um es uns ermöglichen, setzen Sie die Schnecke in die Markdown selbst, und fallen erst wieder auf “auto” -generation. Zur gleichen Zeit, drücken wir die Artikel-Objekte in einem array, so haben wir etwas, leicht zu Durchlaufen, die in unserer Komponente.

Extra Credit

Es gibt zwei Dinge, die Sie wahrscheinlich wollen, zu tun, sofort, wenn Sie diese Methode verwenden. Zunächst ist zu Sortieren nach Datum und zweite filter Artikel-status (D. H. Entwurf und veröffentlicht). Da haben wir bereits ein array, dieses kann getan werden, in einer Linie Hinzugefügt, bevor die Rückkehr articleArray:

articleArray.filter(posten => posten.status === ‘veröffentlichen’).sort((a, b) => a ist.erstellt < b ist.erstellt);
Letzte Schritt

Eine Letzte Sache zu tun, jetzt, und das ist, weisen unsere YesArticle Komponente zu benutzen die neuen Daten erhalten wir zusammen mit der route zu ändern:

// ./src/components/YesArticle.vue
// …
Daten() {
return {
Artikel: require(`../posts/${dies.id}.md`), // eslint-disable-line global-erfordern, import – /Nein-dynamisch-erfordern
};
},

Da wir wissen, dass unsere Komponente werden pre-rendered, können wir deaktivieren Sie die ESLint Regeln, die verbieten, dynamischen und globalen erfordert, und benötigen den Pfad zu dem Beitrag entspricht, den id-parameter. Dies löst in unserem Webpack Markdown-Lader, und wir sind fertig!

OMG!!!

Gehen Sie vor und testen diese:

$ npm führen Sie build && cd-dist && python -m SimpleHTTPServer

Besuchen localhost:8000, navigieren und aktualisieren Sie die Seiten zu laden die gesamte app von der neuen Einstiegspunkt. Es funktioniert!

Ich möchte betonen, wie cool das ist. Haben wir um einen Ordner von Markdown-Dateien in ein array von Objekten, die wir nutzen können wie wir wollen, überall auf unserer website. Der Himmel ist die Grenze!

Wenn Sie wollen einfach nur sehen, wie das alles funktioniert, können Sie überprüfen Sie heraus den letzten Zweig:

$ git checkout-Schritt-complete

Erweitern der Funktionalität mit plugins

Mein Lieblings-Teil über diese Technik, dass alles ist erweiterbar und austauschbar.

Hat jemand eine bessere Markdown-Prozessor? Toll, die swap-loader! Müssen die Kontrolle über Ihre Website ist SEO? Gibt es ein plugin für, dass. Brauchen Sie, um ein Kommentarsystem? Fügen Sie das plugin auch.

Ich mag, um ein Auge auf diese beiden repositories für Ideen und inspiration:

  • Genial Vue.js
  • Genial Markdown

Gewinn!

Sie dachte, dieser Schritt war ein Witz?

Das Letzte, was wir werden wollen, jetzt zu tun ist, profitieren Sie von der Einfachheit, die wir erstellt haben und der nab einige Kostenlose hosting. Da Ihre Website wird nun generiert, die auf Ihrem git-repository, alles, was Sie wirklich brauchen, ist zu tun, drücken Sie Ihre änderungen auf Github, Bitbucket, Gitlab oder was auch immer code-repository aus, das Sie verwenden. Ich wählte Gitlab, weil private repos sind kostenlos und ich wollte nicht zu haben, meine Entwürfe der öffentlichkeit, auch in der repo-form.

Danach ist das einrichten, müssen Sie einen host. Was Sie wirklich wollen, ist ein host, die bietet kontinuierliche integration und Bereitstellung, so dass die Zusammenführung auf Ihre master-Zweig Auslöser der npm run-Befehl bauen und regeneriert Ihre Website.

Ich verwendet Gitlab – eigene CI-tools für die ersten paar Monate, nachdem ich diese eingerichtet. Ich fand das setup ist einfach, aber die Problembehandlung schwierig sein. Ich habe vor kurzem wechselte zu Netlify, die in einer herausragenden free-plan und einige große CLI-tools gebaut rechts in.

In beiden Fällen sind Sie in der Lage zu zeigen, Ihre eigene domain auf Ihren Servern und sogar die Einrichtung eines SSL-Zertifikats für die HTTPS-Unterstützung—, dass Letzte Punkt ist wichtig, wenn Sie jemals wollen, zu Experimentieren mit Dingen wie die getUserMedia API, oder erstellen Sie ein Geschäft, Umsatz zu machen.

Mit all diesem set up, du bist jetzt ein Mitglied der Po-weniger Website-club. Herzlichen Glückwunsch und willkommen, Freunde! Hoffentlich finden Sie dies eine einfache alternative zu komplexen content-management-Systeme für Ihre eigene persönliche Webseite und ermöglicht es Ihnen, zu Experimentieren mit Leichtigkeit. Bitte lassen Sie mich wissen in den Kommentaren, wenn Sie stecken bleiben auf dem Weg…oder, wenn es Ihnen gelingt, Ihre kühnsten Träume. 😉