自作ブログの制作
よくあるような自作ブログの例としては、こんな感じです
実際にこの実践的プログラミングで制作するのは一番上のようなサイトです(静的サイトとして誰でも見られる形になっている状態)
今回の授業では、自作ブログの制作手順を追っていくようにして制作の流れを説明します
全ての手順を細かく説明したりするのは次回以降の授業で行うので、こうするものなんだな〜って感じで聞いてもらって大丈夫です🙆♂️
(どんな操作、知識が必要なのかという雰囲気をつかむだけでOK)
どうやっているか？
- Gitをインストール
- GitHubでリポジトリを作成してクローン
- HTMLファイル、CSSファイルを用意
- GitHubのリポジトリにプッシュ
- GitHub Pagesで公開
それぞれの手順を見ていきます
Gitをインストール
Gitはソースコードなどのバージョン管理ツールです
GitHubでリポジトリを作成してクローン
GitHub,リポジトリ,クローンという謎の単語を急に出しましたが、それぞれの意味はこんな感じです
- GitHub
- github.comのこと
- コードを置いて公開したりするサイト
- リポジトリ
- GitHubリポジトリと呼ばれる、コードを管理する単位のこと
- クローン
- GitHubリポジトリをローカル環境(自分のPC)に持ってくること
- 具体的には
git cloneというコマンドのことを指してる
HTMLファイル、CSSファイルを用意
エディタ(VSCodeなど)でHTMLファイル、CSSファイルをそれぞれ書きます
ここで、ブログの見た目とか動き方とかを作っていきます
GitHubのリポジトリにプッシュ
プッシュという謎の単語を急に出しましたが、意味はこんな感じです
- プッシュ
- 作業内容をアップロードする
- (リモートリポジトリにローカルリポジトリの状態を更新すること)
- 具体的には
git pushというコマンドを指してる
- 作業内容をアップロードする
GitHub Pagesで公開
GitHub Pagesというサービスがあるので、これを使ってサイトを公開します
実際には、リポジトリの設定をいじるだけです
おさらい
ざっくりとおさらいをすると、以下のようなものが登場しました
- Git
- GitHub
- エディタ
- HTML
- CSS
- GitHub Pages
これらを一回の授業で全て行うのは時間的に厳しいので、まず今回はエディタについて紹介していきます