mirror of
https://github.com/CompeyDev/blog.devcomp.xyz.git
synced 2024-12-12 12:50:41 +00:00
3.2 KiB
3.2 KiB
🍥Fuwari
Astroで構築された静的ブログテンプレート
🖥️ライブデモ (Vercel) / 🌏中文 / 🌏日本語 / 📦旧Hexoバージョン
✨ 特徴
- Astro及び Tailwind CSSで構築
- スムーズなアニメーションとページ遷移
- ライト/ダークテーマ対応
- カスタマイズ可能なテーマカラーとバナー
- レスポンシブデザイン
- コメント機能
- 検索機能
- 目次
🚀 使用方法
- テンプレートから新しいリポジトリを作成するかCloneをします。
- ブログをローカルで編集するには、リポジトリをクローンした後、
pnpm install
とpnpm add sharp
を実行して依存関係をインストールします。- pnpmがインストールされていない場合は
npm install -g pnpm
で導入可能です。
- pnpmがインストールされていない場合は
src/config.ts
ファイルを編集する事でブログを自分好みにカスタマイズ出来ます。pnpm new-post <filename>
で新しい記事を作成し、src/content/posts/
.フォルダ内で編集します。- 作成したブログを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のヘルプを表示 |