CodexでHugoサイトを効率化!AIコーディングで移行作業を自動化

Codexについて 使用理由 - Codex codexとはOpenAIが提供しているAIコーディングまたはAIエージェントになります。Codex自体は1年くらい前からローンチされており、私も存在自体は知っていました。それ以外にも他のAIコーディングも名前ぐらいはある程度把握しています。 今回Codexを選んだのはシンプルでChat-GPTのPlusプランに加入しているからですね。他のAIコーディングでもいいのはあるとは思いますが、他のサブスクに変更するのも面倒ですしそこまで大きな差が出ないのであればこだわる必要はないと思います。 無料でAIコーディングできるものであれば過去に試してみたClineやContinueがあれば無限にできると思います。制限付きならGoogleのAntigravityやCopilotでも十分だとは思います。 本題ですがそもそもなぜAIコーディングを使うことになったかというとWebサイトを移行するにあたって変更するものが多くあったからです。例えばフォームの表示がうまくいかない、リンクを最適化したい、不要な画像の削除をしたいなど人力でやるには手間がかかるようなものをやりたくなかったからです。 Codexの導入 というわけでまずはCodexを導入します。VScodeを事前に入れているので拡張機能からCodexを探してインストールしていきます。もちろんCodexのアプリを入れてみましたが、vscodeからアクセスできるならそちらが楽だと思います。特に使いやすさに大きな差は出ないと思いますので。 Codexへの指示だし 最初に聞いたのはフォームがうまく表示されなかったことですね。私がアイキャッチ画像で使っているイルカの画像が表示されなかったり、先頭の記事が枠にはまってないなどの事象が起きていました。というわけで以下のように指示を出して聞いてみました。 これはHugo + PaperModのサイトです。 まずプロジェクト構成を確認してください。 まだファイルは編集しないでください。 確認してほしいもの: - hugo.toml - contentフォルダー構成 - themes/PaperMod - layoutsフォルダーがあるか - publicフォルダーがあるか - PaperModテーマが正しく入っているか - “found no layout file for html” の警告が出る理由 原因を簡単に説明してください。 その後、安全な修正案を出してください。ただし、私が許可するまで編集しないでください。 作業とその確認 Codexを使うにあたってファイルのアクセスやネットの利用などが当然あります。その時に承認を求めるかどうかがあります。私は不安なタイプの人間なので確認を求めるようにしています。面倒であれば代理で承認やフルアクセスでもよいかと思います。会社のPCであればそもそも利用を禁止されるかもしれませんが。 次に実際に質問して編集を行ってもらいます。今回お願いしたのは画像の圧縮とコピーですね。特にコマンドを聞かれなければフォルダの中身を確認して表示してもらえます。 次に以下のように聞いてみました。そうするとコマンドで確認しようとするのでそれのアクセス許可確認が行われます。特に問題なければ1で今後も聞かれたくなければ2を選択してよいと思います。 他にも確認事項などで聞かれることがありますが、基本的には"はい"で問題ありません。というわけで最終的にはこうなりました。私の想定通りだったので特に問題ないですね。中身も確認しましたが特に問題なさそうでした。画像も圧縮されてましたので。 といった具合でうまく表示されてなかったり、リンクを変えたいけど大量に変えることになる場合はCodexなどのAIコーディングを使うとかなり楽になりますね。これがわかると個人開発が捗るというのもうなずけます。もちろんセキュリティやアプリをローンチする場合はまた別の障害が出てくるとは思いますが。ではでは。

2026年6月27日

WordPressからHugoへ移行中!GitとCloudflare Pagesで無料運営に挑戦

