前回の記事
Markdown便利だよね！ということで前回、Blogger上でMarkdownを記述し、marked.jsで表示時にHTMLへ変換する…ということを行ってみました。
改善点
この方法だと今後を考えると少しよろしくない点もありますね
一覧での表示でMarkdown構文が残ったままに
トップページから見るとわかるのですが、内部的に保存されている本文はMarkdownのままなので、一覧で見たときはMarkdown構文が残ったままになってますね。
まだBlogger触りはじめたばかりで十分にテンプレート構築のコンポーネント(<b:xxxx/> のような)を理解していないのでそれ次第である程度改善できるような気もしますが、まあやっぱり本文はHTMLが想定されているので、保存上はHTMLにしたいなと思います。
SEO的にどうなのよ
そもそもまだSEO気にするような工夫やコンテンツ作成はしていないわけですが、HTMLが解析される都合上、やっぱり中身はHTMLで書かれていたほうがよさそうです。
StackEditを使う
オンラインエディタのStackEditを使用してみます。
- ブラウザ上で動作するオンラインエディタ
- リアルタイムプレビュー
- HTML形式での出力が可能
- Googleドライブに記事を保存可
- BloggerやWordPressへの投稿機能あり
- Googleフォトから画像挿入可
私はBloggerはブログ専用のGoogleアカウントにしているので、ドライブとかフォトも同じアカウントで運用しています。
また、過去にWordPressサーバーを飛ばしてしまった(記事は20程度でしたが)ことがある身としては、原本をどこかにバックアップしておけるっていうのは大事だなぁと…
StackEditとGoogleドライブのワークスペースを連携
StackEdit( https://stackedit.io )を開きます。
使うだけならこれでもいいのですが、標準の状態ではブラウザのWebStorage上にワークスペースが保存される形になります。
バックアップの意味でも、Googleドライブをストレージとして使用するようにしましょう。
また、この時ワークスペースとして利用するフォルダを選択しますので、事前にGoogleドライブ側で記事を保存するフォルダを作成しておきます。
投稿メタデータ(YAML Properties)の記述
次に記事を作成してBloggerに投稿するにあたり、ファイルのプロパティにyaml形式で投稿のメタデータを設定します。
これでタイトルや公開設定等を指定します。
前バージョンのStackEdit4 では、ドキュメントの冒頭に記述することで指定していましたが、現行のStackEdit5では、右メニューの[File properties]で指定するようになりました
例
title: "続・Bloggerへの投稿をMarkdownで行いたい"
status: draft # これがないと自動で公開される
tags: [Markdown, StackEdit, Blogger]
Bloggerの場合はパーマリンクは自動で生成されるので、ここで指定するかは迷いますが、明確にしたいものがあれば設定すると良さげ？
Bloggerにアップロードする
右メニューから[publish]⇒[Add Blogger Account]⇒[Publish to Blogger]を開き、BloggerのURLを指定します。
出力は余計なCSSのつかない[Plain HTML]で行い、Blogger側でCSSを適用するのがよいと思います。
これで、Blogger側にHTMLへ変換された記事が作成されます。
また、ここでStackEdit上のファイルとBloggerの記事が関連付けられますので、記事の更新もStackEditから行うことが出来ます。
まとめ
普通にHTMLをわざわざ書くよりも、格段に執筆しやすいです。とりあえずしばらくこれで運用してみようかなと思います。
元々Markdownが使える媒体を使えばイイと思うけど
StackEditからBloggerへ投稿するときのメタデータ指定が、4と5で異なるというのが結構ハマりポイントでした。
そもそもCSSがまだまともにできていないので、それを何とかしなければ…
0 件のコメント :
コメントを投稿