小難しいことは考えずにまずはWebサイト作ろうぜ
最短最速でWebサイトを作ってみようの巻
初めに
想定する読者
多少コマンド使えるしWebもﾁｮｯﾄﾜｶﾙので、とりあえず新しいことやってみたい（◎
本家の英語は読みたくないけどそれ何か気になるので試してみたい（◎
こまけぇことはいいんだよ、とにかくさっさとやってみたい（〇
なんもわからんけどとにかくやってみたい（△
＊とても丁寧に解説してくれているサイトは他にもたくさんあります
準備するもの
- GitHubアカウント
- PC/Mac＋通信環境＋node,yarn
注意点
今回はDocusaurusというツールを利用します
v1系とv2系で全く異なるものなので、ググる時は注意してください
今回利用するのはv2系です
いろいろ細かい話は省略しています(沼は深い)
ゴール
Webサイト作った！見れた！(しかも無料で)
手順(ざっくり)
先に流れを頭に入れておく
- GitHubにリポジトリを作る(Publicで)
- cloneしてくる(cloneした場所を作業場所にする)
- ターミナル(コマンドプロンプト)を起動してcloneした作業場所に移動
- Docusaurusのセットアップ
- デプローイ！(バンザーイ)
- GitHubの設定変更
- 表示の確認(ゴール)
なぜGitHubなのか
それは無料だから。(安直)
リポジトリにコンテンツを置いてWebサイトとしてGitHubにホストしてもらいます
GitHubPagesというサービスを利用します
https://pages.github.com/ (参考)
出来上がったサイトのアドレスは
https://username.github.io
または
https://username.github.io/リポジトリ名
という感じになります(今回はこちらで説明)
待ってろオレのWebサイト！
GitHubにリポジトリを作成
・・・省略・・・
コマンドが使えるか確認する
node -v
バージョンが表示されればOK
yarn -v
バージョンが表示されればOK
＊できればコマンドは最新にしておきたいので事前にアップデートしておきましょう
コマンドと格闘する
とにもかくにもDocusaurusをセットアップしよう
＊下のコマンドの”my-website”の部分を自分の作るサイト名に変更して実行
この名称でフォルダが作成されます
npx @docusaurus/init@latest init my-website classic
→classicの部分はテンプレート名称となっていて、他のものにも変更できます
ここまでですでに折り返し地点！
設定ファイルを変えておこう
出来上がったフォルダ構成はこんな感じ
my-website
├── blog
│ ├── 2019-05-28-hola.md
│ ├── 2019-05-29-hello-world.md
│ └── 2020-05-30-welcome.md
├── docs
│ ├── doc1.md
│ ├── doc2.md
│ ├── doc3.md
│ └── mdx.md
├── src
│ ├── css
│ │ └── custom.css
│ └── pages
│ ├── styles.module.css
│ └── index.js
├── static
│ └── img
├── docusaurus.config.js
├── package.json
├── README.md
├── sidebars.js
└── yarn.lock
いろいろ気になってしまいますが、まずは
docusaurus.config.js
を更新します
好きなエディタで以下のキーに対して修正
organizationName : GitHubユーザー名に変更
projectName : GitHubのリポジトリ名に変更
url : GitHub Pages のURLに変更(ex. https://username.github.io/リポジトリ名)
baseUrl : /リポジトリ名/ に変更
デプロイ！(GitHubに出来上がったサイトを登録する)
<GITHUB_USERNAME>の部分をGitHubのユーザー名に変えましょう
GIT_USER=<GITHUB_USERNAME> yarn deploy
＊GitHubにgh-pagesというブランチが作成されて、出来上がったサイトが保管されています
GitHubの設定を変更する
GitHubのリポジトリページで、Settingsを選択して、Github pagesを有効にします
Branch: gh-pages
File: /(root)
を選んでSaveボタンを押す
できたサイトを確認！
https://username.github.io/リポジトリ名
おめでとうございます大成功です
Webサイト10分で作ったぜという実績とアウトプットができました
あとは煮るなり焼くなり自分のサイトとして完成度を上げていきましょう
他にできること
いろいろわかってくれば自由自在です
細かい設定を変えたりデザインを変えてみましょう
手元で動作確認してからデプロイするのがよいです
yarn start
はまりそうなところ
（そもそもnodeとかインストールできるスキルがあればつまずくとことはなさそう）
- nodeはいってなかった
- yarn入れてなかった
- git入れてなかった
- GitHub使い方わからん
- よくわからんエラーが出たどうしよう ＜ほぼこれなのでは
で、なぜDocusaurusなのか
(簡単に見えたから・・・
(そんな流行っている感じでもないけど・・
Discussion