WordpressからHugoへの移行方法 ニュージーランドでのロードトリップが一通り落ち着いて車も売り、やることがなくなったので前から考えていた無料でサイト運営をしていこうかと考えています。ちなみに私が使用していたサーバーはConohaになります。 なぜConohaにしたかと言われたら特に理由はないですね。Wordpressを使ってサイト運営してみようと考えて調べた結果、たまたま見つけた個人ブログで紹介してたからだと思います。 Hugo+Git+Cloudflare Pagesとは 私はWordpressについてはまだまだ知らないことも多いとは思います。例えば会員機能は一個人で使うことはほぼないですね。利点としてはGUIで使いやすい、複数人で運用しやすい、学習コストが低い。欠点としてはサーバー代、表示が遅い、古いプラグインのセキュリティ問題。これは私が体験しただけですので改善方法はあるかと思いますが。 今回移行するにあたって試してみるのはHugo+Git+Cloudflare Pagesですね。Hugoはmarkdown形式の書き方からHTMLへ変換するプログラムになります。Gitは作成したHTMLや画像をアップする場所、Cloudflare Pagesは作成したHTMLをインターネットに公開する場所になります。 実はGithub Pagesというものもあり、これならGitにpushするだけなので楽なのですがCDN性能が弱いみたいです。CDNはざっくり言えば全世界からのアクセス表示速度でいいと思います。厳密には全く違うのですが理解としてはそれでいいと思います。 Wordpressから移行する理由 WordpressはアクセスするたびPHPが実行されDBにアクセスしてHTMLを作成するので遅くなりがちらしいです。HugoはHTMLをローカルで事前に作成し、読者がサイトにアクセスした際はCloudflare Pagesがただ表示するだけなので早くなるだろうということです。 今のところWordpressで記事も書きつつ、過去の記事を全て移行出来て表示出来たら完全に無料のほうへ移行しようとは思っています。何とか次のサーバー代の請求までには済ませたいですね… 画像に関してはある程度圧縮してgitへアップする予定です。動画は時間が長ければYoutubeの限定公開で短ければCloudflare R2にアップして見られるようにしようとは思ってます。まだ、どうなるかわかりませんが。 Wordpressから記事をエクスポートする方法 ということで過去の記事の移行方法です。まずはWordpressの管理画面からツール > エクスポートで全てのコンテンツを選択します。ただ、私の場合wordpressからmarkdownに変換する際WP Accessibility Stats Recordで問題が発生したので投稿、固定ページ、コンタクトフォームを個別でエクスポートしました。 VScode、Node.jsのインストール 前提としてOSはWindowsを想定しています。次にVScodeのインストールですね。ここでmaekdown式で記事を書きます。私もまだやったことはないですし、プログラミングよりなので慣れるのに時間がかかりますが、無料で運用する第一歩という感じですね。また、gitへのpushもこちらで出来ます。もちろんプログラミング言語をダウンロードしてればプログラミングを行うことも可能です。 Downloadをクリックしexeファイルを実行すればインストール画面に行きます。特に設定とかは考えずインストールすればよいと思います。インストール出来てvscodeを開けたら、日本語設定ができる拡張機能をインストールします。 左側のタブからJapanese Languageを探してみましょう。使用方法は書いてありますのでその通りに従ってください。 今度はNode.jsのダウンロードが必要になります。LTS版が安定しているのでそちらをダウンロードします。ダウンロードが完了したら一旦確認しましょう。Powershellを開いて確認します。タスクバーからsearchがあるのでそこから探すと良いと思います。Powershellを開いて以下のコマンドからバージョンの確認ができれば問題ありません。私はこの辺までは別の作業時にやってたりします。 node -v wordpressをMarkdown形式のファイルへ変換 次にエクスポート用フォルダの作成ですね。これはダウンロードしたxmlファイルを格納するフォルダを作成することになります。特にこだわりがなければデスクトップでも問題ありません。wp-exportフォルダを作成した場合、こんな感じ。 cd Desktop/wp-export 作成したフォルダにxmlを配置した後、以下のコマンドを実行します。これでxmlファイルからwordpress形式のHTMLを読み込みmarkdownファイルへと変換します。 npx wordpress-export-to-markdown まずはxmlファイルの場所を聞かれるのでそれを入力します。事前に作成たフォルダに移動してればファイル名を入力するだけで問題ありません。 次に記事をフォルダーごとに分割するかを聞かれます。私はyesにしてます。管理がしやすくなると思うので。 次にフォルダの前に日付の接頭辞を付けるか聞かれます。ここではNoにします。どのみちフォルダ名を変える予定なので。 次に年月別にフォルダ分けするかを聞かれます。ここは管理がしやすくなるので月別で階層分けするようにしました。 次に画像の保存について聞かれます。私はどのみち画像の整理や圧縮も必要になるのでALLにしています。 画像のダウンロードに失敗した場合は最悪直接Wordpressからダウンロードする方法もあります。outputフォルダに出力されてますので軽く確認しましょう。outputフォルダの中にpostsというフォルダがあります。 Hugoのインストール 次に作業フォルダの作成をします。これにはHugoのインストールが必要なのでwingetを使用してインストールを行います。以下のコマンドをPowershellで確認してバージョンが表示されればwingetコマンドがあるので問題ありません。 winget --version もし出てこなければMicrosoft StoreにアクセスしてApp Installerをインストールしましょう。これもインストールしたうえでバージョンの表示がされない場合は以下からWindows Package Manager Client winget.exeがあるかを確認してONにしましょう。 “設定”>“アプリ”>“詳細アプリ設定”>“アプリ実行エイリアス” ONになってるうえでバージョンが表示されない場合は以下のコマンドを使用してApp Installerを再登録しましょう。その後Powershellを消して再度開いてからバージョンの確認を行います。私の場合はこれで解決できました。 Add-AppxPackage -RegisterByFamilyName -MainPackage Microsoft.DesktopAppInstaller_8wekyb3d8bbwe wingetの確認が出来たら次はHugoのインストールをしていきます。以下のコマンドをPowershell入力します。 winget install Hugo.Hugo.Extended インストール出来たら確認しましょう。 ...

