ブログの作成とか……その①

2024年5月23日 19:43

今日はVRC関係ない記事を書いてみようと思います。

ブログを始めるなら、まず思い浮かぶのは『WordPress』ですよね。でも、WordPressには意外と多くの欠点があります。
実は、私の周りでは脱WordPressが流行っています。

noteが人気な理由の一つもそこにあるのかもしれません。

WordPressの主な欠点としては、以下のようなものが挙げられます。

一般的なものを挙げると
・セキュリティリスク: プラグインやテーマの脆弱性が狙われやすい。定期的なアップデートが必須。
・肥大化と速度低下: 多数のプラグインやテーマを使うと、サイトが重くなりがち。
・過剰な動的機能: 静的コンテンツが多いサイトでは、不要な動的機能が足かせに。

等、サイトを作るのは簡単ですが、管理運用面で色々と大変です。

あとはレンタルサーバーを借りたりとかも面倒ですよね。

今回使うのは『Astro』というフレームワーク。

部分的なハイドレーション: 必要な部分だけ動的に。無駄なJSを削減し高速化。
MPA向け: 各ページを個別レンダリング。SEOに有利。
複数UIフレームワーク対応: React, Vue, Svelteなどと連携可能。
自動コード分割: ページ毎に分割。初期ロード速度UP。
柔軟なデータ取得: 静的生成とAPI併用。プロジェクトに合わせ選択。

最新トレンドを取り入れた、開発者に優しい高性能フレームワーク。

今回はAstro＋GitHub＋CloudFlareで構築することにします。
独自ドメインを使わなければ無料で作ることができます。

今回はローカルで動作するところまで作っていきたいと思います。

作業ディレクトリの作成をします。

PS C:\Develop> mkdir SonotysBlog


    ディレクトリ: C:\Develop


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        2024/05/23     18:28                SonotysBlog


PS C:\Develop> cd .\SonotysBlog\
PS C:\Develop\SonotysBlog>

Node.jsをインストールします。

インストールが完了したか確認します。

PS C:\Develop\SonotysBlog> node -v
v20.13.1
PS C:\Develop\SonotysBlog> npm -v
10.5.2
PS C:\Develop\SonotysBlog>

Astroをインストールします。
作業ディレクトリ内で以下のコマンドを打ちます。
私はTypeScriptが好きなので選択しています。

npm create astro@latest

以下のように選択してインストールを完了させます。

PS C:\Develop\SonotysBlog> npm create astro@latest

 astro   Launch sequence initiated.

   dir   Where should we create your new project?
         ./sonotysblog

  tmpl   How would you like to start your new project?
         Use blog template

    ts   Do you plan to write TypeScript?
         Yes

   use   How strict should TypeScript be?
         Strict

  deps   Install dependencies?
         Yes

   git   Initialize a new git repository?
         Yes

      ✔  Project initialized!    
         ■ Template copied       
         ■ TypeScript customized 
         ■ Dependencies installed
         ■ Git initialized       

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./sonotysblog 
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat
PS C:\Develop\SonotysBlog>

インストールしたディレクトリに移動します。
以下のようにファイルが出来ていると思います。

PS C:\Develop\SonotysBlog> ls


    ディレクトリ: C:\Develop\SonotysBlog


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        2024/05/23     18:35                sonotysblog


PS C:\Develop\SonotysBlog> cd .\sonotysblog\
PS C:\Develop\SonotysBlog\sonotysblog> ls


    ディレクトリ: C:\Develop\SonotysBlog\sonotysblog


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        2024/05/23     18:34                .vscode
d-----        2024/05/23     18:35                node_modules
d-----        2024/05/23     18:34                public
d-----        2024/05/23     18:34                src
-a----        2024/05/22     20:03            264 .gitignore
-a----        2024/05/22     20:03            248 astro.config.mjs
-a----        2024/05/23     18:35         285102 package-lock.json
-a----        2024/05/23     18:34            436 package.json
-a----        2024/05/22     20:03           2962 README.md
-a----        2024/05/23     18:34             98 tsconfig.json


PS C:\Develop\SonotysBlog\sonotysblog>

次に以下のコマンドを実行します。

npm install

必要なものがインストールされます。

