Skip to content
Blog
Go back

ブログを再整備しました。

年始くらいに一度ブログを整備しましたが,ドメイン整理や開発環境の変更などでほとんど使っていなかったので再整備してみました。
ほとんどテンプレートを使ったのですぐできましたが,最初のテスト投稿がてら書き残しておきます。

技術選定

前ブログとあまり変わりはありませんが,GitHub連携してpushするだけで公開できるようにしました。CloudflarePagesを使ったのは,無料である点とドメイン管理をCloudflareで行っている点において便利であったからです。
テンプレートはシンプル目なAstroPaperを使わせていただきました。GitHubのStarが数千ついてたので有名なやつっぽい。おしゃれですね。

環境構築など

まず,npm createします。

npm create astro@latest -- --template satnaing/astro-paper

astro-paper.config.tsを編集することで,テンプレートから情報を編集できます。公式のドキュメントにも載っているので,詳細は省きますが私はこんな感じにしました。

import { defineAstroPaperConfig } from "./src/types/config";

export default defineAstroPaperConfig({
  site: {
    url: "https://blog.sunachiru.jp",
    title: "Blog",
    description: "",
    author: "Sunachiru",
    profile: "",
    ogImage: "default-og.jpg",
    lang: "ja",
    timezone: "Asia/Tokyo",
    dir: "ltr",
  },
  posts: {
    perPage: 4,
    perIndex: 8,
    scheduledPostMargin: 15 * 60 * 1000,
  },
  features: {
    lightAndDarkMode: true,
    dynamicOgImage: true,
    showArchives: true,
    showBackButton: true,
    editPost: {
      enabled: false,
    },
    search: "pagefind",
  },
  socials: [
    { name: "github",   url: "https://github.com/sunachiru" },
    { name: "mail",     url: "mailto:me@sunachiru.jp" },
  ],
  shareLinks: [
    { name: "whatsapp", url: "https://wa.me/?text=" },
    { name: "facebook", url: "https://www.facebook.com/sharer.php?u=" },
    { name: "x",        url: "https://x.com/intent/post?url=" },
    { name: "telegram", url: "https://t.me/share/url?url=" },
    { name: "pinterest", url: "https://pinterest.com/pin/create/button/?url=" },
    { name: "mail",     url: "mailto:?subject=See%20this%20post&body=" },
  ],
});astro-paper.config.ts

ここをいじるだけなのでとても簡単です。

記事作成

./src/content/postsにmdファイルを作ります。

---
title: ブログを再整備しました。
description: 久々にブログを再整備したので,テスト投稿がてら。
pubDatetime: 2026-06-29
---
年始くらいに一度ブログを整備しましたが,ドメイン整理や開発環境の変更などでほとんど使っていなかったので再整備してみました。  
ほとんどテンプレートを使ったのですぐできましたが,最初のテスト投稿がてら書き残しておきます。

## 技術選定
- 静的サイトジェネレータ
.
.
../src/content/posts/260630-newblog.md

前ブログとyamlの形式が異なっていたため,少し変更は必要でしたが,前回の記事も引き継げました。

公開

あとはCloudflare Pagesの設定さえすれば,

git push

だけで公開ができます。
少し前までHTML直書きしていたので,とても便利になりました。サーバ代もかかっていないのですごい。

終わりに

ここまで1時間もかからずにセットアップできました。
今後も忘備録がてら書いていこうと思います。


Share this post:

Previous Post
セブンのスムージー買った