引き継ぎサイト更新について

引き継ぎサイト更新についてサイトの作成についてサーバーについてGitHubの操作についてアカウントについてアカウント開設についてサイトの開設についてファイルのアップロード作成したサイトを公開するサイトに画像を追加したい場合文字色を変更したい場合PDFなどのファイルへのリンクを張りたい場合

 

サイトの作成について

引き継ぎ用のサイトは全てTyporaというソフトを利用して作成しています。更新に際して元データのmdファイルは基本GitHubに残しておくのでそれぞれダウンロードするか直接連絡してください。細かいTyporaの使い方に関してはこちらを参照してください。基本的にはwordのような直感的操作が多いです。

 

サーバーについて

このサイトはGitHubというソースコード管理サービスを使用して運営しています。基本無料ですが保存した情報は原則公開されますので個人情報の扱いに関しては慎重におこなってください。

 

GitHubの操作について

GitHubに関しては基本英語表記ですので操作が若干難しいです。できるだけ画像を用いて説明しますが外部サイトなどを用いて理解していただけると助かります。

アカウントについて

上のURLにあるように「KUWO-git」というアカウントを開設しています。

登録アドレスはkuwo.github@gmail.com pwはOnedriveのもの+62になっています。

なおGoogleアカウントを使いたい場合、pwはOnedriveと同じになっています。

アカウント開設について

既にあるアカウントを使い回す場合は必要ありませんが念のため記載しておきます。登録用メールアドレス、パスワード、アカウント名さえあればGitHubから開設できます。こちらを参考にしていただければできると思います。

サイトの開設について

こちらも既にあるサイトを使い回す場合は必要ありませんが念のため記載しておきます。GitHub Pagesという機能を用いてサイトを開設します。

image-20211004102002419.png

ここのOwner名は登録したアカウント名が表示されます。Repository nameに作製するwebサイトの名前を「xxx」の形で入力してください。下の選択肢はPublicを選択したままで他は無視してもらって大丈夫です。最後にCreate repositoryを選択し次にすすみます。

ファイルのアップロード

ここからが更新にも必要な知識になります。

まずTyporaを使っている人はファイルをHTMLでエクスポートしてください(下の画像参照)。するとファイル名が見出しのままになっているとは思いますが、サイトを更新する際は必ずindex.html という名前に変更してください。

スクリーンショット (176).png

エクスポートができたらGitHubにアクセスし、更新の人はサイト右上の「upload files」を選択してください。

image-20211004104645300.png

サイトを開設する人は下の画像の「uploading an existing file」を選択してください。

image-20211004112257551.png

するとこのような画面が表示されるので、真ん中にアップロードしたいファイル(indexなど)をドラッグし、最後に必ず左下の「Commit changes」を押してください。(押して初めて完了です！！)!

image-20211004105220337.png

これでサイト更新単体は完了です。暫くすると更新されるので様子を見に行ってください。新規でサイトを開設する人はもう少し作業が必要です。なおこちらを参考にしてみても構いません

(少し話がそれますが基本的にwebサイトはHTMLとCSSという2つのファイルで成立しており、簡単にいうと前者が内容を、後者が見栄えを整えてくれます。多くのwebサイト開設のやり方を示すサイトは直接2つのファイルのコード組んで作るようになっていますが、初心者が行うのはかなり難しいです。Typoraはその点ほぼコード無しでwebサイトを作成可能なので大変おすすめです。)

作成したサイトを公開する

こちらも更新には必要ありませんが念のため記載しておきます。

サイト上部から「settings」を選択します。(画像右端)

image-20211004110826538.png

下の方にスクロールすると「GitHub Pages」の表示があるので青色箇所をクリックしてください。

image-20211004110942160.png

するとこのような表示になるのでNone部分を選択してMainに切り替え、Saveを選択してください。!

image-20211004111313770.png

もし上記でなく下のようにurl表示であれば既に公開されているので安心してください。

image-20211004111726613.png

このurlが開設したサイトのurlになります。

 

以下はおまけです。ちょっと発展的な内容になります(どれもすぐにできますよー)。

サイトに画像を追加したい場合

このサイトのように画像を含めたものにしたい場合は画像をオンライン上にアップする必要があります。GitHubでよいので画像をアップしてから埋め込みましょう。

スクリーンショット (178).png

このように画像をGitHub上にアップロードし、後から選択してTyporaにドラッグするだけで埋め込み可能です。

文字色を変更したい場合

・文字色は""のコマンドで色を変えたい文字を挟めばできます。

・指定したい色を色コードまたは名前で"　"の中に記載してください。下の例はredです。

スクリーンショット (180).png

PDFなどのファイルへのリンクを張りたい場合

こちらのようにPDFへのリンクを張りたい場合についてです

  1. 上の「ファイルのアップロード」を参考に、GitHubのリポジトリへPDFやWordのファイルをアップロードしてください。

  2. アップロードしたファイルを選択してください。するとこのような画面になります。

    スクリーンショット (189)_LI.jpg

  3. 2のスクリーンショットの"main/"より後ろをコピーして、開設したサイトの後ろに貼り付けるとファイルが表示される(※1)ので、それをハイパーリンク(※2)に組み込んでください。

    ※1：WordやExxelファイルなど一部ファイル形式は「ビューワー」表示になりURLが変わりますが、ダウンロード可能になります。

    ※2ハイパーリンクとはこちらのような文字がリンクになっているものです。リンクにしたい文字を選択し、右クリックで可能になります。