空飛ぶ羊

勉強したり登壇したり勉強会参加したり

怠惰なエンジニアでも作れる!ポートフォリオサイトの作り方

怠惰な自分でも簡単に作れるポートフォリオサイトの作り方をまとめます。

そもそもポートフォリオサイトとは?

こちらに詳しい解説がありますが、昔でいう「ホームページ」みたいなものです。 e-words.jp

ポートフォリオサイトの作り方

今回作るイメージ

本当に簡単なものです。 f:id:okoysm:20171113114113p:plain

1. ポートフォリオサイトに書く内容を決める

エンジニアの場合、以下が該当するかと思います。

  • 自己紹介 自分が何者(エンジニア)で、どんなスキル(Java, Ruby, HTML5, CSS3, JavaScript等)を持っているかを短めに

  • ポートフォリオ(あれば) 今まで自分が開発してきたOSSやプロダクトの紹介。怠惰なエンジニアでポートフォリオがない場合はスキップしましょう

  • ブログ
    技術ブログなど、自分が勉強してきた内容などがわかるもの

  • 連絡先 Twitterアカウント、Facebookアカウント、GitHubアカウント

2. デザインを決める

一からデザインを考えるのが大変なのでとりあえずテンプレートを使います。以下のようなテンプレートサイトを利用します。
以下のサイトにあるテンプレートはレスポンシブ対応をしているため、PC・タブレットスマホどれから見てもそれなりのデザインで表示されます。

3. 1に書いた内容をテンプレートに埋める

テンプレートはサイトからダウンロードできます。HTMLの文言修正だけで大体は終わります。(全くHTMLの構文がわからない場合は勉強しましょう)

4. GitHubに設置

サーバーを立てるのは面倒なのでGitHub Pagesを利用します。
これは<アカウント名>.github.ioというURLでページを作成できる機能です。詳しい作り方は公式の説明をご確認ください。

pages.github.com

5. 完成

一日あればここまでできると思います。

まとめ

  • 怠惰なエンジニアは既存のデザインテンプレートとエコシステム を利用してサクッと作ろう
  • より自分のできることを見せたい場合はデザインとフロントエンドを勉強してオリジナルのポートフォリオサイトを作ろう!