# hello-programmer-world

プログラマー向けの学習コンテンツサイトです。

## 必要な環境

- 必須
  - Node.js (推奨: v18以上)
  - pnpm
  - Git
- 任意
  - コマンドライン操作の練習用仮想環境
    - [VirtualBox](https://www.virtualbox.org/)
    - [Vagrant](https://www.vagrantup.com/)
  - PHP練習用環境
    - [Docker](https://www.docker.com/)

pnpmがインストールされていない場合は、以下のコマンドでインストールしてください。

```sh
npm install -g pnpm
```

## 実行手順

このソースコードの取得

```sh
git clone https://git.souken-dev.com/git/h.sakamoto/hello-programmer-world.git
```

Webページの準備 (ライブラリのインストール)

```sh
pnpm install
```

Webページの起動

```sh
pnpm dev
```

開発サーバーが起動し、ブラウザで <http://localhost:4321> にアクセスできます。  
ファイルを編集すると、自動的にブラウザがリロードされます。

## コマンドライン操作の練習用仮想環境の利用（任意）

[./vagrant/README.md](/vagrant/README.md) をご確認ください。

## PHP練習用環境の利用（任意）

PHPの練習用環境はDocker Composeで構築しています。  
以下のコマンドを実行して、環境を起動してください。

```sh
docker compose up -d
```

起動が成功すると、以下のURLにアクセスすることでPHPの動作を確認できます。  
この環境では、PHPのコードを `./public/sample/` と `./public/playground/` に配置して実行できます。

- <http://localhost:8080>

データベースの環境も同時に起動します。  
以下のページにアクセスして、データベースの管理ツールであるPhpMyAdminを利用できます。

- <http://localhost:8081>

## 技術スタック

- [Astro](https://astro.build/) - 静的サイトジェネレーター
- [MDX](https://mdxjs.com/) - Markdownの拡張記法
- [Tailwind CSS](https://tailwindcss.com/) - CSSフレームワーク
- [Preact](https://preactjs.com/) - UIコンポーネント
- [Biome](https://biomejs.dev/) - リンター・フォーマッター