Skip to content

Latest commit

 

History

History
55 lines (43 loc) · 3.18 KB

README.ja-JP.md

File metadata and controls

55 lines (43 loc) · 3.18 KB
Raw

🍥Fuwari

Astroで構築された静的ブログテンプレート

🖥️ライブデモ (Vercel)   /   🌏中文   /   🌏日本語   /   📦旧Hexoバージョン

Preview Image

✨ 特徴

  • Astro及び Tailwind CSSで構築
  • スムーズなアニメーションとページ遷移
  • ライト/ダークテーマ対応
  • カスタマイズ可能なテーマカラーとバナー
  • レスポンシブデザイン
  • コメント機能
  • 検索機能
  • 目次

🚀 使用方法

  1. テンプレートから新しいリポジトリを作成するかCloneをします。
  2. ブログをローカルで編集するには、リポジトリをクローンした後、pnpm install と pnpm add sharp を実行して依存関係をインストールします。
    • pnpmがインストールされていない場合は npm install -g pnpm で導入可能です。
  3. src/config.tsファイルを編集する事でブログを自分好みにカスタマイズ出来ます。
  4. pnpm new-post <filename>で新しい記事を作成し、src/content/posts/.フォルダ内で編集します。
  5. 作成したブログをVercel、Netlify、GitHub Pagesなどにデプロイするにはガイドに従って下さい。加えて、別途デプロイを行う前にastro.config.mjsを編集してサイト構成を変更する必要があります。

⚙️ 記事のフロントマター

---
title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
image: /images/cover.jpg
tags: [Foo, Bar]
category: Front-end
draft: false
---

🧞 コマンド

すべてのコマンドは、ターミナルでプロジェクトのルートから実行する必要があります:

Command Action
pnpm install AND pnpm add sharp 依存関係のインストール
pnpm dev localhost:4321で開発用ローカルサーバーを起動
pnpm build ./dist/にビルド内容を出力
pnpm preview デプロイ前の内容をローカルでプレビュー
pnpm new-post <filename> 新しい投稿を作成
pnpm astro ... astro add, astro checkの様なコマンドを実行する際に使用
pnpm astro --help Astro CLIのヘルプを表示