<p>Zenn も使ってみようということで初記事作成。</p>
<p>WordPress から Hugo への乗り換えというネタは、当然あちこちにありますが、意外と色々なパターンがあるので、以下のパターンについて、記録を残しておきます。</p>
<ul>
<li>WordPress to Hugo Exporter でのデータ出力</li>
<li>テーマは、「Mainroad」</li>
<li>GitHub Pages のタイプは、「GitHub Pages project」</li>
<li>年別アーカイブ widget 追加</li>
</ul>
<p>作成したサイトはこちらになります。<br>
<a href="https://jqinglong.github.io/programmers-office/" target="_blank" rel="nofollow noopener noreferrer">PROGRAMMERS OFFICE</a></p>
<h2 id="wordpress-to-hugo-exporter-%E3%81%A7%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E5%87%BA%E5%8A%9B">
<a class="header-anchor-link" href="#wordpress-to-hugo-exporter-%E3%81%A7%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E5%87%BA%E5%8A%9B" aria-hidden="true"></a> WordPress to Hugo Exporter でのデータ出力</h2>
<p>移行元の WordPress からのデータ出力は、WordPress to Hugo Exporter を使用しました。<br>
これ自体は、プラグインをインストールして、メニューから<br>
ツール ＞ Export to Hugo<br>
をクリックすると、おもむろに、ZIPファイルダウンロードが始まります。</p>
<p>ただ、最初これがエラーになってしまいました。<br>
原因は、環境のパワー不足。<br>
記事自体は778記事、4.7MBという程度のものでしたが、画像等も含めて、展開した結果のファイルサイズは234MB。<br>
これを出力するために、GCPの無料枠「f1-micro」では処理しきれませんでした。<br>
ここはクラウドの利点を活かし、いったんマシンタイプを変更して、ダウンロード後に戻す、ということで対応しました。</p>
<h2 id="hugo-%E3%81%B8%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E5%8F%96%E8%BE%BC">
<a class="header-anchor-link" href="#hugo-%E3%81%B8%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E5%8F%96%E8%BE%BC" aria-hidden="true"></a> Hugo へのデータ取込</h2>
<h3 id="%E5%8F%96%E8%BE%BC%E6%99%82%E3%82%A8%E3%83%A9%E3%83%BC">
<a class="header-anchor-link" href="#%E5%8F%96%E8%BE%BC%E6%99%82%E3%82%A8%E3%83%A9%E3%83%BC" aria-hidden="true"></a> 取込時エラー</h3>
<p>Hugo 自体のインストール等については、多数情報があるので割愛します。</p>
<p>移行元からダウンロードしたZIPファイルを復元（最近は解凍と言わないらしいですね）してできるフォルダ「hugo-export」の中の「posts」に778個のファイルが入っています。<br>
とりあえず、これをこのまま、Hugo で作ったサイト構成の中の、content の中にコピーすることにより、表示されるはずですが、エラーになりました。<br>
記事のタイトルの先頭に「@」を使用しているとエラーになるようです。<br>
逆に、起動しないレベルのエラーはこれ一つということで、移植性は高いです。</p>
<h3 id="%E9%9A%8E%E5%B1%A4%E5%88%86%E3%81%91">
<a class="header-anchor-link" href="#%E9%9A%8E%E5%B1%A4%E5%88%86%E3%81%91" aria-hidden="true"></a> 階層分け</h3>
<p>また、1フォルダに778このファイルが存在するのも扱いにくいので、年ごとのフォルダに分けることにしました。<br>
2003年から2020年まで（なぜか途中跳んでいる年もありますが）。最近は少ないですが、よく続いています。<br>
これは後で効いてきます。Hugo 的には、content 配下の階層は気にしない（セクションとして扱われますが）ということで、ありがたいです。</p>
<h3 id="%E4%B8%8D%E8%A6%81%E8%A1%8C%E5%89%8A%E9%99%A4">
<a class="header-anchor-link" href="#%E4%B8%8D%E8%A6%81%E8%A1%8C%E5%89%8A%E9%99%A4" aria-hidden="true"></a> 不要行削除</h3>
<p>また、エラーではありませんが、表示されない情報等があります。<br>
出力されたmdファイルの記述の中で、pタグとかdivタグ付きで出力されているものがあります。<br>
このタグ間に空白行が含まれていると、表示されなかったり、タグがそのまま表示されたりします。<br>
これを一括置換します。<br>
VSCode使用が前提ですが、</p>
<div class="code-block-container"><pre><code>&gt;\n    \n    &lt;
</code></pre></div><p>を</p>
<div class="code-block-container"><pre><code>&gt;\n    &lt;
</code></pre></div><p>に置換する、というようなことをします。<br>
閉じタグの後ろにスペースがある場合もあるので</p>
<div class="code-block-container"><pre><code>&gt; \n    \n    &lt;
</code></pre></div><p>と指定したりもしますし、先頭のスペースの数も、４つだったり６つだったり色々あったので、各パターンで置換していきます。</p>
<h3 id="%E7%94%BB%E5%83%8F%E3%83%AA%E3%83%B3%E3%82%AF">
<a class="header-anchor-link" href="#%E7%94%BB%E5%83%8F%E3%83%AA%E3%83%B3%E3%82%AF" aria-hidden="true"></a> 画像リンク</h3>
<p>画像ファイルもちゃんとダウンロードされているので、それを static フォルダ配下に入れました。<br>
それの参照もできるのですが、どうも、画像のリンク記述が、</p>
<div class="code-block-container"><pre class="language-html"><code class="language-html">&lt;img src="https://i2.wp.com/
</code></pre></div><p>というような記述になっている。</p>
<p>「i2.wp.com」とは？ということで調べると、WordPress でJetpackを入れていると、このサイトでキャッシュをしてくれていたということです。やめる時に初めて知りました。</p>
<p>本当は、これも一括置換すれば良いわけではありますが、いったんは、ありがたく、そのまま使わせていただいています。</p>
<h2 id="hugo%E3%83%86%E3%83%BC%E3%83%9E%E9%81%B8%E6%8A%9E">
<a class="header-anchor-link" href="#hugo%E3%83%86%E3%83%BC%E3%83%9E%E9%81%B8%E6%8A%9E" aria-hidden="true"></a> Hugoテーマ選択</h2>
<p>テーマ選択は悩むと思います。<br>
最初は、「hugo-theme-learn」をインストールしてみました。</p>
<p>左ペインの盛りだくさん感は好きなのですが、素人には若干敷居が高そうな気がしたので、これまでのブログとも表現が近いと感じた「Mainroad」にしました。</p>
<p>その設定方法等については、下記のサイトにお世話になりました。</p>
<p><a href="https://itsys-tech.com/list/hugo/007/" target="_blank" rel="nofollow noopener noreferrer">HUGOのテーマ「Mainroad」の設定方法を紹介</a></p>
<p><a href="https://terashim.com/posts/create-hugo-blog-and-customize-mainroad-theme/" target="_blank" rel="nofollow noopener noreferrer">Hugo によるブログ作成と mainroad テーマのカスタマイズ</a></p>
<p>テーマを切り替えて最初は、</p>
<div class="code-block-container"><pre><code>まだ何も投稿していません！
content 以下のどこかのディレクトリに投稿を追加するとここに表示されます。デフォルトでは（最も投稿の多い）１つのセクション だけがメインページに表示されます。

