Posts

記事に目次をつけよう 目次があれば、結末まですぐに飛ぶことができる。 時間に追われる現代人にはなくてはならない機能である。 そこで本サイトに目次を導入した。 プラグインは使いたくないよう 個人的にプラグインには頼りたくない。 理由はシンプルで楽しくないからである。 どうせ作るなら自分自身の力で作成したい。 なので今回も自作した。 目次を挿入するための考え方 やりたいことはページが開かれた時に記事に目次を挿入する。 で、対象はh2タグとh3タグとする。 つまり、記事内にh2タグとh3タグがあるかを判定し、あればそれに対応する目次を挿入する。 実現コードはこちら // 目次を生成 let secondIdCount = 1 let ThirdIdCount = 1 const headingSecond = document.querySelector('.article-detail')?.querySelectorAll('h2') const headingThird = document.querySelector('.article-detail')?.querySelectorAll('h3') if (headingSecond !== undefined || headingThird !== undefined) { headingSecond.forEach(el => { el.id = `tocSecond-${secondIdCount}` secondIdCount++ }); headingThird.forEach(el => { el.id = `tocThird-${ThirdIdCount}` ThirdIdCount++ }); const target = document.querySelectorAll(`[id^='toc']`) const insertTarget = document.querySelector('.article-table-of-contents-insert') if (target.length === 0) { document....

FTPでファイルをアップロードするのが面倒くさい 今まで多くの人がそうであるように、 サイト作成 Githubに最新バージョンをプッシュ FileZillaをしようしてサーバーにデプロイ 修正 Githubに最新バージョンをプッシュ FileZillaをしようしてサーバーにデプロイ というフローを踏んでサイトを運用してきた。 が、これが面倒でしかたない。 どうせGithubにあげたものをデプロイするのであれば、プッシュと同時にデプロイができればいいのに…！ レンタルサーバーでもできるのか？ Firebase Hosting、Netlify …、などを使えばできることは知っている。 しかしレンタルサーバーでもできるのか？ 正直レンタルサーバーは上記サーバーに比べて劣るイメージがある。 エックスサーバーで簡単にできた まずはエックスサーバー万歳三唱🙌🙌🙌 本サイトはエックスサーバーを作っているのだが、エックスサーバーならGithub Action と連携できることを知った。 これで今までのフローとストレスと労力が半減された。 さらには常に最新バージョンがデプロイされるという先祖返りの危機もなくなった。 最後にエックスサーバー万歳三唱🙌🙌🙌 [sc name=“exserver_all_unlimited” ][/sc] どうやって実現するのか すごく簡単なので、特に考えすぎずに実行してほしい。 エックスサーバー側の設定 特にないけれど、エックスサーバーのサーバーパネルで ftpサーバのホスト ftpサーバのアカウント名 ftpサーバのパスワード を確認してメモをしておく。 参考：FTPソフトの設定 | レンタルサーバーならエックスサーバー Github側の設定 対象リポジトリのSettings > Secrets に下記情報を入力する。 FTP_PASSWORD → ftpサーバのホスト FTP_SERVER → ftpサーバのアカウント名 FTP_USERNAME → ftpサーバのパスワード deploy.ymlの作成 対象リポジトリ直下に.github/workflows/ディレクトリを作成し、その下にdeploy.ymlファイルを設置する。 そこに下記情報を入力すれば完了。 on: push: branches: - main name: Deploy jobs: FTP-Deploy-Action: name: FTP-Deploy-Action runs-on: ubuntu-latest steps: - uses: actions/checkout@main - name: FTP-Deploy-Action uses: SamKirkland/FTP-Deploy-Action@2....