Help us understand the problem. What is going on with this article?

うちゅういちかんたんなポートフォリオのつくりかた

More than 1 year has passed since last update.

スクリーンショット 2019-04-19 6.49.07.png

GitHubを使って以下のようなポートフォリオを作る方法です。
@suikasu123 PORTFOLIO

1.Git/GitHubにアカウント登録をします。

 Gitは、Gitの使い方はサルでもわかるGit入門
 GitHubの使い方はGitHub 入門 ~アカウントを作成する方法~
 テキストで統括的に進めたければ、わかばちゃんと学ぶ Git使い方入門がおすすめです。
 また、ターミナルではなく視覚的に使いたいということであれば、SourceTreeをインストールします。
 SourceTreeのダウンロードとインストール方法
 はじめてのSourceTree(使い方編)

2.テキストエディタをインストールします。

 Windows:デフォルトの「メモ帳」でOKです。(インストール不要)
 Mac:「Brackets」(無料)がおすすめです。
    デフォルトのメモ帳は使わないことをお勧めします。(拡張子が変更できないため。)

3.以下のサイトから、テンプレートをダウンロードします。

 ポートフォリオHTMLテンプレート

4.各種アイコンをダウンロードします。

 テンプレ内に、「SKILL」「CONTACT」という項目があります。そちらは、自分でアイコンを用意する必要があります。
 「SKILL]は、自分のスキル(RubyやSwift)に適したアイコンを下記からダウンロードします。
 Devicons
 「CONTACT」は、自分で設定したい連絡先(メールやTwitter)に適したアイコンを下記からダウンロードします。
 icooon-mono

5.自分の制作物のキャプチャやセルフィーなどの掲載したい画像を、「img」直下の各フォルダに移動します。

 (ローカルフォルダ)
 latestworks-自分の直近の成果物の画面キャプチャ
 works-自分の今までの成果物の画面キャプチャ
 profile-自分のセルフィーやイメージ画像
 skill-自分のスキルのアイコン(手順5でダウンロードしたもの)
 contact-自分の連絡先のアイコン(手順5でダウンロードしたもの)
 img直下-アイキャッチ画像(SNSでシェアした時に表示される画像)

6.ポートフォリオの中身を作成します。

 デスクトップに「portfolio-template」フォルダが作成されています。
 その中にある「index.html」をテキストエディタで開きます。
テンプレートが開かれるので、デフォルトのデータを自分のものに書き換え、保存します。
 また、各項目の画像を自分のものに差し替えます。
 デフォルトの画像が差し込まれているところに、自分の画像の名前を入力するだけでOKです。
 例)「goal.png」という名前の画像を挿入したい場合
 スクリーンショット 2019-04-30 7.06.17.png

7.GitHubで新しいリポジトリを作成します。

 「Repository name」は「○○○○.github.io」とします。
  例:suikasu1.github.io
 それ以外は、通常のGitHubの使い方と一緒です。

8.手順7までで作成したテキストデータや画像等を、ローカル→SourceTree→GitHubへ連携させます。

 以下の手順を参考にしてください。
 SourceTreeのダウンロードとインストール方法
  はじめてのSourceTree(使い方編)

9.GitHubへプッシュ後、ポートフォリオを見てみましょう。

 手順9でポートフォリオが完成していますので、早速見てみましょう!
 リンクは「https://○○○○.github.io/」という形式で見れます。Twitterなどでぜひシェアしましょう!

手作りじゃなくていいから手っ取り早く作りたいなぁという人は、RESUME(レジュメ)というサービスもおすすめ。
こちらはコーディングの知識がなく簡単に作成できます。
私のページはこちら

suikasu123
港区三田のSES勤務 ¦週末エンジニア&デザイナ(初心者🐣)¦ Illustrator WordPress Rails Swift ¦
https://note.mu/suikasu1
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away