はじめに
自作ブログの初投稿記事となります。
記事を書くにあたり、はてなブログ、note、QiitaやZennもいいですが、自分のものは自分で管理したいという思いや、知り合いが自分でサーバを借りて旅行ブログを書いていたり、面白いTwitterのFFがサイトを自分で建てていたので、せっかくなので自作ブログを立てようかと思いました。
サイトを立てることで開発の最低限のweb周りの知識をつけたいことも理由の一つです。
以下に自作ブログを作成しようとして、調べたこと考えたことを綴っていきます。
専門ではないので調べながら書いていっており、間違いがあるかも知れません。
方針
前提
Jamstackが流行っているらしいので、SSGとheadless CMSを使っていきます。
JamstackとはSSG(静的サイトジェネレータ) + API + Markupを使用した構成です。
SSGはNext.jsなどのフレームワークでクライアントにはすでに作成されたhtmlを返すだけの仕組みです。
headless CMSは画像などのコンテンツを管理されている場所です。headlssというのは内容のプレビューがないためこのような名前となっています。
SSGがheadless CMSを呼び出してhtmlを作成し、クライアントに返す流れとなります。
検討事項
構成にあたり、それぞれの選択肢には以下のことを頭に入れて考えています。本記事で全部は触れませんが、構成を選ぶ際に調べておきたい項目です。
- 無料か有料か
- おうちサーバーかレンタルサーバーかホスティングサービスを使うか
- フロントエンドにどれほど慣れているか
- デザインはどれほどできるか好みのデザイン
- CMSはAPIかGit型か、ホストはするか
- SGGとの連携のしやすさ、無料枠
- メンテのしやすさ
- ドメインの有無
構成
SSG(静的サイトジェネレータ)
ブログなので動的なものは必要ないのでSSGから探すことにしました。
主観だけどとりあえず有名どころの以下から探すこととしました。
Next.js
Vercel社が作ったフレームワーク。
サービスのVecelと連携しやすい。
普及率が一番高そう。
Hugo
Goで書かれたSSG。
早い。
Astroも良さそうだけど今回は割愛。
他にはここを参考にするのが良いと思います。
https://jamstack.org/generators/
Theme
ある程度型が決まったThemeが提供されています。
これでデザインがそれほどできなくても綺麗なサイトが作ることができます。
SSG + Themeと検索すると出てくるので気になったもので検索するとヒットします。
Hugo
Papermodがすごく良さそう
Nextjs
Vercel社提供
https://vercel.com/templates/next.js
ThemeFisher
様々なSGGのThemeを作っている会社のもの
有料なのがほとんど
CMS
記事の内容や画像などのコンテンツを管理するシステムです
CMSはContents Management Systemの略です。
近年は画面からコンテンツを切り離して管理するため、headless cmsが流行っているようです。
headless cmsを使用することで表示方法を選ぶことなく自由度が高く開発ができるようです。
選ぶ際には以下のことを考慮します。
- 無料か有料か
- GitHubなどGitのシステムにコンテンツを保存する形かAPIとして呼び出す形か
- セルフホスティングか外部セルフホスティングか
- SSGに対応しているか
microCMS
日本製で無料枠が贅沢使え、microCMS社にホスティングされています。
コンテンツを編集しやすく特に強いこだわりがなければこれで良いです。
私はサポーターズのハッカソンで知りました。
Strapi
一番か二番くらい人気のオープンソースのCMS。セルフホスティング。
WordPress
headlessCMSとしても使えるらしい。
Sanity
無料で使用できるセルフホスティングが必要ないCMS。
スキーマ(API)の構成が編集しやすく開発者フレンドリーらしい。
ホスト
商用利用できるか、無料枠がどれほどかで論点になりそうです。
レンタルサーバ
情報学を専攻したものなら自分でブログを作りたいのでパス。
お金もかかるので。
Vecel
最新の技術が取り入れられてるらしい。
個人で使う分には無料枠で十分そう。
無料枠で商用利用不可。
Netlify
こちらも個人で使う分には無料枠。
無料枠で商用利用可。
Github Pages
https://docs.github.com/ja/pages/getting-started-with-github-pages/creating-a-github-pages-site
Githubを使うなら選択肢にはいる。
昔URLでメインページから同じサイトの他のページにうまく遷移できなくて、設定がめんどくさくなったので避けています。
Firebase
https://firebase.google.com/?hl=ja
Googleの提供しているもの。
他のNetlifyやVerelの方がSupabaseと連携しやすいのでそっち使うのが良さそうです。
自作ブログでBaas使わないと思いますが…。
Cloudflare Pages
https://www.cloudflare.com/ja-jp/developer-platform/products/pages/
おうちサーバをしている人ならお世話になったことがあると思われるCloudflareのホスティングサービス。
CDNが強そうです。
おうちサーバー
メンテをしたくないので個人的には無しの方向でいきたいです。
もしするならドメイン取得、Raspberry Piでポート解放、Nginxで公開、プライベートIP固定、Cloudflare Tunnelsの設定で対応するかもです。
DNSの紐付けどうするんだろ…。
その他
あまり調べていませんが、せっかく見つけたので軽く書いておきます。
Surge
情報が少なめ？
手軽で便利そうです
Render
DBとか使えます。
少し自作ブログにはオーバースペック
Parse Platform
Baasのひとつです。
glitch
開発環境がオンラインにあって共同編集できるらしいです。
VercelかNetlifyでいいかなと思います。
ドメイン
買う
お金をかけたくないのでなし。
無料ドメイン
https://www.freenom.com/ja/index.html?lang=ja
http://www.dot.tk/ja/index.html
更新に労力が…
ホストサイトで指定
ホストのサブドメインを使用することになります。
これが無難。
結論
Next.jsかHugoでブログに対応したThemeを使用し、microCMSでコンテンツ管理をしてVercelかNetlifyにデプロイとします。
他に良い構成があるかは引き続き調べてみます。
変えたとしても構成を分離しているので変更が少ないのがメリットですね。