はじめに
当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
という感じです。
hugo-bootstrap-premiumはgithubでforkしてから、それをsubmoduleとして組み込んでいます。