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

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


あらすじ


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

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


  • GitHub Pages に依存しない。

    • たとえ GitHub Pages がなくなっても S3 のホスティングとかで継続できるようにしておきたい。
    • ソースがあれば移行は簡単だけど、ドメインは同じにできるように独自ドメインに変更する。

  • Qiita に依存しない

    • 今は技術記事を Qiita に投稿しているけど、 Qrunch とか、新規の技術ブログサイトが出てきたりしている
    • どこに投稿するのかとか、考えるのも疲れるし、自分のサイトをベースに追加でどこかに投稿する、という形のほうが良さそう


やること

  • 独自ドメインでポートフォリオサイトにアクセスできるようにする。
  • ポートフォリオサイト内にブログを投稿できるようにする。

    • 現状 SPA で構築しているが、実験目的で作っているページもあり不具合が出ないように、ブログは静的ファイルを作成して分離したい


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


DNS の設定

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

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



aws-route53.png



GitHub の設定

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



github.png


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

lets-encrypt.png

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

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


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

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

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

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

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


言語の選定

JavaScript にしました。

自分の得意言語であること以外に特に理由はないです。
nodenpm にガッツリ依存しますが、まぁこの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); 
}); 
テンプレート内に書かれた <%- 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/ に公開されています。


あとがき

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

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

コメント

このブログの人気の投稿

投稿時間:2021-06-17 22:08:45 RSSフィード2021-06-17 22:00 分まとめ(2089件)

投稿時間:2021-06-20 02:06:12 RSSフィード2021-06-20 02:00 分まとめ(3871件)

投稿時間:2021-06-17 05:05:34 RSSフィード2021-06-17 05:00 分まとめ(1274件)