何故やるのか ITエンジニアとして働いていて、毎日が勉強だと感じている。学んだことは技術メモとして残しておきたいと考えているが、あまりお金をかけずに済む方法はないものか…と考えていた。他には無料ブログサービス（Blogger、はてなブログ、Qiita、Zenn等）を利用するなどの選択肢があるが、せっかくなので自分にない技術の勉強も兼ねて自作したい。 | ブログサービス | CMS | SSG | | -------------- | ------------ | ------ | | はてなブログ | WordPress | Gatsby | | Blogger | Jimdo | Hugo | | Qiita | Movable Type | Jskyll | > Tips > VitePressの名前に含まれている「」とは、Vue.jsのコマンドラインツールのこと。 > 読み方は「ヴィート」。フランス語で「高速」という意味で、名前の通りプロジェクト生成や実行が高速という特徴がある。要件 - 技術メモはMarkdownで記載したい - 技術ブログの見た目もできれば出来合いのものではなく、CSSを自作したい - ビルド＆デプロイはGitHub Actionsで自動で行いたい - ホスティングは無料なのでGitHub Pagesで行いたい - サイトの種類は3つあって、プロジェクト、ユーザ、Organization - 今回はでアクセスしたいのでユーザーサイトを使う前提 - npmのバージョン：10.2.3 - node.jsのバージョン：v20.10.0 - Vue.jsのバージョン：3.3.4 - VitePressのバージョン：v1.0.0-rc.30 - 既にVueプロジェクトができていることが前提 - Macを使用 ① VitePressの構築既存のVueプロジェクトにしてから以下コマンドを入力。選択肢では以下を入力した。 - ./docs - handism-tech-blog - handism’s tech blog - Default Theme + Customization - Yes - Yes に以下を追加動作確認の手順 - 開発時 http://localhost:5173/ - リリース時 - 出力ディレクトリ： http://localhost:4173 ② GitHub Pagesへのデプロイ参考：https://vitepress.dev/guide/deploy#github-pages GitHub上のリポジトリのページにアクセス - Settings＞Pages - SourceをGitHub Actionsに変更 - staticをクリックにあるの内容を以下に変更する。コミットすれば自動でデプロイが開始される。 mainmastermaster これでブログが完成！簡単すぎる。動作確認ここまでの作業が終わったらGitにコミットしてみる。ビルドとデプロイが自動で走って、でサイトが見られれば成功！ > Tips > デプロイに失敗する場合は、Settings>Environmentsの「」っていう保護ルールを確認。 > > のところに上で指定した「」などのブランチ名が記載されているかどうかを確認し、ない場合は追加する。昔のデフォルトブランチ名は「」だったので、最近「」に変更したなどの場合は注意が必要。 ③ 記事の作成まずはブログが寂しいので記事を増やす。 VitePressの記事の管理は、フォルダ内にマークダウン形式（\.md）のファイルを作成/更新/削除していくことで実施可能。gatsby.js時代にも技術ブログを作っていたので、その時に作ったmdファイル3つを流用。 mdファイルの作り方普通の記事ファイルについては、mdファイルのフォーマットはなるべく統一したいので一旦以下フォーマットで作成。 > Tips > 上ので挟まれた部分はFrontmatterという。いったん持たせたい要素はこれだけとする。を持たせようかと思ったけど技術ブログにサムネイルなんて要るかな？ってことで不要とした。を持たせてもいいんだけど、公式が「ファイルベースのルーティング」を謳っているのでそれに沿う形で。はあると便利なんだけど1:nで扱いが大変そうなので一旦はなしの方向で…。 > 注意 > (!) Found dead link http://localhost:5173 in file vue-js.md と出てビルドがエラーとなってしまう場合、に以下を追加すると解決。 > > フォルダ整理フォルダ以下にmdファイルをベタ置きしていくのもあれなので、フォルダを整理する。フォルダとフォルダを作成。の下にカテゴリ別にフォルダ分けしていき、カテゴリごとにを置いていく。 ④ ブログの設定 config.mtsファイルの修正（サイトの設定）の中に以下のような設定を追加する。 config.mtsファイルの修正（レイアウトの設定）の中に以下を追加＆修正。上から、タイトル横のロゴマーク、ナビゲーションバー、サイドバー、フッタ、最終更新日時、検索バー、ページャー、GitHubリンクの設定。 > 注意 > ※2023/11/25現在、サイドバーが表示されている場合はフッタが表示されないらしい。 > Tips > md内に書いたソースコードがビルドエラーとなってしまう場合は、コードを以下のように囲んでエスケープする。 > > `md > > /docs/.vitepress/themeposts.data.mjsjs // posts.data.js import { createContentLoader } from 'vitepress'; export default createContentLoader('/.md', { includeSrc: false, transform(rawData) { return rawData .filter((page) => !page.url.endsWith('/')) .sort((a, b) => { return +new Date(b.frontmatter.date) - +new Date(a.frontmatter.date); }); }, }); index.mdmd --- title: トップページ description: トップページ next: false prev: false lastUpdated: false ---

{{ post.frontmatter.title }}

index.mdmd --- title: frontendカテゴリ description: frontendカテゴリ next: false prev: false lastUpdated: false ---

md > > > > md > !An image > ```

Tag: #Claude Code

Claude Codeに課金して初期設定する