2026年6月22日

【Trade meを利用して車を売却した話】|ワーホリ in NZ × 英語力アップ/IELTS対策

English_Practice I am going to write about selling my car. I bought it on Facebook, but I sold it on Trade me. How to sell a car on Trade me Firstly, I logged in trade me and i clicked “Car, motorbike or boat” from “Start a listing”. After that, I chose what I wanted to sell. I selected cars. I put my plate number in this form. The plate number shows car details so that I filled out mileage, rego and WOF expiry date and extra payment. If WOF is expired, I would choose “No”. ...

2026年6月18日

【ロードトリップ ~ Timaru から Oamaruまで】|ワーホリ in NZ × 英語力アップ/IELTS対策

English_Practice Sightseeing near Oamaru I am going to write about my road trip from Timaru to Oamaru. I already wrote about Timaru. Firstly, this is White Horse Monument. Here is a simple view spot. The scenery is so nice. This is Waitaki Dam. I felt it did not look high, but this dam has much width. This is Riverstone Castle. It looked so beautiful and it was built around 200 ago. ...

2026年6月14日

【ロードトリップ ~ Arthurs pass から Tiamruまで】|ワーホリ in NZ × 英語力アップ/IELTS対策

English_Practice I am restarting to do road trip where I am going to write. I wrote about Hanmer Springs. I will write from Arthurs pass to Timaru. Firstly, I went to Talbot Forest Scenic Reserve and Peel Forest before going to Arthurs pass. I walked in the nature in former one. There were two falls in back one and I went to Emily Falls. The way to go there was a little mud. However, when I wanted to see the fall, I needed to across the river and go to way which was slippery. ...

2026年6月5日

【HanmerSpringsでリラックスしながらプールを楽しむ】|ワーホリ in NZ × 英語力アップ/IELTS対策

English_Practice I quitted my job and started a road trip again. I did not have enough time to write articles because I went to many places. I went those places before working so I just went to a couple of places. I went to some places where I forgot. Overall HanmerSprings At first, I went to HanmerSprings where I do not do many things. However, Hot Springs and skiing are famous there. I just enjoyed Hot Springs because I could not ski in this season. ...

2026年5月31日

【ExploreTekapoで5か月働いた感想】|ワーホリ in NZ × 英語力アップ/IELTS対策

English_Practice I am going to write about quitting job which I worked for 5 months. How to find ExploreTekapo I belonged to Explore Tekapo which I applied on backpackerboard. There were some jobs on this website. For instance, hosuekeeping, waiter and constracter. About ExploreTekapo I worked as a housekeeper there. Basically, I did making bed, cleaning romms and bathrooms. It depends on customer’s request what I made sofa bed or splied from queen bed to double single beds. ...

2026年5月17日

【オーストラリアのワーキングホリデービザの申請してきたよ】|ワーホリ in NZ × 英語力アップ/IELTS対策

English_Practice I am going to write about that I applied WHV in Australia and I was accepted quickly. Creating account of applied visa Firstly, I started creating an account to access this link in immigration of Australia. I use an Android so I downloaded Google Authenticater. This is an application for two-factor authentication. I am used to use it. Basic Information of applied visa After that, I logged in and applied a new visa. I did it which was “417”. ...

2026年5月11日

【Brewster Hutまで登って更に氷河の近くまでハイキングしに行ったよ】|ワーホリ in NZ × 英語力アップ/IELTS対策

English_Practice Hiking shoes I am going to write about hiking. Actually, I bought hiking shoes before doing. I guess normal shoes were fine but I thought it was hard and it cost $160 because it sold half price online. Brewster Mountain When I went there around 6 a.m., it was still dark. Moreover, I had to go across the river and it was autumn so my feet felt cold and it was a bit bad begining. ...

2026年4月26日

【裁判所や警察署から請求書が来たり車の修理で貯金が減った話】|ワーホリ in NZ × 英語力アップ/IELTS対策

English_Practice I paid a kind of things recently so I am going to write about that. Invoice from the judgement Firstly, it was an invoice from the judgement. When I saw it, I thought I commited some incidents. Moreover, our company received it. I sent email which I wanted to know detail to pointed email address for now. After that, I was called from the judgement to teach details. Apparently, I did not change my living address so the invoice was sent to my previous workplace. It was a speed ticket which a camera measured automatically. I did not think it is a big problem. The fine was $218. ...

2026年4月15日