Edited at

Github Pages、Froalaを使って簡単にポートフォリオを作成してみた

はじめに

私はとある海外フリーランスのコミュニティーに所属しています。

そこである日noteにメンバー紹介の記事を書かないかというお誘いを頂きました。

ただ私はポートフォリオというものを何も持っていなかったので今回初めて作成することにしました。

現時点ではこちらが作成途中のものになります

Mikihiro Saito's Portfolio

https://mikinovation.github.io/portfolio/

今回使ったのはタイトルにもある通りGithub Pagesです。これは単純にサーバーを用意しなくても静的なページなら公開できるということで採用させていただきました。

PHPやNode.js等サーバーサイドの技術を使うことができないかもしれないですが、Javascriptでかなりちゃんとしたものは作れそうです。

またデザインにはこちらのテンプレートを使わせて頂いております。これでちゃんとしたwebサイトのデザインの様に見せることができるためかなりおすすめです。

Bootstrapを基本にしてページデザインを作成することができます。もちろん無料です。

https://www.froala.com/

Froala1.png

今回はこの2種類を利用して簡単にポートフォリオサイトを作成していきたいと思います。

FroalaでHTML生成



まずは以下のリンクからFloalaのページ生成画面へ遷移しましょう

https://www.froala.com/design-blocks/webpage-builder

Froala2.png

上記のような画面が出てきてヘッダーやコンテンツ、フッター等のパーツを自由に組み合わせて簡単にwebサイトのデザインを作成することができます。

パーツの種類も豊富で大変使いやすい仕様になっています。これで自由にポートフォリオのデザインを入れていきましょう。

最後に右下のDownloadボタンを押してHTMLを生成します。

他のサイトでは会員登録をしないと使えないみたいなことが書いてありましたが、私の場合は特に何もしなくてもダウンロードできてしまいました。優しいですね

Githubでページの公開



それでは最後にGithub Pagesを使ってポートフォリオを公開していきましょう。

冒頭でも紹介しましたがGithubは無料で使えサーバーいらずでページを公開することができます。

さらにGitが使えることもアピールできるので一石二鳥です。

それでは早速使い方を紹介していきます。

まずは通常通りにGithubへリポジトリを作りましょう。

プロジェクトのトップにindex.htmlファイルを置きます。

github-page.png

最後にページ公開の設定をしていきます。

上記Githubのリポジトリ画面右上にある設定ボタンをクリックしましょう。

そうすると下の方にGithub pagesの設定項目があるのでNoneをmasterブランチに切り替えます。

github-page2.png

これだけで完了です。後はsaveを押せば公開になります。

https://githubユーザー名.github.io/リポジトリ名/

これで公開されています。確認できましたでしょうか?

以上でポートフォリオ公開完了になります。

まとめ



いかがでしたでしょうか?

これで簡単にページを公開できます。まだポートフォリオを作ったことがないという方も作っておいて損はないです。

というか作ってないと全く能力がないですよとアピールしているのと同じような気がしてきました。

それに細かいデザインや動きを求めすぎて時間をかけすぎるのも良くないです。まずは最低限できることだけ書いて公開してみましょう。