ヒント: 設定のパラメーター mainSections を使って好きな数だけセクションを表示させることもできます。
</code></pre></div><p>という画面が表示されて、なんだろう、と悩みましたが、いったん、公式のConfig.toml exampleを適用すると表示されました。</p>
<p>そこからあれこれ調べながら、設定値を変更して、現在この見た目になっている、ということです。<br>
（ただし、「アーカイブ」ウィジェットについては後述）</p>
<h2 id="github-pages-%E3%81%B8%E3%81%AE%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4">
<a class="header-anchor-link" href="#github-pages-%E3%81%B8%E3%81%AE%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4" aria-hidden="true"></a> GitHub Pages　へのデプロイ</h2>
<p>デプロイ先も、本当は、最近よくお世話になっているNetlify が楽ではないかなと思ったのですが、あえて楽すぎない道を選ぶということで、GitHub Pages にしました。</p>
<p>そうなったときに、まず決断を迫られるのが、</p>
<ul>
<li>GitHub Pages project （プロジェクトサイト）</li>
<li>personal/organizational site （ユーザサイト、組織サイト）<br>
のどちらのタイプにするか、です</li>
</ul>
<p>のはずですが、初めて作ろうという私は、情報のある方に従わざるを得ない立場。</p>
<p><a href="https://qiita.com/peaceiris/items/d401f2e5724fdcb0759d" target="_blank" rel="nofollow noopener noreferrer">GitHub Actions による GitHub Pages への自動デプロイ</a><br>
こちらのサイトのやり方を使わせていただきます。</p>
<p>が、これはどちらのタイプ？ということがちょっと分かりにくい気がしました。<br>
これは、プロジェクトサイトになります。</p>
<div class="code-block-container"><pre><code>https://ユーザ名.github.io/リポジトリ名/
</code></pre></div><p>というURLになります。</p>
<p>手順は以下のようになります。<br>
(1) .githubでリポジトリ作成、ソースpush<br>
push前に.gitignore作成も。</p>
<div class="code-block-container"><pre><code>.DS_Store
public/
</code></pre></div><p>(2) .github/workflows/gh-pages.yml 作成・push<br>
基本的には書いてある通りです。<br>
hugo-version を今回インストールされた、0.79.0 にしたのみです。</p>
<p>(3) GitHubリポジトリのSettings内 GitHub Pages の設定<br>
上記 gh-pages.yml が実行されることにより、gh-pages というブランチが作られるようです。<br>
プロジェクトサイトを作る場合は、Source として、このブランチを指定します。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/j3vs60w77yk9r19fwzdp148w9t5z" alt loading="lazy" class="md-img"><br>
ブランチのソースを見てみると分かるように、いきなり各記事のフォルダが見ている状態ですので、(root)を指定します。<br>
これにより、公開されたURLが表示されます。</p>
<p>これでURLを開いてみるわけですが、スタイルが当たっていませんし、記事を見ようとしてもリンク切れです。<br>
なぜなら、プロジェクトサイトの場合は、Hugo上のルートがリポジトリ名の下からになるからです。<br>
これへの対処のために、config.toml の先頭、baseURLを</p>
<div class="code-block-container"><pre><code>baseURL = "https://jqinglong.github.io/programmers-office/"
</code></pre></div><p>のようにします。</p>
<p>これでいったん、移行完了というところでしょうか。</p>
<h2 id="%E3%82%A2%E3%83%BC%E3%82%AB%E3%82%A4%E3%83%96widget">
<a class="header-anchor-link" href="#%E3%82%A2%E3%83%BC%E3%82%AB%E3%82%A4%E3%83%96widget" aria-hidden="true"></a> アーカイブwidget</h2>
<p>ただ、一つだけ物足りないのが、過去の記事にアクセスするためのリンクがないということです。<br>
カテゴリや、タグのウィジェットは自動的に作られているのですが、年とか月とかを指定した記事表示ができないのです。<br>
ニーズありそうなものですが、みなさん苦労して対応されているようです。</p>
<p>最初は年ごとにフォルダ分けたので、そのセクションという考え方を使ってできないかなと思いました。<br>
が、結論としては、Hugoで用意されている、taxonomiesのarchivesを使うことにします。</p>
<p>最初はこちらで、やることを掴みます。<br>
<a href="https://backport.net/blog/2017/09/08/hugo_monthly_archives/" target="_blank" rel="nofollow noopener noreferrer">Hugoで月別アーカイブを作る</a></p>
<p>ただ、若干細かいところが省略されている気がするので、下記も参照しました。<br>
<a href="https://suihan74.github.io/posts/2020/01_20_00_hugo_taxonomies/" target="_blank" rel="nofollow noopener noreferrer">Hugo - Taxonomyを使ってアーカイブページを作る</a></p>
<p>手順は下記のような流れです。<br>
(1) config.tomlにtaxonomiesの定義を追加<br>
上記サイトのように、tag、category、archive 三つとも追加しておきます。<br>
合わせて、sidebar に、archives ウィジェットを追加します。</p>
<div class="code-block-container"><pre><code>[Params.sidebar]
  home = "right" # Configure layout for home page
  list = "right"  # Configure layout for list pages
  widgets = ["search", "recent", "categories", "taglist", "social", "languages", "archives"]

