Capi

<div class="code-block-container"><pre><code class="code-line" data-line="0">node --version
v20.2.0
</code></pre></div>

<p data-line="0" class="code-line">npmでインストールします</p>
<div class="code-block-container"><pre><code class="code-line" data-line="1">npm install -g pnpm
</code></pre></div><p data-line="5" class="code-line">入った<br>
<img src="https://storage.googleapis.com/zenn-user-upload/f216cbb81da3-20241218.png" loading="lazy" class="md-img"></p>


<p data-line="0" class="code-line">プロフィールページを作りたくなったのでpnpmでAstroを試してみる<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__5efab52cc48b8" src="https://embed.zenn.studio/card#zenn-embedded__5efab52cc48b8" data-content="https%3A%2F%2Fdocs.astro.build%2Fja%2Finstall-and-setup%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://docs.astro.build/ja/install-and-setup/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://docs.astro.build/ja/install-and-setup/</a></p>
<div class="code-block-container"><pre><code class="code-line" data-line="2">pnpm create astro@latest
</code></pre></div>

<p data-line="0" class="code-line">サクサク進む<br>
時折出てくるロボットが可愛い</p>
<p data-line="3" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/ad301035add9-20241218.png" loading="lazy" class="md-img"><br>
<img src="https://storage.googleapis.com/zenn-user-upload/da31f352061b-20241218.png" loading="lazy" class="md-img"><br>
<img src="https://storage.googleapis.com/zenn-user-upload/645a1a17f7ae-20241218.png" loading="lazy" class="md-img"></p>


<p data-line="0" class="code-line">自分でプロジェクト名を決めないと自動でプロジェクト名が決まるのかな？</p>


<p data-line="0" class="code-line">起動してみる</p>
<div class="code-block-container"><pre><code class="code-line" data-line="1">cd プロジェクト名
pnpm run dev
</code></pre></div><p data-line="6" class="code-line">http://localhost:4321で動く<br>
<img src="https://storage.googleapis.com/zenn-user-upload/7a35e6020919-20241218.png" loading="lazy" class="md-img"></p>


<p data-line="0" class="code-line">少し触って感覚掴んだらプロフィールページを作ろう</p>


<p data-line="0" class="code-line">プロフィールページがNext.jsで作ってあったのでAstro触ってない</p>
