LogoMark.png

Webデザイン基礎B/2020/0928

第3回 GitHubの活用

Webデザイン基礎B/2020|造形短期大学部|2020.09.28遠隔
情報共有シート特設サイト

AGENDA


以下、11:00 - LIVE動画を配信します。



本日のメニュー


はじめに

制作した Webサイトは、今後の作家活動・就職活動等を前提とすると、何らかの形で「公開」する必要があります。
 一般的には、レンタルサーバーを利用しますが、この授業では、遠隔でサイト校正やソースコードについてのサポートを行うことも前提に、GitHub というオープンなリポジトリのアカウントを作成するとともに、GitHubPages というサイト公開のサービスを利用します。



1. GitHub を用いたWebサンプルの公開

1.1. そもそも、GitHubとは?

1.2. アカウントの作成

GitHub の無料アカウントを作成します。



ここで、ログインとログアウトをお試し下さい。



1.3. リポジトリの作成

リポジトリとは、Webサイトやファイルセットなどを GitHub 上で管理するためのプロジェクトフォルダ・・とご理解下さい。リポジトリはいくつでも作ることができるので、その数だけサイトを作ることができます。

index.html ファイルが一つだけしかない小さなWebサイトでも、1サイト = 1リポジトリになるようにして下さい。

以下、リポジトリの作成手順です。GitHub上にフォルダをひとつ作る・・という感覚でイメージして下さい。


GitHubPagesNew.png
GitHubPages01.png


1.4. ファイルのアップロード

GitHubPages02.png
GitHubPages03.png


1.5. 公開設定

サイトのファイルは、アップしただけでは公開されません。以下の設定操作によって公開されます。

GitHubPagesSettings.png
GitHubPages05.png


設定変更から公開まで数分かかることがあります。




2. リポジトリの更新体験

GitHub 上のデータは、本来であれば、Gitクライアントソフトを利用して、手元のPCと連携して使うのですが、はじめのうちは、シンプルな方法で更新作業を行なって下さい。ファイルの更新には、以下の2つの方法があります。

2.1. 手元でファイルを更新してアップロード


2.2. GitHub 上のファイルを直接編集更新

この方法は現状では非推奨です。

付記:不要なリポジトリの削除について

作業の過程で、間違った名称のリポジトリを作ってしまった場合は、以下の手順で削除可能です。

GitHubPagesSettings.png
GitHubPagesDelete.jpg




3. 本日の成果の書き込み

本日作成した GitHub リポジトリの情報と、GitHubページとして公開したWebサンプルを、特設サイト|受講生のページ にリンク掲載して下さい。
以下の雛形を参考にして下さい。

== APPENDIX ==

===公開リポジトリ===
* GitHub:https://github.com/JaneSmith
<br>

===GitHub Pages===
* https ://JaneSmith.github.io/SampleSite
<br>




第3回目は、以上をもって終了とします。お疲れ様でした。

次回から、HTMLの具体的な文法について解説します。サンプルを提供しますので、その編集を通して仕組みを理解するようにして下さい。



PAGES

GUIDE

DATA

Last-modified: 2020-09-30 (水) 13:32:16