my icon

jagijagijag1 tech note

Qrunch記事のHugo on GitHub Pages移行とHugoテーマ拡張

jagijagijag1

2020/10/30 追記ここから

  • 記事公開後コメントいただき，テーマをいじりたい場合はテーマ側をforkしてくる必要ないことが判明
  • 本記事でforkしたテーマを編集しているところは，Hugoプロジェクト側の適切なパスに同内容のファイルを置けばOK

2020/10/30 追記ここまで

閉鎖してしまうQrunchで書いた記事をGitHub Pagesに移行したのと，選んだHugoテーマを少し拡張したので，そのときにやったことを書き留め．

Hugo on GitHub Pagesの構成

  • Qrunchが閉鎖するため移行先としてGitHub Pagesを選択
    • Qrunch以上に合いそうなサービスがなかったため
  • ブログはGitHubプロジェクト(not ユーザ)に紐づくGitHub Pagesを利用 (https://<user-name>.github.io/<repository-name>にホスト)
    • ブログ単品としてホストしたいので，リポジトリ名をblogにして作成
    • masterブランチのdocsディレクトリ配下をホストするよう設定
  • sourceブランチにてHugoファイルを管理 + sourceブランチへのプッシュで起動するGitHub Actionsを設定しmasterブランチにHugoの静的サイト生成結果をpush
name: build hugo site on source & deploy to master

on:
  push:
    branches:
      - source

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
          fetch-depth: 0

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.75.1'

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_branch: master
          publish_dir: ./docs
          destination_dir: ./docs

移行したときのつまづき

  • QrunchはMarkdownで記述可能であったため，Exportしてきた記事データの修正点は大きく下記2つ
    • ヘッダ情報の修正 (dateのフォーマットなどをやるだけ)
    • 本文中の画像リンク (若干つまづいたので後述)
画像リンク修正
  • Hugo上での記事管理は下記のディレクトリ構造にした
...
├── content
|   ├── posts
|   |   ├── 20xx_xx_xx
|   |   |   ├── xxxxxxx.png
|   |   |   └── index.md
|   |   ├── 20xx_xx_xx
|   |   |   ├── xxxxxxx.png
|   |   |   └── index.md
|   |   |
...
  • またプロジェクトに紐づくGitHub Pagesを利用したため，Hugoの設定でbase urlを設定
baseURL = "http://jagijagijag1.github.io/blog/"
publishDir = "docs"
...
  • 上記設定の場合，画像リンクは下記の通り修正して解決
    • 修正前: [image](https://s3.qrunch.io/xxxxxxx.png)
    • 修正後: [image](/blog/posts/20xx_xx_xx/xxxxxxx.png)
      • [image](xxxxxxx.png)で指定すると，記事中では正常に画像表示されるが，記事一覧ページからだとリンクがおかしくなって画像表示されなかった

(ここにたどり着くまでどういうディレクトリ構造がいいかとか，base url変えた時にどう画像リンク指定するかがよくわからず四苦八苦した…)

テーマHugo Future Imperfect Slimの拡張

  • 選んだテーマを少し改善・拡張

cssの上書き

  • static/css/add-on.cssに記述した内容は，テーマのCSSを上書きしてくれる
  • デフォルトだと文字間隔やコードブロックのフォントなどが少し気に入らなかったので下記のように修正
#site-sidebar ul,
.stats ul li {
  text-transform: none;
}

.nav {
  text-transform: none;
  letter-spacing: 0.2em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: none;
  letter-spacing: 0.1em;
}

code {
  font-family: Monaco, Inconsolata, Consolas, monospace;
}

.count-container > .count {
  font-family: Monaco, Inconsolata, Consolas, monospace;
}

ブログパーツの設置

  • Hugo Future Imperfect Slimのリポジトリをforkして拡張
    • Hugoで下記コマンドでテーマ取得してconfig.tomlでテーマ指定+各パーツのパラメタ指定すれば利用可能 git submodule add -b add-pixela-social https://github.com/jagijagijag1/hugo-future-imperfect-slim.git themes/hugo-future-imperfect-slim

拍手ボタン

  • Qrunchにはあった拍手ボタンをこっちにも一応つけてみる
  • まず拍手ボタンを使うためのCSSとJSを読み込み
<head>
  ...
  {{ if .Site.Params.enableApplause }}
    <link href="https://unpkg.com/applause-button/dist/applause-button.css" rel="stylesheet" type="text/css">
    <script src="https://unpkg.com/applause-button/dist/applause-button.js"></script>
  {{ end }}
</head>
  • 次に，拍手ボタンを設置する部品を下記の通り作成
    • url属性に各記事ページのURL(Permlink)を設定することで，記事ごとに拍手数を保持できるようにする
{{ if .Site.Params.enableApplause }}
  <div>
    <applause-button color="{{ .Site.Params.applauseButtonColor }}" url="{{ .Permalink }}" multiclap="true" style="width: 55px; height: 55px; margin-right: 15px;"/>
  </div>
{{ end }}
  • その後上記部品を各記事に表示するよう設定
...
  <article class="post">
    {{ .Render "header" }}
    <div id="socnet-share">
      {{ partial "applause" . }}  <!-- Add this line -->
      {{ partial "share-buttons" . }}
    </div>
...
  • ただしApplause ButtonのCSSがブログテーマのCSSと競合しているので，下記を追加設定
    • 具体的には，カテゴリの記事数の要素に与えられる.countと，拍手数の要素に与えられる.countが競合するので，拍手数の.count-container > .countのCSSに手を加える
    • またapplause-buttonのcolor属性で指定した値は，.count-containerの親要素の.style-rootが持っているので，そこから無理やり継承する
.count-container {
  color: inherit !important;
}

.count-container > .count {
  float: none !important;
  color: inherit !important;
}

{
   "styles" : [
      "css/applausebutton.css",
      ...
  • 上記が反映されたテーマをsubmoduleに入れ，ブログ本体の設定ファイルに以下を追記すれば各記事に拍手ボタンが表示される
[params]
  ...
  enableApplause        = true
  applauseButtonColor   = "firebrick"

アクセスカウンタ

  • Hugo Future Imperfect Slimでサイドバーに，Qrunchでも使っていたPixelaグラフのアクセスを追加
  • サイドバー設定ファイルに以下を追記
    • iframeタグでも描画可能だが，テーマの色に合わせて強制で白背景にしたかったのでscriptタグを使って実現
...
  {{ if .Site.Params.sidebar.pixelaAccessCounter }}
      <section id="pixela_access_counter">
        <header>
          <h1>Blog PVs</h1>
        </header>
        <div id="svg-load-area" style="border: 1px solid rgba(161, 161, 161, 0.3);"></div>
        <div style="text-align:right;">Powered by <a href="https://pixe.la/" target="_blank">Pixela</a></div>
      </section>
      <script src="https://unpkg.com/tippy.js@3/dist/tippy.all.min.js"></script>
      <script>
      document.addEventListener('DOMContentLoaded', function(){
        $('#svg-load-area').load('{{.Site.Params.sidebar.pixelaACGraphURL}}', function(){
          tippy('.each-day', {
            arrow: true
          });
        });
      });
      </script>
  {{ end }}
...
  • 上記が反映されたテーマをsubmoduleに入れ，ブログ本体の設定ファイルに以下を追記すればサイドバーにグラフが表示される
...
  [params.sidebar]
    pixelaAccessCounter = true
    pixelaACGraphURL    = "https://pixe.la/v1/users/<user-id>/graphs/<graph-id>?mode=short"
...

Pixelaユーザページのsocal icon

...
  {{ with .Site.Social.pixela }}<li><a href="//pixe.la/{{.}}" target="_blank" rel="noopener" title="Pixela" class="fas fa-th"></a></li>{{ end }}
  • 上記が反映されたテーマをsubmoduleに入れ，ブログ本体の設定ファイルに以下を追記すればサイドバーにソーシャルアイコンが表示される
[social]
  ...
  pixela = "@<pixela-user-id>"

Say Something

Comments

Recent Posts

Categories

Blog PVs

Powered by Pixela