GitHub

【最新版】GitHub PagesでWebサイトを無料で公開しよう（初学者向け）

2023-07-04 By プログラミング入門ナビ編集部

概要

この記事では、無料でWebサイトの公開が可能なGitHub Pagesへ、GitHubのアカウント作成から、Webサイトの公開と削除するところまでを解説します。

この記事は、オンライン講座「ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！」とProglus「新HTML入門」のサポート記事です。

なお、アクセス時期によっては実際のサイトと記事中の画像で表示が異なる場合があります。

GitHubアカウントの作成

GitHubのページへアクセス

GitHubのページへアクセスし、「Sign up」をクリック。

メールアドレスを入力

登録するメールアドレスを入力し、「Continue」をクリック。

パスワードを入力

パスワードを入力し、「Continue」をクリック。

ユーザーを入力

任意のユーザ名を入力し、「Continue」をクリック。

「製品のアップデートやお知らせをメールで受け取りますか？」と質問があり、受け取りたい場合は入力欄に「y」、受け取りたくない場合は「n」を入力し、「Continue」をクリック。

ロボットではないか検証

ロボットではないかと尋ねられるので、「検証する」をクリック。

検証が終わったら、「Create account」をクリック。

コードを入力

登録したメールアドレス宛に確認用のコードが送信されるので、コードを入力。

登録完了できました。

トップページに戻る

左上のマークをクリックすると、ログインした状態で作成したアカウントのトップページが表示されます。

新規リポジトリ作成

リポジトリの作成画を開く

