まずはHugoでサイト運用 記事投稿とビルドについて
静的HTMLジェネレーターHugoの解説の続きです。
前回は
・Hugoをインストール
・Hugoのテーマを適用（Clarity）
・テーマのサンプルサイトを実行
まで紹介しました。
こちらもCHECK
-
-
Hugo静的サイトジェネレータ テーマClarityで環境構築手順の紹介
Hugoで静的サイトを最小限の手順で作成する方法 最近Hugoでの静的HTMLサイトの作成を始めました。本番運用もしています。 Hugo導入に際して色々、サイトとして最低限クリアしなくてはいけないもの …
続きを見る
とりあえずHugoってどんなものなのだろう？と、
触ってるところまではクリアしました。
触ってみて「よし、これなら私のサイトでも使える！」
と思ってくださったら幸いです。
とは言え、この段階でも私と同じく、
Hugoに関して他にも気になる点があると思います。
・記事投稿の方法は？
・サイトをレンタルサーバーにアップする前のHugoビルド方法は？
・SEO対策（キーワード、ディスクリプション、OGP画像の設定）は可能か？
・テーマを少しカスタマイズしたい！
などです。
結論から言うと、これらは対処可能です。
一気に紹介すると、情報が多すぎてパンクしますので、
投稿を分けて紹介します。
今回は投稿の作成とビルドについて解説します。
Hugoでの記事投稿とビルド概要
サクッと掲題の件の概要だけ示しておきます。
解説は長々となりそうですがw
やることはシンプルなので迷ったらここに戻ってきてください。
・記事更新は content/postのMDファイルを更新
・Hugoの作業ディレクトリー直下で「hugo -D server」でプレビュー可能
・コンフィグでビルド結果が出力される箇所を設定する
・Hugoの作業ディレクトリー直下で「hugo」でサイトをビルド
これだけです。
順に詳細を解説します。
Hugoでの記事投稿 下準備hugo.toml設定からMDファイル配置
前回のサンプルサイトを動かすまでに
既に作業用ディレクトリができて、
テーマも適用されていると思うので
作業用ディレクトリ（webcode ＊私の解説では）直下で
とりあえずHugoテストサーバを起動してみましょう。
コマンドは以下です。
hugo -D serverすると
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1) の文言が、
コマンドプロンプト画面に表示されます。
URLにアクセスすると
以下のような「Page Not Found」が表示されます。
それもそもはず、
（作業用ディレクトリ）/content には
まだ何もコンテンツがないからです。
しかもテーマも適応されていない状態です。
設定ファイル hugo.toml を定義していきます。
よって、まずは必要最低限の設定ファイル
（作業用ディレクトリ）/hugo.toml を定義していきます。
hugo.tomlを見るとデフォルトでは以下のようになっています。
baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'baseURL、サイトのタイトル（title）はご自身向けに適宜更新ください。
我々は日本語を使用しているので、言語設定を以下に変更します。
テーマも指定します
baseURL = 'https://example.org/'
languageCode = 'ja-JP'
title = 'My New Hugo Site'
theme="hugo-clarity"ここでもう一度
hugo -D serverを、実行するとインデックス画面に
コンテンツはなくとも
テーマが適応されたことは確認できます。
Hugoに記事コンテンツを追加してみましょう！
記事投稿を追加していきます
（作業用ディレクトリ）/content にposts というフォルダを作ってください
＊postsは任意の名前でもいいのですが、解説のために本投稿では指定しておきます。
このpostsディレクトリーにMDファイルを作成すると
先ほどのインデックス画面に記事が浮かび上がります、
MDファイルの記述方法はここでは解説しませんが
動作確認のためテーマのサンプルからコピってきましょう。
（作業用ディレクトリ）/themes/hugo-clarity/exampleSite/content/post/map.md を
（作業用ディレクトリ）/content/posts にコピペして
http://localhost:1313/ をみてみてください。
以下の画面になりました。
Hugoテーマが自動的に投稿記事を認識して、
インデックス表示をしています。
こんな感じで将来の日常的な投稿は
MDファイルを追加していけば良いのでめちゃ楽です。
追加した記事をクリックすると以下のような表示になります。
SNSシェアアイコンや、投稿日付など
ブログとしての基本機能があらかじめ備わっているのが
テーマClarityの良いところです。
ここで1点気になるのが、
パーマネントリンク（URL）の表記だと思います。
「このままでも構わない」のであれば良いのですが、
postsなど特定の場所に日常投稿する記事はまとめていたいのが常です。
MDファイル名がそのまま表示されているのは良しでも、
URLのpostsの箇所は消したいのではないのでしょうか？
その場合、hugo.tomlに以下の記述を追加して下さい。
#postsのパーマリンクは特別にする
[permalinks]
posts = ":filename"すると、URLから/posts/の箇所が消えます。
日付の英語表記など、色々気になる点はあるでしょうが、
これらもhugo.tomlの設定で対応できます。
今回はMD追加とビルドの解説に重点を置いていますので割愛します。
後日解説します。
繰り返しますが、
この状態でどんどん
（作業用ディレクトリ）/content/posts にMDファイルを置いていけば
サイト更新ができていくので、この流れだけ今は覚えてください。
めちゃ楽だし、簡単です。
記述にコツはありますが、
MDファイルってほとんどテキストの平文なので
ワードプレスよりも記事更新が楽で、
しかも早いと感じます。
Hugoでサイトをビルド
と言うことで、Hugoをビルドをしていきます。
ワードプレスを触っていればビルドという概念が馴染みないかもしれませんが、
ビルドをすると、パッケージ（フォルダ）が作成されます。
そのままフォルダーごとレンタルサーバーにアップロードしたらサイトとして動くので
そのパッケージを作るためと思っていただければわかりやすいと思います。
サイトリリースのために必要な
最終工程です。
hugo.tomlに以下の記述を追加して下さい。
publishDir ="../website"これも任意です。
websiteではなくても良いですが説明のためにこうしています。
記述内容は
hugo.tomlのあるフォルダーの一つ上のフォルダーの
websiteフォルダーにビルドした結果を出力になします。
サーバーを一旦止めてください。Ctrl+Cです。
webcodeディレクトリで以下コマンドを実行
hugowebsiteにファイルが生成されていることが確認できるはずです。
そのままwebsite/index.htmlをクリックして
Mac（PC）でファイルをブラウザ表示すると、
スタイルシートが適応されていなくて不安になりますが
大丈夫です、サイトはちゃんとできています。
サーバーにアップすれば以下のように問題ありません
ここで注意なのは、hugo.tomlの
baseURL の値は至る所で使用されているということです。
ご自身のお持ちの独自ドメインを
あらかじめ設定しておくと良いです。
まとめ
いかがでしたでしょうか？
投稿ファイルであるMDファイルの配置後の
Hugoテーマの挙動
そして、関心ごとである
サイト公開までの流れがお分かりになったと思います。
設定ファイル（hugo.toml）で
サイトの振る舞いも変えられることを学びました。
デフォルトでもサイトとして使える「Clarity」ですが
検索機能を使いたい、投稿日付を日本語表示にしたいなど、
サンプルをいじっていると出てくると思います（私は出てきましたw）
次回は
テーマのカスタマイズ方法について解説しようと思います。
こちらもCHECK
-
-
Hugo静的サイトジェネレータ テーマClarityで環境構築手順の紹介
Hugoで静的サイトを最小限の手順で作成する方法 最近Hugoでの静的HTMLサイトの作成を始めました。本番運用もしています。 Hugo導入に際して色々、サイトとして最低限クリアしなくてはいけないもの …
続きを見る
個人でサイト運営おすすめのレンタルサーバはこれ
定番中の定番「エックスサーバー」
今まで使ってみておすすめサーバーは2つです。
まずはエックスサーバー
→
エックスサーバー
これは外せません。このサイトもエックスサーバーで動いています。
何が良いかと言えば
「ほとんど止まったことがない」そのくらいの安心感です。
サーバーって止まらないものじゃないの？
そう思われるかもですが、
結構当たり前のようで、当たり前ではないです。
年間を通じてもメンテやトラブルで止まった記憶がないくらいです。
→
エックスサーバー
マニア向け？Gitも利用できる「mixhost」
もう一つがmixhostです。
数多く、
レンタルサーバーのサービスはあるのですが、
サーバー負荷の問題なのか、
規約でアダルトサイトはNGな場合がほとんどです。
mixhostは日本で数少ない、
アダルトもOKなレンタルサーバーです。
いや別にアダルトなサイトは作る予定はありませんw
という方でも、sshが利用でき
gitがあらかじめ備わっているので
自分の書いたソースコードの保管場所として使えるので
開発者におすすめです。
