はじめに
これは、株式会社 RetailAI X Advent Calendar 2022 の 5 日目の記事です。
昨日の記事は、 @wu_manning さんの『next.js初心者入門記事』でした。
さて、今回、自身も初の試みで、adventを書く事になりましたが、
何を書こうかと考えた末に、webサイト構築について
勉強していることもあり、その一環で触れている
Astro について、少しだけ書いてみる事にしました。
Astro って何？
まず、Astro に触れる前に、astroが何なのかを簡単に言いますと、
公式ページを開いてもらえれば、直ぐに目が入る箇所にも書かれているように、
Astroは『高速にWebサイトを構築してくれる静的サイトビルダー』の一つです。
これが実現できている理由としては、主にビルド時にJavaScriptを
取り除いた状態で、HTMLファイルが作成されている為とあります。
Astroは様々な特徴がありますが、これ以外の特徴については、
Astroを選ぶ理由として公式がまとめていますので、
もう少し詳しく知りたい方は、そちらを参照していただければと思います。
Astro の環境をローカルにデプロイする。
Astro.build の新しい開発環境をセットアップする簡単な方法としては、
公式の手順に従っても良いと思いますが、こちらで説明している手順で進めると
環境構築が早いので、Astroがどういうものか、直ぐに触ってみたい方にはオススメです。
マークダウンで書いたブログを、RSSフィードで公開してみる。
Astroはブログ投稿でマークダウンが使えるようにサポートされています。
さらにはRSSフィードの高速な自動生成もサポートしている為、
Astro でブログサイトを作った際には、簡単にRSSを使って共有・公開が可能となります。
RSSフィード内のリンク生成に必要な設定を行う
astro.config.mjs
に site: 'https://qiita.com/' を追加する。
追加するとこうなります。
export default defineConfig({
site: 'https://qiita.com/'
});
最終的にデプロイ先のブログのURLを貼りますが、ここではqiitaを指定しています。
ディレクトリを構成。
src/pages ディレクトリの直下に 個人用のブログ を管理する為のディレクトリを作成。
こんな感じ。。。。
qiita は一般公開と限定公開がありますので、
それに合わせてさらにディレクトリを分けています。
個人ブログの際はカテゴリーを分けるといったイメージに置き換えてください。
マークダウンファイルを作成。
ディレクトリ構成ができたら、マークダウンでブログを書いてみる。
マークダウンファイルの中には、
pubDate と title は必須、任意で customData を記入。
サンプル用のマークダウン
---
pubDate: 2022-12-05
title: これはサンプルです。
customData: <language>ja</language>
---
**サンプル**
-
- 目次
これはサンプルです。
Astroフレームワークとは、
コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワーク
である。
RSSフィードを準備する。
ターミナルを起動して、RSSのパッケージマネージャーをインストールする。
使用するパッケージマネージャーはどれでもOKです。
npm install @astrojs/rss
src/pages ディレクトリの直下に rss.xml.js を作成して、下記のコードをペースト。
import rss from '@astrojs/rss';
export const get = () => rss({
language: 'ja',
title: 'ブログサイト',
description: 'ブログサイトの説明',
site: import.meta.env.SITE,
items: import.meta.glob('./**/*.md'),
customData: `<language>en-us</language>`,
});
アプリケーションを起動して、RSSフィードが正常に動作する事を確認する。
npm run dev
コマンドを使うと、アプリケーションが起動し、
ブラウザ上でページを閲覧する事が可能となります。
こちらで手順で環境をデプロイしていましたら、
トップページには下記が表示されるはずです。
ブラウザURLの最後に /rss.xml を入力して、RSSを確認する。
完成するとこんな感じ。
<link>タグの中身は デプロイ先のブログのURL + 個別のディレクトリ + マークダウンファイル となっています。
終わりに
AstroはReactやVueなどのUIフレームワークを統合する事が可能で、
WEB開発を初めて学ぶ人向けにも簡単に使えるといった謳い文句があります。
個人的には、今後はAstroで記述したサイトをデプロイしたり、
APIを使って、他ブログやニュースをJSONで取得するなど、
Astroで出来る事を、基本からガイドラインに至るまでを活かして、
WEB開発の応用へと発展できれば、良いなぁと思います。
ここまでお付き合いありがとうございました。
明日は、@murayamaxxx さんの『entで実行されたSQLを確認する』になります。
引き続き、お楽しみ頂ければ幸いです。