https://github.com/gaomingzhao666/nano-blog
A performant, lightweight and SEO friendly modern blog system made by Astro, TypeScript, Tailwind and Pagefind, without any database and backend
https://github.com/gaomingzhao666/nano-blog
astro blog giscus i18n static-website tailwindcss typescript
Last synced: 7 days ago
JSON representation
A performant, lightweight and SEO friendly modern blog system made by Astro, TypeScript, Tailwind and Pagefind, without any database and backend
- Host: GitHub
- URL: https://github.com/gaomingzhao666/nano-blog
- Owner: gaomingzhao666
- License: gpl-3.0
- Created: 2024-10-16T10:30:19.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-05-02T07:55:51.000Z (13 days ago)
- Last Synced: 2025-05-02T08:45:10.214Z (13 days ago)
- Topics: astro, blog, giscus, i18n, static-website, tailwindcss, typescript
- Language: Astro
- Homepage: https://nano-blog-bice.vercel.app
- Size: 101 MB
- Stars: 21
- Watchers: 1
- Forks: 5
- Open Issues: 6
-
Metadata Files:
- Readme: README-JA.md
- License: LICENSE
Awesome Lists containing this project
README
[![Stargazers][stars-shield]][stars-url]
[![Release][release-shield]][release-url]
目次
## 紹介
> ここに表示されている画像は中等サイズのポストページです。詳細なスクリーンショットを見るには、[こちらをクリック](https://github.com/gaomingzhao666/nano-blog/tree/main/public/screenshot)してください。
Nano-blogはAstroエコシステムで構築されたモダンなブログシステムで、コンテンツに焦点を当てたWebアプリケーションのための最も人気のあるメタフレームワークの一つです。
## 技術スタック
- Astro
- TailwindCSS
- 組み込みのi18n機能による国際化
- ES6+構文とESMを使用したTypeScript
## フィーチャー
- [√] 簡潔なスタイル
- [√] 全てのコンポーネントはAstroで構築
- [√] レスポンシブレイアウト
- [√] 高性能
- [√] 清潔感あるの依頼注入
- [√] SEOに優しい
- [√] MarkdownとMDXサポート
- [√] コードハイライト
- [√] ダークモード
- [√] 自動読書時間計算
- [x] 最新版`Astro`と`Tailwind`の互換性あり（v2.8で更新）
- [x] モバイルと大型デバイスでの異なるユーザーエクスペリエンスの目次機能（v2.7で追加）
- [√] コンテンツ検索のための[Pagefind](https://pagefind.app/)集成（v2.6でリライトした）
- [√] 関連投稿（v2.1で更新）
- [√] `英語`と`日本語`の国際化（i18n）(v2.4で改善)
- [√] GitHub Discussionsを利用したGiscusコメントシステムの集成（v2.2で追加）
## ロードマップ
- [x] `Astro v5`へのアップグレード (v2.8で完成)
- [x] `TailwindCSS v4`へのアップグレード ( v2.8で完成)
## 環境要件
- NodeJS LTS 22以上
## インストール
### 直接リポジトリをクローン - おすすめ
まず、以下のコマンドを実行してこのリポジトリをローカルにクローンします：
```sh
$ git clone https://github.com/gaomingzhao666/nano-blog.git # クローン
$ cd nano-blog
```
クローンがエラーなく完了したら、以下のコマンドを実行して依存関係をインストールし、このプロジェクトを開始します：
```sh
# pnpm - おすすめ
$ pnpm install
$ pnpm start
# npm - Nodeのデフォルトパッケージマネージャー
$ npm install
$ npm run start
# yarn
$ yarn run start
```
### Astro CLIを使用して新しいプロジェクトを作成
```sh
# pnpm - おすすめ
pnpm create astro@latest --template gaomingzhao666/nano-blog
# npm - Nodeのデフォルトパッケージマネージャー
npm create astro@latest -- --template gaomingzhao666/nano-blog
# yarn
yarn create astro --template gaomingzhao666/nano-blog
```
> この方法は、テンプレートとの互換性の問題が発生する可能性があることに注意してください。nano-blogは安定性の懸念から、`Astro`のビッグバージョンがリリースされてもすぐに更新されない場合があります。現在、nano-blogは最新版`Astro v5`と`Tailwind v4`を使用しています。
[stars-shield]: https://img.shields.io/github/stars/gaomingzhao666/nano-blog?style=for-the-badge
[stars-url]: https://github.com/gaomingzhao666/nano-blog/stargazers
[release-shield]: https://img.shields.io/github/v/release/gaomingzhao666/nano-blog?style=for-the-badge
[release-url]: https://github.com/gaomingzhao666/nano-blog/releases