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

ポートフォリオをGitHub で公開する

ポートフォリオとは

ポートフォリオとは、いわゆる、「クリエーターの履歴書」です。クリエーター自身が、これまでに制作してきた作品をサイトを通じて紹介することで、同じクリエイターに自身の課題解決能力を示すためのものです。作るうえでは、「自己紹介」、「制作実績」、「連絡先」を掲載すればいいです。しかし、わざわざポートフォリオを公開するために、有料のレンタルサーバーを借りたりしたくないと考えている人もいます。そこで、この記事では, GitHubが無料で提供しているGitHub Pages を利用してポートフォリオを作成していきたいと思います。

GitHub の使い方

GitHub を初めて利用する人は、次のサイトを見ながら制作するといいです。
GitHub 入門

ここでは、公開するリポジトリ名は、"portfolio"とします。

GitHubで リポジトリ作成後、生成された

https://github.com/[ユーザー名]/portfolio.git

をコピーしてください。

次は、PC側 でのファイルを制作していきます。

mkdir portfolio
cd portfolio

として、この ”portfolio” のファイルの中に、index.html を作成します。

HTML ファイルの中身は、以下の通りです。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Example Portfolio</title>
</head>
<body>
    <h1>Hello GitHub.io !</h1>
</body>
</html>

作成後、コマンドライン上で、次のコマンドを打ちます。

git add .
git commit -m'FirstCommit'
git remote origin add https://github.com/[ユーザー名]/portfolio.git 
git push origin master

これにより、ファイルを portfolio リポジトリへ公開することができました。

GitHub Pages で公開

いよいよ、ポートフォリオを公開していきたいと思います。このサイトのリポジトリへ移動し、Setting → GitHub Pages で、Source の中を master branch で選択します。下の写真のように、下線部分を選択してください。
スクリーンショット (21).png

これにより、公開することができました。

https://[ユーザー名].github.io/portfolio/ のURLで公開されているかどうか確認してください。
もし、エラーが発生した際は、https://[ユーザー名].github.io/portfolio/index.htmlのURLで公開されています。

成功していれば、次のように公開されています。
スクリーンショット (24).png

 注意

  • もし、リポジトリ内に、README.md が先にファイル内に存在したら、デフォルトのURLはREADME.mdが優先されて公開されます。
  • ポートフォリオを公開する際は、HTML.CSS,JavaScript を利用した方が各々の思い通りの記事を記述できると思います.
  • 全く使ったことがない人でも、README.md を利用してMarkdown 形式で記述することもできます。

最後に

以上で、GitHub.Pages を利用してポートフォリオを公開する手段を記述しました。GitHub Pages では、BootStrapだけでなく、Vue,JQuery も利用することができますが、Ruby on Rails や MySQL といったデータベースをGitHub Pages 内で公開することはできません。この場合、記事を公開したい場合は microCMS などの
外部APIを 利用して記事の管理を行ったり、Vue やReact ができるようになれば、Gatsby.jsGridsome といった静的サイトジェネレーターを利用してみるとよいでしょう。

以上の点を踏まえて、みなさんの思い描くポートフォリオを作成、公開していきましょう。

追記

現在、新しくポートフォリオを Gridsomeというフレームワークで実装しました。詳しい内容についてもQiita にて公開していますので、興味ある人はこちらを参照してみてください。

https://qiita.com/0622okakyo/items/4e5d4a4d29e4cd2b1576

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