はじめまして。Natsuです、ふぉって名前も使ってます。 ここではだいたい趣味のことを書くと思います。 最初なので、個人的なメモ書きも兼ねてこのブログの作り方をまとめておきます。

GitHub Pagesでブログが作れるらしい

何となしにネットの海をサーフィンしていると、ふと立ち寄ったブログのURLが~.github.ioでした。

へぇ～GitHub Pagesでブログが作れるんだ～。わたしもやりたい。

ググってみると、静的サイトジェネレータを使うとMarkdownで書いたファイルを元にWebページを生成できるみたいです。 『GitHub Pages ブログ』と検索したところ静的サイトジェネレータの名前がいくつか出てきたのですが、なんとなくおもしろそうだったのでHugoを使ってみることにします。

Hugoを使って実際に作ってみる

Hugoの導入

まずHugo Extendedをインストールするのですが、Windowsでは例えばChocolateyなどのパッケージマネージャを使うので、まずはそちらをインストールしておきます。

chocoコマンドが使えるようになったら、Hugo Extendedをインストールします。

GitHubの準備とThemeの導入

続いてブログ作成のための環境構築をします。以下の記事を参考にさせて頂きました。

3分で GitHub にブログを作る (Hugo + GitHub Pages) - Qiita

HugoではThemeと呼ばれるページレイアウトのテンプレートのようなものがHugo Themesで色々公開されていて、 『Hugo Future Imperfect』というテーマが個人的にとても好きなので導入します。

先ほどの環境構築の記事ではconfig.tomlを編集するようになっています。 themes/hugo-future-imperfect/exampleSiteにあるconfig.tomlをコピーして、ブログ本体のディレクトリに元々あるconfig.tomlに上書きしておきます。

以降、themesディレクトリ以下のファイルを変更する際は全てブログ本体の同名ディレクトリにコピーしたものを使用しています。

config.tomlをカスタマイズする

自分のブログに合わせてconfig.tomlを編集していきます。ここではブログのタイトルや説明、 自分のSNSアカウントへのリンクや記事の共有ボタンの有効化などブログの基本的な要素を編集できるようになっているので、好きなようにカスタマイズします。

特に変わったことはしていませんが、1つあるとすればアイコンは私がGitHubで使っているものをURLで参照して持ってくるようにしています。 https://github.com/<USERNAME>.pngとするとアイコン画像を取得できます。 画像が思ったよりでかかったのでサイズは100pxとしておきます。ここまでの設定でconfig.tomlは以下のようになります。

  # This appears at the top of the sidebar above params.intro.header.
  # A width of less than 100px is recommended from a design perspective.
  [params.intro.pic]
    src       = "https://github.com/<USERNAME>.png"
    # Sets Image to be a cirlce
    circle    = false
    # Sets Image to be Future Imperfect's hexagon
    imperfect = true
    width     = "100"
    alt       = ""

フォントを変更する

ページ中で使用されるフォントを指定します。Google Fontsで使いたいフォントをインポートして使用する感じになるので、便利すぎてありがとうございますの気持ちになります。

記事のフォント

Noto Sans JPが好きなので、使えるようにします。

hugo server -Dでサイトのテスト実行をし、ブラウザで文字部分について検証をします。Vivaldiだと日本語の文字の上で右クリック→[検証]でした。 Stylesに表示されている項目のうちfont-familyの部分がフォントの指定になっているようなので、場所として示されているmain.css:117付近を見に行きます。 \themes\hugo-future-imperfect\static\css\にmain.cssがありました。117行目あたりからがフォントの設定となっていたので、以下のように変更しています。

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
body, input, select, textarea {
	color: #333333;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14pt;
	font-weight: 400;
	line-height: 1.75;
}

インラインコードのフォント

続いてインラインコードの文字を検証すると、main.css:259付近でフォントが指定されていたので、ここも変更します。コードのフォントにはSource Sans Proを使うことにします。

@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap');
code {
	background: rgba(160, 160, 160, 0.075);
	border: solid 1px rgba(160, 160, 160, 0.3);
	font-family: "Source Code Pro", monospace;
	font-size: 0.9em;
	margin: 0 0.25em;
	padding: 0.25em 0.65em;
}

見出しの調整

見出しをより目立たせるためにデザインの調整をします。デフォルトではh3以降見出しのフォントサイズが本文より小さくなってしまうのと、見出しに何も装飾がないのは記事本文と判別がつきにくいのとで、デザインをちょっとだけ変えてみます。

デザインを変更する

見出しに関してですが、デフォルトの状態ではアルファベットは全て大文字で字間がやや広いです。私の好みに合わせてmain.css:197付近を以下のように変更しています。

h1, h2, h3, h4, h5, h6 {
	color: #3c3b3b;
	font-family: "Raleway", Helvetica, sans-serif;
	font-weight: 800;
	letter-spacing: 0.10em;
	line-height: 1.65;
	margin: 0 0 1em 0;
	text-transform: none;
}

このコードのすぐ後のあたりで見出しのデザインを変更できるのでやってみます。

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選 ←こちらのサイトのCSSをお借りしまして、 見てもらえばわかるようにこんな感じで見出しの文字の左に灰色のマーカーを付けています。 h4、h5、h6は共通なので端折っています。

h1 {
    font-size: 1.4em;
	border-left: solid 5px #C0C0C0;
	padding: 0.1em 0.5em;
}

h2 {
	font-size: 1.2em;
	border-left: solid 5px #D0D0D0;
	padding: 0.1em 0.5em;
}

h3 {
	font-size: 1.1em;
	border-left: solid 5px #E0E0E0;
	padding: 0.1em 0.5em;
}

h4 {
	font-size: 1.0em;
	border-left: solid 5px #F0F0F0;
	padding: 0.1em 0.5em;
}

こんな感じになりました。わかりやすくなったかも？

デザイン変更の弊害を直す

見出しのデザインを変更したところサイドバーでも見出しが使われていたらしく、サイトタイトルのあたりが特に違和感マシマシになってしまいました。

それ以外の部分は案外なじんでいるのですが、タイトルの左のほうに刻み海苔が貼り付いているのだけは流石に変なので直します。

sidebar.htmlがサイドバーにあたるので見てみると、18行目に<h2>{{ .header }}</h2>というのがあります。5行目で<section id="intro">というようにIDが与えられているので、main.css内の先ほど変更したh2よりも下の行で#intro header h2に海苔を消すCSSを書けば良さそうです。

幸いmain.cssの2600行付近に見つかるので、こんな感じで海苔用の余白を作っているpaddingと海苔そのものであるborder-leftを共に0pxとか0emとかにする記述を加えて完了です。

#intro header h2 {
	font-size: 1.5em;
	font-weight: 900;

	border-left: solid 0px #FFFFFF; /* 見出しに線入れたらタイトルにも出ちゃったので隠す */
	padding: 0em 0em; /* 余白も0にしておく */
}

同様のことをその他の見出し部分にも適用して、あとはちょこちょこナビゲーションバー（上に出てるサイトのタイトルとかHOMEとかABOUTとか書いてるとこ）とかをいじっておわりです。

やっとこれで好きなことを書く準備ができたので、これからちまちま思いついたこととかやったことを更新していきたいと思います。よろしくね。