エンジニアなりにポートフォリオサイトを作ってみた話２

エンジニアなりにポートフォリオサイトを作ってみた話２:

あらすじ

• 
  前回 の続き
• やりたいことが増えたので、静的サイトジェネレーターもどきを作った
• ポートフォリオサイト: https://portfolio.hyiromori.com/
  
• ソースコード: https://github.com/hyiromori/hyiromori.github.io
  

変えようと思ったきっかけ

自分のポートフォリオサイトを、なるべく何にも依存しないようにしたくなった。

• 
  GitHub Pages に依存しない。
  
  
  • たとえ GitHub Pages がなくなっても S3 のホスティングとかで継続できるようにしておきたい。
  • ソースがあれば移行は簡単だけど、ドメインは同じにできるように独自ドメインに変更する。
• 
  Qiita に依存しない
  
  
  • 今は技術記事を Qiita に投稿しているけど、 Qrunch とか、新規の技術ブログサイトが出てきたりしている
  • どこに投稿するのかとか、考えるのも疲れるし、自分のサイトをベースに追加でどこかに投稿する、という形のほうが良さそう

やること

• 独自ドメインでポートフォリオサイトにアクセスできるようにする。
• ポートフォリオサイト内にブログを投稿できるようにする。
  
  
  • 現状 SPA で構築しているが、実験目的で作っているページもあり不具合が出ないように、ブログは静的ファイルを作成して分離したい

GitHub Pages の独自ドメインの設定

DNS の設定

IP アドレスと CNAME で設定する２つの方法があるようですが、 CNAME の方が管理が楽そうなので、そちらを採用しました。

AWS Route53 での設定は以下のようになります。

GitHub の設定

設定ページで以下の箇所に独自ドメインを設定するだけで OK です。

Let's Encrypt で生成された証明書が使われるようです。



あと CNAME というファイルが自動的に追加され、独自ドメインの設定が保存されるているようです。

間違ってこのファイルを消したら、アクセスできなくなって焦った・・。

静的サイトジェネレーターの選定

とりあえず GitHub Pages で採用されている Jekyll を使おうと思いました。

最初は問題なかったのですが、使っている内に細かい不満が出てきて（テンプレートの書き方とか、思ったことが上手くできる方法がなさそうとか）、 Jekyll の採用はやめました。

で、他の静的サイトジェネレーターを探してみたのですが、世の中にはたくさんのジェネレーターがあるんですね・・・。

一つ一つ試してみるのも大変ですし、やりたいことは Markdown を HTML に変換することと、 SCSS を CSS にできれば大体のことができるので、自作することにしました。

言語の選定

JavaScript にしました。

自分の得意言語であること以外に特に理由はないです。
node と npm にガッツリ依存しますが、まぁこの２つが潰れることはないでしょう。

ライブラリの選定

以下のライブラリを使用しました。

• 
  marked : Markdown -> HTML の変換
• 
  ejs : テンプレートエンジン
• 
  sass-loader : SCSS -> CSS の変換

実装

Markdown の変換

marked を使って変換します。

次にテンプレートエンジンに渡すので、テキストデータを受け取っておきます。

const fs = require('fs'); 
const marked = require('marked'); 
const htmlText = marked(fs.readFileSync('Markdownファイルのパス')) 

テンプレートの適用

テンプレート用のHTMLファイルに、Markdown のコンテンツを埋め込みます。
<%- JSのコード %> というような形で埋め込みができます。

詳細は 公式サイト を参照してください。

const ejs = require('ejs'); 
ejs.renderFile('テンプレートファイルのパス', { content: htmlText }, {}, (error, html) => { 
  if (error) { 
    throw new Error(error); 
  } 
  fs.writeFileSync('出力先のパス', html); 
}); 

テンプレート内に書かれた <%- content %> に Markdown から変換した HTML データが埋め込まれます。

SCSS の変換

普通の CSS を書いても良いのですが、最低限として色を変数で管理はしたいので、 SCSS で書くことにしました。

const fs = require('fs'); 
const sass = require('node-sass'); 
 
sass.render({ file: '変換元の SCSS ファイルパス' }, (error, result) => { 
  if (error) { 
    throw new Error(error); 
  } 
  fs.writeFileSync('出力先の CSS ファイルパス', result.css.toString()); 
}); 

その他

あとは、自分のやりやすいように、サイト構成を作って、いい感じに変換できるようにしときます。

自分は src というディレクトリ内に変換前のリソースをまとめて、Jekyll の設定ファイル ( /_config.yml ) に以下の設定をしました。

exclude: 
- src 

その他細かい点は、リポジトリ を参照してください。

完成

https://portfolio.hyiromori.com/ に公開されています。

あとがき

自分で構築するより、静的サイトジェネレーターを選んでいる時間のほうが長かった・・・。

まだまだ細かい改善点はあるので、少しずつ解消していきたいなぁ。