かちゃコムぎぢつしつ

このサイトのつくりかた

2025年1月07日13 min read

中小〜企業〜！！（あいさつ）

こんにちは、おれです。

今回はこのサイトのつくりかたについて話します。自分のサイトで自分のサイトのつくりかたを話します。最終回みたいですね。徹子の部屋の最終回「徹子の部屋」みたいな。徹子が徹子を招いて徹子について自己言及する回。

全体的にフロントエンドちょとワカル人向けの内容になります。

概要

  • 開発期間(立ち上げ) : 1日
  • 使っているぎぢつ（技術)
    • Obsidian
      • MarkDown形式のメモアプリ
    • Quartz
      • Obsidianで書いたメモをWebで見れるようにするツール
    • CloudFlare Pages
      • 静的サイトを高速でホストするサービス。なんと無料
    • Github
      • CloudFlareと連携してサイトを公開できる

企画

世界の迷えるゲーム開発キッズの灯火となるような存在となるべく、ぎぢつサイトを作ろうとある日思いつきました。自分がつくったゲームのつくりかたを書き、ゲームを遊んだキッズ達が、これはどんなふうにつくっているんだ〜という疑問をもった時のためのおもてなしになればよいと思ってやっています。

あとふつうにゲームの宣伝も兼ねています。

ぎぢつ選定

やることは決まったので、どうやって書いて何で公開するかを考えていきます。

Obsidianについて

おれは普段Obsidianというアプリでメモを取っています。

こんなかんじでマークダウンでメモを取れて、書いたメモ同士のリンクもいい感じにできる、いい感じのメモアプリです。

マークダウンというのは、見出しとかリストとかを簡単に書いて文書を整形できるやつです。

- リスト
- リスト
- リスト

↑こんなのが

  • リスト
  • リスト
  • リスト

↑こうなり

## 見出し

↑こんなのが

見出し

↑こうなります。

Obsidianはファイルをローカルに保存します。マークダウンファイル(.md)というやつです。メモごとにファイルを作って、それをまとめて管理できるわけです。

基本的にただのテキストファイルなのでGitでバージョン管理することができるし、ローカルファイルなのでエディタの動作も早くて具合がよろしいので重宝しています。

いつもこれを使って文章を書いているので、これをこのまんまサイトに公開できたらいいな〜と思いました。

それを実現するのがQuartz です

Quartzについて

Welcome to Quartz 4

QuartzはObsidianで書いたメモをいいかんじにWebで公開する形式に変換してくれるツールセットです。マークダウンのメモを取り込んでHtml,css,jsにビルドしてくれるので、これを公開するという感じですね。

こんな感じでコマンドを打ってnpmインストールして環境をつくります。

git clone https://github.com/jackyzha0/quartz.git
cd quartz
npm i
npx quartz create

するとこんな感じでディレクトリが作られるわけです

このcontentフォルダをObsidianのルートディレクトリにしてメモを書いていくと、いい感じにWeb用にビルドしてくれるという寸法です。

どんな感じの見た目になるのか確認したい時はこのコマンドでローカルサーバーを立ち上げます。

npx quartz build --serve

これでいま皆さんが見ているこのサイトのようなものがブラウザで見れるようになるってわけです。すごいね。

ページの内容をカスタマイズするとき

ページのタイトルやレイアウトなど、大体のことは以下のファイルから行えます。

  • quartz.config.ts
  • quartz.layout.ts

例えばquartz.config.ts にはタイトルを決める設定値があり

