ブログ構築でやったこと

要件

サイト構築に関しては以下の要件を定義した。

• ホストは独自ドメインとアマゾンアフィリエイトに対応していること
• 独自ドメインは取りたい
• できるだけ安くしたい
• 記事はMarkdownで書きたい

一般的なブロクで始めるのもいいが、それだと、使い勝手が悪くなった時に移行が大変だと感じた。 なので、記事がMarkdownで書けて、それをHTMLに変換して公開するようなサービスが望ましいと感じた。 そういった中で静的ジェネレターのhugoを知った。静的ジェネレターには前々から興味がったので、これを気に勉強をするのもいかなと思った。 Markdownで書いた記事をgitで管理し、Netlifyにホスティングするのは素晴らしいシステムだと思う。Netlifyの無料枠での制限は以下のとおりである。

• 転送量:1ヶ月あたり100GB
• サーバーレス関数: 1ヶ月あたり125,000リクエストまで対応

無料枠を超えたら、有料会員にするか、AWSに移行してもいいかなとは思っている。それができるのはデータ(記事)とホスティング先が分離していることによりメリットだと感じている。 独自ドメインを取るとお金がかかるが、SEO的とか見た目的には有ったほうがいいなとは思った。アマゾンのAPIを使うことが目的なので、多少は足は出てもしょうがないとは思っている。

基本環境構築

メインの開発環境はWindowsであるため、以下はWindowsの説明である。ChatGPTとかに聞いたり、Hugo公式ドキュメントQuick startを参照した。使い分けとしてとりあえず知りたいなら、chatGPT,Gemini。参照するドキュメントは公式サイトのをみる。それに従ってエラーがでるならChatGPTを使用する。あと、コマンドを打つのはWindows Terminalを使用するとよい。色々理由はあるが、コマンドの履歴がhisotrtyで分かるからである。

1. Chocolateyのインストール まず、Chocolateyがインストールされていない場合は、以下のコマンドを管理者権限で実行してインストールします。
   1. 管理者としてコマンドプロンプトまたはPowerShellを開きます。
   2. 以下のコマンドを実行します：

   Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
   

2. Hugoのインストール Chocolateyがインストールされたら、以下のコマンドを実行してHugoをインストールします

   choco install hugo -confirm
   

3. HugoExTendedのインストール windows環境だと拡張環境が必要なので、インストールする。最初にChocolateyを最新バージョンに更新します。

   choco upgrade chocolatey
   

   Hugo Extended版をインストールするために以下のコマンドを実行します:

   choco install hugo-extended
   

ブログ構築

1. 新しいサイトの構築 新しいHugoサイトを作成します。

   hugo new site my-website
   cd my-website
   

2. Mainroadテーマの追加 MainroadテーマをGitHubからクローンします。

   git init
   git submodule add https://github.com/Vimux/Mainroad.git themes/Mainroad
   

3. Mainroadテーマの設定 サイトの設定ファイル config.toml を編集し、Mainroadテーマを使うように設定します。何を追加すればいいのかMainroad | Hugo Themesを参照。hugo.tomlで作成されていたら、config.tomlに名前を変更すること。

   baseURL = 'https://example.org/'
   languageCode = 'en-us'
   title = 'My New Hugo Site'
   theme = "mainroad"
   
   [Author] # Used in authorbox
     name = "John Doe"
     bio = "John Doe's true identity is unknown. Maybe he is a successful blogger or writer. Nobody knows it."
   
   [Params.widgets]
     recent_num = 5 # Set the number of articles in the "Recent articles" widget
     categories_counter = true # Enable counter for each category in "Categories" widget
     tags_counter = false # Enable counter for each tag in "Tags" widget
   

4. 記事の追加 新しい記事を作成するには以下をする。記事を作成するごとに必要です。

   hugo new content content/posts/my-first-post.md
   

   公式のサイトを見ると、以下のような書き方ができる。

   ---
   # Common-Defined params
   title: "Example article title"
   date: "2017-08-21"
   description: "Example article description"
   categories:
     - "Category 1"
     - "Category 2"
   tags:
     - "Test"
     - "Another test"
   menu: main # Optional, add page to a menu. Options: main, side, footer
   
   # Theme-Defined params
   thumbnail: "img/placeholder.png" # Thumbnail image
   lead: "Example lead - highlighted near the title" # Lead text
   comments: false # Enable Disqus comments for specific page
   authorbox: true # Enable authorbox for specific page
   pager: true # Enable pager navigation (prev/next) for specific page
   toc: true # Enable Table of Contents for specific page
   mathjax: true # Enable MathJax for specific page
   sidebar: "right" # Enable sidebar (on the right side) per page
   widgets: # Enable sidebar widgets in given order per page
     - "search"
     - "recent"
     - "taglist"
   ---
   ここに記事の内容を書く
   

サイト公開処理

GitHubへのアップロード

1. レポジトリの作成 GitHubにログインして、新しいレポジトリを作成します。

2. レポジトリの作成 githubへのプッシュ。レポジトリ名は適宜変えること。

   git remote add origin https://github.com/username/repository.git
   git add .
   git commit -m "Initial commit"
   

GitHubへのプッシュ(更新作業)はGitHub Desktopを使用した。git push -u origin masterではコマンドラインからできなかった。

Netlifyにサイトをデプロイ

• Netlifyにログインし、「New site from Git」をクリックします。
• GitHubを選択し、先ほど作成したリポジトリを選びます。
• Build commandにはhugo、Publish directoryにはpublicと入力します。
• 「Deploy site」をクリックします。

カスタマイズ

Amazonの商品画像表示問題

記事を書いていると、アマゾンの本を紹介する時に、やっぱ本の画像とかあるといいと思うが、それはなかなかに大変ということがわかった。

• 商品画像の取得にはProduct Advertising API (PA-API)を利用している(手動でもできるけど手間)
• Product Advertising API (PA-API)を利用するためにはアフェリやらないといけない
• じゃあ始めたばっかりの私が商品の画像を取得するためには調べるとか直接Markdownでそれっぽいのをかかないといけない
• でもそこまでするのも手間だし、一旦画像なしで、APIが利用できたら置き換えればいいやと判断した。

参考になりそうなサイト(みんなAPI使って、PHPで取得するサーバを作ったり、PythonでAPIを叩いているなという感じ)

• Product Advertising API (PA-API) を使って、過去記事で参照している Amazon の商品画像情報を全部取得した | マスタカの ChangeLog メモ
• HugoでAmazonアソシエイトのリンクを作成する | 初心者Jamstack
• PHPを使ってAmazonの商品情報をJSON形式で取得 | backport