ドシロウトがCloud IDEからGitHub PagesとBitbucketに静的ウェブサイトを公開してみた

０．初めに

私はエンジニアではないただのドシロウトです。

先々PWAとかを勉強したいと思っておりhttps:を使える無料のホスティング先を探していました。

調べるとGitHub Pagesがhttps対応している事を知りました。

GitHub Pages
https://pages.github.com/

早速、HTMLファイルをアップして確認しようと思いましたがせっかくなので私の貧弱なWindows10パソコンではなく無料のCloud IDEをローカル環境にしたいと思いました。

そこで無料のCloud IDEを調査してCodenvyを見つけました。無料で３GBのコンテナが使えるようです。

PRICING & PACKAGES - Codenvy
https://codenvy.com/product/index.php#pricing

ちゃんとスクショ付で紹介している日本語サイトもありました。

Codenvy - Web上の開発&実行環境
https://bit.ly/2IlM1nh

ユーザー登録はGithubアカウントで簡単にできて、まず上記記事の通りワークスペース、プロジェクトを以下の通り作成します。

• ワークスペースは特定言語の開発環境を作る訳ではないので「Blank」を選択
• プロジェクトも同様に「Blank」を選択

この状態でGitの最新版が導入済でした。とてもお気楽。

1．GitHub Pages用の環境作成

Cloud IDEですが、特にGitHub Pagesの説明と大きく変わった部分はありませんでした。

まず説明の通りGithubでリポジトリを作りました。これは画面なので超簡単。

ここからがコマンドになるので私みたいなドシロウトには難関です。

私みたいな初心者さんもいると思いますのでコマンド入力結果を貼っておきます。Codenvy画面下側のターミナルからコマンド入力しています。

user@xxxxxxxxxxxx:/projects$ git clone https://github.com/(Githubのユーザー名)/(Githubのユーザー名).github.io
Cloning into '(Githubのユーザー名).github.io'...
warning: You appear to have cloned an empty repository.
user@xxxxxxxxxxxx:/projects$ cd (Githubのユーザー名).github.io
user@xxxxxxxxxxxx:/projects/(Githubのユーザー名).github.io$ echo "Hello World" > index.html
user@xxxxxxxxxxxx:/projects/(Githubのユーザー名).github.io$ ls -l
total 4
-rw-r--r-- 1 user user 12 May 16 04:52 index.html
user@xxxxxxxxxxxx:/projects/(Githubのユーザー名).github.io$ git add --all
user@xxxxxxxxxxxx:/projects/(Githubのユーザー名).github.io$ git commit -m "Initial commit"

*** Please tell me who you are.

Run

  git config --global user.email "[e-mail]"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

fatal: unable to auto-detect email address (got 'user@xxxxxxxxxxxx.(none)')
user@xxxxxxxxxxxx:/projects/(Githubのユーザー名).github.io$ git config --global user.email "(Githubに登録したメールアドレス)"
user@xxxxxxxxxxxx:/projects/(Githubのユーザー名).github.io$ git config --global user.name "(Githubのユーザー名)"
user@xxxxxxxxxxxx:/projects/(Githubのユーザー名).github.io$ git commit -m "Initial commit"
[master (root-commit) 8878b20] Initial commit
 1 file changed, 1 insertion(+)
 create mode 100644 index.html
user@xxxxxxxxxxxx:/projects/(Githubのユーザー名).github.io$ git push -u origin master
Username for 'https://github.com': (Githubのユーザー名)
Password for 'https://(Githubのユーザー名)@github.com':(Githubのパスワード)
Counting objects: 3, done.
Writing objects: 100% (3/3), 231 bytes | 231.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/(Githubのユーザー名)/(Githubのユーザー名).github.io
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.
user@xxxxxxxxxxxx:/projects/(Githubのユーザー名).github.io$

GitHub Pagesの説明との違いは以下でした。

• 最初にcommitしたときにメールアドレスとユーザー名をユーザー設定した
• pushするときにGithubのユーザー名、パスワードを入力した

２．実行結果

当たり前ですが写真の通りちゃんと(Githubのユーザー名).github.ioのページが表示できています。

3．まとめ

たったこれだけでドシロウトがクラウドIDEベースのコンテンツアップ環境を作れました。

PWA勉強用として使っていこうと思っています。

4．追記

GitHub Pagesにサイトを作れて喜んでいたらなんとBitbucketにも作れることを知りました。

しかもBitbucketは複数サイトが作れます。以下の記事に詳しい説明がありました。

Bitbucketで静的ウェブサイトを公開する

記事の通り、Bitbucketでチーム、リポジトリを作った後は、GitHub Pagesの手順と同じでCodenvyから静的ウェブサイトを公開をできました。

一応こちらのコマンド入力結果も貼っておきます。

user@1b36d918ee5d:/projects$ git clone https://[e-mail]/yyyyy/yyyyy.bitbucket.io.git
Cloning into 'yyyyy.bitbucket.io'...
Password for 'https://[e-mail]':
warning: You appear to have cloned an empty repository.
user@1b36d918ee5d:/projects$ cd t*
user@1b36d918ee5d:/projects/yyyyy.bitbucket.io$ echo "welcome to yyyyy.bitbucket.io" > index.html
user@1b36d918ee5d:/projects/yyyyy.bitbucket.io$ ls -l
total 4
-rw-r--r-- 1 user user 35 May 18 04:47 index.html
user@1b36d918ee5d:/projects/yyyyy.bitbucket.io$ git add --all
user@1b36d918ee5d:/projects/yyyyy.bitbucket.io$ git commit -m "Initial commit"
[master (root-commit) 795bd40] Initial commit
 1 file changed, 1 insertion(+)
 create mode 100644 index.html
user@1b36d918ee5d:/projects/yyyyy.bitbucket.io$ git push -u origin master
Password for 'https://[e-mail]':
Counting objects: 3, done.
Writing objects: 100% (3/3), 254 bytes | 254.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://bitbucket.org/yyyyy/yyyyy.bitbucket.io.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.
user@1b36d918ee5d:/projects/yyyyy.bitbucket.io$

とても簡単で便利です。こちらもhttpsなので色々試せそうですね。

以　上