デザインコース編集について

デザインコースの編集には２種類の方法があります。

• githubから直接編集する方法
• ターミナルでgatsbyを立ち上げて編集する方法

ターミナルやgitを使ったことがない方は前者を選択してください。

仕組み

• ページ一覧のフォルダの中身がそれぞれページの１個1個になっている
• markdown記法で書くこと

このページを例に説明します

• title -> ページのタイトル
• index -> 課題が表示される順番
• date -> 西暦を入力
• あとの部分は全て課題の本文として表示されます

githubから直接編集する方法

今あるページを編集したい時

1. ページ一覧から対象のページを選択し、の右上のペンボタンをクリックする
2. 上の例を崩さないように注意して、編集する
3. 画像を使いたい場合は該当の章のimgフォルダを別タブで開き、右上のAdd file、Upload filesからアップロードし、緑色のボタンCommit Changesを押す(画像URLは./img/画像ファイル名で表示される)
4. 編集が完了したら、Previewタブに切り替えて表示に問題がないか確認する
5. 緑色のボタンCommit Changesを押す
6. しばらく(数分~10分程度)したらデザインコースのサイトに反映される

新しくページを作成したい時

1. このページの右上のペンボタンをクリックし、中のコードを全てコピーする
2. ページ一覧から課題のカテゴリーにあったものをクリックする
3. 右上のAdd fileからCreate new fileを選択し、先ほどコピーした内容をペーストする
4. title,index,dateを上の例を真似て変更する
5. 本文を書く
6. 画像を使いたい場合は該当の章のimgフォルダを開き、の右上Add fileからUpload filesからアップロードし、緑色のボタンCommit Changesを押す(画像URLは./img/画像ファイル名で表示される)
7. 完成したら、緑色のボタンCommit Changesを押す
8. しばらく(数分~10分程度)したらデザインコースのサイトに反映される

ターミナルでgatsbyを立ち上げて編集する方法

Githubからクローンする

git clone https://github.com/shinonome-inc/design-basic.git

npmパッケージのインストール

npm install
npm install -g gatsby-cli

教材を編集する

ローカルで開発サーバーが起動する。

gatsby develop