devii
v0.5.0
Ein Entwickler -Blog -Starter für 2020.
Weiter.js
Reagieren
Typoskript
Markdown
Syntax -Hervorhebung
SEO
RSS -Generation
Wenn Sie glücklich sind und es wissen, spiele dieses Repo
/md/blog hinzuMarkdown.tsx Komponente mit Unterstützung für die Syntax-Hervorhebung im GitHub-StilLesen Sie mehr über die Motivation + Design hinter Devii unter https://colinhacks.com/blog/devii.
Dieses Repo enthält den Code für https://devii.dev.
devii.dev dient sowohl als Dokumentation als auch als funktionierende Demo von Devii. Nachdem Sie es klonen/gegabelt haben, können Sie den Code durchsuchen, um zu erfahren, wie devii funktioniert. Dann können Sie alles herausreißen, was Sie nicht mögen, alles andere anpassen und Ihre eigenen Werkzeuge und Komponenten über dem Foundation Devii erstellen!
Ihre persönliche Website ist die Online -Manifestation von Ihnen. Devii liefert nicht wirklich viel außerhalb der Schachtel. Es bietet einige schöne Standardstile im mittleren Stil für Ihre Blog-Beiträge und einige Tools zum Laden/Rendern von Markdown. Aber Sie müssen Ihre eigene Homepage mehr oder weniger von Grund auf neu implementieren. Und das ist der Punkt! Geben Sie sich nicht mit einem Thema zufrieden. Bauen Sie etwas, das Sie repräsentiert.
Um loszulegen:
git clone [email protected]:yourusername/devii.git my-blog
cd my-blog
yarn
yarn dev . Dies sollte einen Server auf http://localhost:3000 starten. Der Kern dieses Repos ist der nächste.js. Wir haben Next.js gewählt, weil es die einfachste und eleganteste Möglichkeit ist, eine statische Version einer auf React-basierten Website zu generieren. Die Dokumentation ist ausgezeichnet; Lesen Sie es zuerst: Next.js Dokumentation.
Hier ist eine abgekürzte Version der Projektstruktur. Bestimmte Konfigurationsdateien ( next.config.js , next-end.d.ts , .gitignore ) wurden zum Einfachheit halber entfernt.
.
├── README.md
├── public // all static assets (images, css, etc) go here
├── pages // every .tsx component in this dir becomes a page of the final site
| ├── index.tsx // the home page (which has access to the list of all blog posts)
| ├── blog
| ├── [blog].md // a template component that renders the blog posts under `/md/blog`
├── md
| ├── blog
| ├── devii.md // this page!
├── whatever.md // every MD file in this directory becomes a blog post
├── components
| ├── BlogPost.tsx
| ├── Code.tsx
| ├── Footer.tsx
| ├── Header.tsx
| ├── Markdown.tsx
| ├── Meta.tsx
| ├── <various>
├── loader.ts // contains utility functions for loading/parsing Markdown
├── node_modules
├── tsconfig.json
├── package.json
Next.js generiert eine neue Webseite für jede Datei im pages . Wenn Sie Ihrem Blog eine Seite über eine Seite hinzufügen möchten, fügen Sie einfach about.tsx auf pages hinzu und schreiben Sie die Seite.
Standardmäßig enthält das Repo nur zwei Seiten: eine Homepage ( /pages/index.tsx ) und eine Blog -Seite ( /pages/[blog].md ).
Die Datei [blog].ts folgt der nächsten.
Die Startseite ist absichtlich minimal. Sie können alles, was Sie wollen, in index.tsx einfügen. Eines unserer Ziele bei der Gestaltung von Devii war es, dem Entwickler keine Einschränkungen zu setzen. Verwenden Sie Ihre Fantasie! Ihre Website ist das Online -Manifestion von Ihnen. Sie können alle NPM -Pakete oder Styling -Bibliotheken verwenden, die Sie mögen.
Devii ist über das Styling nicht geöffnet. Da es sich bei Ihrer Devii -Website um eine Standard -React -App unter der Haube handelt, können Sie Ihre bevorzugte Bibliothek von npm zum Styling verwenden.
Devii liefert standardmäßig bestimmte Stile, insbesondere im Markdown -Renderer ( /components/Markdown.tsx ). Diese Stile werden mit der styled-jsx Styling-Lösung von Next implementiert. Leider war es notwendig, diese Stile global zu machen, da styled-jsx mit Komponenten von Drittanbietern nicht gut spielt (in diesem Fall react-markdown ).
Fühlen Sie sich frei, die integrierten Stile mit Ihrer Bibliothek der Wahl erneut zu unterlegen, wenn Sie eine separate Styling-Bibliothek verwenden (Emotion ist ziemlich herrlich), dann können Sie die Standardstile erneut implementieren
Fügen Sie einfach eine Markdown -Datei unter md/blog/ um einen neuen Blog -Beitrag zu erstellen:
foo.md im Verzeichnis /md/bloghttp://localhost:3000/blog/foo . Sie sollten den neuen Beitrag sehen. Jede Markdown -Datei kann einen "Frontmatter -Block" enthalten, der verschiedene Metadaten enthält. Devii bietet ein loadPost -Dienstprogramm, das eine Markdown -Datei lädt, die Frontmatter -Metadaten analysiert und ein strukturiertes PostData -Objekt zurückgibt:
type PostData = {
path : string ;
title ?: string ;
subtitle ?: string ;
description ?: string ; // used for SEO
canonicalUrl ?: string ; // used for SEO
datePublished ?: number ; // Unix timestamp
author ?: string ;
authorPhoto ?: string ;
authorHandle ?: string ; // twitter handle
tags ?: string [ ] ;
bannerPhoto ?: string ;
thumbnailPhoto ?: string ;
} ; Beispielsweise ist hier der FrontMatter-Blog aus dem Beispiel-Blog-Beitrag ( md/blog/the-ultimate-tech-stack.md ):
---
title: Introducing Devii
subtitle: Bringing the power of React, TypeScript, and static generation to dev blogs everywhere
datePublished: 1589064522569
author: Ben Bitdiddle
tags:
- Devii
- Blogs
authorPhoto: /img/profile.jpg
bannerPhoto: /img/brook.jpg
thumbnailPhoto: /img/brook.jpg
---
View /loader.ts , um zu sehen, wie dies funktioniert.
Fügen Sie einfach Ihre Google Analytics-ID (z. B. UA-999999999-1 ') zu globals.ts und Devii hinzu. Fügen Sie Ihrer Website automatisch den entsprechenden Google Analytics-Snippet hinzu. Gehen Sie zu /pages/_app.ts um zu sehen, wie dies funktioniert, oder passen Sie dieses Verhalten an.
Der Markdown -Renderer ( Markdown.tsx ) bietet einen von Medium inspirierten Standardstil. Ändern Sie einfach die CSS in Markdown.tsx , um das Design nach Ihren Wünschen anzupassen.
Sie können Codeblöcke problemlos in Ihre Blog-Beiträge mithilfe der Triple-Backtick-Syntax (genau wie Github) eingeben. Kein Einbettung mehr Codepen Iframes!
Arbeitet aus dem Feld für alle Programmiersprachen. Geben Sie Ihre Sprache mit einem "Sprach -Tag" an. Also das:
`` `ts
// ziemlich ordentlich, oder?
const test = (arg: string) => {
return arg.length> 5;
};
`` `dreht sich in
// pretty neat huh?
const test = ( arg : string ) => {
return arg . length > 5 ;
} ; View /components/Code.tsx anzeigen, um zu sehen, wie dies funktioniert, oder anpassen dieses Verhalten.
Sie müssen all dies nicht verstehen, um Devii zu verwenden. Betrachten Sie dies als "erweiterte Anleitung", den Sie verwenden können, wenn Sie die Struktur der Website anpassen möchten.
Die Markdown -Posts werden während des nächsten Static Build -Schritts geladen. Schauen Sie sich die Daten zur Dokumentation von Daten ab, um mehr darüber zu erfahren.
Hier ist die Kurzversion: Wenn eine Funktion namens getStaticProps von einer Ihrer Seitenkomponenten exportiert werden, wird diese Funktion als NEXT ausgeführt, das Ergebnis übernommen und die props -Eigenschaft (die ein weiteres Objekt sein sollte) als Requisiten in Ihre Seite übergeben.
Sie können eine Markdown -Datei dynamisch mit loadMarkdownFile laden und analysieren, eine in loader.ts implementierte Versorgungsfunktion. Es ist eine asynchronisierte Funktion, die ein PostData -Typscript -Objekt zurückgibt, das alle oben aufgeführten Metadatenschlüsse enthält:
Weitere Informationen finden Sie in der Implementierung getStaticProps von der Homepage. Die Funktion ruft loadBlogPosts auf - eine Utilty -Funktion, die alle Blog -Beiträge in /md/blog/ verzeichnis lädt, sie analysiert und PostData[] zurückgibt.
export const getStaticProps = async ( ) => {
const posts = await loadBlogPosts ( ) ;
return { props : { posts } } ;
} ; Es gibt einige Dienstprogrammfunktionen in loader.ts die Devii verwendet. Alle Funktionen sind asynchron ! Alle Funktionen akzeptieren einen relativen Pfad, der voraussichtlich für das md/ Verzeichnis _relativ ist. Beispielsweise würde loadPost('blog/test.md' ) /md/blog/test.md laden.
loadPost lädt/analysiert eine Markdown -Datei und gibt eine PostData zurückloadBlogPosts : Laden/analysiert alle Dateien in /md/blog/ . Gibt PostData[] zurück. Wird in index.tsx verwendet, um eine Liste aller veröffentlichten Blog -Beiträge zu laden/zu rendernloadMarkdownFile : Lädt eine Markdown -Datei, anschließt sie jedoch nicht an. Gibt den String -Inhalt zurück. Nützlich, wenn Sie einige Teile einer Seite in Markdown und anderen Teilen in React implementieren möchtenloadMarkdownFiles : Akzeptiert ein Glob -Muster und lädt alle Dateien in /md/ deren Namen mit dem Muster übereinstimmen. Intern von loadBlogPosts verwendet Sie können eine voll statische Version Ihrer Website mit yarn build && yarn export generieren. Dieser Schritt wird vollständig von Next.js. Die statische Stelle wird in das out -Verzeichnis exportiert.
Verwenden Sie nach seiner Erstellung Ihren statischen Dateihosting -Dienst der Wahl (Vercel, Netlify, Firebase Hosting, Amazon S3), um Ihre Website bereitzustellen.
Es gibt eine globals.ts -Datei im Projektroot, die einige Einstellungen/Konfigurationsmetadaten über Ihre Website enthält:
yourName : Ihr Name, der für die Urheberrechts -Tags in der Fußzeile und im RSS -Feed, z. B. Alyssa P. Hacker, verwendet wirdsiteName : Der Titel Ihres Blogs, z. B. Alyssa's Cool Blog ;siteDescription : Eine kurze Beschreibung, die im meta -Beschreibungs -Tag verwendet wird, z. B. "Ich schreibe über Code" n Zeug ";siteCreationDate : Wird im erzeugten RSS -Feed verwendet. Verwenden Sie dieses Format: '3. März 2020 04:00:00 GMT';twitterHandle : Der Twitter -Handle für Sie oder Ihr Blog/Unternehmen, das in den Twitter -Meta -Tags verwendet wird. Fügen Sie das @ symbol hinzu, z. B. '@AlysSaphacker';email : Ihre E -Mail, verwendet als "Webmaster" und "ManagingEtitor" des generierten RSS -Feeds, z. B. [email protected] ;url : Die Basis -URL Ihrer Website, die zum "Berechnen" von kanonischen Links von relativen Pfaden "https://alyssaphacker.com" verwendet wird;accentColor : Die Kopf- und Fußzeile -Hintergrundfarbe zB #4fc2b4 ; Ein RSS-Feed wird aus Ihrem Blog-Post-Feed automatisch generiert. Dieser Feed wird unter Verwendung des rss Moduls (zum Konvertieren von JSONs in RSS-Format) und showdown zum Konvertieren der Markdown-Dateien in RSS-kompatible HTML erzeugt.
Damit die RSS -Generation arbeitet, müssen alle Ihre Beiträge einen datePublished -Zeitstempel in ihren Frontmatter -Metadaten enthalten. Um die RSS -Generierung zu untersuchen oder anzupassen, lesen Sie die Datei rssUtil.ts -Datei im Stammverzeichnis.
Jede Blog -Post -Seite besiedelte Meta -Tags automatisch auf der Grundlage der Post -Metadaten. Dies enthält ein title -Tag, meta -Tags, og: Tags, Twitter -Metadaten und ein link -Tag, das die kanonische URL enthält.
Der Standardwert der kanonischen URL wird berechnet, indem der Wert Ihrer url -Konfiguration (siehe globale Konfigurationen oben) und den relativen Pfad Ihres Beitrags verkettet werden. Stellen Sie sicher, dass die kanonische URL genau der URL im Browser entspricht, wenn Sie Ihre Live -Site besuchen, andernfalls kann die SEO Ihrer Website leiden.
Hier gibt es nichts "unter der Motorhaube". Sie können alle Dateien anzeigen und ändern, die die oben aufgeführte Funktionen angeben. Devii bietet nur ein Projektgerüst, einige Markdown-Lade-Ladeversorger (in loader.ts ) und einige vernünftige Styling-Standardeinstellungen (insbesondere in Markdown.tsx ).
Um an das Anpassen zu beginnen, lesen Sie den Quellcode von index.tsx (die Homepage), BlogPost.tsx (die Blog -Post -Vorlage) und Markdown.tsx (der Markdown -Renderer).
Besuchen Sie das Github Repo, um loszulegen: https://github.com/colinhacks/devii. Wenn Ihnen dieses Projekt gefällt, lassen Sie ein ️Star verbunden, um mehr Menschen zu helfen, Devii zu finden?
yarn dev Startet den Entwicklungsserver. Äquivalent zu next dev .
yarn build Erstellt einen optimierten Build Ihrer Website. Entspricht dem next build .
yarn export Exportiert Ihre Website in statische Dateien. Alle Dateien werden in /out geschrieben. Verwenden Sie Ihren statischen Dateihosting -Dienst der Wahl (Firebase Hosting, Amazon S3, Vercel), um Ihre Website bereitzustellen. Entspricht dem next export .