ログインした状態でGitHubのトップページ(https://github.com/)から、「＋」のアイコンのボタンをクリック。

「New repository」をクリック。

新規リポジトリ作成

Repository nameにリポジトリの名前を入力します。
ここでは「my-site-repository」としておきます。

GitHubでソースファイルを管理する場合、自分だけが見れるPrivateと、ほかの人も見ることができるPublicがあります。
今回は外部へ公開するため、チェックボックスを「Public」としておきます。

一番下まで行き、「Create repository」をクリックすると、リポジトリが作成されます。

「my-site-repository」というリポジトリが作成されました。

ファイルのアップロード

アップロードのページ

作成したリポジトリのページから、「uploading an exsiting file」をクリックして、アップロードのページに移動します。

ファイルのアップロード

アップロードしたいファイルやフォルダを枠内へドラッグアンドドロップします。

アップロードが終わったら、「Commit changes」をクリックして保存します。

確認

リポジトリのページへ行くと、アップロードされていることが確認できます。

ページの公開

設定を開く

「Settings」をクリック。

GitHub Pagesの設定

左項目の「Pages」から、「None」で「main」をクリック。

「Save」をクリックして保存します。

保存すると、以下の画像のようにURLを取得できます。

確認

URLをクリックし、アップロードしたサイトが表示されればOKです。

作成したサイトが無事公開されました！

ページの削除

設定を開く

ページの公開でアクセスしたリポジトリのページから、「Settings」をクリックして一番下まで行き、「Danger Zone」の「Delete this repository」をクリックします。

リポジトリを削除

確認フォームに太字の「ユーザ名/リポジトリ名」を入力した後に下のボタンを押すと、リポジトリを削除してサイトを削除することができます。

まとめ

今回はGitHubのアカウントの作成から、作成物をWebサイトへ公開 / 削除するところまでを解説しました。
ご不明点は、Udemy、Proglus（プログラス）内に設置したQ＆Aコーナーにてお知らせください。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

初心者からWebエンジニアへ転職するために必要なスキルセットは？優先順位別に紹介！

2020-03-31 By プログラミング入門ナビ編集部

はじめに

Webエンジニアへの転職、やることが多くて何から始めたらいいか悩んでしまいますよね。

ひとまずプログラミングの学習を始めたはいいものの「これだけでいいのだろうか」「あれもやっておくべき？」など、考え始めるときりがありません。

この記事では、Webエンジニアに最低限必要なスキルセットとして何を押さえるべきかについて、講師のおすすめを紹介します。

Webエンジニアリングの全体像

まずはWebエンジニアの仕事ではどういったことをするのか、ざっくりと見てみましょう。

Webサイト制作時の役割分担として、フロントエンドとサーバーサイド（バックエンドとも呼ばれます）があります。

フロントエンドはWebサイトがユーザからどう見えるかを司るユーザーインターフェイス部分の実装です。

サーバーサイドはその名の通り、Webサイトが動くサーバー上で必要な機能の実装部分となっています。

また、どちらの場合も、基本的な開発ツールを使いこなせるようにしておくことも重要です。

Webエンジニアへの転職後はこのいずれかもしくは両方を担当することになります。

全体の動きを把握するためにも、まずは次項以降のスキルセットを一通り身に付けて簡単なWebサイトを開発してみるのがおすすめです。

フロントエンド

最初に、フロントエンド開発に必要なスキルセットを紹介します。ブラウザ上で簡単に挙動が確認できるので、まずはフロントエンドから入ると理解が進みやすいです。

HTML + CSS

文章や画像など、Webページの見た目を記述するための言語がHTML、そのレイアウトを制御するのがCSSです。

Webエンジニアリングにおいて一番基礎の部分であり、初心者の方でも学校の授業等で触れたことがあるかもしれません。

新HTML入門

WE05-CSS入門

JavaScript

Webサイトには、ユーザがただ読んだり見たりするための静的なコンテンツだけではなく、アンケートやファイルアップロードなどユーザが操作するコンテンツもありますね。

このようなコンテンツではユーザの操作に応じた動的な処理が必要で、これを記述するための言語がJavaScriptです。

実に世界の95%以上のWebサイトでJavaScriptが使用されており、初めて学ぶのに適しています。

WE09-JavaScript入門

Bootstrap

HTML、CSS、JavaScriptはいずれもプログラミング言語ですが、自分でデザインも実装も行うとなると手間がかかります。

Bootstrapは、表示先のウィンドウサイズに合わせてレイアウトを動的に変化させるレスポンシブデザインなど、定番のレイアウトを簡単に実装するためのCSSフレームワークです。

これを覚えればデザイン性の高いサイトをサクサクと作れるようになります。

WE08-Bootstrap4 入門

サーバーサイド

フロントエンドを一通り理解したら、サーバーサイドの技術を身に付けましょう。サーバー環境を構築し、実際に動かしながら学んでいくのが良いでしょう。

SQL

一定以上の規模であれば、データベースを使わないWebサイトはほとんどないと言っても過言ではありません。例えばECサイトならば顧客情報や商品情報を管理するのに必要です。

SQLはデータベースを操作するためのプログラミング言語で、こちらも習得することを推奨します。

後述するスクリプト言語のフレームワーク等ではActiveRecordという仕組みが導入されており、オブジェクト（アプリケーション内の実体）とデータベースをスムーズに繋ぐORM（Object-Relational Mapping）が可能です。

この機能を用いればSQLを意識することなくデータベースを扱うことはできますが、不具合が発生した際のデバッグやパフォーマンスを上げるためのチューニングはSQLを知らなければ難しいでしょう。

SQ01-SQL入門

Ruby

サーバー側の処理を記述するためのスクリプト言語にはPerl、PHP、Python、Java等様々なものがありますが、中でもおすすめしたいのがRubyです。

日本人のまつもとゆきひろ氏が開発された言語ということもあり、日本語のドキュメントが充実していて人気が高く、後述する通り便利なフレームワークもあるため初心者の学習に適しているといえます。

RB01-新・Ruby入門

Ruby on Rails

Rubyでの開発を簡素化するために、よく使われる機能等をまとめて使いやすくしたフレームワークがRuby on Railsです。

これを使うとコード量が少なく開発スピードが上がるため、実際の開発現場では必ずといっていいほど導入されています。

RR01-新・Ruby on Rails入門

サーバー構築技術(１)heroku

サーバーの構築や運用についても学ぶ必要があります。サーバー用の機器を購入して自宅で構築する方法もありますが、手軽に始められるPaaS(Platform as a Service)を活用するのが良いでしょう。

herokuではハードウェアの準備やOSのインストール等を行わず、アプリケーションのデプロイに集中できるので習得スピードを早められます。

heroku

サーバー構築技術(2)AWS

もう一つのおすすめはAmazon社が提供するAWSです。導入している企業が多いため、習得しておくと良いでしょう。

認定試験もあるので、転職活動を有利に進めるために取得を目指すのも良いかもしれません。

Amazon Web Service

開発基本ツール

開発に欠かせない基本ツールの使い方も習得する必要があります。Webエンジニアに限らず全てのエンジニアに必須のスキルです。

Git/GitHub

Gitはソースコードのバージョン管理システムです。

開発を進めていくとコード量が膨大になり複雑になってきますよね。

後から不具合が起きた場合の対応のため、どのバージョン以降から発生したのかを確認・修正したり、別の機能を派生的に追加したりする目的でソースコードを管理する必要があります。

ローカル環境で使用するバージョン管理システムとしては、SubversionやCVSといったものも有名ですが、より便利なGitが現在の主流です。

また、Gitのクラウド版であるGitHubは数千万人規模のユーザが利用しており、ソースコードの公開やそれを通した交流の場となっています。

WE16-Git / GitHub入門

Linux

サーバー環境はLinux上に構築されることが多いため、基本的なLinux操作方法について学ぶ必要があります。

まずは重要なコマンドを覚えることから始めると良いでしょう。

LS01-はじめてのLinuxサーバ（ローカル環境編）

まとめ

Webエンジニアになるために必要なスキルセットについてご紹介しました。初心者の方におすすめの講座情報も掲載していますので、ぜひチェックしてみてください。

学習方針確認のお助けになれば幸いです。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

【GitHub】push declined due to email privacy restrictions と表示されてpushできない

2018-09-14 By プログラミング入門ナビ編集部

GitHubに”push declined due to email privacy restrictions”のエラーが表示され、pushできないときの解決方法についてプログラミング入門者向けに説明します。

この記事は、オンラインプログラミング学習講座「Web開発入門完全攻略コース」サポート記事です。

エラーメッセージ

$ git push -u origin master
Counting objects: 29, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (27/27), done.
Writing objects: 100% (29/29), 5.47 KiB, done.
Total 29 (delta 2), reused 0 (delta 0)
remote: Resolving deltas: 100% (2/2), done.
remote: error: GH007: Your push would publish a private email address.
remote: You can make your email public or disable this protection by visiting:
remote: http://github.com/settings/emails
To git@github.com:your_user_name/example.git

原因

eメールアドレスを非公開としている（GitHubのパブリックリポジトリにプッシュするする時に、e-mailアドレスが公開されないようにするため）
クライアント側において、git config のuser.emailに、GitHubが指定しているアドレスを設定していない。

解決手順

1) git config で、user.emailに、GitHubが指定しているアドレスを設定を設定する。

