GitHub Actionsを使用して、Hugo静的サイトをGitHub Pagesにデプロイする方法

このブログ投稿では、GitHub Actionsを使用して、Hugo静的サイトをGitHub Pagesにデプロイする方法について説明します。GitHub Actionsは、GitHubが提供する自動化機能で、GitHubリポジトリ内でカスタムソフトウェア開発ワークフローを直接作成できます。GitHub Actionsを使用することで、Hugo静的サイトをGitHub Pagesにビルドしてデプロイするプロセスを簡単に自動化できます。 GitHub Pages設定の構成 GitHub Actionsを使用して、Hugo静的サイトをGitHub Pagesに正常にデプロイするには、プロジェクトのGitHub Pages設定を構成する必要があります。 GitHubプロジェクトページに移動し、右上隅の「Settings」タブをクリックします。 「Pages」セクションにスクロールします。 「Build and deployment」設定で、「Source」ドロップダウンメニューを見つけます。 利用可能なオプションから「GitHub Actions」を選択します。これにより、GitHub PagesがGitHub Actionsで生成されたアーティファクトを使用してデプロイするようになります。 GitHub Pagesの設定を構成したので、hugo.yamlファイルで定義されたワークフローを使用してサイトをデプロイできるようになりました。 GitHub Pagesワークフローの設定 HugoとGitHub Actionsを使用したGitHub Pagesワークフローを設定するには、次の手順を実行します。 Hugoサイトのリポジトリの.github/workflows/ディレクトリにhugo.yamlという名前の新しいファイルを作成します。 次のYAML構成をhugo.yamlファイルにコピーします: name: Deploy Hugo site to Pages on: # Runs on pushes targeting the default branch push: branches: - main # Allows you to run this workflow manually from the Actions tab workflow_dispatch: # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages permissions: contents: read pages: write id-token: write # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued....

3月 25, 2023 · 2 分 · Juhyun Lee

PaperModテーマを使用したHugoブログにAdBlocker検出機能を追加する方法

このブログ記事では、PaperModテーマを使用してHugoブログにAdBlocker検出機能を追加する方法を学びます。広告ブロッカーを有効にしたユーザーに対して、無効化するかサイトをホワイトリストに登録するように促す、簡単な警告メッセージを含めます。 概要 以下は、私たちが行う手順の概要です: 警告メッセージのスタイルを指定するためのカスタムCSSファイルを作成します。 広告ブロッカーを検出するためのJavaScriptファイルを作成します。 警告メッセージ用のpartial HTMLファイルを追加します。 headとfooterのpartialsを拡張して、新しいファイルを含めます。 ステップバイステップのガイド 1. カスタムCSSファイルの作成 assets/css/extended/ディレクトリにcustom_css.cssという新しいファイルを作成し、以下のCSSコードを貼り付けます: #adblock-warning { background-color: #f2dede; color: #a94442; border-color: #ebccd1; padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; } 2. 広告ブロッカーを検出するJavaScriptファイルの作成 static/js/ディレクトリにadblock-detection.jsという新しいファイルを作成し、以下のJavaScriptコードを貼り付けます: function detectAdBlocker() { const adBlockTest = document.createElement('div'); adBlockTest.innerHTML = ' '; adBlockTest.className = 'ad ads adbadge doubleclick BannerAd adsbox ad-placeholder ad-placement'; document.body.appendChild(adBlockTest); window.setTimeout(() => { if (adBlockTest.offsetHeight === 0) { document.getElementById('adblock-warning').style.display = 'block'; console.log('Ad-blocker detected.'); } else { console....

3月 24, 2023 · 1 分 · Juhyun Lee