Hugo+Academicでブログを構築

Wordpressから引っ越しをしよう

2020/07/23 6 min read

動機とか

タイトルの画像は、今まで運用してきたWordpress上のサイトのスクリーンショットです。記念に撮ってきました。
別にWordpressがいやになったという訳ではないのですが、Github pagesに移行したほうが制約も少なく扱いやすい気がしたので引っ越しすることにしました。Wordpressに書いた記事は、簡単に移行するのは難しそうなので、そのままにしておきます。

Hugo＋Academic

別に十分な検討をしてこの組み合わせに至ったわけでは無く、静的サイト生成ツール＋なんか都合の良いTheme程度の認識で選択しました。今後変えるかもしれません。ただ、コンテンツは多少特殊な要素があったとしても、基本的にMarkdownで記述できるので、今後もしサイトを移行しようと思っても、記事の移行をあきらめたくなるような事はないのではないでしょうか。

導入手順

せかっくなので自分なりの導入手順を記しておきます。環境はWindows10を使用しています。Hugoは導入済です。

Academicの導入

まず、Hugoのテーマとして、Academicを導入しようとして、以下の様にファイルを配置しましたが、上手くいきませんでした。

git submodule add https://github.com/gcushen/hugo-academic.git themes/academic

Academicのドキュメントを参照すると、Hugoの新規サイトの状態に加えて、いろいろなファイルが正しい位置に配置されている必要があるようで、 academic-kickstart.gitをクローンすることがおすすめのようです。初めはプライベートリポジトリとして扱いたいですし、リポジトリの名前も変えたいので、cloneしてmirrorします。

git clone --bare https://github.com/sourcethemes/academic-kickstart.git
cd academic-kickstart.git
git push --mirror https://github.com/shikihuiku/blog.git

早速ローカルで初期状態を確認しようと思ったら、ビルドエラーが出ました。

> hugo server
Building sites … ERROR 2020/07/25 17:30:35 render of "term" failed: execute of template failed: template: authors/list.html:5:3: executing "authors/list.html" at <partial "site_head" .>: error calling partial: "T:\GitHub\hugotest\blog\themes\academic\layouts\partials\site_head.html:131:56": execute of template failed: template: partials/site_head.html:131:56: executing "partials/site_head.html" at <resources.Concat>: error calling Concat: resources in Concat must be of the same Media Type, got "text/x-scss" and "text/css"
ERROR 2020/07/25 17:30:35 render of "section" failed: execute of template failed: template: section/publication.html:5:3: executing "section/publication.html" at <partial "site_head" .>: error calling partial: "T:\GitHub\hugotest\blog\themes\academic\layouts\partials\site_head.html:131:56": execute of template failed: template: partials/site_head.html:131:56: executing "partials/site_head.html" at <resources.Concat>: error calling Concat: resources in Concat must be of the same Media Type, got "text/x-scss" and "text/css"
ERROR 2020/07/25 17:30:35 render of "home" failed: execute of template failed: template: index.html:5:3: executing "index.html" at <partial "site_head" .>: error calling partial: "T:\GitHub\hugotest\blog\themes\academic\layouts\partials\site_head.html:131:56": execute of template failed: template: partials/site_head.html:131:56: executing "partials/site_head.html" at <resources.Concat>: error calling Concat: resources in Concat must be of the same Media Type, got "text/x-scss" and "text/css"
ERROR 2020/07/25 17:30:35 render of "taxonomy" failed: execute of template failed: template: authors/terms.html:5:3: executing "authors/terms.html" at <partial "site_head" .>: error calling partial: "T:\GitHub\hugotest\blog\themes\academic\layouts\partials\site_head.html:131:56": execute of template failed: template: partials/site_head.html:131:56: executing "partials/site_head.html" at <resources.Concat>: error calling Concat: resources in Concat must be of the same Media Type, got "text/x-scss" and "text/css"
ERROR 2020/07/25 17:30:35 failed to render pages: render of "section" failed: execute of template failed: template: section/talk.html:5:3: executing "section/talk.html" at <partial "site_head" .>: error calling partial: "T:\GitHub\hugotest\blog\themes\academic\layouts\partials\site_head.html:131:56": execute of template failed: template: partials/site_head.html:131:56: executing "partials/site_head.html" at <resources.Concat>: error calling Concat: resources in Concat must be of the same Media Type, got "text/x-scss" and "text/css"
Built in 84 ms
Error: Error building site: TOCSS: failed to transform "main_parsed.scss" (text/x-scss): resource "scss/scss/main.scss_76ac6956597c32fec7ddf60d408db3ab" not found in file cache