$ git config --global ID+username@users.noreply.github.com

※ “ID+username”の部分は、GitHubの管理画面から取得する
GitHub > Personal settings > Emails > Primary email address

2) CommitのAuthorをリセットする

$ git commit --amend --reset-author

おわりに

この記事では、GitHubに”push declined due to email privacy restrictions”のエラーが表示され、pushできないときの解決方法について説明しました。

Udemyでオンライン講座を公開中！

オンライン講座「Web開発入門完全攻略コース」では、Gitの使い方を始めとした、プログラミング入門について動画を使って学習できます。
無料プレビューを1時間分用意しています。ぜひご確認ください！

参照サイト

Private emails, now more private – GitHub

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

GitHub Flowのルールとワークフローについて

2018-06-21 By プログラミング入門ナビ編集部

Gitのワークフローの1つであるGitHub Flow（ギットハブフロー）について、プログラミング入門者向けに説明いたします。

この記事は、オンラインプログラミング学習講座「Web開発入門完全攻略コース」サポート記事です。

GitHub Flowとは

GitHubを運営しているGitHub社が社内で実践、Gitのワークフローです。
GitHub共同創業者のスコット・チャコン氏が、ブログで公開しました。

GitHub Flow ルールとワークフロー

シンプルで使いやすいGitHub Flow　について学習します。

ルール

GitHub社が行っているGitHub Flowのルール概要について説明します。

マスターブランチは即座にデプロイ可能な状態を保つ
ブランチ上で必ず作業し、その生存期間をできるだけ短くすること
（変更したら、）すぐにプルリクエスト（PR）を作り、フィードバックや承認を求める
マージしたらすぐにデプロイをすること。

デプロイとは、ソースコードをサーバに配置して、稼働させることです。
プルリクエスト（PR）とは、変更したソースコードを、取り込んでもらえるようにリクエストするための機能です。
プルリクエストは、プルリクと略されることもあります。

ワークフロー

ワークフローについて説明致します。

なにをすべきかを決める。
masterブランチから説明的な名前のブランチを作成する
ブランチをgit pushして、コードをチームメンバーにシェア
PR作成
コードを書く & コードの修正　（議論しながら）
テスト
マスターブランチを、デプロイするPRブランチにマージ
テスト環境にデプロイ
テスト
本番環境にデプロイ
様子を見る
PRブランチを、マスターにマージ

補足

PRの変更は小さくすることが重要で、5-10行の変更でどんどんリリースすることが重要。
自動化を進めることが他殺
日本の開発現場だと、PRブランチをマスターにマージしてから、マスターブランチをデプロイする。ということが多いです。これはどちらが良いとか悪いと決めることがしませんが、GitHub社が行っているワークフローとは違うという点に留意してください。

