この記事を書いた人

Node.jsからVuePressをBuildしたのをNetlifyでDeployしてGitでmaintenance可能なDocumentation環境を作りたかった

 

日本語でおk。

最近まで、Node.jsとかをつかったターミナルでのインストールという存在自体を知りませんでした。
なので、オープンソースのイケてるプロジェクトを見て、

使い方は簡単です!

npm install hogehoge

と入力すれば、あら不思議。それだけで使えるようになります。
ね?簡単でしょ?

といった具合に、スッっと一行コードが書かれているだけで、私としては

イズミ リム

なんじゃこの暗号は!
.msiをよこせ。インストールパッケージをよこせ~~~

となっていました。

ですが最近Githubにも慣れてきたし、ブロックチェーンと暗号通貨を発端に海外のすごいオープンソースリポジトリとか目にしてきて、だんだん彼らが住んでる世界が見えてきました。
結局の所、インストールさせるのにわざわざGUIでインストーラーとか用意すんのめんどいし、する側もポチポチするのめんどいからコマンドポチーで怠惰にインストールしたいということだと私は理解しました。
エンジニアは怠惰がどうのこうのというという言葉がありましたが、私も省エネ志向なので仲良くなれそうです。
なれそうなのですが、怠けたい過ぎて情報が往々にして無になりがちなので、面倒くさいにしても最初に

インストールにはNode.jsが必要です。
Node.jsとは、コマンドプロントからサーバー環境を構築したり大量のデータを捌いたりすることができるツールです。

などと一言書いておいてほしいとちょっと思いました。

 

VuePress

 

VuePress

VuePressです。
Vue.js?のやつをつかった文書マネジメントツールとでもいったらいいのか知らん。
私はこのVuePressを、ブロックチェーンプロジェクトの「Ark」が技術文書で使っていたことで知りました。

目的としては、タイトルそのままにVuePressでGitでメンテナンス可能な技術文書構築環境を作りたかった。

作りたかったのですが、、道半ばGeekの森の中で、力尽きました。
いつかまたトライします。

ちなみにタイトルが論理的か否か、分からないくらいには何も分からないでやってます。

 


 

# install globally
yarn global add vuepress # OR npm install -g vuepress

# create a markdown file
echo '# Hello VuePress' > README.md

# start writing
vuepress dev

# build
vuepress build

適当に遊ぶ場合、インストールはこういう感じだそうです。

 

このインストールですが、末尾の記号が謎だったので調べたら、npm install -gでインストールはおすすめしないとか先人に怒られました。

 

なので

 

# install as a local dependency
yarn add -D vuepress # OR npm install -D vuepress

# create a docs directory
mkdir docs
# create a markdown file
echo '# Hello VuePress' > docs/README.md

npm install -D vuepress

でしました。
-D はグローバルインストールじゃないくてローカルインストールで、package.jsonにdevDependenciesが書き込まれて超すごいらしいです。
よくわかりません。

これをコマンドプロンプトで打ち込んでEnterすると

 

わーとなってCurrentDirectory―――コマンドプロンプト上で参照していたディレクトリ(フォルダ)―――にnode_modulesdという名前のフォルダができて、そこになんかたくさんフォルダができました。
やった。すごいぞNode.js。

 

ちなみにコマンドプロンプト(ターミナル)は、windows付属のコマンドプロンプトがダサくてやだったので、「Hyper」というイケてるターミナルを入れました。

hyper

 

 

 

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

 

package.jsonのscriptを書き加える段階で詰まった。

すでにpackage.jsonに”scripts”が記述されているのを見落としていて、末尾に↑で貼ったコードを適当に貼り付けてエラー出しまくりました。
"docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs"

だけで良い。

 

yarn docs:dev # OR npm run docs:dev

これをやったら、なんか http://localhost:8080 で見れるようになった。
どうなってるんでしょうか?(分からないでやってる)

 

ディレクトリとかは公式のこれを見るとよい。

あとこちらとか。

/docs/.vuepress/config.js

module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around'
}

を書くとヘッダーにタイトルと説明がつくみたいです。

 

VuePress

 

こんな感じになりました。
すごい。

 

デザインを調整したいときは、

ここっぽい。
サイドバーとか。

 

こちらも詳しい。

 

//config.js

module.exports = {
    title: 'Raccoon',
    description: '暗号通貨ウォレット',
    themeConfig: {
    sidebar: [
      '/',
      '/page-a',
      ['/page-b', 'Explicit link text']
    ]
  }
}

結局config.jsは、こうなった。
ですが、まだまだカスタマイズ沼は深いです。

 

 

yarn docs:build # Or npm run docs:build

ビルド。
ビルドとデプロイの違いが分かるようになった気がする。

イズミ リム

ビルドとデプロイの違いが分かる美少女。

 

npm run docs:buildしたらassetsが出力されました。
これが…これがビルドなんだね。

 

でもなんかビルドに失敗します。
なぜなんでしょうか。

 

ホスティング

 

ネット・リファイ。

 Netlifyは静的なサイトを超高速で提供できるWebサービスです。

です。

なのですが、ビルドに失敗するため、一旦中断します。

おわりに

VuePressはデザインがスッキリしていて良い。
インストールからディレクトリ構築までは雰囲気で完了できましたが、その先もGeekの森が果てしなく続く感じがします。
そういえばここまでGithubが全然出てこなかったけど、VuePressはリポジトリからプルリクらで共同編集できるようになるんだろうか。
謎。

NetlifyじゃなくてGithubPage?
分からない。
いやGitのリポジトリで管理したいんだから、なんらかのリポジトリへのリンクの設定があるんだろう。
どこで?
分からない…。

 

とにかくモダンでイケてる静的(Static)なページを構築できないだろうかという手段からのゴリ押しを試してみました。
目的だけを考えると、普通にWordPress使える環境があるので、ナレッジベースのプラグインがよりどりみどりで見つかるし普通にそれを使って投稿で管理すればいいと思います。ターミナル見なくて済むし、ユーザー追加すれば共同編集できるし、多言語化もできるし。
最新の手段に萌えるのも一興ではあるのですが。

 

 

 

この記事を書いた人

イズミ リム

伊澄 理夢 / イズミ リム / IZUMI Rhime
2017年3月からブロックチェーンに興味を持って以来、デザインの面から、"NEM"を通じて技術の普及に貢献できる道を探しています。
児童文学と純文学、哲学と現代思想、仏教と禅、黒い服と民族衣装が好きなINTROVERT(内向型)です。
大学ではデザインを学ぶ。