なんかいろいろしてみます

Nov 12, 2017 - 1 minute read - WebSite

HugoをVSCodeで使ってAzureで公開する方法

静的サイトジェネレータのHugoをWindowsのVSCodeからコントロールし,サイトを作成します.

その後WindowsのOneDriveとAzureを接続し簡単にサイトの公開まで行います.

環境

  • Windows10
  • VSCode
  • OneDrive
  • Azure

Hugoとは

Hugoとは静的サイトをmarkdown形式で記述,作成できるサイトジェネレータです.

Hugoのサイト内のThemesからテンプレートを適応することで簡単にサイトのデザインを設定,変更することができます.

Windows,Mac,Linuxのコマンドラインから操作することができます.今回はWindows環境でコマンドの操作を極力減らしAzureでの公開まで行います.

環境準備

Hugo

  1. ダウンロード
  2. インストール
    • ダウンロードしたzipファイルを解凍
    • 中のhugo.exeを適当な位置に移動(環境変数を登録するため設定後にはファイルは動かせません)
  3. 設定
    • windowsの環境変数を設定します
    • 設定画面の検索画面から「システムの詳細設定の表示」を検索してシステムのプロパティを出します
    • 環境変数からPathを選択し編集します.
    • 新規->参照を押して適当な位置に移動したhugo.exeのあるフォルダを選択します.
    • OKで設定完了

VSCode

  1. ダウンロード
    • VSCodeをダウンロードします.
  2. インストール
    • そのままインストールします.
  3. 設定
    • VSCode起動後にHugoを使いやすくするプラグインを入れます.
    • VSCodeの左側にある□マークを選択してhugofyをインストールします.
    • hugofyはコマンドラインツールのhugoの機能の一部をVSCodeからできるようにしてくれたプラグインです.

Azure

  • Azuewに登録しておきます.
  • クレジットカードの登録がありますが今回は無料プランでサイト公開までできます.(Web Appの無料プランを使います)

HugoとVSCodeでサイトの作成

  • 初めのサイトの構築

    • VSCodeを起動しファイルからフォルダーを開くを選択します.
    • 適当な空のフォルダを選択します.
    • VSCodeがフォルダを開いた状態で「F1キー」または表示からコマンドパレットを選択します.
    • Hugofy: New Siteを入力しサイトの構築を行います.(hugoと入力すると自動で候補を表示してくれます)
    • サイトの構築が成功すると以下のようにファイルが作成されます.
  • テーマの設定

    • hugoが公開しているテーマを適応することで簡単にサイトのデザインを設定できます.
    • hugoのThemesから好きなデザインのページデータをみつけます.(テーマによっては複数の追加プラグインを入れる必要があるのものあります)
    • DownloadボタンからGithubページに移動し「Clone or download」ボタンからzipファイルをダウンロードします.
    • ダウンロードし解凍したフォルダを今回構築したサイトのthemesフォルダに移動します.
    • VSCodeに戻りコマンドパレットにHugofy: Set Themeを入力し先ほど移動したテーマフォルダを選択します.
  • サイトを確認してみる

    • テーマの設定ができたのでとりあえずサイトの確認ができます.
    • コマンドパレットにHugofy: Start Severを入力するとブラウザに作成されたサイトが表示されます.
    • テーマによっては別途config.tomlの変更が必要になる場合があるので,README.mdやサンプルを確認してください.
    • コマンドパレットよりHugofy: Stop Serverでサイトの停止ができます.
  • 記事を書いてみる

    • markdownにより記事を作成します.
    • VSCodeのコマンドパレットにHugofy: New Postを入力し記事の名前を「xxx.md」形式で入力します.
    • 作成された記事ファイルはcontent/post内に配置されます.
    • あとはmarkdown記述により記事を書いていきます.
    • 使えるmarkdownの記法についてはhugoのドキュメントページ
    • またhugoの機能の一つであるShortcodesを利用することで高速化を行うこともできます.
      • figure :画像表示
      • gist :Gist表示
      • hightlight :コードのハイライト表示
      • ref :リンク
      • tweet :Twitterの埋め込み
      • youtube :Youtubeの埋め込み
  • サイト公開用にHTML出力してみる

    • Start Serverはhugoが確認できるようにサイトを構築しているだけでそのままでは公開できません.
    • ここでhugoのコマンドを直接利用する必要があります.
    • VSCodeの表示から統合ターミナルを起動します.
    • 表示されたコンソールに以下を入力 hugo -t XXXXXX(setしたテーマの名前)
    • 成功すれば新たにpublicフォルダが作成されてなかにhtml出力されたサイトデータがあります.
    • 作成されたサイトデータは静的サイトをして動作するのでホスティングサービスなどで運用することもできます.
  • Tips

    • ブラウザタブ内のアイコンを変更
      • rel="icon"を検索し参照している画像を差し替えor参照先変更
    • 画像を表示したい場合はstaticフォルダに画像を移動し「static」以下のパスを参照することで画像が表示できます.(動画も)
    • Hugofy: New Post時に作成される記事のテンプレートは「archetypes」のdefault.mdに記述されています.
    • サイトのレイアウトを修正したい場合にはテーマデータを参考に「layouts」内にファイルを作成します.

AzureとOneDriveでサイトの公開

  • AzureのWeb Appサービルを使って作成されたサイトデータを公開します.
  • Azureでの作業
  • 新規からWeb Appを選択しアプリ名,リソースグループを入力します.
  • App Serviceプラン/場所は新規作成から価格レベル「F1 Free」を選択します.
  • 作成後しばらく待つとサービスが立ち上がります.
  • 作成後App Serviceの概要から公開用URLが確認できます.

注意 - 公開用サイトのURLはhugoのconfig.tomlの”‘baseURL=“XXX”//App ServiceのURL”‘に入力してHTML出力する必要があります.

  • App ServiceのデプロイメントのデプロイオプションよりOneDriveを接続します.
  • ソースの選択よりOneDriveを選択しアカウントの承認を行います.
  • 基本は自分の使っているパソコンにログインしているアカウントを選択します.

  • OneDriveでの作業
  • 自分の使っているパソコンとOneDrivweの設定は済ませておいてください.(デスクトップ上のOneDriveが同期できていれば大丈夫だと思います.)
  • アカウント承認後フォルダーの選択を行います.(OneDriveには自動的に「アプリ/Azure Web Apps」のフォルダができています.)
  • OneDrive内のアプリのAzure Web Appsフォルダの中に適当なフォルダを作成します.
  • 作成したフォルダ内にVSCodeとhugoで作成したサイトデータ(public内データ)をコピーします.

  • Azureでの作業
  • デプロイ対象のフォルダを選択しOKを押すと自動的にデプロイを開始します.
  • デプロイが成功するとApp Serviceの概要のURLからサイトの確認ができます.
  • 次回からサイトの更新を行った場合はデプロイ用のフォルダを更新した後Azureのデプロイオプションから「同期」を選択するだけで更新を行ってくれます.

まとめ

  • とりあえずサイトの公開までできました.
  • theme内のlayoutsフォルダ内のファイルを編集することでサイトの色とかも変更できます.
  • googleAnalyticsに対応しているので連携させれば訪問者数などがわかる.
  • hugoのshortcodesのtweet機能で手軽にTwitterの表示ができる.