https://gyazo.com/4d4b7b8789d1f8b05f9c3fdc4dfbbfac
https://gyazo.com/d1cbe47855dd35f62a170371eb244575
https://gyazo.com/c0cc1b0ae3ce564dcf221ff61d1833c7
https://i.gyazo.com/38311f2460178da4ac9c99675b7e0862
https://gyazo.com/710ec895a5ccc7170e2c9dcde1c9f58c
https://gyazo.com/cdf2b2e7be4e80421f55152a4b348a7a

投稿一覧

[Tech]

Github Pagesでの独自ドメインの設定

ブログを立ち上げたので独自ドメインを取得してみることにしました。 ドメインはお名前.comで、トップレベルドメインには「.info」を選択しました。 1年間の契約でなんと「269円(手数料込)」! メジャーなトップレベルドメインではないとはいえ、この安さに驚きました(普段、ドメイン取得することないからなぁ)。

さて、ホスティングしているGithub Pagesを独自ドメインで公開する方法ですが、 様々なサイトで詳しく情報が公開されており、検索すれば容易に発見できると思います。 他と重複する情報とはなりますが、念のためメモしておきたいと思います。

まずは、お名前.comの設定ですが、 ドメインNaviでGithub PagesのDNSレコードの登録が必要です。 具体的には、下記のようにAレコードとして、192.30.252.153192.30.252.154を登録するだけです。 (参考:Github Help

https://gyazo.com/5e28dbf519e0300b47c3a96a6fa6d085

次に、自身のレポジトリの設定ですが、CNAMEという名前をファイルを作成し、 転送先の独自ドメイン(ここではmuka-lab.info)を入力します。 後は、このファイルを他のHTMLファイルなどと一緒にデプロイするだけです。 これらの変更の適用には時間がかかるようなので、 少し時間を空けてから転送が成功するか確認しましょう。

[Tech]

Jekyllにおけるシンタックスハイライト

Jekyllが得意とするシンタックスハイライトですが、設定でつまずいたのでメモしておきます。 シンタックスハイライトにはrougepygmentsが利用されるようですが、ここではrougeを適用してみたいと思います。 まずは、下記のコマンドでrougeをインストールします。

gem install rouge

次に、”_config.yml”でシンタックスハイライトにrougeを指定しておきます。

highlighter: rouge

ここまでは、何てことないのですが、ここからつまずきました。 シンタックスハイライトのスタイルは”_syntax-highlighting.scss”で設定されているようです。 色などを変更したい場合は、このファイルを修正すれば良いはずですが、何故か変更が適用されません。

マークダウンでハイライトするときは、ソースコードを``で囲みます。 変換後のhtmlを確認すると、該当箇所は下記のように、クラス属性にhighlighter-rougeが設定されています。

<code class="highlighter-rouge"></code>

再度、”_syntax-highlighting.scss”を確認すると、クラス属性はhighlightとして設定されています。 そこで、ファイル内のクラス属性をhighlighter-rougeに置換することで、シンタックスハイライトが適用されました。 試行錯誤の末、シンタックスハイライトの適用までこぎつけましたが、この辺り十分に理解できていないかもしれません。

[Tech]

Jekyllデフォルトテンプレートの自動リンク

Jekyllのデフォルトテンプレートでは、 トップページのヘッダ部の右にサイトに含まれるページのリンクを自動的に追加してくれます。 これはとても便利な機能ではあるのですが、ページ数が増えてくると、特定のページは除いて欲しいというケースが発生します。

そこで、「YAML Front Matter」を利用して解決します。 まずは、”_templates/page”に、top_linkという名前の変数を下記のように用意します。 これで、新規に作成するページには、top_linkの行が自動的に追加されます。

トップページに自動的にリンクを追加する場合は、ページを作成した後で、このtop_linkの値を”true”に設定しておきましょう。 次に、”_includes/header.html”に下記のようにtop_linkに関する条件文を追加します。

これで、トップページの自動リンクをtop_linkという変数で制御できるようになります。

[Life]

ブログ始めました

今日からブログを起ち上げることにしました。 基本的には自分用のメモとしての意味合いが強いですが、 気になった事柄などを、ここにまとめていければ良いかなと思ってます。

大学の授業資料なども、このサイトで公開したいと思っていますので、 履修している学生の皆さんには定期的にチェックしてもらえれば嬉しいです。

では、よろしく!