Hugoでブログを作る はじめに Hugoとは、go言語で書かれた、静的なwebサイトをbuildingするためのframeworkです。 Hugoを使ってブログを作ってみたので構築方法を簡単にまとめておきます。 サイトの作成 インストール brew install hugo テンプレートの作成 hugo new site hugo 2018-10-16
Hugoでリンクを新しいウィンドウで開く リンクは新しいウィンドウで開いて欲しい派なんだけど、Hugoではデフォルトで通常のリンクの開きかた(?)をする。 hrefではtarget='_blank'を指定すれば良いのだが、markdownでどうすれば良いのか調べた。 Hugoでは次のようにconfig.tomlするといける。 [blackf hugo 2018-10-16
Hugoにgoogle analyticsを導入する Hugoにgoogle analytics(ga)を導入しようと思ったら意外と簡単だった。 まず、gaアカウントを作成。 config.tomlに googleAnalytics = "{ga tracking ID}" を設定するだけ。 google-analytics hugo 2018-10-16
Hugoのディレクトリ構造やデプロイ方法の備忘録 久しぶりにHugoを触ったら、ディレクトリ構造からデプロイ方法までさっぱり忘れていたので、久しぶりに触った際のために備忘録を残す。 ディレクトリ 基本的なディレクトリは以下 markdownを書いたりと普段触るのはcontentディレクトリになる。 デプロイ後生成されるpublicディレクトリはサー hugo 2018-10-16
Hugoの記事でコードハイライトする Hugoでコードのシンタックスハイライトする場合のメモ Hugo自体の機能を使う方法と、ハイライトする機能を持つjavascriptを読み込む2つの方法がある。 Hugo自体の機能使う Hugo 0.28からGo機能でシンタックスハイライトが可能になった。 Syntax Highlighting c hugo 2018-10-16
Hugoの記事にdescriptionを追加する Hugoで書いた記事が検索で引っかからないなと思っていたら、descriptionタグが設定されていませんでした。 これでは検索に引っかからないのでdescriptionタグをつけましょう! html側で次のように書くと、markdownに書いたdescriptionが参照できます。 {{ .Des hugo 2018-10-16
Hugoの記事に画像を載せる Hugoに画像を載せるときは、shortcodesを使うと良いらしい。 画像を配置するディクトリを以下のように作っておく。 {root}/content/post/images/ 以下のように記述すると表示できる。 {{< figure src="../../images/test.p hugo 2018-10-16
Hugoの記事を更新順にソートする Hugoの記事を更新順にソートするメモです。 まず、Hugoの記事に更新時刻情報を付与します。markdownのヘッダーにdate情報を書いても良いのですが、gitで管理している場合には、Lastmodで更新時刻が取得できるのでそれを使います。 そのほかにもgitから情報が取得できます。https: hugo 2018-10-16
HugoをGitHub Pagesで公開する GitHub Pagesを使ってHugoを公開する手順をメモ やりたいこととしては、 Hugoのプロジェクトを丸ごとgitで管理 プロジェクトの下に作られるpublicをGitHub Pagesで公開 独自ドメインの設定 の3つです。 GitHub Pagesで公開 まずは、Hugoのプロジェクトル hugo 2018-10-16
reactのrender propsをtypescriptでやる childrenに引数渡したい時、render propを使えばできる。 functional componentでのやり方がわからなくていろいろハマったのでメモ https://reactjs.org/docs/render-props.html 結論 // children interface typescript react 0001-01-01