Hugo

Hugoの公式を眺めてて見つけたここに書いてある内容。 Hugo is a static site generator. By using Hugo you are already standing on very solid ground. Static HTML files on disk are much easier to reason about compared to server and database driven web sites. But even static websites can integrate with external services, so from version 0.41, Hugo provides a Privacy Config that covers the relevant built-in templates. Hugoは静的サイト生成プログラムだけど、静的サイトでも外部サービスと統合できるからバージョン0.41以降は関連する組み込みテンプレートについてのプライバシー設定を提供するみたいな話が書いてる。 サイトのプライバシー設定について 設定一式はconfigのyamlやtomlに追加する。内容については一旦全てオフの状態になっているのでサイト毎に管理者がちゃんと設定してねって書いてた。 tomlコードはこんなのでコメントに適当な和訳入れた。（合っているとは限らない） [privacy] [privacy.disqus] disable = false #機能を無効にする [privacy.

Youtubeのリンクを貼ってみたかったのでshortcodeをを実装する。 shortcodeとは htmlタグのテンプレートのようなものという認識。 例えば記事内に画像を貼り付けるとき、一々htmlで細かく記述してられないので使う。 themeによっては用意されているものもあり、Robustだと画像の貼り付けは以下のように記述できる。 {{% img src= “images/icon.jpg” w=“auto” h=“200” %}} （shortcodeのシンタックスハイライトがどうにもできない） 形としては {{% shortcode名 引数… %}} って感じ。 上の画像貼り付け用のshortcodeをエスケープしないで記入するとicon.jpgの画像が出てくる。 実際にhtnlで記述しようとすると以下のようになる。 <figure> <img src="http://localhost:1313/images/icon.jpg" alt="" width="auto" height="200"> </figure> 毎回ベタ書きしてると大変なのでよく使うものは作っておくと便利って機能。 shortcodeファイルはlayouts/shortcodesの中にshortcode名.htmlという形で保存する。 shortcodeで何をしたいか 今回はYoutubeの埋め込みを簡単にしたい。 そのため動画のidのみで動画が埋め込めるようなshortcodeを作成する。 埋め込んだ動画ウィンドウのサイズはレスポンシブっぽくしたい。 shortcodeの実装 htmlでYoutubeの埋め込みを作る。 実際にYoutube画面にある共有->埋め込みを押したときに出るコードをコピーして利用する。 共有ボタン 埋め込み コピーしてきたものからsrcの内容を少し変える。 動画のIDが入る部分を変数の形として置き換えることでIDのみを変更する形で利用できるようにするイメージ。 使用するときのshortcodeイメージは以下。 {{% youtube id=“動画のID” %}} 実際にYoutubeの埋め込みからコピーしたhtmlは以下。 <iframe width="560" height="315" src="https://www.youtube.com/embed/rjTniCA74PQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> これをdivで囲んでsrcを一部書き換えたのが以下。 class名はmovie-wrapとした。 <div class="movie-wrap"> <iframe width="560" height="315" src="https://www.

