Visual Studio Codeでblog環境を完結する @ Keruru | 2021-04-24T10:00:00+09:00 | 4 分で読めます | 更新日時 2021-04-24T10:00:00+09:00

これまではWSLのvimで記事書いてました

これまでの人生の大半はemacsと過ごしてきた私ですが、最近はvscodeにどっぷりって感じです。emacsも便利でしたけれどもう.emacsファイルにがしがしlispを書いて環境構築していくのがしんどくなってきたお年頃です。普段はPythonのスクリプトを少し書いてはdebugしたりする位ですが、そんなterminalで十分でしょ、って作業でも最近はすっかりvscodeばかり。

WindowsでHugoの記事を書く場合、Windowsのgolang環境とhugoをインストールしてpowershellのコンソールで動かして…なんて結構面倒でしたがWSLが登場して一気に楽になりました。Ubuntuが動くのでaptでgolang環境も整いますしhugoも入れられます。これが時代か!なんて思いながらWSLを起動してhugoを起動し、もう一枚terminalを開いた側でvimを用いて記事を書きつつchromeで http://localhost:1313/ へ接続してpreview見ながら書いていく、っていう環境でした。

WSLも最初の頃は完全に独立したファイルシステムで画像データなどをWindows環境からWSL側にもっていくのが地味に面倒だったりで一旦flickrに写真をuploadしてその画像のリンクからcurl等でダウンロードするなんて手間かけてましたが、最近は \\wsl$ でネットワークドライブとして見えてくる事を知ったので楽々です。

HugoはDockerで動かすことにした

WSL2のUbuntuでaptでインストール出来るHugoに不満がある、とかそう言う事でも無いのですが、利用するアプリケーションでコンテナに入れて使えるものはどんどんコンテナに持っていって環境異存なく作業したいよね、って事でなるべくコンテナを使うようにしています。

今はWindowsを入れたノートパソコンですが、結構気まぐれにホストOSをLinuxに変更するので、環境ファイル等をgitに一元管理してOS入れなおした後その環境ファイルからホストOSの種別問わずにまったく同じ環境でアプリケーションが使えるのはやはり便利。

Visual Studio Codeの環境同期

Visual Studio Codeも本当はconfigファイルなど環境設定ファイルがあってそれをgitなどで管理出来たら良いのですが残念ながらそういう仕組みはありません。ですが、Microsoftアカウントを用いて設定をCloudへ保存(onedrive?)して、他の環境でも復元(同期)することが出来るので、ホストOSをLinuxにしてもMacにしてもgitとDockerとvscodeをインストールするだけで、その他開発環境はまったく同一なもので動かせます。便利。

Visual Studio Codeに入れている機能拡張

その他の機能拡張も入れていますが、Blog執筆環境に入れている機能拡張は次の通り。

  • Browser Preview
  • Remote - WSL
  • Docker
  • Markdown All in One

これだけ。配置は次のような感じにしています。

Docker機能拡張からHugoのコンテナを起動、中央の記事執筆画面の下で起動します。記事執筆画面の右側には Browser Preview を用いて記事のpreviewを。Markdown Previewでも良いのですが画像を埋め込んだ際などのPreviewとしては不足しているので、どうせだったらlocalで動かしたHugoでpreviewするのが確実です。右下ではWSLのTerminalを開いてちょっとしたファイルのコピーなどの操作をしたりします。

記事が書きあがったらvscodeなのでそのままgithubに記事をcommit,pushする事で、あとはCloudflare pagesがbuildしてコンテンツを配置してくれます。素晴らしい。

今後検討したいこと

すべて環境がVisual Studio Codeからアクセス出来たりとかなりスマートかつシンプルになったなとは思いますが、あまり自動化が出来ていないなと感じています。WSLの画面からvscodeを用いてMarkdownファイルを開く所から記事の編集を開始しているのですが、 ~/hugo 配下のMarkdownファイルをvscodeで開いた事を検出した場合( $pwd とかで環境path取れると思うので)DockerのHugoコンテナを自動起動してBrowser Previewも自動で起動してきてくれる、なんて所まで出来るとさらにスマートなので検討したい。

© 2006 - 2021 Keruruのブログ

Powered by Hugo with theme Dream.

avatar
About Me

ペンネーム/Nick

けるる etc

お仕事

テクニカルライティング/システムエンジニア/ネットワークエンジニア

愛用中のPC
  • NEC LAVIE ProMobile
  • SAMSUNG Chromebook Pro
  • Surface Pro 4
  • ThinkPad T440s
  • GPD Pocket
愛用中のPDA/SmartPhone
  • iPhoneSE 2nd(MAIN/docomo)
  • Unihertz TiTAN(SUB/docomo/SIM FREE)
  • OPPO Reno-A(SUB/rakuten/SIM FREE)
  • iPad Pro 11inch(SUB/docomo/SIM FREE)
愛車
  • MITSUBISHI PAJERO mini ‘2012
  • HONDA CRF250RALLY ‘2018
  • MERIDA SCULTURA4000 ‘2015
  • Carry-Me ‘2016
  • GIOS PANTO ‘2007
  • R&M BD-1 ‘2006
旅の記録2020
行き先など 北海道 海外
2020 12 鬼怒川温泉旅行
2021 02 箱根温泉旅行
旅の記録2010
行き先など 北海道 海外
2010 05 函館観光旅行
2010 09 みなかみ温泉旅行
2011 09 Gios Pantoで自転車旅(札幌・夕張・帯広界隈)
2012 03 パジェミ納車記念上諏訪温泉旅行
2012 08 西伊豆旅行
2012 09 東北キャンプツーリング
2012 10 新婚旅行(NYC-CFO)
2013 09 パジェミで北海道、道東漫遊+念願の旭山動物園
2014 08 三菱スターキャンプ参加
2014 09 台湾旅行(台湾新幹線で高雄にも)
2015 03 九州旅行(うきは旅行)
2015 09 香港旅行
2016 09 北海道ツーリング
2016 09 上諏訪旅行
2017 09 台湾旅行(現地集合現地解散)
2018 05 鹿児島・熊本旅行
2018 09 タイ・チェンマイ旅行
2019 01 高知ツーリング
2019 05 沖縄弾丸旅行
2019 05 別府弾丸旅行
2019 09 ハワイ旅行(まったりホノルルAB&B)
旅の記録2000
行き先など 北海道 海外
2000 08 夏休みで北海道帰省
2001 06 漫画家さん妙高ツーリング
2001 09 RVF400で稚内・網走・釧路・富良野・夕張(初バイク)
2002 07 夏のフーリツーリング
2002 07 CBR954RRで森・函館・稚内・網走・根室・富良野・夕張
2002 09 乗鞍岳ツーリング
2003 09 自転車で北海道(ただし札幌出たあたりで挫折)
2004 09 DJEBEL200で2002年と同じコース
2005 09 DJEBEL200にタンデムで夕張・帯広・士幌・網走・稚内と逆回り
2006 07 大阪観劇の旅(中央線をひたすら乗っていった貧乏旅行)
2007 09 XT660Rでえりも辺りでひたすら道東だけを堪能した北海道ツーリング
2008 08 四国鉄道旅行(サンライズゆめで四国入り、四国内はひたすら鈍行旅
2009 09 台湾旅行(初海外旅行)
2009 09 鈴鹿エンデューロにミニベロで参戦旅行
(C)Keruru. All Rights Reserved