Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/saicaca/fuwari

A static blog template built with Astro.
https://github.com/saicaca/fuwari

astro astro-theme blog blog-template dark-theme minimalist static static-site tailwind tailwindcss

Last synced: about 2 months ago
JSON representation

A static blog template built with Astro.

Host: GitHub
URL: https://github.com/saicaca/fuwari
Owner: saicaca
License: mit
Created: 2023-10-18T13:51:47.000Z (11 months ago)
Default Branch: main
Last Pushed: 2024-07-28T12:33:19.000Z (about 2 months ago)
Last Synced: 2024-07-28T17:01:02.123Z (about 2 months ago)
Topics: astro, astro-theme, blog, blog-template, dark-theme, minimalist, static, static-site, tailwind, tailwindcss
Language: Astro
Homepage: https://fuwari.vercel.app
Size: 3.19 MB
Stars: 840
Watchers: 11
Forks: 175
Open Issues: 24
Metadata Files:
- Readme: README.ja-JP.md
- License: LICENSE

Awesome Lists containing this project

README

        # 🍥Fuwari

[Astro](https://astro.build) で構築された静的ブログテンプレート

[**🖥️ライブデモ (Vercel)**](https://fuwari.vercel.app)   /   

[**📦旧 Hexo バージョン**](https://github.com/saicaca/hexo-theme-vivia)

> README バージョン：`2024-04-07` 

![Preview Image](https://raw.githubusercontent.com/saicaca/resource/main/fuwari/home.png)

## ✨ 特徴

- [x] [Astro](https://astro.build) 及び [Tailwind CSS](https://tailwindcss.com) で構築

- [x] スムーズなアニメーションとページ遷移

- [x] ライト/ダークテーマ対応

- [x] カスタマイズ可能なテーマカラーとバナー

- [x] レスポンシブデザイン

- [ ] コメント機能

- [x] 検索機能

- [ ] 目次

## 🚀 使用方法

1. [テンプレート](https://github.com/saicaca/fuwari/generate)から新しいリポジトリを作成するかCloneをします。

2. ブログをローカルで編集するには、リポジトリをクローンした後、`pnpm install` と `pnpm add sharp` を実行して依存関係をインストールします。  

   - [pnpm](https://pnpm.io) がインストールされていない場合は `npm install -g pnpm` で導入可能です。

3. `src/config.ts` ファイルを編集する事でブログを自分好みにカスタマイズ出来ます。

4. `pnpm new-post ` で新しい記事を作成し、`src/content/posts/`.フォルダ内で編集します。

5. 作成したブログをVercel、Netlify、GitHub Pagesなどにデプロイするには[ガイド](https://docs.astro.build/ja/guides/deploy/)に従って下さい。加えて、別途デプロイを行う前に `astro.config.mjs` を編集してサイト構成を変更する必要があります。

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

```yaml

---

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 `          | 新しい投稿を作成                                    |

| `pnpm astro ...`                    | `astro add`, `astro check` の様なコマンドを実行する際に使用 |

| `pnpm astro --help`                 | Astro CLIのヘルプを表示                            |