First commit

Author: Takuma Yoshioka

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+
+[*.html]
+indent_style = tab
+indent_size = 2

.gitignore

@@ -0,0 +1,7 @@
+.bundle
+.sass-cache
+/Gemfile.lock
+/crash.log
+/output
+/tmp
+/vendor

Checks

@@ -0,0 +1,4 @@
+deploy_check :internal_links
+#deploy_check :external_links
+deploy_check :mixed_content
+deploy_check :stale

Gemfile

@@ -0,0 +1,21 @@
+source 'https://rubygems.org'
+
+# static site generator
+gem 'nanoc', '~> 4'
+gem 'nanoc-toolbox'
+# required for `nanoc view`
+gem 'adsf'
+# required for `Nanoc::Helpers::XMLSitemap`
+gem 'builder'
+
+# sass/scss
+gem 'sass'
+# pygments
+gem 'pygments.rb'
+# asciidoc
+gem 'asciidoctor'
+gem 'nanoc-asciidoctor'
+# pandoc
+#gem 'pandoc-ruby'
+
+gem 'w3c_validators'

Rules

@@ -0,0 +1,150 @@
+#!/usr/bin/env ruby
+
+# Preprocess {{{1
+
+preprocess do
+  #create_tag_pages
+  create_authors_htags
+  create_archive_pages
+  create_htag_pages('/tags/', items: articles)
+end
+
+# }}}1
+
+# sass partial.
+ignore '/**/_*'
+# vim tmp file.
+ignore '/**/.*.swp'
+
+
+compile '/articles/**/*.html' do
+  filter :colorize_syntax, :default_colorizer => :pygmentsrb
+  layout '/article.*'
+  filter :relativize_paths, type: :html
+end
+
+compile '/articles/**/*.adoc' do
+  filter :asciidoctor, linkcss: true
+  filter :colorize_syntax, :default_colorizer => :pygmentsrb
+  layout '/article.*'
+  filter :relativize_paths, type: :html
+end
+
+compile '/assets/**/*.scss' do
+  filter :sass, syntax: :scss
+  filter :relativize_paths, type: :css
+end
+
+compile '/members/*/*.adoc' do
+  filter :asciidoctor, linkcss: true
+  filter :colorize_syntax, :default_colorizer => :pygmentsrb
+  layout '/member.*'
+  filter :relativize_paths, type: :html
+end
+
+compile '/tags/index.html.erb' do
+  filter :erb
+  layout '/page-base.*'
+  filter :relativize_paths, type: :html
+end
+
+compile '/tags/search.html' do
+  filter :colorize_syntax, :default_colorizer => :pygmentsrb
+  layout '/page-base.*'
+  filter :relativize_paths, type: :html
+end
+
+compile '/tags/**/*.html' do
+  layout '/htag-page.*'
+  filter :relativize_paths, type: :html
+end
+
+compile '/tags/**/*.json' do
+  layout '/htag-key.json'
+end
+
+compile '/feed.xml' do
+  filter :erb
+end
+
+compile '/archives/*/*.html' do
+  layout '/archive-by-year.html'
+  filter :relativize_paths, type: :html
+end
+
+compile '/archives/*/*/*.html' do
+  layout '/archive-by-year-month.html'
+  filter :relativize_paths, type: :html
+end
+
+compile '/**/*.html' do
+  layout '/page-base.html'
+  filter :relativize_paths, type: :html
+end
+
+compile '/**/*.html.erb' do
+  filter :erb
+  layout '/page-base.html'
+  filter :relativize_paths, type: :html
+end
+
+compile '/**/*.json.erb' do
+  filter :erb
+end
+
+compile '/**/*' do
+  write item.identifier.to_s
+end
+
+route '/articles/**/index.{html,adoc}' do
+  yyyy,mm,dd,slug,relpath = /\/([0-9]{4})-([0-9]{2})-([0-9]{2})-([^\/]+)\/(.+)$/
+    .match(@item.identifier.without_ext).captures
+  "/#{yyyy}/#{mm}/#{dd}/#{slug}/#{relpath}.html"
+end
+
+route '/articles/**/*.{html,adoc}' do
+  yyyy,mm,dd,slug,relpath = /\/([0-9]{4})-([0-9]{2})-([0-9]{2})-([^\/]+)\/(.+)$/
+    .match(@item.identifier.to_s).captures
+  "/#{yyyy}/#{mm}/#{dd}/#{slug}/#{relpath}/index.html"
+#  if item.identifier =~ '/index.*'
+#    '/index.html'
+#  else
+#    item.identifier.without_ext + '/index.html'
+#  end
+end
+
+# /articles/**/yyyy-mm-dd-slug/* => /yyyy/mm/dd/slug/*
+route '/articles/**/*' do
+  yyyy,mm,dd,slug,relpath = /\/([0-9]{4})-([0-9]{2})-([0-9]{2})-([^\/]+)\/(.+)$/
+    .match(@item.identifier.to_s).captures
+  "/#{yyyy}/#{mm}/#{dd}/#{slug}/#{relpath}"
+end
+
+route '/assets/**/*.scss' do
+  @item.identifier.without_ext + '.css'
+end
+
+route '/assets/**/*' do
+  @item.identifier.to_s
+end
+
+route '/archives/**/*' do
+  relpath = /^\/[^\/]*(\/.*)$/.match(@item.identifier.to_s).captures[0]
+  relpath
+end
+
+route '/members/**/*.adoc' do
+  @item.identifier.without_ext + '/index.html'
+end
+
+route '/**/*.{html,json}.erb' do
+  @item.identifier.without_ext
+end
+
+route '/**/*' do
+  @item.identifier.to_s
+end
+
+layout '/**/*', :erb
+
+# vim: set foldmethod=marker :

