Zenn
📝

astroでGitHubのプロフィールを爆速で作る

に公開
GitHub Pages
Astro
tech

なぜastroを使うのか

GitHub Pagesでは標準でJekyllが利用可能ですが、npmでインストールできて豊富なライブラリが使えて、ローカルビルドも簡単なastroを使いたかったからです。

GitHub Pagesについて

GitHub Pagesには２種類あります。

  • プロジェクトページ
    • リポジトリ内のgh-pagesブランチ、もしくはdocs/に配置
    • https://<GitHubユーザー名>.github.io/<リポジトリ名>/ でアクセス
  • ユーザーまたは Organization サイト
    • <GitHubユーザー名>.github.ioリポジトリに配置
    • https://<GitHubユーザー名>.github.io/　でアクセス

今回は、個人や組織のプロフィールを作る内容なので後者となります。

手順

リポジトリ作成と設定

プロフィール格納用のリポジトリを<GitHubユーザー名>.github.ioで作成します。無課金で行うにはpublic設定にしてください。

リポジトリのSettings-Pagesで、SourceをGitHub Actionsにしておきます。

astroプロジェクトの作成

PCでnpm create astro@latestを入力するといろいろ質問されます。
最初はプロジェクト名（フォルダ名）なのでhoge-profileなど好きなものを入れてください。
その他はすべてデフォルトで進めます。

astroでコンテンツを作る

まずは実行

cd hoge-profile
npm run dev

これでhttp://localhost:4321/にアクセスすると、テンプレート的なページが見れます。

コンテンツ編集

あとはHTMLやCSSをどんどん編集していけばいいのですが、astroはmdファイルの表示も可能です。
pagesディレクトリ以下を見ると、index.astroファイルが入っていて、これがエントリーポイントになりますが、ここにtest.mdファイルを作って、http://localhost:4321/testにアクセスしてみましょう。これだけで表示が可能です。フロントマターでレイアウトの指定も可能です。

---
title: 自己紹介
layout: ../layouts/Layout.astro
---

# こんにちは！

これは **Markdown** で書かれたコンテンツです。

- リストアイテム1
- リストアイテム2

Actions設定

GitHub Actionsにテンプレートが用意されています。

リポジトリのActions-New workflowで表示されるワークフロー一覧から、検索ボックスに「astro」と入れて検索します。

configureボタンを押してそのまま保存すれば基本的には問題ありません。

マークダウンにスタイルを当てる

このままだと、マークダウンのスタイルが寂しいので、こちらの記事を参考にしてGitHubのマークダウン風に修飾しました。

https://zenn.dev/aono/articles/38b382ba0091df

Layout.astroを修正します。
今回はCDN経由でCSSを呼び出し、文字化けを解消するために文字コード指定をしています。

https://github.com/torikasyu/torikasyu.github.io/blob/main/src/layouts/Layout.astro

push

あとは先程作った<GitHubユーザー名>.github.ioをローカルのプロジェクトのリモートリポジトリにしてpushすればOKです。

git remote add origin git@github.com:<GitHubユーザー名>/<GitHubユーザー名>.github.io.git
git push -u origin main

GitHub Actionsが動いて、成功するとhttps://<GitHubユーザー名>.github.io/で作成したページを見ることができます。

できたもの

https://torikasyu.github.io

Discussion