はじめに
同じサークルの人が個人ページを立てるようになりました。自分は個人ページがなく、ブログを二個持っているだけだったので、ポートフォリオも兼ねて自分のブログを作ることにしました。
今回はGitHub Pagesを使ってみようと思います。GitHub Pagesは、GitHubが提供する静的ページホスティングサービスなわけですが、作成したリポジトリから簡単にWebページを作成でき、さらに独自のドメインまで設定することができます。
ってことで、自分のブログをGitHub Pagesで作ってみることにしました。
使ったフレームワーク
今回はAstro.jsを使いました。静的サイトジェネレーターで、Next.jsと比較すると動きのあるページを作ることには向いていませんが、ブログを作ることには十分に向いているので、採用を決めました。
作成手順
まず、npmがインストールされているところで以下のコマンドを実行しました。
npm create astro@latest
実行後、以下のことを聞かれます。
- リポジトリ名
- テンプレート(最小構成、ブログ、ドキュメントの中から一つ)
- 依存関係のインストールをするかどうか
- Gitリポジトリにするかどうか
今回はGitで公開するわけなので、4つめに関してはYesを選択します。
以上が終わると、リポジトリが作成されています。自動でコミットまでされていました。これをプッシュすればリポジトリがリモートで公開されるわけですね。
ここまでで、以下のようなリポジトリができてます。
.
├── README.md
├── astro.config.mjs
├── package-lock.json
├── package.json
├── tsconfig.json
├── .git/
├── .vscode/
├── node_modules/
├── public/
├── src
│ ├── components/
│ ├── contents/
│ ├── layouts/
│ ├── pages/
│ └── styles/
└── statics/
デプロイする
まずはastro.config.mjsを編集します。astro.config.mjsはAstroの設定ファイルで、ビルド時の設定を記述します。
// @ts-check
import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
// https://astro.build/config
export default defineConfig({
site: 'https://gitudon.github.io',
base: '/Udon-Homepage',
integrations: [mdx(), sitemap()],
});
defineConfigの中のsiteとbaseを編集します。siteはサイトのURL、baseはリポジトリ名です。自分の物に合わせて編集します。
次は新しく以下のファイルを作成します。
.github/workflows/deploy.yml
deploy.ymlはGitHub Actionsの設定ファイルです。以下のように記述します。
name: Deploy to GitHub Pages
on:
push:
branches: [ master ]
workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout your repository using git
uses: actions/checkout@v4
- name: Install, build, and upload your site
uses: withastro/action@v1
deploy:
needs: build
runs-on: ubuntu-latest
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1
この設定をすることで、GitHubにリポジトリをプッシュした際に自動でビルドが行われ、サイトが公開できるようになります。
branchesの部分がデフォルトではmainとなっているので、masterなど違うブランチ名を使っている際は適宜変更してください。
最後に、GitHubのリポジトリのSettingsからGitHub Pagesの設定を行います。Pagesタブから以下のように設定します。
- Sourceを
GitHub Actionsに設定
これで準備が整いました。リモートリポジトリに変更をプッシュすると、自動でビルドが行われ、一分くらいするとGitHub Pagesに公開されます。
ちなみに、ローカルでビルドしてテストしたい場合は、リポジトリのルートで以下のコマンドを実行します。
npm run dev
こうすると、http://localhost:4321/[base名]でローカルサーバーが立ち上がります。適当なWebブラウザでアクセスすることでビルド後の様子を確認できます。
トップページを編集する
公開はできましたが、これだとテンプレートのままでAstroの宣伝や使い方しか書いてありまっせん。というわけで、トップページを編集して自分のものにしました。
src/pages/index.astroなどを編集し、そのほかヘッダーやフッターの内容もcomponentsディレクトリにあるファイルを編集することで変更しました。
定数や変数を使う場合は、src/consts.tsに記述します。多くのページで使うものなどを記述しておきます。
CSSについてですが、src/stylesディレクトリにあるglobal.cssを編集することで各ページに適用されるスタイルを変更できます。個別にスタイルを適用したい場合は、各ページの<style>タグ内に記述するのがよいでしょう。
記事を投稿してみる
ブログを作るので記事を投稿できないと意味がないです。というわけで、記事を投稿してみました。
以下のような形式で./src/content/blog/ディレクトリにMarkdownファイルを作成します。
---
title: "記事のタイトル"
date: "2022-01-01"
---
(記事の内容)
これで記事が投稿でき、サムネイルがBlogページに表示されます。最新投稿が一番上に来て、それ以外は下のほうに小さめに表示されます。同じ日に複数投稿した場合、初期設定のままだと古い記事が上に来てしまうようです。
Mdファイルを置くだけで自動的にホスティングされるので便利ですね。
ただ、データの受け渡しが上手くいっていなかったようでハマりました。console.logで確認しながらやってみると、どうも[...slug].astroの処理がおかしかったようでした。そこで、このファイルを以下のように変更しました。
---
import { type CollectionEntry, getCollection } from 'astro:content';
import BlogPost from '../../layouts/BlogPost.astro';
import { render } from 'astro:content';
export async function getStaticPaths() {
const posts = await getCollection('blog');
return posts.map((post) => ({
params: { slug: post.id },
props: {post},
}));
}
type Props = CollectionEntry<'blog'>;
const { post } = Astro.props;
const article = post;
const { Content } = await render(article);
---
<BlogPost {...article.data}>
<Content />
</BlogPost>
12行目と13行目が意味のないものに見えますが、こういった形にしないとUndefinedエラーなどが発生しました。結局理由はわかりませんでしたが、これでうまくいきました。
できたもの
とりあえずこんな感じのページができました。ここからページを増やしたり、デザインを変えたりしていく予定です。
ちなみにリポジトリは以下から参照できます。参考にしてください。
おわりに
とりあえず簡単なブログを作ることができました。Qiitaと上手い感じで棲み分けながら運用したいと思います。
それではまた。