Netlify CMS+Hugo+Githubで個人用のメモサイトを管理する
完成度は30%というところでしょうか。
目的
2019年夏現在の要望としては個人用の雑記やメモなどの文章を保管，管理できるようにしたいというのがあります。 より具体的にやりたいことを書いていくと，
と言ったところです。
論文感想や教科書読んだ時のちょっとしたメモ，プログラミングのメモなど小ネタ等を書いてまとめるなくさないオンラインノートがほしいといったところでしょうか。
候補比較
すでにいくつか候補が上がっており，他の方も色々と考察してくれています。
各自いろんな基準を設けているようですが，以下の方の記述に非常に共感しました。
はてなブログやQiitaなどのブログサービス
- 作成も管理も楽。
- ローカル環境に記事が残らないのがややネック
Google Keep
スマホなどの小型端末から簡易的にアクセスするなら断然こっち
Dropbox paper
- Wordに似た書き味だが，Markdownと制御文字が被っていてかなり良い感じ
- 2019年8月現在 Dropboxとストレージが別になっているのもGood
- この手のサービスは改悪されたりするので正直怖い面もある
- ローカルからファイルに直接アクセスできない？
正直GoogleDocumentもあまりうまく使えていないので二の舞になりそうではある。
Inkdrop
評判が良いが有料サービスなので整理が苦手な自分的には避けたい。StackEditに定期課金した500円がどうなったのか把握してないくらいなので… ハッカー向けノートアプリ「Inkdrop」は最高に使いやすいメモ帳ツールだった | Web Design Trends
メモ環境考察まとめ
- 記事を公開してFBが欲しいならはてなかQiita
- モバイル環境と連携した細かなメモならGoogleKeep
- DropboxPaper，GoogleDocumentは良いところもあるがハマる使い所がわからない
手元にない欠陥を埋めるならば，ローカルに記事を保管しつつオンラインで閲覧，編集ができるサイト運営がしたい。
Netlify CMSで個人メモ環境を作る①
正直良くわかっていないのでざっくりと書くと，
という事になっているみたいです。
必要な準備
巷ではHugoという静的サイトをコンパイルする？ソフトを入れるという説明が多いですが，Netlify上で動かす分には自前で用意しなくても大丈夫です。
Minimum Setup
以下のブログに従えば最小限の手間でサイトを作成できます。とりあえず試したいひとは適当なリポジトリを作って試すと良いです。 ottan.xyz
基本操作
Githubから編集する以外にも作成されたブログのアドレスの下に/adminを入れると管理画面に飛び，そこから編集を行うことができます。当然Githubに編集は反映されます。
ブラウザ，エディタの双方から編集できるので使用感は結構良い感じです。
カスタマイズ：不要な箇所を削除
デフォルトだとまんまKALDIのサイトになっているので見た目を気にするならば気になる所を削除します。これは後に追記します。
Hugoのテンプレから作成する②
上記の手順だとどうしても他のテーマで記事を作成したくなりました。
本来まともにやるならHugoでローカルでレイアウトを自分なりに編集しつつNetlifyにホスティングしてもらうという手順が良さそうですが今回はより簡単に済ませてしまおうと思います。
↓ちゃんとやっている例 https://blog.mismithportfolio.com/web/hugo-netlify-build
今回はこちらの記事を参考に進めていきます。 gomagaru.hatenablog.com
Hugoのテンプレからテーマを決める
以下のHugoのテーマ集から好きなテーマを選択してCloneないしzipでダウンロードしてきます。 themes.gohugo.io
私は検索機能を重視したかったのでDocDockというテーマにしました。Academicというテーマも良さそうです。
このリポジトリの内容を自分のリポジトリにforkあるいはコピーします。一応ライセンス条項的には違反してないですがこの辺のマナーはよくわかりませんので詳しい人が居たらご教授願います。
Netlifyでホスティング
このままだとただのGithubリポジトリになるので，Netlifyのページに行って，New Site from Gitを押して先程編集したリポジトリを選択します。
その後しばらくしたら見れるようになっているはずです。
その後，作成されたブログのURLが表示されるので，
config.tomlを開いてbaseURLを「https://XXXX.netlify.com/」に修正します。
/をつけることを忘れずに。
詳細は以下のページを参考にすると良いでしょう。今回やってみた所ビルドのコマンド等は勝手に決めてくれました。 Hugoで作成したページをNetlifyでホスティングする - Miki's Blog
Netlify CMSを導入
このままだとURLの下に/adminを入れても管理画面に飛びません。次にまた同じ方の記事をなぞってやっていきます。
上の記事の
- Github連携
- Netlify連携
- adminフォルダ作成
を済ませます。
static/admin/config.ymlの編集
config.ymlは今後もいじりそうなので個別に項目を設けます。
config.ymlのリポジトリ名を自分のリポジトリに変える- post するfolderを変更
exampleSite/content/MyPages - publish modeの項をコメントアウト：draftとか管理するよりすぐ記事にしたい為
テーマに沿った編集
ここからはdocdockを前提とした話を書きます。
Mypageフォルダを作成
このテーマでは左にmenubarの様にファイルを表示できます。
これは内部的にはフォルダで管理されています。
構成的には
-フォルダ |- _index.md |- その他の.mdファイル
となっており，_index.mdは以下の記述を文頭に持つ必要があります。
+++ title = "My Page" description = "" date = "2019-08-05T18:43:24+02:00" creatordisplayname = "Yourname" creatoremail = "yourmail@gmail.com" lastmodifierdisplayname = "Yourname" lastmodifieremail = "yourmail@gmail.com" tags = ["tag1","tag2"] weight = 10 pre ="<i class='fa fa-edit' ></i> " +++
- title：左のmenubarに出てくる名前
- weight：字の大きさ？
titleを変更してmenuバーの表記を変えることだけ覚えていればとりあえずは良さそうです。
数式を入力可能にする
そのままではMathJaxが有効になっていないので，数式が打てません。 以下の記述をページに読み込んでmathjaxを使えるようにします。
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
ヘッタやフッタのテンプレートに潜り込ませるのが良いらしいのでlayout/partial/menu-footer.htmlに追加しました。
この時点でひとまずサイトとしては動きますが気力があれば続きます。
