HugoによるBLOGサイトの作成

もともとは、他のBLOGの記事をベースに書いていた記事があったのですが、 参考サイトがなくなってしまったため、すべてを書く必要が生じました。 そのため、前提条件を含めて記載します。なお、本記事はWindows環境下を前提にしています。 ※ なお、この記事はまだ作成を進めているので、予告なく変更されます。 レポジトリ構成 この記事では次のレポジトリ構成を想定しています。 BLOG用メインレポジトリ 記事公開用レポジトリ 記事公開用レポジトリはサブモジュールとして、BLOG用メインレポジトリに組み込みます。したがって、全体のディレクトリ構成は以下のようになります。 / - root | - archetypes | - content | - post | - layouts | - public | - static | - theme 記事公開用レポジトリはpublicに組み込みます。 テーマ管理用レポジトリはthemeの配下に組み込みます。 使用したツール 名称 Visual Studio Code cmd scoop 必要なツールの取得 scoopのインストール スタートからPowerShellを起動する PowerShellの設定変更 Set-ExecutionPolicy RemoteSigned -scope CurrentUser PowerShellからのScoopのインストール iex (new-object net.webclient).downloadstring('https://get.scoop.sh') gitのインストール scoop install git hugoのインストール scoop install hugo-extended テーマの準備 テーマは https://themes.gohugo.io/ から探されるといいと思います。 テーマに対する小幅な変更はlayouts以下に同構造でファイルを複製して修正することになります。これにより、themes以下を直接修正しなくても良くなります。 本アーティクルでは、hugo-PaperModの使用を前提として進めます。 BLOG用メインレポジトリの準備 を以下のコマンドで準備します。 hugo new site <my_site> BLOG用のディレクトリが出来たら git init後、github等適当なところにpushします。 テーマは適当にsubmodule addします。submodule addするポイントはthemes以下となります。 ...

4月 2, 2025 · 1 分 · 154 文字 · Me

HugoによるBLOGの作成

※ この記事は古くなっています。 HugoによるBLOGサイトの作成を参照してください。 はじめに 当Blogの作成に関する話を纏めます。 本Blogは基本的な作りだけをいえば、以下のような作りです。 項目 内容 コンテンツ管理 GitHub コンテンツ配信 netlify 静的ファイル生成 Hugo テーマ hugo-bootstrap-premium 基本的な段取りはHUGOでブログ作成 → GitHub Pagesで公開する手順を参照しています。 とはいえ、変えているところもあります。テーマとして利用しているのは、Hugo Bootstrap Premiumですが、実際にはこれをフォークしたものを使用しています。理由はGoogle AdSenseなどを組み込むため、テーマを修正する必要があったためです。 また、参考にしたアーティクルはbashベースのdeploy scriptを使っていますが、こちらで使っているのは、ベースを当ブログでデプロイに利用しているスクリプトで公開しているバッチファイルです。 更に言うと、告知のためにRSS → IFTTT → Twitterというルートも用意しています。 使用したツール 名称 Visual Studio Code cmd scoop 必要なツールの取得 scoopのインストール スタートからPowerShellを起動する PowerShellの設定変更 Set-ExecutionPolicy RemoteSigned -scope CurrentUser PowerShellからのScoopのインストール iex (new-object net.webclient).downloadstring('https://get.scoop.sh') gitのインストール scoop install git hugoのインストール scoop install hugo-extended 環境の構築 本稿では出来た成果物はNetlifyで公開することを前提にしています、参考にしている記事ではgithub pagesを使っていますが、私はコンテンツ配信の柔軟性の確保を目的にNetlifyを使っています。 基本的には、最初にレポジトリを2つ用意します。 1: 全体管理用レポジトリ 2: コンテンツ配信用レポジトリ コンテンツ配信用レポジトリは最終的に、全体管理用レポジトリにsubmoduleとして組み込みます。 あと、先も述べたようにHugo Bootstrap Premiumはフォークして使います。Google Adsenseを組み込むのには、テンプレートを編集せざるを得ないので、そのまま、submoduleで組み込むと更新をアップストリームに出さざるを得なくなり詰むので。 フォルダ構成としては archetypes/ content/post/ data layouts/ public static themes/hugo-bootstrap-premium ...

5月 10, 2020 · 1 分 · 81 文字 · Me