[taxonomies]
  tag = "tags"
  category = "categories"
  archive = "archives"
</code></pre></div><p>(2) ウィジェット定義ファイル作成<br>
themes/mainroad/layouts/partials/widgets/categories.html<br>
をコピーして、<br>
layouts/partials/widgets/archives.html<br>
を作成します。<br>
メイン部分のulタグ内は、上記サイトの記述を利用させていただきました。</p>
<div class="code-block-container"><pre><code>{{- $archives := .Site.Taxonomies.archives }}
{{- if gt (len $archives) 0 }}
&lt;div class="widget-archives widget"&gt;
	&lt;h4 class="widget__title"&gt;アーカイブ&lt;/h4&gt;
	&lt;div class="widget__content"&gt;
    &lt;ul&gt;
      {{ range $items := .Site.Taxonomies.archives.Alphabetical.Reverse }}
        &lt;li&gt;&lt;a href="{{ $.Site.BaseURL }}archives/{{ .Name | urlize | lower }}"&gt;{{ .Name }} ({{ .Count }})&lt;/a&gt;&lt;/li&gt;
      {{ end }}
    &lt;/ul&gt;
	&lt;/div&gt;
&lt;/div&gt;
{{- end }}
</code></pre></div><p>他言語化も難しくはないですが、日本語ベタ書きしています。</p>
<p>(3) 各記事に archives の記述追加<br>
流石に、700ファイルに一つずつ入れていくわけにはいきません。<br>
VSCodeで範囲指定一括置換できるので、それで各年のフォルダごとに、置換していきます。</p>
<div class="code-block-container"><pre><code>\nurl: 
</code></pre></div><p>から</p>
<div class="code-block-container"><pre><code>\narchives:\n    - 2004\nurl: 
</code></pre></div><p>という感じです。</p>
<h2 id="%E6%89%80%E6%84%9F">
<a class="header-anchor-link" href="#%E6%89%80%E6%84%9F" aria-hidden="true"></a> 所感</h2>
<p>最大のメリットは、VSCodeから離れることなく、執筆から投稿までできるというところでしょうか。<br>
作ったブログの Lighthouse スコアも高いです。<br>
しばらく使ってみます。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/k82cwwrlaeorjrseuw4hyfjy7bxt" alt loading="lazy" class="md-img"></p>


WordPress から Hugo への乗り換え

WordPress to Hugo Exporter でのデータ出力

Discussion