サイト作成ツールを振り返る

アバン

この記事は 個人ホームページ訪問 Advent Calender 2024 20日目の記事です。

別のことを書こうとしたけど検証が間に合っていないのと、他の人のサイト歴を見ていたら面白そうだと思ったので振り返り系にしました。
懐かしむだけの記事になるよ！

初期

突然始まるぜ！

もはやサイトなど残っていないのでメールボックスにある登録日時でおおよその使用時期を調べました。
一番最初に作ったのはおそらく「夢小説サイト」です。
今は亡きフォレストページで作りました。
（今あるのはフォレストページプラス）

未視聴のアニメをネトサしまくっていたらランキングに辿り着いた気がします。
検索除け……されてなかったんでしょうね…………。
テレビ東京って地方じゃ放送されなかったんだぜ……！
それは今もだけど。

　　
「夢小説」を知らない方々向けに説明すると、特定のアニメやマンガの本編中にオリジナルキャラ（夢主）を登場させた小説のことを指します。
二次創作小説は原作キャラ同士のこーんなシチュエーションの話だとしたら、夢小説は夢主が登場したシチュエーションというかんじ。
夢主は読み手本人とするものもあれば、容姿や過去設定までがっつり作り込んだオリキャラもいます。

個人的には後者の設定作り込み系のサイトに刺激を受け、自分でもサイトを作りたい！　と思って作りました。
ただ悲しいことに夢主の設定を練るとそれに関連したオリキャラもわんさか生まれて、夢小説じゃなくてもいいレベルの付加要素が爆誕しました。
結果、これ別に夢小説じゃなくていいな……と思って一次創作の道に進みました。
ちなみにサイトはほぼ中身すっからかんのまま放置して終わりました。

　　
余談ですが十円は今でもフォレストページプラスでちまちまサイトを運営してます。
夢小説サイトではありませんが、テキストまとめや軽い日記を書くのに便利！
カスタム編集する際の入力フォームが小さすぎるのがデメリットですが、htmlとかcssとか使うならメモ帳に書いてブラウザでプレビュー見てからコピペしたほうが速いと思うので、あんまり気にならんです。

えーいまさらフォレスト？　なんて思わずにぜひサイトにアクセスして作成されたサイト郡を見てみてください。
クローラーを気にする人なら入り口にパスワードを付けたりワンクッションが簡単に作れるので！　是非に！！
別にフォレストページのまわしモンじゃないですけど。

中期

さて、ランキングや同盟でサイト巡りをしていましたが、それとは別にお絵描き掲示板に通っていました。
しぃペインタを使うやつです。
掲示板にはいくつかページがあり、その中のオリジナル系のページで創作マンガを投稿している人がいて、サイト持ちの方もちょこちょこ見かけました。
HNの隣にサイトのリンクが貼れるんですよー憧れでしたねえ……。
もちろん掲示板なのでマンガと言えども1投稿につき1pしか投稿できません。
令和の今となれば展開が遅すぎると言われそうですが、ふと見たときに次の話が更新されていてコメントをして、コメントを返されるミニマムな空間が好きでした。

　　
例のごとく刺激を受けた十円はサイトを作りたいと思い、悩んだ末に忍者ブログを使うことに決めました。
当時はFC2ホームページ、次点で忍者ホームページ、あとはyahooBlogやらjugemやらがちょろちょろ、という印象でした。
よく見かけるFC2にしなかったのではなく、忍者ブログでサイトをやっていた人のレイアウトがいいなと思ったので忍者ツールズを使うことにしました。
ちなみにホームページではなくブログなのはブログのほうが楽だったから……！

忍者ブログには固定ページがあり、ブログ以外のページが作れることが魅力でした。
あと、当時はたしか画像の容量無制限だった気もします。
別に今も容量足りないとまでは思わないけど。
とはいえ、運営していたのは多くて月一更新というやる気が低いブログでした。
もともとPCを触るのが嫌だったので、PCで絵を描いたらブログにアップロードし、記事はもっぱらipod touchで書くというありさまでした。

　　
ちなみに忍者ブログは忍者ツールズのサービスなので、アカウントがあれば他にもブログを作成できます。
何を血迷ったか、当時はまっていたアプリやら3DSのゲームやらのレビューを書くブログを作ったこともあります。
3DSはスクショが撮れるので、撮影したスクショを3DSのブラウザから忍者ブログにアクセスして直接アップロードしたのは懐かしい思い出です。
今思うとスクショ投稿の方法が野蛮では……？　という気持ちはありますが。
SDカード抜いてPCに画像転送するより携帯機で済ませるならそれが良いじゃない！
PCに触るの嫌いすぎか？

忍者ツールに思うところはちょこちょこありますが、新規IDがすっかり取れなくなったような気が……するのがわりとでかいです。
ひとつのアカウントで複数ブログを作れるのですが、もうひとつアカウント作ってみよーともちゃもちゃしたところ、botとかが大量にID作ったんか？　ってくらい新規会員登録が出来なかったです。
そういう意味でちょっと勧めにくいのですが個人的にはとてもオススメしたいサービスです！
過去のブログをたまに見返しているユーザでした。

後期