引き続きブログの整備。 タブとかに出てくる画像、faviconの設定をした。 あとAdsenseとかその辺りも使えるようにしたかったので登録からやった。 faviconについて 画像をアップロードすると一括でアイコンを作成してくれるサイトを利用した。 様々なファビコンを一括生成。favicon generator 設定したいなーと思いながら、画像準備するのに2時間も3時間も掛けたらやる気無くしそうだったので手軽な感じのこれを選んだ。ちゃんとしたサイト作る場合は画像をサイズ毎に用意する必要のある、 ファビコン favicon.icoを作ろう! こちらを使うと良いのかなと思った。ただアップロードする以上セキュリティ的にはアレなので個人利用に限るのかなといった感じ。 画像の用意 何はともあれ画像を用意する。 ポイントとしては拾って使うなら規約に気をつけることと、なるべく正方形であること。 偉い人達は自分を示すかっこいい（かわいい）イカしたアイコンを持ってるが自分には無い。規約も意識したくなかったのでいとこの家で撮った大好きな犬の写真にした。 この画像を上記サイトで纏めてfavicon用に整形してもらう。 落としたzipファイルからicoファイルを取り出してstatic/imagesの中に入れておく。 何も考えずico使ってましたけど知ったかぶってたので調べた。 favicon大解剖 〜必要サイズから検証時の注意点まで〜 複数サイズの画像を1ファイルに纏めてくれる。 Hugoの設定 例の如く他の方のサイトを参考にした。 Hugoで静的サイトを作る(3) 細かい設定 ～ ビルド Robustではfaviconをデフォルトでは設定できないはず（2018年6月17日現在）。 なので、ページのhead部の情報を纏めてるmeta.htmlを弄る。 themeの中のlayouts/partials/meta.htmlをコピーして自分のとこのlayouts/partialsの中に貼り付け。以下の文章を貼り付けることでfaviconが設定された。 <link rel="shortcut icon" href="/images/favicon.ico" /> favicon.icoの所が保存したicoファイル名になる。 Adsenseの登録 公式サイトにて。 規約など見ながら個人情報やらを登録。 最終的にサイトのhead部に指定したScriptをコピペしてと言われるので従う。 Hugoの設定のところにも書いたけれどRobustテーマではhead部をmeta.htmlで纏めてる。 なので同様にmeta.htmlにコピペしておく。 サイトソースをどのページから見てもhead部にコピペしたscriptがあるのを確認。 これで良いのかは分からないけど一先ずこれで様子見。

ブログを作ろうとは前から思ってたけど、昔使ってたブログサイトの思い出からWEBページで記事書くのは嫌だなぁと（10年前位…今は色々できるだろうけど当時は知識も無かったから文章書いてボタンとか使って整形して、画像保存して限られた容量でアップロードして…とかが結構面倒だったという思い出補正もある）。 AtomとかでMarkdownで記事作ってリポジトリで管理してデプロイまで適当にうまくやってくれるのを全部無料で、、、そんなのできるかーいと思いながらもググったらできそうだったのでやってみた。 ブログの構成 ブログ本体 本体という表現が正しいかはさておきHugoで作成。 テーマは日本のHugoユーザーならお馴染みであろうRobust。 静的サイトジェネレータだとかそこら辺の解説は詳しいサイトにお任せ。 リポジトリ Bitbucketを使用。 無料でPrivateな奴が使いたかったのでGithubではなくこちらで。 サーバ Netlifyを使用。 使った理由は基本無料だったのと、Pushしたら自動的にデプロイしてくれるから。 サイトも見やすくて英語Noobな自分が直感的に操作できるUIもよかった。 全体の構成について参考にしたもの ブログの構成 NetlifyでHugoで作った静的サイトをホスティングしてビルドを自動化する - Snaplog 基本的にはこのサイトを参考にして作成した。 リポジトリはGithubじゃないけど立ち上げに関しては戸惑うことなく出来た。感謝。 Hugoについて参考にしたもの Hugoのテーマに関する参考サイト HUGO のテーマ Robust のカスタマイズver3 - zzzmisa’s blog パッと見たときに見やすくて綺麗なサイトだったので参考にさせていただきました。 デフォルトのアイキャッチはぱくたそから「車の窓で居眠りする犬」。かわいい。 まだデフォルト要素やパクったままでちゃんと動作しないものもあるので整備していく。 Hugoで困ったこと Table Of Contentsを出したかったけど出し方が中々分からなかった。 このページの上にもある灰色背景の見出しを纏めてくれるイカしたアイツ。 1時間位探して以下のサイトに書かれていたのを発見。 Hugo のテーマを Cabaret に変更した -mano.xyz その他 目次(Table Of Contents, toc)を表示するには toc=true と指定する． あっはい。 よく見るとRobustテーマのreadmeにも書いてた。 FrontMatterに追加して表示できた。 Bitbucketについて参考にしたもの 基本的な使い方