調べてみると、Academicには、hugo_extendedが必要だという事が分かりましたので、 Hugo_extendedのビルド済バイナリをDLします。再びローカルサーバーを立ち上げると、今回は上手くビルドできました。

hugo server

ローカルホストのポート1313にアクセスすると、おしゃれなサイトが表示されました。BiographyやProjectsやPublicationsなど、かなりハイスペック人材向けのテンプレートで尻込みしますが、どんどん削っていくことにします。

Academicのカスタマイズ

ここで先人の知恵をお借りします

Hugo + Academic テーマを使ったブログの作り方 https://qiita.com/harumaxy/items/58e7e4273c61e7e260b3

/config/_default/フォルダに格納されている以下のtomlファイルを編集していきます。

config.toml
language.toml
menus.toml
params.toml

その他諸々の変更を行って、シンプルにBlogのポストができるページにしました。言語設定はenのまま使用する事にします。

フォントの設定

デフォルトでは、GoogleのWebフォントがいろいろ指定されていますが、フォントの設定はシンプルな方が良いと思っています。フォントのプリセットにNativeという設定があり、こちらを使うとrootのfont-familyの設定を、殆どの要素で使うようになるようです。config/_default/params.tomlでこれを指定します。

font=“Native”

rootにある、フォントの設定はとりあえず変更せずに使ってみます。

custom.scssの設定

デフォルトではブラウザの横幅に対してページの表示領域が酷く狭いです。
blog/assets/scss/custom.scssというファイルを配置することで、自身で記述したcssをページに読み込ませる事が出来るようです。生成されたHTMLの要素のクラス名を確認して適当に設定しました。なんだか横幅を変えるだけで泥臭い作業になりました。もっと簡単にスタイルを変更する方法があるかもしれません。

/*width for top page*/
.container {
    max-width: 90%;
}
/*width for posts.*/
.article-container{
    max-width:90%
}

また、見出しのフォントのWeightが一定では無いので変更します。ついでにマージンも変更します。この辺りは素人なので、あまり参考になりませんが。しかし、CSSを書いて変更できると結局楽だなってなって思ってきました…

h1, h2, h3, h4, h5, h6 {
    margin-top: 1.7rem;
    margin-bottom: 0.3rem;
    font-weight: 700;
}

アイコンの設定

それから、Webサイトのアイコン、所謂ファビコンがデフォルトの設定では、Academicのアイコンになっているので変更します。
assets/images/フォルダに、解像度512x512のicon.pngを配置します。

Github Pagesの設定

最後に、実際にビルドされたページをGithub Pagesでホスティングする方法ですが、一番簡単な方法はHugoの出力先をdocsフォルダにして、それをそのままリポジトリにPushして、GithubPagesで公開する方法だと思います。 Hugoはデフォルトではpublicフォルダにファイルが生成されるので、これを変更します。

config/_default/config.tomlに以下の様に設定することで、docsフォルダにサイトが生成されるようになります。

publishdir= "docs"

あとは、baseurlを設定しサイトを生成してエラーがでなければOKです。リポジトリにPushして、github pagesの設定をすれば公開されます。

Github Pagesの設定 - やっぱりPrivateリポジトリで

構築履歴が閲覧可能な状態なのは別に構わないですし、大抵の場合はDraft記事が閲覧可能な状態でも構わないのですが、一部のCEDECセッションの補間資料とかのDraftは会期以前に公開状態になるのはまずいので、 publishしたべージのコンテンツのみを公開状態にする必要があります。結局Hugoのpublishdirのディレクトリ以下を別のリポジトリにして、こちらだけPublicに設定して、ビルド環境はPrivateリポジトリにすることにしました。

Hugo Academic