Hugoインストール、typoraを連動した運用

Ubuntu, SSG
Page content

hugoの導入目的と運用目標

  • おもに自分のための技術メモの掲載場所の構築。
  • 技術メモがメインで普段、Markdownでドキュメントを作っているため、Markdownを活用したコンテンツ出力ができること。
  • Ubuntuで運用しているVPSサーバ上に構築する。
  • DBやAPサーバを極力使わないSSG(Static Site Generator)で構築する。
  • SSGとしての最近の流行りはNext.jsのようだが、導入が簡単なhugoでまずは運用する。
  • Hugoサーバは動かさず静的生成したコンテンツを、Apache上で直接公開する方式とする。
  • ドキュメントは普段使っているmarkdownエディタ（typora)で作成し、なるべくHugoのための作業がないような運用を考える
  • Hugoのテーマカスタマイズはここでは触れない。

Hugoのインストール

$ wget https://github.com/gohugoio/hugo/releases/download/v0.133.1/hugo_extended_0.133.1_linux-amd64.deb
$ sudo dpkg -i hugo_extended_0.133.1_linux-amd64.deb

Hugoのテーマは、ものによっては拡張版、比較的新し目のバージョンを要求するものもあるため、最新版の拡張版Hugoをいれるのが良さそう。ubuntuのaptだと古いバージョンだけなので、debian用のパッケージを落としてきて、dpkgを使ってインストールをおこなう。

Hugoを使うまで

$ hugo new site site-name
$ cd sitename
$ git init
$ git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
$ echo 'theme = "ananke"' >> config.toml
$ hugo new posts/markdown.md

詳細は公式のquick startをみるとよいが、おおまかな流れは下記のとおり

Quick start | Hugo (gohugo.io)

  • サイトの作成（基本的なフォルダ構成が作成される）
  • テーマのインストール
  • 基本的なHugoの設定（hugo.toml) BASE_URLや、テーマ指定等。
  • テーマ毎のHugoの設定（hugo.toml)の設定（テーマのReadme.md等を参照）
  • 最低1つのmarkdown.mdを作成
  • hugoコマンドでpublishする
  • publicフォルダに静的なテーマを反映したHTMLが作成されている

Apacheで公開するために

$ sudo ln -s /hugo/site/public /www/html/site

Hugoの静的コンテンツの出力ファイル(public)を、Apacheの公開ディレクトリ(www/html等)に都度コピーしてもよいのだが、シンボリックリンクを設定し、Hugoの出力をそのまま公開することとする。 hugo.tomlのBASE_URLはApacheで公開した場合のパスにする。

 #hugo
 <Directory "/var/www/html/site">
    Options FollowSymLinks
    AllowOverride All
    Require all granted
 </Directory>

Apacheの設定ファイルに以下を追記。自分の場合は、httpsで公開するため内に上記を追記した。

sudo systemctl restart apache2

Apache2の再起動で http://server/siteでHugoで作成したコンテンツにアクセスできるようになる。 以降は、markdownを追加、hugoコマンドでhtml生成で自動的に更新することが可能となる。

Typoraで管理しやすいようにする工夫

Typoraで作成したmarkdown自体は基本的にそのまま利用できる。 画像添付などに関しては、少し工夫が必要そう。

公式のドキュメントではmarkdownと同一のリンク画像は、/public/posts/記事毎フォルダにもコピーされるとのことだったが、Typoraでペーストして作成した画像は記事毎フォルダにコピーされず、public配下にコピーされている模様。（hugoの指定した画像リンクの方法ではない為と想定）

ローカルコンピュータ側のフォルダ構成

\ローカルの作業場所
├───content
│   └───posts（マークダウンファイル置き場所）
└───images（画像ファイル置き場所）

HTML化後の画像ファイルの置き場所を(./public/images)とし、ローカル環境上でも相対パスとしては同様となるように以下のようなフォルダ構成とする。

typoraの設定

typoraで上記のように設定すると、挿入した画像ファイルがmarkdownのファイルの２つ上の改装のimagesフォルダに自動的に保存される。

ローカル環境からリモートへのファイル反映

markdownファイル格納フォルダと、画像フォルダの対応例は以下

ローカル リモート 最終的な格納先
markdown c:\hugo\site\content\posts /hugo/site/content/posts /hugo/site/public/posts/filename/index.html
image c:\hugo\site\images /hugo/site/public/images /hugo/site/public/images
  • typoraでローカルのc:\hugo\content\postでmarkdownを作成する。typoraで画像を添付したものは、imagesフォルダに格納される。
  • 記事を追加、更新した場合はローカルの内容をリモートに同期する(winscp)
  • hugoコマンドでhtmlを生成する

winscpスクリプト起動バッチ( ./winscp/sync.bat)

winscp.com /script=script.txt

winscpスクリプト( ./winscp/script.txt)

open sftp://username:password@servername
synchronize remote "c:\hugo\site\content\posts" "/hugo/site/content/posts"
synchronize remote "c:\hugo\site\images" "/hugo/site/public/images"
cd /hugo/site
call /usr/local/bin/hugo
exit

markdown格納フォルダ、画像添付フォルダをリモートと同期（リモートにないファイル、更新のあったファイルをアップロード）、その後　hugoコマンドを実行しhtmlの生成までおこなっている。

関連記事