だらだら月一更新をするブログをやっていましたが、色々きっかけがあり同人誌を作りました。
せっかくだから、サイトもなんかかっこよくしたいと思い心機一転、HTML5UPというテンプレートサイトで配布されていたテンプレートを作って新しいサイトを作りました。
俗にいう移転というやつです。
PC触りたくないからぜんぜん更新しなかったけど。

サイトのアップロード先はNetlifyです。
その時は既にMastodonに片足を突っ込んでいて（それで同人誌も作った）、忍者とかFC2以外のツールを使っている人がいるんだという程度の興味で手を出しました。
結論から言うと楽でしたが、サイトを検索した時に画像検索であらゆる画像がヒットしたことに嫌気がさしてNetlifyはやめました。
まあ単純に検索除けをすればよかったのでしょうが、検索除けをするとOGPも出なくなることを知ってちょっと悲しくなりました。

　　
ここからは迷走です。
WordPressに触ったものの、プラグインの更新頻度が多いのとphpだから気軽に外観を編集できないことにストレスを感じて離脱。
静的サイトを知ってSSGのhugoに手を出してカスタマイズが楽しいと触るも、PC作業が嫌なので楽してスマホから更新したいと悩みます。
obsidianでgitが扱えることを知り、obsidianとhexo(SSG)でブログを作り、コンフリクトのたびに同期し直しが面倒と感じます。
そんならもうgithubのモバイルからgithub actionやればいいかと思って、今現在astro(SSG)を使っています。
中身はたまにイラストをアップロードしたりするブログサイト、です。

別の記事にも書きましたがスマホ更新は今の方法が一番楽です。
astroで記事を書くときはNotesHubというgithubと連携が出来るマークダウンエディタを使ってサクサク記事がかけます。
メリットはマークダウン中に画像を挿入すると勝手にgithubのほうにも画像をアップロードしてくれること！
あとブラウザ版は無料！　PWAで使ってみよう！ お布施したいときはアプリ版を買おう！
デメリットは画像を挿入した自伝で勝手に別名で画像がアップロードされてしまうこと？
画像名に拘りがある人はgithubのブラウザ版から画像をアップロードして手で参照してもらうほうがいいです。二度手間ではあるけど。

　　
マークダウンを書いたあとはissueを書くと、ビルド＆FTP処理が走るようにしたので、数分したらサイトが綺麗に更新されます。
十円はこんなかんじに更新履歴風にissueを書いてます。
そんなんしなくてもpuh履歴あるんだけどねえ！

github actionはいいぞ……。
布教するには情報開示がいいのでもうaction文載せちゃいます。
ネットの海に転がっているブツではありますが。

name: Astro build
on:
  issue_comment:
    types: [created, deleted]

jobs:
    deploy:
     runs-on: ubuntu-latest
     steps:
      - name: Get latest code
        uses: actions/checkout@v3

      - name: Use Node.js 20
        uses: actions/setup-node@v3
        with:
          node-version: "20"

      - name: Build Project
        run: |
          npm install
          npm run build

      - name: Sync files
        uses: SamKirkland/[email protected]
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: ./dist/
          server-dir: 【アップロードしたいサーバのURL】
          protocol: ftp

こういうymlに書いて保存すればよいです。
FTP関連のところは自環境に書き換えてください。
環境変数は使ってもいいし使わんでも良し。
local-dirはビルド後に中身が入るディレクトリを指定します。

あとこれはastro用なので、hugoの場合は↓のように書き換えます。
ちなみにname:のとこはなんでもいいっぽいっす！

name: hugo pages

on:
  issue_comment:
    types: [created, deleted]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true  # Fetch Hugo themes
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.102.0'

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: SamKirkland/[email protected]
        with:
         server: ${{ secrets.FTP_SERVER }}
         username: ${{ secrets.FTP_USERNAME }}
         password: ${{ secrets.ftp_password }}
         local-dir: ./public/
         server-dir: 【アップロードしたいサーバのURL】

github側のnode.jsとバージョンが違うとビルドでこけることがあるので、エラーが出たらそのへんを見返してみてください。
あともうひとつ注意事項で、ビルド後にアップロードできないファイルがあるとFTPの処理でこけます。
具体的に言うとエックスサーバは「~」で始まるファイルはFTPで送れない？　っぽくて毎回こけました。
FFFTPとかのツールを使うと入るんですけど自動は無理っぽかったです。
まあこういう制約もあるため、テーマによってはgithub acionでFTPが使えない可能性があります。
一応ローカルでビルドして危うそうなファイルがないか確認するとよいかもです。

総括

以上、自分だけが楽しい振り返りコーナーでした。
思えば初期からPC触っていませんでしたね。
スマホ更新ばんざい！
もっと楽な更新方法あれば教えてください！

……はてなブログが出てない？
ここはほら……ネガティブになったときとかに吐き出す用のブログにしたからさ……。
ねっ！？

---

おまけ：書いてないけど使ったことあるツール集
・ Tumbler
・ JSCMS
・ てがろぐ
・ Grav
・ bluedit
・ honkit ・ PPP
・ シンプルブログ
・ しずかなインターネット
・ はてなブログ

---

SNSも分散してるけどサイトも分散してるぜ！
令和でも個人サイトたのしもーぜイエイ！
ホームページはトップページのことだぜ！

以上！