Hugoを使った小説同人サイトの運営 小説の目録ページ
当サイトではHugoを使った個人サイトの作り方として制作ログを作ってきましたが、運営するうちに目次ページなどももっと小説サイトらしく使いやすくしたい！ と思うようになりました。今回は目録ページについてで...
Filtering for "Hugo"
Hugo を使った個人サイトの作り方 11 OGP、ツイッターカード、favicon
前回はHugoの分類機能（Taxonomy）の仕上げを行いました。今回はOGP、ツイッターカード、faviconなど、今どきのサイトで必要とされる外部へのアピール機能を設定します。 OGP(Open Graph Protcol)...
Hugo を使った個人サイトの作り方 12 SEO対策(RSS,Sitemap)と公開
前回はOGP、ツイッターカード、faviconなど、被リンクの際に重要な機能を設定しました。今回はさらに進んだSEO対策として、RSS、Sitemapなどの検索エンジン対策を行い、公開用ファイルを生成...
Hugo を使った個人サイトの作り方 10 タグ、カテゴリ用ページの作成 List TemplateとTerms Templage、Paging
前回はHugoの分類機能（Taxonomy）を解説し、個別の記事ページにタグ、カテゴリ、シリーズを設定しました。今回はこれらを概観するためのリストページなどの体裁を整えていくことにします。 Taxonomy Terms Template Taxonomy List Template...
Hugo を使った個人サイトの作り方 9 記事ページの作成(2) Taxonomy
前回はBaseテンプレートを作り、記事表示用のSingleテンプレートで一部を上書きすることで、汎用ページ表示を行えるようにしました。今回は分類機能Taxonomyについて扱おうと思います。 Taxon...
Hugo を使った個人サイトの作り方 8 記事ページの作成(1) BaseテンプレートとSingleテンプレート
前回は固定ページを作成することが出来ました。ここからは記事ページとなる小説本文を作ります。扱う内容としてはBaseテンプレートとsingleテンプレートです。 Baseテンプレート Singleテンプレー...
Hugo を使った個人サイトの作り方 7 固定ページの作成(2) Shortcode
パンくずリスト ページ内目次 HugoのShortcode 小説目次機能 前回はSection(※./content/以下のディレクトリのこと）直下の_index.mdを固定ページとして出力するようList T...
Hugo を使った個人サイトの作り方 6 固定ページの作成(1) List Template
固定ページフラグの追加 List Templateの編集 実際の例 前回まででトップページが完成しました。（このシリーズではHTMLとCSSについては除外しているので早く進みますね！）今回は「about」などの固定...
Hugo を使った個人サイトの作り方 5 ホームページの作成(2)とPartial Template
Partial Template の利用 footer.html 前回はサイトの設定(hugo.toml）をしたところで終わってしまいました。今回は続けてフッター部分を作成していきます。 フッター部分のデザインは以下の図のようになっています。赤で囲まれてい...
Hugo を使った個人サイトの作り方 4 テーマの自作とホームページの作成(1)
オリジナルテーマ作成 トップページ（ホームページ）の作成 変数の参照と式 サイトの設定(hugo.toml) メニューの設定(hugo.toml) オリジナルテーマ作成 今回から実際にサイトを作っていきます。テー...
Hugo を使った個人サイトの作り方 3 ディレクトリ構造とthemeの導入
前回は膨大なHTMLをmarkdownファイルに変換し、体裁を整えました。 今回はこれを基にサイトを作っていきます。 HugoのPage Bundles テーマ設定 作業用batファイルの作成 サイト公開までの段取り Hugo...
Hugo を使った 個人サイトの作り方 2 マークダウン変換編
前回まででHugoのインストールが終わり、サイト雛形のディレクトリ構成が完成しました。とはいっても、中身がなければどうしようもありません。 この企画は私自身のサイト作成の振り返りですので、「私のサイト」...
Hugo を使った 個人サイトの作り方 1 インストール編
Hugoのインストール Scoopの利用 新しいサイトの作成 ディレクトリ構造 Hugoのインストール Hugo を利用できるよう、Windows 10 Home にインストールします。 Quick Start | Hugo Hugo | ふうせん🎈 FU-SEN ここで哀しいお知らせで...
Hugo を使った 個人サイトの作り方 0 発起篇
個人サイトを作成するときの使用ツールとしてまず最初に候補にあがるのは WordPress でしょう。利用サイトも多く見つけられます。しかし、Wordpressや他CMSのような動的生成サイトの場合、万一のサイトデータ復旧...