おわりに

この記事では、プログラミング入門者向けにGitHub Flowの概要を説明いたしました。

オンライン講座「Web開発入門完全攻略コース」では、GitとGitHubの使い方について動画をつかって丁寧に説明しています。
無料プレビューを用意しています。ぜひご利用ください！

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Git（ギット）入門イントロダクション-プログラミング入門者向けに説明します。

2018-06-20 By プログラミング入門ナビ編集部

Git（ギット）とは何かプログラミング入門者向けに説明いたします。

この記事は、オンラインプログラミング学習講座「Web開発入門完全攻略コース」サポート記事です。

Git(ギット)とは

ソースコードのバージョン管理をするための仕組みの一つです。
OS Linuxのソースコードを管理するために開発されました
現在、ソースコード管理はGitが第1選択肢となっているため、Webエンジニアなら使えて当然とされる技術です。

Git入門を動画で学習する

ソースコードのバージョン管理を行わないときのデメリット

どのファイルにどのような変更が行われているか、ファイルの中身を確認しないとわかりません、
基本的には同じファイルを同時に編集できません。
意図しない上書きで、編集内容が消えてしまうこともあります。
ファイル名を日付で管理するといった経験はありませんか？

ソースコードのバージョン管理を行うメリット

ソースコードの変更履歴を残して、誰がいつ、どのファイルのどの場所を編集したか簡単に管理できる。

Gitの特徴

最近はGitが特に普及が進んでいる。（バージョン管理システムはGitの他にもSubversionやMercurialなどいくつかある）
ローカルリポジトリと、リモートリポジトリをもつ
分散型

リポジトリとは

ファイルを管理するデータベースをリポジトリと呼びます。

ローカルリポジトリとリモートリポジトリ

ローカルリポジトリとは

各開発担当者それぞれががローカル環境に保持するリポジトリ

リモートリポジトリとは

すべての開発担当者で変更内容を共有する

分散型とは

このように開発者Aと開発者Bそれぞれで、ローカルリポジトリをもっています。各開発担当者はローカルリポジトリへ変更内容を登録します。
これをcommitといいます。
サーバー上にあるリモートリポジトリへ変更を内容を送信します。これをpushといいます。

リモートリポジトリ他の開発担当者の変更内容を取得したいときは、サーバー上にあるリモートリポジトリを受信します、これをpullといいます。

基本的な操作の流れと用語

流れ

各開発担当者は、ローカルリポジトリへ変更内容を登録（commit）
ローカルリポジトリの編集内容を他の開発担当者に共有したい時は、サーバ上にあるリモートリポジトリへ変更内容を送信(push)
リモートリポジトリにある他の開発担当者の変更内容を取得したい時はサーバ上にあるリモートリポジトリの変更内容を受信（pull）

用語

ワーキングツリーとは・・・最新のファイルの状態
ステージとは・・・コミットするためのファイルの状態
ローカルリポジトリ・・・ファイルの変更履歴を手元で管理
リモートリポジトリ・・・ファイルの変更履歴をPJメンバー全員で管理

※ add , commit, pushはコマンドを指しています。

add：「ワーキングツリー →ステージ（インデックス）」への反映
commit：「ステージ → ローカルリポジトリ」への反映
push：「ローカルリポジトリ → リモートリポジトリ」への反映

リモートリポジトリ GitHub

転職などで開発プロジェクトに入った時に、一番使う可能性が高いサービスはGitHub（ギットハブ）です。

GitHubには無料版と有料版があります。
無料版ではPublicリポジトリというインターネットに一般公開されるリポジトリが使えます。
有料版では、Publicリポジトリに加えてPrivateリポジトリという、許可された人しかアクセスできないリポジトリが利用できます。
Git操作の練習をするだけであれば、無料版でも良いでしょう。

GitHub以外には、BitBucketやBacklogといったサービスがあります。

リモートリポジトリは、自分で運用できる？

リモートリポジトリは自分で構築・運用することも可能です。
しかしながら、運用コスト（人件費、サーバ代）が掛かるので、何かしらの事情がなければ、GitHubのようなホスティングサービスを利用するのが一般的です。
「何かしらの事情」というのは、たとえば国家機密を取り扱うようなシステム開発であったり、開発者の人数がとても多いため、自社で運営したほうがトータルではコストダウンになるといったケースが考えられます。

おわりに

この記事では、Git（ギット）入門イントロダクションとして、プログラミング入門者向けにGitの概要を説明いたしました。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する