kazu-gor.dev

Appearance

テックブログ始めました ​

自分のブログ作るかーって思ってはいたが優先度低くて作れてなかった。

会社の勉強会でVitePressを教えてもらって、サクッと作れそうだったからやってみたというやつです。

運用もブログで金かけるの気が進まなかったがCloudflare Pagesだと金かからないのでホスティングすることにした。

VitePressのインストールと設定 ​

インストールから公開するまで1時間もかからなかった記憶なので一応手順を書いておく。

1. プロジェクトの初期化 ​

bash
# プロジェクトディレクトリの作成
mkdir my-blog
cd my-blog

# package.jsonの初期化
npm init -y

# VitePressのインストール
npm install -D vitepress

2. VitePressの初期設定 ​

bash
# VitePressのセットアップウィザードを実行
npx vitepress init

セットアップウィザードでは以下の項目を適当に設定する。

  • Where should VitePress initialize the config? → ./
  • Site title → My Tech Blog（お好みのタイトル）
  • Site description → 技術的な学びを記録するブログ（お好みの説明）
  • Theme → Default Theme
  • Use TypeScript for config and theme files? → No（お好みで）
  • Add VitePress npm scripts to package.json? → Yes

3. ディレクトリ構造の作成 ​

bash
# 記事を格納するディレクトリを作成
mkdir posts

# 最初の記事を作成
echo "# Hello VitePress" > posts/hello.md

4. 設定ファイルのカスタマイズ ​

.vitepress/config.jsを編集して、ナビゲーションやサイドバーを設定：

javascript
export default {
  title: 'My Tech Blog',
  description: '技術的な学びを記録するブログ',
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Posts', link: '/posts/' }
    ],
    sidebar: [
      {
        text: 'Posts',
        items: [
          { text: 'Introduction', link: '/posts/introduction' }
        ]
      }
    ]
  }
}

5. 開発サーバーの起動 ​

bash
# 開発サーバーを起動
npm run docs:dev

ブラウザで http://localhost:5173 にアクセスすると、ブログが表示された。簡単。

Cloudflare Pagesへのデプロイ ​

登録してGit連携してプッシュすれば、後はよしなに更新してくれるので特に何もしてない。

まとめ ​

これからっす！ブログやらせてください！