Webサイトを作った

2018-03-30 Web

---

サークルの Web サイトができました！ 記念（？）に今回は、この Web サイトの開発環境と各機能がどのように実装されているのかについて解説しようと思います。

開発環境

この web ページは GitHub の GitHub Pages というサービスでホストされています。 GitHub Pages は一瞬で Web サイトが作れるだけでなく、 Jekyll が使えるので HTML を打たなくても Markdown で記事が書けてしまいます。 Markdown は簡単に書けますし、 textlint などで文章をチェックできるので綴り間違いなども減らせていいことだらけです。

以下では、実際にこの記事書くのにも使っている開発環境をざっくり紹介します。 より詳しくは wiki などを見てください。

Jekyll のローカル環境

https://help.github.com/articles/setting-up-your-github-pages-site-locally-with-jekyll/

記事の作成自体は GitHub 上でもできますが、ローカルに Jekyll の環境を作れば仕上がりを確認しながら書いていくことが出来ます。 基本的には pages-gem を bundle install すればＯＫです。 bundle exec jekyll s -l で Jekyll が立って、更新を逐次反映してくれます。

textlint のルール

preset-ja-technical-writing と spellcheck-tech-word を使っています。 Atom の linter-textlint というプラグインを使うと、書きながら直すべき場所がわかるのでとっても便利です。 husky と lint-staged を使って、 commit 時に textlint と prettier を自動で実行するのもやっています。

各機能の実装

テーマを設定する

https://help.github.com/articles/adding-a-jekyll-theme-to-your-github-pages-site/

今回は GitHub Pages でサポートされている Slate というテーマを使いました。 _config.yml を編集するだけで利用できます。

theme: jekyll-theme-slate

ローカルで確認する場合は Gemfile にも記述が必要です。

gem 'github-pages', group: :jekyll_plugins
gem 'slate'

最近の投稿

https://jekyllrb.com/docs/posts/#displaying-an-index-of-posts

表示する量を limit で制限したり、日付を入れたりしています。

<ul>
  {% for post in site.posts limit:5 %}
    <li>
      {{ post.date | date: "%Y-%m-%d" }} <a href="{{ post.url }}">{{ post.title }}</a>
    </li>
  {% endfor %}
</ul>

記事にタグをつける

https://jekyllrb.com/docs/posts/#displaying-post-categories-or-tags

まず、 _layouts/tag.html を用意します。

---
layout: default
---

<ul>
  {% for post in site.tags[page.tag] %}
    <li>
      <a href="{{ post.url | absolute_url }}">
        {{ post.title }}
      </a>
    </li>
  {% endfor %}
</ul>

次に、タグ毎に tags/タグ名.html を作ります。

---
layout: tag
tag: [Web]
---

ここで重要なのは、レイアウトは上で作ったものを、tag はタグ名（ここでは「Web」）を指定することです。 「tag: Web」 がレイアウトに渡り、 page.tag が「Web」になって、 tags/Web.html にアクセスすると「Web」タグがついたページの一覧が出るようになります。

今回は _posts に合わせて tags にしましたが別の名前でも大丈夫です。

タグで検索する

tags/タグ名.html へのリンクを列挙しています。 Jekyll には Hugo にあるような .Site.Taxonomies.tags がないので結構苦労しました。 今回は _layouts/ を除いて .html なファイルは tags/ にしかないので、 site.html_pages を使って実装しています。

<div>
  {% for page in site.html_pages %}
    <a href="/tags/{{ page.tag }}.html">{{ page.tag }}</a>
  {% endfor %}
</div>

カスタム 404 ページ

https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/

Jekyll のドキュメント によると、この設定はグローバルに適用されますが、 _posts などは影響を受けないようです。 _config.yml に書いてもいいようです。

---