content/articles.json.erb

@@ -0,0 +1,23 @@
+---
+---
+<%=
+result = {}
+def to_iso8601(time)
+	attribute_to_time(time).strftime('%FT%T%:z')
+end
+sorted_articles.each do |item|
+	entry = {
+		title: item[:title],
+		created_at: to_iso8601(item[:created_at]),
+	}
+	#p attribute_to_time(item[:created_at])
+	if val = item[:excerpt]
+		entry['excerpt'] = val
+	end
+	if val = item[:updated_at]
+		entry['updated_at'] = to_iso8601(val)
+	end
+	result[item.path] = entry
+end
+result.to_json
+%>

content/articles/2016/05/2016-05-04-new-blog/index.adoc

@@ -0,0 +1,116 @@
+---
+created_at: 2016-05-04T16:46:40+0900
+title: "これが……これが俺たちの新しいブログだ！"
+htags:
+  - "ロ技研/おしらせ"
+kind: article
+authors:
+  - "2014/larry/syskan"
+
+excerpt: "新しいブログのお披露目です。"
+---
+
+ブログとwikiを一新した話をします。
+
+== TL;DR
+- link:https://blog.rogiken.org/[ブログ] と link:https://wiki.rogiken.org/[wiki] を新しく作ったので使ってください。
+- 良い機会なのでgitに慣れましょう。
+- 山奥の秘境での作業者にも優しい設計です。
+- vim使おうな！
+
+== 獲得と喪失
+まず昨年のシス管の内部事情を3行で。
+
+....
+「今のサーバOBさんに借りてるやつだからロ技研が自前で借りるべきじゃね？」
+「webは移行できたけどwikiがPHPバージョンとかいろいろ古すぎてつらい、これ保守するの厳しい」
+「そんなこんなのうちに旧サーバにアクセスできなくなってた……」
+....
+
+うーん。 +
+とまあこういう経緯で、我々はサーバを手に入れ、そしてwikiを失ったのです。
+
+== 征服感
+さて件のwikiというのはPHPで動くものでしたが、長らくアップデートされていなかったようで、もはや面倒な手順を踏まねばアップデートしてサーバを移行できないほど古いものでした。 +
+サーバ側に置いてあるファイルを見ても独自のwiki記法だし、wikiの内容を見るのにPHPの動くサーバを用意しなければいけないのも面倒です。
+
+- PHPの動くwebサーバを用意しなければwikiを閲覧・編集できない
+- 独自wiki記法のせいで他への移行が面倒(移行先が制限されてしまう)
+
+このような欠点を解消する方法を、私は知っていました。 +
+**静的サイトジェネレータ**と呼ばれるものです。
+
+静的サイトジェネレータとは、ファイル群を変換してwebサイト(のhtml等)を生成するソフトウェアの一般名称です。 +
+その根底には、「webアプリ等でもないのに、単なるwebサイトを見るために裏でPHPなどの高度なプログラムを動かすのは、やりすぎである」という思想があります。 +
+wikiやブログも、単に閲覧する際にはデータがダイナミックに変化するものでもないし、純粋なwebサーバ以外の機能が必要になるのは**記事の投稿・編集等のタイミングだけ**です。 +
+なら、そのファイル変換とかの部分は外部のソフトウェアに任せた方が良いでしょう。 +
+**ひとつのことをうまくやるプログラムを協調させる**、いわゆるUNIX哲学みたいな発想です。 +
+**疎結合**にすることで、気に要らない部分だけを挿げ替えることが簡単にできるようになります。
+
+この方針により、wiki(またはブログ)は大まかに次の部分に分割されることとなります。
+
+- webサーバ
+- ソースファイルを変換してwiki/ブログのwebサイトを生成する
+- ソースファイルを特定の人々が編集できるようにする
+
+これらのすべてを自前で用意するか、或いは簡単に別サービスに切り替え可能にすることで、「特定のサービスがなければ運用できない/運用が困難になる」という現象(いわゆる**link:https://ja.wikipedia.org/wiki/%E3%83%AD%E3%83%83%E3%82%AF%E3%82%A4%E3%83%B3%E5%8A%B9%E6%9E%9C[ロックイン]**)を防ぎ、システム全体を掌握することができるようになります。 +
+後の世代がメンテナンスしたり、別のサービスやソフトウェアに乗り換えたりするとき楽になるはずです。
+
+=== webサーバ
+webサーバは、自前で動かしている link:https://www.rogiken.org/[ロ技研のwebページ] と同じものを使えます。 +
+副作用として、 rogiken.org のドメインを使えるようになります。
+
+=== ソースファイルを変換するやつ
+これがまさに静的サイトジェネレータの役割です。 +
+諸事情(というか個人的な事情)があり、私個人のブログで使っていた link:http://nanoc.ws[nanoc] というものを利用することにしました。 +
+自作プラグインによる拡張も、生のRubyで書けるので容易です。
+(まあ、やりすぎると他への移行が面倒になりますが。)
+
+また、nanocに限らず多くの静的サイトジェネレータは、プレビュー用に自前のサーバ機能を持っており、ソースファイルが手元にあればその完成形を見ることができます。 +
+つまり、**山奥のネットの繋がらない秘境に篭っても、手元にソースとRuby環境さえあればwikiやブログを閲覧・編集できる**ということです。
+
+=== ソースファイルを特定の人々が編集できるようにするやつ
+多人数で開発し、競合をうまく解決し、テキストのバージョン管理に向いている。 +
+まさしくVCS(バージョン管理システム)です。
+
+今回は、今をときめく**git**と、そのプラットフォームである**GitHub**を使うことにしました。 +
+wikiは link:https://github.com/titech-ssr/wiki.rogiken.org[こちら] 、ブログは link:https://github.com/titech-ssr/blog.rogiken.org[こちら] です。 +
+プログラマに限らず、何かの開発をする人はgit等を使えるに越したことはないので、部員の皆さんに慣れてもらう良い機会です。
+
+また、これはgitではなくGitHubやGitLab等の機能ですが、Issueなどを使うことにより記事の内容に関するツッコミや質問なども管理できます。 +
+コメント機能に近いものです。 +
+攻撃的な鉞も、Issuesに投げればきっと誠心誠意対応してもらえることでしょう。
+
+=== 連携
+今回、 link:https://jenkins.io/[Jenkins] というCI(継続的インテグレーション)ツールを使って、上で挙げた3要素の連携を行いました。 +
+部員の皆さんがGitHubへ更新をpushすれば、自動でファイル変換が実行され、webサーバのデータが更新されます。 +
+というわけで、これなら既存のwikiやブログと大して手間は変わらないだろうと思います。
+
+=== その他
+皆さんが自分のお好きなエディタで記事を書けるようになります。 +
+link:https://asciidoclive.com/[AsciiDocLIVE] 等のサービスでWYSIWYGしても良いし、vimやEmacsで書いても良いでしょう。
+
+執筆者だけでなく、利用者にも優しい仕組みになっています。 +
+「使われている画像を全てダウンロードしたい」なんて場合も、いちいちスクリプトを書いてクロールしたりせずとも、リポジトリから画像ファイルを抽出するだけです。 +
+検索だって、ダウンロードしてしまえばただのテキストですから、grep等好きなツールで検索することもできます。
+
+== ファイル形式
+ファイル形式にはmarkdownでなく**AsciiDoc**を採用しました。 +
+markdownのように方言が沢山あるわけではなく、安心して残せる形式だからです。 +
+他にも、htmlの埋め込みが明示的に行えるとか、そもそもhtmlを使わずともmarkdownより遥かに表現力が高いとか、docbookの面影を残した設計になっていて技術文書に向いているとか、いろいろ理由はあります。
+
+ともかく、これで**マウスポチポチかhtml直書きという究極の2択を回避**して記事を書けます。 +
+[small]#(まあ私はHTML直書き大好きですが……)#
+
+== スタイル
+ページのHTMLテンプレートも自前で用意したものなので、弄り放題です。 +
+ダサいスタイルは変更しましょう。 +
+というかこのブログも今はショボい見た目ですが、そのうち何とかします。
+したいです。
+できればいいなぁ。
+
+== まとめ
+- link:https://blog.rogiken.org/[ブログ] と link:https://wiki.rogiken.org/[wiki] を新しく作ったので使ってください。
+- 良い機会なのでgitに慣れましょう。
+- 山奥の秘境での作業者にも優しい設計です。
+- vim使おうな！

content/assets/css/_bootstrap3.min.scss

@@ -0,0 +1,52 @@
+/*
+ * Styles for elements generated by asciidoctor.
+ */
+
+div.title {
+	$color: brown;
+	/*font-size: 125%;*/
+	border-left: 0.75em solid $color;
+	padding-left: 0.5em;
+	color: $color;
+}
+div.admonitionblock {
+	padding: 0.2rem 0.5rem;
+	margin-bottom: 10px;	// Same as bottom margin of `p`.
+	>table {
+		margin-bottom: initial;
+	}
+	td.icon {
+		display: none;
+	}
+
+	&.caution {
+		// f071: fa-exclamation-triangle, fa-warning
+		@include admon(#EA5, #f8f0d0, "\f071");
+	}
+	&.important {
+		// f06a: fa-exclamation-circle
+		@include admon(#EA5, #f8f0d0, "\f06a");
+	}
+	&.note {
+		// f24a: fa-sticky-note-o
+		// f05a: fa-info-circle
+		@include admon(#5be, #e8f0f8, "\f05a ");
+	}
+	&.tip {
+		// f0eb: fa-lightbulb-o
+		@include admon(#5BE, #e8f0f8, "\f0eb");
+	}
+	&.warning {
+		// f06d: fa-fire
+		@include admon(red, #FEE, "\f06d");
+	}
+}
+/*
+ * bootstrap3ではdiv.quoteblock>blockquoteのmargin-bottomとpadding-bottomが20pxである。
+ * asciidoctorではattributionがblockqote要素の外に出るので、
+ * 引用とattributionの間が空きすぎないよう間隔を縮める。
+ */
+div.quoteblock>blockquote+.attribution {
+	margin-top: -15px;
+	margin-bottom: 20px;
+}