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

astro paper

その他のカテゴリー

v4.7.0

ダウンロード

アストロペーパー？

プロジェクトの構造

AstroPaper 内には、次のフォルダーとファイルが表示されます。

/
├── public/
│   ├── assets/
│   │   └── logo.svg
│   │   └── logo.png
│   └── favicon.svg
│   └── astropaper-og.jpg
│   └── robots.txt
│   └── toggle-theme.js
├── src/
│   ├── assets/
│   │   └── socialIcons.ts
│   ├── components/
│   ├── content/
│   │   |  blog/
│   │   |    └── some-blog-posts.md
│   │   └── config.ts
│   ├── layouts/
│   └── pages/
│   └── styles/
│   └── utils/
│   └── config.ts
│   └── types.ts
└── package.json

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

画像などの静的アセットは、 public/ディレクトリに配置できます。

すべてのブログ投稿はsrc/content/blogディレクトリに保存されます。

ドキュメント

ドキュメントは、マークダウンとブログ投稿の2 つの形式で読むことができます。

設定 - マークダウン |ブログ投稿
投稿の追加 - マークダウン |ブログ投稿
カラースキームのカスタマイズ - マークダウン |ブログ投稿
定義済みのカラースキーム - マークダウン |ブログ投稿

AstroPaper v1 については、このブランチとこのライブ URL をチェックしてください。

技術スタック

メインフレームワーク- Astro
型チェック- TypeScript
コンポーネントフレームワーク- ReactJS
スタイリング- TailwindCSS
UI/UX - Figma デザインファイル
あいまい検索- FuseJS
アイコン- ボックスアイコン |テーブルラー
コードのフォーマット- より美しく
導入- Cloudflareページ
概要ページのイラスト- https://freesvgillustration.com
リンティング- ESLint

??‍ ローカルで実行

目的のディレクトリで次のコマンドを実行することで、このプロジェクトをローカルで使用し始めることができます。

 # npm 6.x
npm create astro@latest --template satnaing/astro-paper

# npm 7+, extra double-dash is needed:
npm create astro@latest -- --template satnaing/astro-paper

# yarn
yarn create astro --template satnaing/astro-paper

# pnpm
pnpm dlx create-astro --template satnaing/astro-paper

警告！ yarn 1使用している場合は、依存関係としてsharpインストールする必要がある場合があります。

次に、次のコマンドを実行してプロジェクトを開始します。

 # install dependencies
npm run install

# start running the project
npm run dev

別の方法として、Docker がインストールされている場合は、Docker を使用してこのプロジェクトをローカルで実行できます。その方法は次のとおりです。

 # Build the Docker image
docker build -t astropaper .

# Run the Docker container
docker run -p 4321:80 astropaper

Google サイト認証 (オプション)

環境変数を使用して、AstroPaper に Google Site Verification HTML タグを簡単に追加できます。このステップはオプションです。次の環境変数を追加しない場合、google-site-verification タグは HTML の<head>セクションに表示されません。

 # in your environment variable file (.env)
PUBLIC_GOOGLE_SITE_VERIFICATION=your-google-site-verification-value

AstroPaper を Google Search Console に追加する方法については、このディスカッションを参照してください。

?コマンド

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

注記！ Dockerコマンドについては、マシンにインストールする必要があります。

指示	アクション
`npm install`	依存関係をインストールします
`npm run dev`	`localhost:4321`でローカル開発サーバーを起動します
`npm run build`	運用サイトを`./dist/`に構築します。
`npm run preview`	デプロイする前にビルドをローカルでプレビューする
`npm run format:check`	Prettier でコード形式を確認する
`npm run format`	Prettier でコードをフォーマットする
`npm run sync`	すべての Astro モジュールの TypeScript タイプを生成します。もっと詳しく知る。
`npm run lint`	ESLint によるリント
`docker compose up -d`	Docker上でAstroPaperを実行すると、 `dev`コマンドで通知したのと同じホスト名とポートでアクセスできます。
`docker compose run app npm install`	上記の任意のコマンドを Docker コンテナーで実行できます。
`docker build -t astropaper .`	AstroPaper用のDockerイメージをビルドします。
`docker run -p 4321:80 astropaper`	Docker 上で AstroPaper を実行します。 Web サイトに`http://localhost:4321`でアクセスできます。