新しいブログを書いています

既にご存じの方もいらっしゃるかと思いますが、500W という新しいブログを昨年末から書いています。

このブログ(Stocker.jp / diary)は時間をかけてWeb関係の記事を1記事ずつ書いているため、ちょっとした記事や、Web制作と関係のない記事(Blender、3DCG等)を書きづらくなってきたため、そういった記事はブログを分けることにしました。

こんな記事を書いています

Webデザイン・Adobe

コーディング・プログラミング

Blender・3DCG

その他

WordPressではなくJekyllを使った理由

新ブログは、WordPress ではなく Jekyll という静的サイトジェネレーターを使用して制作しました。

もちろん、使ったことのない技術を使う勉強のためというのもありますが、WordPress は海外から管理画面へのアタックが多すぎて、それを防ぐと今度は xmlpc.php へのアタックが…という感じでキリがないので、いっそ HTML と CSS をローカルで生成し、アップロードしたほうが管理が楽なのでは…ということで静的サイトジェネレーターを検討していました。

その中で、example.com/directory/ のように下層ディレクトリで使用でき、そこそこ有名で開発終了しなさそうなものを…ということで Jekyll を選択しました。

Webコーディングスクール 体験レッスン受付中

Jekyllを使ったブログ制作

インストール

Jekyll を使用するには、公式サイトのトップページにあるように gem を使ってインストールする必要があります。

gem を使用するには、ターミナルを使って Ruby の開発環境をインストールしておく必要があります。

参考: 【Yosemite】Mac OSX 10.10 Yosemite に Ruby + Rails4 開発環境の構築【初心者必見】 – Qiita

Jekyll のインストールは以下のWebページを参考にしました。

参考: Jekyllいつやるの?ジキやルの?今でしょ!

テーマ制作

Jekyll は Ruby でできているため、テーマ制作は Ruby を記述する必要あるかとおもいきや、特に必要ありませんでした。

HTML の中に {% include head.html %} や {{ content }} のようなタグを加えるだけなので、WordPress テーマ制作よりやや敷居が低いかもしれません。

今回はデフォルトのテーマを改造して制作したのですが、デフォルトのテーマは Sass(SCSS)が使われていたので、Sass を使用しました。

ヘッダー部分は、よく見るとグラデーションの色が変化するようになっていますが、これは WebGL を使用しています。
CSS3 でも似たようなことはできるのですが、WebGL のほうが、複雑なグラデーションを美しく描画でき、処理も軽いように感じました。

WebGL 部分は、javascript 4k intro の anpanman のソースを参考に作っています。

更新

記事は MarkDown 形式で書いた後、jekyll serve という Sass でいうコンパイルのような作業を行う必要があります。
ターミナルで

cd /Jekyll/install/dir/
jekyll serve

のように実行した後、Webブラウザーで http://127.0.0.1:4000/ のアドレスを開く必要があるのですが、いちいち毎回これらのコマンドを実行したりブラウザーを開くのは面倒なので、以下のようにエイリアスを設定しました。

alias jk='open http://127.0.0.1:4000/500W/; cd /Jekyll/install/dir/; jekyll serve'

jekyll serve すると、MarkDown で書いていた記事が HTML に変換されます。
あとは、SFTP などでファイルをアップロードすればブログの更新ができます。

Jekyllを使ってみた感想

率直に言うと「ターミナルを使い慣れている方が、1人でブログを更新するのには向いている」というのが正直な感想です。

逆に、複数人でブログを更新する場合や、ターミナルの操作に慣れていない方がインストールや初期設定を行うことは難しいと思います。

WordPress などを使用していて、海外からのアタックに悩まされている方や、シンプルなブログを作りたい方にはよさそうだと思いました。

制作したブログ

500W

RSS もあります。

RSS

Feedly で RSS を開く

最近の記事

Web制作関連動画

メルマガ会員向けの「コーダーにも役立つ補完AI『Codeium』の使い方」の動画を期間限定で公開しています。
CodeiumはGitHub Copilotと似ていますが、CSSなども補完できて、今登録すれば無料で使えます。

メルマガでは、Web制作者のためのAI活用やWordPress関連の動画など、さまざまな特典があります。ご興味ある方は、ぜひメルマガにご登録ください。
Index