エンジニアなりにポートフォリオサイトを作ってみた話2
エンジニアなりにポートフォリオサイトを作ってみた話2:
自分のポートフォリオサイトを、なるべく何にも依存しないようにしたくなった。
IP アドレスと CNAME で設定する2つの方法があるようですが、 CNAME の方が管理が楽そうなので、そちらを採用しました。
AWS Route53 での設定は以下のようになります。
設定ページで以下の箇所に独自ドメインを設定するだけで OK です。
あと
間違ってこのファイルを消したら、アクセスできなくなって焦った・・。
とりあえず
最初は問題なかったのですが、使っている内に細かい不満が出てきて(テンプレートの書き方とか、思ったことが上手くできる方法がなさそうとか)、
で、他の静的サイトジェネレーターを探してみたのですが、世の中にはたくさんのジェネレーターがあるんですね・・・。
一つ一つ試してみるのも大変ですし、やりたいことは
自分の得意言語であること以外に特に理由はないです。
以下のライブラリを使用しました。
次にテンプレートエンジンに渡すので、テキストデータを受け取っておきます。
テンプレート用のHTMLファイルに、Markdown のコンテンツを埋め込みます。
<%- JSのコード %> というような形で埋め込みができます。
詳細は 公式サイト を参照してください。
テンプレート内に書かれた <%- content %> に Markdown から変換した HTML データが埋め込まれます。
普通の
あとは、自分のやりやすいように、サイト構成を作って、いい感じに変換できるようにしときます。
自分は
その他細かい点は、リポジトリ を参照してください。
https://portfolio.hyiromori.com/ に公開されています。
自分で構築するより、静的サイトジェネレーターを選んでいる時間のほうが長かった・・・。
まだまだ細かい改善点はあるので、少しずつ解消していきたいなぁ。
あらすじ
-
前回 の続き - やりたいことが増えたので、静的サイトジェネレーターもどきを作った
- ポートフォリオサイト: 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 で設定する2つの方法があるようですが、 CNAME の方が管理が楽そうなので、そちらを採用しました。AWS Route53 での設定は以下のようになります。
GitHub の設定
設定ページで以下の箇所に独自ドメインを設定するだけで OK です。 Let's Encrypt
で生成された証明書が使われるようです。 あと
CNAME
というファイルが自動的に追加され、独自ドメインの設定が保存されるているようです。間違ってこのファイルを消したら、アクセスできなくなって焦った・・。
静的サイトジェネレーターの選定
とりあえず GitHub Pages
で採用されている Jekyll を使おうと思いました。最初は問題なかったのですが、使っている内に細かい不満が出てきて(テンプレートの書き方とか、思ったことが上手くできる方法がなさそうとか)、
Jekyll
の採用はやめました。で、他の静的サイトジェネレーターを探してみたのですが、世の中にはたくさんのジェネレーターがあるんですね・・・。
一つ一つ試してみるのも大変ですし、やりたいことは
Markdown
を HTML
に変換することと、 SCSS
を CSS
にできれば大体のことができるので、自作することにしました。
言語の選定
JavaScript
にしました。自分の得意言語であること以外に特に理由はないです。
node
と npm
にガッツリ依存しますが、まぁこの2つが潰れることはないでしょう。
ライブラリの選定
以下のライブラリを使用しました。-
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); });
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/ に公開されています。
あとがき
自分で構築するより、静的サイトジェネレーターを選んでいる時間のほうが長かった・・・。まだまだ細かい改善点はあるので、少しずつ解消していきたいなぁ。
コメント
コメントを投稿