サイト開発ログ

もういい大人なので、自分のサイトをイチから作り直そうと思った。 過去に作ったものの技術やサーバが散らばっていて、一元管理して整理したい思いもあった。

さて何かを作るとき、初めに必要なことは設計と技術選定だ。

• 学生の頃は、手で HTML と CSS を書いていた。だがもうそんな時代ではない
• 新卒の頃は、自前の文法を変換するジェネレータを Python で書いた。若かったのだ
• その後、世界では Markdown から静的サイトを生成するものが流行った
  • 自分の場合は ruhoh というジェネレータを使って 技術メモやブログを書いてみた
  • これは悪くなかったが ruhoh というツールはどうにもマイナーで、開発も途絶えてしまったようだ

現代においてエンジニアの間では、Markdown （とりわけ GitHub Flavored Markdown） はスタンダードとなった。 Markdown … 不満や物足りなさは無いわけではないが、サイトの文書や技術メモを書くには十分だろう。 （書籍を書こうと思ったら AsciiDoc とかの方が良さそうだけど）

何か時代に合った、ちょうどよいサイトジェネレータを探してそれを試してみよう。

ジェネレータは Hugo に決めた。 Go 製で、ビルドの速さが素晴らしい。人気もそれなりに高そう。 Go の HTML テンプレートは若干クセがあるがまあよいだろう。速いのは正義だ。

自分の趣味サイトなのでデザインも自分で作る。CSS を書く環境を整えよう。

さすがに CSS をゼロから書くことはせず、フレームワークを利用する。 Bootstrap が無難だろう。現在のメジャーバージョンは 4 だ。

CSS 自体は生でしか書いたことがなかったが、せっかくなので SASS でやってみようかと思い立つ。

• 参考 : [2018-08] これからはcssはSassで書こう。 - Qiita

以下を参考にして Bootstrap の scss ファイルを手に入れた：

• Build tools · Bootstrap
• [2018-06] How to Customize Bootstrap – UX Planet

Node を入れて node-sass の力で scss をコンパイルする。 以下のような package.json を書いた：

{
  "name": "altotascal_css",
  "version": "0.0.1",
  "description": "Customized Bootstrap sass",
  "scripts": {
    "test": "echo \"Hello\"",
    "css-min": "node-sass ./index.scss ../hugo_project/themes/altotascal/static/css/altotascal.min.css --output-style compressed",
    "css-min-watch": "npm run css-min -- --watch"
  },
  "author": "Tatsuya Koyama",
  "dependencies": {
    "node-sass": "^4.9.3"
  }
}

index.scss はこういうイメージ：

@charset "utf-8";

@import "bootstrap-4.1.3/scss/bootstrap.scss";

@import "scss/altotascal_layout";
@import "scss/altotascal_flavor";
...

具体的な css は scss/ 以下のファイルに記述していく。 これで npm run css-min-watch しておけば、scss ファイルを書き換えるだけで css が更新される感じになった。

過去に作ったものの反省だったり、世の中のサイトを見てきた経験から、 自分は以下のような形が一番見やすい / ページを辿りやすいなという結論に行き着いた：

3 段組みは PC 向けのものだが、スマートフォンでも見れるようにレスポンシブにしておく。 （Bootstrap が大体やってくれるけど）

技術メモは 1 つの記事が長くなることも多いので、使い勝手と手触りのよいアウトライン表示が必要だった。 これについては試行錯誤して自分好みのものをつくった。成果物は以下：

• devlog アウトラインの生成

• 手頃な VPS で適当に Apache を動かしておく
• 手元で以下のような Makefile を書いておく

deploy:
	hugo -DF --cleanDestinationDir \
	&& rsync -avz --delete public/ user@host:/path/to/altotascal

• make deploy と打ってデプロイ

素朴だが、趣味のサイトの運用にはこれで十分だろう。

HTML5 という言葉が現れて久しいが、audio タグをそのまま使うと UI がブラウザ依存になる。

デザインを整えるのに都合のよいツールは何か無いだろうか。 js のライブラリなどを探してみるとしよう。

SoundCloud というのもあるが、有料サービスへの依存は減らせるなら減らしたい。 YouTube ほどの王者なら身を委ねてもよいが、自作曲を全て動画で公開するのも微妙だし。

最終的に僕は Plyr という js のライブラリを選んだ。 audio タグを後から統一した見た目に置き換えてくれるもので、使い勝手がよさそうだったので。

↑ こんな感じで UI の環境差を（完全ではないがある程度）埋めてくれる

• 「このページを参照しているサイト内ページ」 が表示されていると、情報が辿りやすくなる （関連する情報に気づきやすくなる）
  • エンジニアは GitHub の Pull Request とかでおなじみだと思う
  • 企業向けの Wiki サービスとかにもたまにあったりする
    • esa.io とか
• Hugo のページ変数で「自分を参照しているページ達」が取得できたら素敵だったが、現状そういうものは無さそうだ
  • とりあえず各ページに手動で書いておく（shortcode で多少の楽はする）
  • 内部的に Hugo の ref を使っていれば、リンクが切れた時にエラーで気づけるので、まあとりあえずこれで。

それ用の meta タグを記述することで対応させる。 OGP というキーワードで検索すると情報が出てくる：

• 公式 The Open Graph protocol
  • 日本語訳 [2018-07] オープン・グラフ・プロトコル - Open Graph protocol
• OGPとは - Content Hub（コンテンツハブ） | ナイル株式会社
• [2016-11] 【2016年版】Facebook、Twitterに最適なOGP記述設定まとめ | 東京上野のWeb制作会社LIG
• [2018-04] OGP設定の正しい方法とは？確認の仕方と注意するポイント | Marketing Native（マーケティング ネイティブ）

自分の場合は以下のような記述を Hugo のテンプレートに組み込んだ：

  <meta property="og:title" content="{{ .Title }}" />
  <meta property="og:url" content="{{ .Permalink }}"/>
  <meta property="og:image" content="{{ .Site.BaseURL }}{{ if .Params.eyecatch }}{{ .Params.eyecatch }}{{ else }}img/illust/alto-tascal/alto-tascal-voxel.jpg{{ end }}" />
  <meta property="og:site_name"  content="Alto-tascal" />
  <meta property="og:description" content="{{ if .IsPage }}{{ .Summary }}{{ else }}{{ .Site.Params.description }}{{ end }}" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="{{ .Title }}{{ if .Title }} | {{ end }}Alto-tascal" />
  <meta name="twitter:url" content="{{ .Permalink }}" />
  <meta name="twitter:description" content="{{ if .IsPage }}{{ .Summary }}{{ else }}{{ .Site.Params.description }}{{ end }}" />
  <meta name="twitter:image" content="{{ .Site.BaseURL }}{{ if .Params.eyecatch }}{{ .Params.eyecatch }}{{ else }}img/illust/alto-tascal/alto-tascal-voxel.jpg{{ end }}" />
  <meta name="twitter:site" content="@tatsuya_koyama" />
  <meta name="twitter:creator" content="@tatsuya_koyama" />

本来であればサイトを作り直したタイミングでやっておくべきだったのだが、横着してやっていなかった。 Let’s Encrypt を利用して対応した：

• devlog CentOS 6 で Let's Encrypt を利用してサイトを HTTPS 化する