ブログの作成とか……その①
今日は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
この記事が気に入ったらサポートをしてみませんか?