GitHub
github-pages
ポートフォリオ

Web開発経験のないインフラエンジニアがGithubでポートフォリオを公開した話


TL:DR


  • 成果物: https://skokado.github.io/

    キャプチャ.PNG


  • 自作サーバを用意する必要なし、自ドメインも必要なし.


  • Web開発の知識必要なし. 既に公開されているWebテンプレートを利用. 先人に感謝.


  • URLはhttps://[Githubユーザ名].github.io/で公開される. 個人用だし全く問題ないね!!


  • テンプレートダウンロード後に3ステップでオリジナルサイトが完成する.


素晴らしくないですか.


前提

自分は社会人6年目のインフラエンジニア.

昨今は転職が当たり前であり、将来転職をする前提でキャリアを考えておく必要があると考えてます.

ただ、今の会社に入社して早2年半. 職務経歴書やスキルセットの棚卸しを全くといっていいほどしてきませんでした.

良い機会なので、今風にWeb上でスキルシートを公開しようと思い至りました.


Github Pages用のリポジトリ作成

丁寧な手順ページをGithubが公開しています.

早い話 [Githubユーザ名].github.io という名前のリポジトリを作成するだけ.

私のGithubアカウントは「skokado」ですので、リポジトリ名は「skokado.github.io」です. そしてこれがそのまま公開URLのドメインになります.

キャプチャ.PNG


Webページの公開

さて、Github上でリポジトリを作るだけで専用ドメインにWebコンテンツをホストしてくれるわけですが 私はインフラエンジニア.

モダンなUIをサクっと作れるフロントエンドエンジニアでなければ サクっとWebアプリを作れるRuby/PHPエンジニアではありません.

しかし、Github pagesは親切にWebコンテンツのテンプレート(Theme)に誘導してくれました.

https://pages.github.com/themes/

キャプチャ.PNG

そこまで細かく作りこみたいわけではないし、名前からも Minimal が気になったのでこれを選びました.

https://github.com/pages-themes/minimal

あとはこれをcloneして諸々編集するだけです.


1. _config.yml

title: Minimal theme

logo: /assets/img/logo.png
description: Minimal is a theme for GitHub Pages.
show_downloads: true
google_analytics:
theme: jekyll-theme-minimal


  • title:
    その名の通りページのタイトル名

  • logo:


  • description: ロゴ画像下の説明文.


  • show_downloads: ロゴ画像下に, コンテンツをZIP形式などでダウンロードするためのボタンを表示するか否か. ダウンロードしたい意味が分からないのでfalseにした.



2. /assets/img/logo.jpg

ページ上部に大きく表示されるロゴ画像. ここで2次元萌え絵を採用するかでその人のジャンルが分かるのではないだろうか

変更するなら_config.yml と合わせてパスやファイル名も考慮すること.


3. index.md

ページ右側に表示される内容であるマークダウン形式のファイル.

ここがメインコンテンツなので充実させましょう.

draw.ioなんかで作成した構成図を貼り付けるのとか良いですよね.


以上!!

Web開発ができない者でもそれなりに見栄えするWebページを作れたと思います.

これだけです. 自作サーバもいらなければDNSの知識なんかも要りません.

(github.ioのサブドメインですが)自分用ドメインでページを公開できます

というかポートフォリオのページをわざわざゼロから作る労力ってもったいないですよね.

Github様々.