const config: QuartzConfig = {
configuration: {
	pageTitle: "かちゃコムぎぢつしつ",
	pageTitleSuffix: " | かちゃコムぎぢつしつ",

こんな感じでサイトのタイトルを決められます。

初期はサイトが英語表示になっているので、同ファイルで

locale: "ja-JP",

と設定すると日本語表示にすることができます。

また日本語の文言を変える時は (目次 > もくじ に変えたい時とか)

quartz/i18n/ja-JP.ts

このファイルの中の文言を変えることで設定ができます。

プロパティ(タイトルとか)

記事ごとのタイトルを決めるときの話。

obsidianではファイル名がそのままページのタイトルになる感じなのですが、これをそのままwebにあげると日本語のファイル名(タイトル)がそのまま日本語のurlになったりして都合がわるいときがあります。

ここで、ファイル名は英語でつけて、ページに表示されるタイトルは日本語でつけたいという欲求が発生します。

そんなときはページの先頭にプロパティをつけます。表示したいタイトルなど情報を色々入れられるやつです。

以下はこのページで設定しているプロパティです。

---
title: このサイト（かちゃコムぎぢつしつ）のつくりかた
draft: "false"
tags:
  - つくりかた
---
  • title
    • ページで表示したいタイトルを入力します。このページのファイル名はmaking_techcachaで、なんもしないとこれがタイトルになりますが、titleを設定して別名のタイトルを出すことができます。
  • draft (下書き設定)
    • “true” に設定すると下書き設定になり、webに公開されません
    • “false” に設定するとwebに公開されます
  • tags
    • タグをつけることができます。情報を同じタグ名でまとめて検索できたりします

こんな感じです。 urlが日本語になると、共有する時に

%E4%BC%9A%E7%A4%BE%E6%A6%82%E8%A6%81

こんなんなったりするので、やっておくことをおすすめします。

CloudFlare Pagesでサイトを公開する

さて、Webページを公開する準備をできました。できたとしましょう。 これを実際にWebに公開しようぜってことで、Webサーバーが必要になるわけです。 ここで登場するのがCloudFlare Pagesです。

CloudFlare Pagesは静的サイトをホストするためのサービスです。Quartzで作ったサイトなんかをWebに公開することができます。

また、Githubと連携し、Githubにコミットをプッシュした時に、自動的にCloudFlare側でビルドしてサイトを公開してくれます。すげえ楽です。

そのうえ、CloudFlareはもともとCDN(コンテンツをめちゃ速く配信するサービス)をやってる会社の最大手なので、えげつねえ速さでページが読み込まれます。

これがなんと無料で使えます。どうなってんだ？

とはいえさすがに制限もあります。

  • 1ファイルの大きさは25MBまで
  • 1サイトあたり20000ファイルまで

と、こんな感じの制限ですが、まあ個人でやるぶんには十分ですね。

かちゃコムもこれでホストしています。 ちょうはやい。無料です。どうなってんだ。まじでよ。

ざっくり手順

手順についてざっくり説明します。

まず上でやったようにObsidian + Quartzの環境を準備します。

そしてGithubでリポジトリを作って、作ったものプッシュします。(Githubの使い方は検索するといっぱいあるから調べてみようね)

CloudFlareでアカウントを作って、Worker&Pagesから作成を選択

↑こんな画面がでたらGitに接続を選択（右上から日本語表示にできます）

↑Githubで作ったリポジトリを選択します。

リポジトリが表示されていないときは(多分されていない)

リポジトリが表示されていない場合は、GitHub のCloudflare Pagesのアプリに対するリポジトリ アクセスを構成します。

このリンクからアクセス許可するページに飛んで、許可します。

↑そしたらこんな感じの画面がでます。

こんな感じで設定します

  • プロダクションブランチ
    • githubのどのブランチをWebに公開する選択します
  • フレームワークプリセット
    • なしでOK
  • ビルドコマンド
    • npx quartz build
  • ビルド出力ディレクトリ
    • public

「ビルド コマンド」は重要で、ここにビルド用のコマンドを入力すると、データを上げた時に自動的にここに書いたビルドコマンドを走らせてくれます。

npx quartz build

こう書いておくことで、自動でQuartzのビルドを走らせて、メモをHTMLに変換するや〜つをサイト上でやってくれるというわけです。

「保存してデプロイ」を押して、デプロイを待って、あとはなんかまあ流れでボタンをポチポチ押していけばサイトが公開されるはずです。

まとめ

こんな感じでかちゃコムぎぢつしつを構築することができました。

あとはObsidianでメモを書いて、Githubにプッシュするだけで記事をあげることができるってワケです。ちょー簡単だぜ。さいこー。イェイ。

ちょー簡単だし無料なのでみなさんもみなさんのぎぢつを書いてあげたりしましょう。おすすめです。

それではさようなら。お元気で。ごきげんよう。 最終回ではないです。

バックリンク