포트폴리오를 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로 선택합니다. 아래 사진과 같이 밑줄 부분을 선택합니다.


이를 통해 게시할 수 있었습니다.
https://[ユーザー名].github.io/portfolio/ 의 URL로 공개되고 있는지 확인해 주세요.
오류가 발생하면 https://[ユーザー名].github.io/portfolio/index.html의 URL에 게시됩니다.

성공하면 다음과 같이 공개됩니다.


주의


  • 리포지토리에 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.js 이나 Gridsome 와 같은 정적 사이트 제너레이터를 이용해 보면 좋을 것입니다.

    이상의 점을 근거로, 여러분의 생각 그리는 포트폴리오를 작성, 공개해 갑시다.

    추가



    현재 새로운 포트폴리오를 Gridsome이라는 프레임 워크로 구현했습니다. 자세한 내용에 대해서도 Qiita에서 공개하고 있으므로, 흥미있는 사람은 이쪽을 참조해 보세요.

    좋은 웹페이지 즐겨찾기