Hugoを使った小説同人サイトの運営 小説の目録ページ
当サイトではHugoを使った個人サイトの作り方として制作ログを作ってきましたが、運営するうちに目次ページなどももっと小説サイトらしく使いやすくしたい！ と思うようになりました。今回は目録ページについてで...
Filtering for "tech"
てがろぐスキン「beauter」＋サイトマップ、ギャラリー
お手軽マイクロブログCGI「てがろぐ」：スキン式で複数ユーザ対応 - にししふぁくとりー ブログタイプのスキンを作ったので、自分でスキンを整えるのが怠い人のために配布することにしました。 特徴 サンプルサイト ス...
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のような動的生成サイトの場合、万一のサイトデータ復旧...