LogoMark.png

特定演習|情報デザインA/2020/0527

第5回 GitHubPage の活用

特定演習|情報デザインA2020.05.27

第5回目の要件

受講生情報

以下、まずは目次を見て、授業の全体を把握してから、順に読み進めて下さい。


本日の目次


はじめに

今回の授業では、みなさんが制作するWebサイトを相互に閲覧可能にするため、公開リポジトリのアカウント取得と、そこでのWebサイトの公開方法について説明します。
 利用する GitHub は、世界中のプログラマーが ソフトウエア開発に利用しているオープンなリポジトリです。ここを利用していること自体が、一つのステータスになりますので、Webサイトの公開以外でも、是非活用して下さい。



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

1.1. そもそも、GitHubとは?

1.2. アカウントの作成

GitHub の無料アカウントを作成します。
事前にメールアドレスが必要です。将来のことを考え、卒業後も使用できる Gmail等をご利用ください。


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 上のファイルを直接編集更新

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

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

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

GitHubPagesDelete.jpg




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

各自のサブページ WebDesign に、本日作成したGiHub のリポジトリ情報と、GitHubページに公開したWebサンプルをリンク掲載して下さい。
以下の雛形を参考にして下さい。

**APPENDIX

***公開リポジトリ
-https : // github.com/JohnSmith
~
 
***GitHub Pages
-https : //JohnSmith.github.io/SampleSite
~

***演習環境
:以下略




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



APPENDIX

第6回以降、HTML+CSS による Webデザインです。文法的な事項を一挙に解説しますので、まずは、サンプルの編集を通して、その仕組みを理解するようにして下さい。



PAGES

GUIDE

DATA

Last-modified: 2020-06-09 (火) 10:30:37