PS C:\Develop\SonotysBlog\sonotysblog> npm install

up to date, audited 512 packages in 3s

216 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
PS C:\Develop\SonotysBlog\sonotysblog>

src->content->blog
の下のマークダウン(.md)がブログの記事になります。

さらに年/月単位でディレクトリを作ることで分類化できAtsroが自動的にURLも生成してくれます。

早速記事を書いてみます。

記事はマークダウンで書きます。
記法に関しては以下が参考になると思います。
ちなみにAstroはマークダウンとHTML両方の記述をサポートしているのでCSSを用いた装飾等も可能になります。

必要なのはフロントマターと呼ばれる記事の先頭につける記事のメタデータ（タイトル、公開日、著者など）の設定を行います。
~~なくても大丈夫ですが、色々面倒くさいので……~~
以下のように書きます。

---
title: "Astroではじめてのブログ投稿"
pubDate: "2023-06-26"
description: "Astroを使って、初めてブログ記事を投稿します。"
author: "Sonoty"
image:
   url: "https://astro.build/assets/press/full-logo-dark.png"
   alt: "Astroのロゴ"
tags: ["astro", "blogging", "markdown"]
---

本文は通常のmd形式で問題ないです。

記事が書けたら以下のコマンドでビルドを行います。

npm run build

完了しました。

PS C:\Develop\SonotysBlog\sonotysblog> npm run build

> sonotysblog@0.0.1 build   
> astro check && astro build

18:57:18 [vite] Re-optimizing dependencies because vite config has changed
18:57:20 Types generated 1.85s
18:57:20 [check] Getting diagnostics for Astro files in C:\Develop\SonotysBlog\sonotysblog...
Result (15 files): 
- 0 errors
- 0 warnings       
- 0 hints

18:57:33 [vite] Re-optimizing dependencies because vite config has changed
18:57:35 [build] output: "static"
18:57:35 [build] directory: C:\Develop\SonotysBlog\sonotysblog\dist\
18:57:35 [build] Collecting build info...
18:57:35 [build] ✓ Completed in 1.80s.
18:57:35 [build] Building static entrypoints...
18:57:40 [vite] ✓ built in 5.11s
18:57:40 [build] ✓ Completed in 5.23s.

 generating static routes 
18:57:40 ▶ src/pages/about.astro
18:57:40   └─ /about/index.html (+34ms)
18:57:40 ▶ src/pages/blog/index.astro
18:57:40   └─ /blog/index.html (+28ms)
18:57:40 ▶ src/pages/blog/[...slug].astro
18:57:40   ├─ /blog/markdown-style-guide/index.html (+27ms)
18:57:41   ├─ /blog/using-mdx/index.html (+27ms)
18:57:41   ├─ /blog/first-post/index.html (+16ms)
18:57:41   ├─ /blog/second-post/index.html (+35ms)
18:57:41   └─ /blog/third-post/index.html (+13ms)
18:57:41 λ src/pages/rss.xml.js
18:57:41   └─ /rss.xml (+11ms)
18:57:41 ▶ src/pages/index.astro
18:57:41   └─ /index.html (+6ms)
18:57:41 ✓ Completed in 357ms.

18:57:41 [@astrojs/sitemap] `sitemap-index.xml` created at `dist`
18:57:41 [build] 8 page(s) built in 7.48s
18:57:41 [build] Complete!
PS C:\Develop\SonotysBlog\sonotysblog>

ビルドが完了したら以下のコマンドでWebサーバーを起動します。

npm run dev

以下のようになると完了です。

npm run dev  

> sonotysblog@0.0.1 dev
> astro dev

19:00:23 [vite] Re-optimizing dependencies because vite config has changed

 astro  v4.8.7 ready in 849 ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose

19:00:24 watching for file changes...

http://localhost:4321/にWebブラウザでアクセスします。

無事先程書いた記事が投稿されていました。

今回はローカル環境で動かすところまで、次回にGitHubやCloudFlareとの連携をしてみようと思います。

読んでくださりありがとうございました。

#Blog #ブログ #Nodejs #Javascript #TypeScript #Astro #GitHub #CloudFlare

この記事が気に入ったらサポートをしてみませんか？