33分でポートフォリオサイト作成

「未経験者が転職のために少しでもアピールするには、ポートフォリオサイトを作った方がいい」

私は未経験からWebエンジニアを目指してプログラミンングスクールに通っているのですが、この言葉を同期から聞いて、正直焦りました。

もう就職活動に動き始めている段階で、GitHubのリポジトリーだけを見せるつもりだったからです。

実際に同期の人のポートフォリオサイトを見せてもらうと、自分で作ったものやカリキュラムで作ったものを簡単に紹介できたり、自分の自己紹介ができたりするので結構目を引きました。

ということで、自分も作るべきなのではないか？と思いました。

ただし時間が、、、。

ということで今回手軽にできる方法をいろいろ調べた結果、Bootstrapのテンプレートを使う方法がめちゃくちゃ手軽だったので、それを紹介したいと思います。

なぜ33分かというと、30分でポートフォリオサイトを作り、3分でGitHubを使ってデプロイするという内訳です。

すでに書くことを決めていたらコピペするだけなので可能です。

完成品は下記のようになります。

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

それではどうやって、33分でポートフォリオサイトを作るのか説明していきます。

① 自分の好きなテンプレートを見つけよう

下記のサイトから自分の好きなテンプレートを見つけ、ダウンロードします。

ちなみに私はこれを選びました。

② ダウンロードしたテンプレートをVSCodeで編集

ダウンロードしたBootstrapのテンプレートをVSCodeで開きます。

そして経歴やポートフォリオの説明などの文章を、元の文から書き変えましょう。

書き変えた後は、画像を入れ替えます。

まず、自分が入れ替えたい画像を、imgフォルダ下に配置します。

配置した後、

src="img/〜"

というコードがimgタグにあるので、~の部分に、画像の拡張子までつけた自分の入れたい画像の名前に書き換えます。

背景画像を変えたい場合には、CSSフォルダのstylesheetにある、

background: url(../img/〜) no-repeat center top;

という〜の部分を、自分の表示させたい画像の名前に書き変えましょう。

以上でポートフォリオサイト作りは終わりです。

微調整も必要だと思うので、そこは適宜HTMLタグを増やしたり、CSSの指定を変えたりしてください。

③ GitHubを使って3分でデプロイ

ポートフォリオサイトのようにデータベースとの連携がない場合には、GitHubで簡単にデプロイできます。

手順は、このポートフォリオサイトを自分のGitHubのリポジトリとして追加した後、そのリポジトリ内でSettingsをクリック。

GitHub Pagesという見出しのSourceという欄がNoneになっているので、これをmaster branchに変更。

変更したらURLが生成されます。

そのURLが、あなたのポートフォリオサイトがデプロイされた状態です。

これだけで終わりです。

いやめちゃくちゃ簡単ですね。

メリット・デメリット

Bootstrapのテンプレートを使用する場合、やはりメリットは手軽にできることです。

おそらく、ここまでこの文章を読んでくれた人はご理解いただけたと思います。

そしてレスポンシブデザインにも対応しているので、スマホで見てもビューが崩れません。

素晴らしすぎますね。

ただしデメリットもあります。

それは、HTML/CSS/JavaScriptの勉強にはならないということ。

当たり前っちゃ当たり前なのですが、テンプレートですでにほとんどのデザインが完成されているので、あまり手を加える必要がありません。

そのため、HTML/CSS/JavaScriptの勉強をしながら、ポートフォリオサイトを作りたいといった人にはおすすめできないです。

これを理解した上で、手軽にポートフォリオサイトを作りたいといった人にはおすすめです。

注意点

Bootstrapのテンプレートを使用する場合、

<!--
You are NOT allowed to delete the credit link to TemplateMag with free version.
You can delete the credit link only if you bought the pro version.
Buy the pro version with working PHP/AJAX contact form: https://templatemag.com/kelvin-bootstrap-resume-template/
Licensing information: https://templatemag.com/license/-->

という文章があるので、無料で使う場合、下記のコードのクレジットは消してはいけません。

Bootstrapのテンプレートで手軽にポートフォリオサイトを作れる

Bootstrapのテンプレートを使用すれば、手軽にポートフォリオサイトを作れます。

ただしデメリットや注意点もあるので、それを承知した上で今回紹介した手順で作りたいと思った人は、ぜひ参考にしてみてください。