포트폴리오 사이트를 만드는 방법

それではどうやって、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のテンプレートを使用すれば、手軽にポートフォリオサイトを作れます。

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