astro paper herunterladen - astro paper -Quellcode herunterladen

astro paper

Andere Kategorien

v4.7.0

Herunterladen

AstroPaper ?

Projektstruktur

In AstroPaper sehen Sie die folgenden Ordner und Dateien:

/
├── public/
│   ├── assets/
│   │   └── logo.svg
│   │   └── logo.png
│   └── favicon.svg
│   └── astropaper-og.jpg
│   └── robots.txt
│   └── toggle-theme.js
├── src/
│   ├── assets/
│   │   └── socialIcons.ts
│   ├── components/
│   ├── content/
│   │   |  blog/
│   │   |    └── some-blog-posts.md
│   │   └── config.ts
│   ├── layouts/
│   └── pages/
│   └── styles/
│   └── utils/
│   └── config.ts
│   └── types.ts
└── package.json

Astro sucht im Verzeichnis src/pages/ nach .astro oder .md Dateien. Jede Seite wird basierend auf ihrem Dateinamen als Route angezeigt.

Alle statischen Assets, wie z. B. Bilder, können im Verzeichnis public/ abgelegt werden.

Alle Blogbeiträge werden im Verzeichnis src/content/blog gespeichert.

Dokumentation

Die Dokumentation kann in zwei Formaten gelesen werden: Markdown und Blog-Beitrag .

Konfiguration – Markdown | Blogbeitrag
Beiträge hinzufügen – Markdown | Blogbeitrag
Farbschemata anpassen – Markdown | Blogbeitrag
Vordefinierte Farbschemata – Markdown | Blogbeitrag

Schauen Sie sich für AstroPaper v1 diesen Zweig und diese Live-URL an

Tech-Stack

Hauptrahmen - Astro
Typprüfung – TypeScript
Komponenten-Framework – ReactJS
Styling – TailwindCSS
UI/UX – Figma-Designdatei
Fuzzy-Suche – FuseJS
Symbole - Boxicons | Tischler
Codeformatierung – Hübscher
Bereitstellung – Cloudflare-Seiten
Illustration auf der About-Seite – https://freesvgillustration.com
Linting - ESLint

??‍ Lokal ausgeführt

Sie können dieses Projekt lokal verwenden, indem Sie den folgenden Befehl in Ihrem gewünschten Verzeichnis ausführen:

 # npm 6.x
npm create astro@latest --template satnaing/astro-paper

# npm 7+, extra double-dash is needed:
npm create astro@latest -- --template satnaing/astro-paper

# yarn
yarn create astro --template satnaing/astro-paper

# pnpm
pnpm dlx create-astro --template satnaing/astro-paper

Warnung! Wenn Sie yarn 1 verwenden, müssen Sie möglicherweise sharp als Abhängigkeit installieren.

Starten Sie dann das Projekt, indem Sie die folgenden Befehle ausführen:

 # install dependencies
npm run install

# start running the project
npm run dev

Wenn Sie Docker installiert haben, können Sie alternativ Docker verwenden, um dieses Projekt lokal auszuführen. So geht's:

 # Build the Docker image
docker build -t astropaper .

# Run the Docker container
docker run -p 4321:80 astropaper

Google-Site-Verifizierung (optional)

Sie können Ihr Google Site Verification-HTML-Tag mithilfe einer Umgebungsvariablen ganz einfach in AstroPaper hinzufügen. Dieser Schritt ist optional. Wenn Sie die folgende Umgebungsvariable nicht hinzufügen, wird das Tag „google-site-verification“ nicht im HTML-Abschnitt <head> angezeigt.

 # in your environment variable file (.env)
PUBLIC_GOOGLE_SITE_VERIFICATION=your-google-site-verification-value

In dieser Diskussion erfahren Sie, wie Sie AstroPaper zur Google Search Console hinzufügen.

? Befehle

Alle Befehle werden im Stammverzeichnis des Projekts von einem Terminal aus ausgeführt:

Notiz! Für Docker -Befehle muss es auf Ihrem Computer installiert sein.

Befehl	Aktion
`npm install`	Installiert Abhängigkeiten
`npm run dev`	Startet den lokalen Entwicklungsserver bei `localhost:4321`
`npm run build`	Erstellen Sie Ihren Produktionsstandort auf `./dist/`
`npm run preview`	Sehen Sie sich Ihren Build lokal in der Vorschau an, bevor Sie ihn bereitstellen
`npm run format:check`	Überprüfen Sie das Codeformat mit Prettier
`npm run format`	Formatieren Sie Codes mit Prettier
`npm run sync`	Erzeugt TypeScript-Typen für alle Astro-Module. Erfahren Sie mehr.
`npm run lint`	Flusen mit ESLint
`docker compose up -d`	Führen Sie AstroPaper auf Docker aus. Sie können mit demselben Hostnamen und Port zugreifen, der im Befehl `dev` angegeben ist.
`docker compose run app npm install`	Sie können jeden der oben genannten Befehle im Docker-Container ausführen.
`docker build -t astropaper .`	Erstellen Sie ein Docker-Image für AstroPaper.
`docker run -p 4321:80 astropaper`	Führen Sie AstroPaper auf Docker aus. Die Website wird unter `http://localhost:4321` zugänglich sein.

Warnung! Windows PowerShell-Benutzer müssen möglicherweise das Concurrently-Paket installieren, wenn sie während der Entwicklung Diagnosen ausführen möchten ( astro check --watch & astro dev ). Weitere Informationen finden Sie in dieser Ausgabe.

Feedback und Vorschläge

Wenn Sie Vorschläge/Feedback haben, können Sie mich per E-Mail kontaktieren. Alternativ können Sie auch gerne ein Problem eröffnen, wenn Sie Fehler finden oder neue Funktionen anfordern möchten.