GitHubPages
をテンプレートにして作成
LECTURE
担当科目一覧
ソーシャルデザイン概論/2025
ソーシャルデザイン演習/2025
情報デザイン論/2025
情報デザイン演習IIA/2025
コンピュータ概論/2025
3DCG演習/2025
情報デザイン研究/2025
卒業研究/2025
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*GitHub Pages
https://pages.github.com/
~
#image(GitHubPages04.png,right,30%)
一般にWebページを公開する際は、サーバーをレンタルするなど...
~
***CONTENTS
#contents2_1
~
~
**前提の確認
-[[GitHub]]とは、[[Git]] というバージョン管理システムを利...
-GitHub Pages で公開できるのは HTML+CSS+Javascript の範囲...
-GitHub の Publicプランは、ファイルのソースを全て公開する...
~
~
**アカウントの作成
GitHub を利用するには、アカウントの取得が必要です。はじめ...
~
***はじめに
-ここから先の一連の作業は''すべてPCのブラウザ上で行うこと...
-アカウント作成にはGmail等のメールアドレスが必要です。ア...
-事前に''ユーザー名''を決めておいて下さい。これは最終的に...
~
***アカウント取得の手順
-1. 以下にアクセスしてください。
https://github.com/
-2. 画面右上の ''Sign Up'' をクリック。
> Create your account のページが表示されます。
-3. ユーザー名、メールアドレス、パスワードを入力して、''C...
--ユーザー名:あなたの GitHub アカウント名です。公開するW...
--メールアドレスは認証に必要な情報です(Gmail 等がいいで...
--パスワードは GitHub アカウントにログインするためのもの...
-4. 利用者の経験値等を問うアンケート入力画面が表示されま...
-5. 登録したメールアドレスに確認メールが届きます。''Verif...
-6. GitHub のページ上に「あなたのメールアドレスが認証され...
以後、GitHubを使う場合は、''Sign in'' をクリックして、ID,...
~
***付記:ログイン(Sign in)ログアウト(Sign out)について
-''ログイン''は、GitHubでは ''Sign in'' という用語になっ...
&color(red){''Sign up'' を使ってしまうと、新規登録の扱い...
-''ログアウト''は、画面右上の利用者アイコンから ''Sign ou...
~
~
**リポジトリの作成
はじめに、GitHub上に新規のリポジトリを作ります。リポジト...
~
***新規リポジトリの作成
#image(GitHubPagesNew.png,right,25%)
-1. 画面右上のプラスアイコン「+」をクリックし、''New repo...
#clear
#image(GitHubPages01.png,right,50%)
-2. ''Repository name''という入力欄にリポジトリ名を入力し...
#clear
https://(ユーザー名).github.io/(リポジトリ名)
~
-3. ''Create repository'' をクリック
以上でリポジトリ(この時点では中身は空)ができました。
~
***ファイルのアップロード
#image(GitHubPages02.png,right,30%)
-Create repository をクリックした直後、右のような画面が表...
-表示された画面で ''Uploading an existing file'' をクリッ...
#clear
#image(GitHubPages03.png,right,30%)
-''Commit changes'' をクリックすることで、操作が完了しま...
#clear
-以下のように、リポジトリの中が、あなたの手元のフォルダ構...
#image(SampleSite02.jpg)
~
~
**GitHubページの公開
サイトのファイルは、アップしただけでは公開されません。以...
#image(GitHubPagesSettings.png,right,30%)
-1. リポジトリ画面の右端のタブ ''Settings'' をクリックし...
#clear
~
#image(GitHubPages05.png,right,30%)
-2. ページの下の方に ''GitHub Pages'' という項目がありま...
~
#image(GitHubPages06.png,right,30%)
-3. ''Source'' の項目が ''None'' となっているので、これを...
> 公開URL が表示されます。
~
-4. 自身の公開URLにアクセスしてみて下さい。
https://(ユーザー名).github.io/html_sample_01
設定変更から公開まで数分かかることがあります。
~
~
**リポジトリの更新
ソースコードの更新には、以下の2つの方法があります。
~
***GitHub のソースエディタを使って編集
-リポジトリ上に見える該当ファイルをクリック
-''Edit(鉛筆アイコン)'' をクリックすると編集可能状態に...
-編集終了後、''Commit changes'' をクリック
~
***ローカル環境(あなたのPC)で編集したファイルをアップし...
-リポジトリのページ、ファイル一覧の上の ''File Upload'' ...
-手元のファイルをドラッグ&ドロップ
-アップロード完了後、''Commit changes'' をクリック
~
~
**付記
***不要なリポジトリの削除
作業の過程で、間違った名称のリポジトリを作ってしまった場...
-1. 削除したいリポジトリを開いて下さい。
~
#image(GitHubPagesSettings.png,right,20%)
-2. 右端のタブに ''Settings'' というのがあるので、それを...
#clear
~
#image(GitHubPagesDelete.jpg,right,20%)
-3. そのページの一番下に ''DangerZone'' というのがあって...
-4. 削除したいリポジトリの名称の確認を求めてくるので、リ...
~
***より本格的に活用するには
GitHub は本来、自分のPC内にある「ローカルリポジトリ」とGi...
基本的には、手元のPCにあるローカルリポジトリ(要するに ...
そこで必要になるのが、GitHubのクライアントツール(Git GUI...
https://desktop.github.com/
詳細については、ここでは割愛いたします。以下のように検索...
[[Google: GitHub Desktop 使い方]]
~
~
終了行:
*GitHub Pages
https://pages.github.com/
~
#image(GitHubPages04.png,right,30%)
一般にWebページを公開する際は、サーバーをレンタルするなど...
~
***CONTENTS
#contents2_1
~
~
**前提の確認
-[[GitHub]]とは、[[Git]] というバージョン管理システムを利...
-GitHub Pages で公開できるのは HTML+CSS+Javascript の範囲...
-GitHub の Publicプランは、ファイルのソースを全て公開する...
~
~
**アカウントの作成
GitHub を利用するには、アカウントの取得が必要です。はじめ...
~
***はじめに
-ここから先の一連の作業は''すべてPCのブラウザ上で行うこと...
-アカウント作成にはGmail等のメールアドレスが必要です。ア...
-事前に''ユーザー名''を決めておいて下さい。これは最終的に...
~
***アカウント取得の手順
-1. 以下にアクセスしてください。
https://github.com/
-2. 画面右上の ''Sign Up'' をクリック。
> Create your account のページが表示されます。
-3. ユーザー名、メールアドレス、パスワードを入力して、''C...
--ユーザー名:あなたの GitHub アカウント名です。公開するW...
--メールアドレスは認証に必要な情報です(Gmail 等がいいで...
--パスワードは GitHub アカウントにログインするためのもの...
-4. 利用者の経験値等を問うアンケート入力画面が表示されま...
-5. 登録したメールアドレスに確認メールが届きます。''Verif...
-6. GitHub のページ上に「あなたのメールアドレスが認証され...
以後、GitHubを使う場合は、''Sign in'' をクリックして、ID,...
~
***付記:ログイン(Sign in)ログアウト(Sign out)について
-''ログイン''は、GitHubでは ''Sign in'' という用語になっ...
&color(red){''Sign up'' を使ってしまうと、新規登録の扱い...
-''ログアウト''は、画面右上の利用者アイコンから ''Sign ou...
~
~
**リポジトリの作成
はじめに、GitHub上に新規のリポジトリを作ります。リポジト...
~
***新規リポジトリの作成
#image(GitHubPagesNew.png,right,25%)
-1. 画面右上のプラスアイコン「+」をクリックし、''New repo...
#clear
#image(GitHubPages01.png,right,50%)
-2. ''Repository name''という入力欄にリポジトリ名を入力し...
#clear
https://(ユーザー名).github.io/(リポジトリ名)
~
-3. ''Create repository'' をクリック
以上でリポジトリ(この時点では中身は空)ができました。
~
***ファイルのアップロード
#image(GitHubPages02.png,right,30%)
-Create repository をクリックした直後、右のような画面が表...
-表示された画面で ''Uploading an existing file'' をクリッ...
#clear
#image(GitHubPages03.png,right,30%)
-''Commit changes'' をクリックすることで、操作が完了しま...
#clear
-以下のように、リポジトリの中が、あなたの手元のフォルダ構...
#image(SampleSite02.jpg)
~
~
**GitHubページの公開
サイトのファイルは、アップしただけでは公開されません。以...
#image(GitHubPagesSettings.png,right,30%)
-1. リポジトリ画面の右端のタブ ''Settings'' をクリックし...
#clear
~
#image(GitHubPages05.png,right,30%)
-2. ページの下の方に ''GitHub Pages'' という項目がありま...
~
#image(GitHubPages06.png,right,30%)
-3. ''Source'' の項目が ''None'' となっているので、これを...
> 公開URL が表示されます。
~
-4. 自身の公開URLにアクセスしてみて下さい。
https://(ユーザー名).github.io/html_sample_01
設定変更から公開まで数分かかることがあります。
~
~
**リポジトリの更新
ソースコードの更新には、以下の2つの方法があります。
~
***GitHub のソースエディタを使って編集
-リポジトリ上に見える該当ファイルをクリック
-''Edit(鉛筆アイコン)'' をクリックすると編集可能状態に...
-編集終了後、''Commit changes'' をクリック
~
***ローカル環境(あなたのPC)で編集したファイルをアップし...
-リポジトリのページ、ファイル一覧の上の ''File Upload'' ...
-手元のファイルをドラッグ&ドロップ
-アップロード完了後、''Commit changes'' をクリック
~
~
**付記
***不要なリポジトリの削除
作業の過程で、間違った名称のリポジトリを作ってしまった場...
-1. 削除したいリポジトリを開いて下さい。
~
#image(GitHubPagesSettings.png,right,20%)
-2. 右端のタブに ''Settings'' というのがあるので、それを...
#clear
~
#image(GitHubPagesDelete.jpg,right,20%)
-3. そのページの一番下に ''DangerZone'' というのがあって...
-4. 削除したいリポジトリの名称の確認を求めてくるので、リ...
~
***より本格的に活用するには
GitHub は本来、自分のPC内にある「ローカルリポジトリ」とGi...
基本的には、手元のPCにあるローカルリポジトリ(要するに ...
そこで必要になるのが、GitHubのクライアントツール(Git GUI...
https://desktop.github.com/
詳細については、ここでは割愛いたします。以下のように検索...
[[Google: GitHub Desktop 使い方]]
~
~
ページ名: