astro portfolioダウンロード - astro portfolioソースコードのダウンロード

astro portfolio

その他のカテゴリー

0.0.2

ダウンロード

?これは、 Astro 4.0 + Tailwind CSS を使用してポートフォリオウェブサイトを作成するための無料のテンプレートです。

ダークモード

ライトモード

灯台レポート

デモ

? https://astro-fe-portfolio.netlify.app/

特徴

✔️ダークモードをサポートするTailwind CSS (@astrojs/tailwind) との統合。

✔️ 次の統合を使用します。

@astrojs/mdx
@astrojs/画像
@astrojs/tailwind - より適切なクラスソートプラグインを使用
@astroアイコン
@astro-seo
@astro-navbar

✔️(@Playwright) e2e テストがセットアップされました。

フロントマター (タイトル、説明、作成者、日付、画像、タグ) と RSS フィード、サイトマップ、robots.txt を含むブログ

404エラーページ

プロジェクトの構造

Astro プロジェクト内には、次のフォルダーとファイルが表示されます。

 /
├── public/
│   └── favicon.ico
|   ├── hero.png
|   └── ...
├── src/
|   ├── assets/
|   |   ├── images/
│   │   |   ├── hero.png
|   |   |   └── ...
│   ├── components/
│   │   ├── ui/
│   │   |   ├── BackToTop.astro
|   |   |   └── ...
│   │   ├── About.astro
│   │   ├── Contact.astro
|   |   └── ...
│   ├── content/
│   │   ├── projects/
│   │   │   ├── project-1.md
│   │   │   ├── project-1.md
│   │   │   └── ...
│   │   └-- config.ts
│   ├── layouts/
│   │   ├── Layout.astro
│   ├── pages/
│   │   ├── index.astro
│   ├── tests/
│   │   ├── index.spec.ts
├── package.json
├── astro.config.mjs
└── ...

Astro は、 src/pages/ディレクトリで.astro 、 .md 、または.mdxファイルを探します。各ページは、ファイル名に基づいてルートとして公開されます。

src/components/は Astro コンポーネントを配置し、同様にレイアウトの場合はsrc/layouts/を配置します。

画像はsrc/images/に配置できます。

ブログとドキュメントのコンテンツは、 Markdown ファイルまたは MDX ファイルのコレクションとしてsrc/contentに作成されます。

あらゆる静的資産。画像はpublic/ディレクトリに配置できます。

コマンド

すべてのコマンドは、プロジェクトのルートまたはターミナルから実行されます。

指示	アクション
`yarn`	依存関係をインストールします
`yarn dev`	`localhost:3000`でローカル開発サーバーを起動します
`yarn build`	運用サイトを`./dist/`に構築します。
`yarn preview`	デプロイする前にビルドをローカルでプレビューする
`yarn astro ...`	`astro add` 、 `astro preview`などの CLI コマンドを実行します。
`yarn astro --help`	Astro CLI を使用してヘルプを表示する
`yarn test:e2e`	Playwright テストを実行する