VuePress on Dockerでブログを作る

ブログをはじめたい。
自分でサーバーを立ててみたい。
ほなWordPressか。
でもPHPを書くのはしんどい。。。

なんかないか。
VuePress？WordPressみたいなものかいな？

VuePress

WordPressみたいな名前だけど、その実は似て非なり、MarkdownファイルをWebページにしてくれる仕組みらしい。

Guide | @vuepress/theme-blog

ブログ用のプラグインもあるらしい。
とりあえずやってみる。

Docker自体は半年くらい前にDockerDesktop + WSL2で使えるようにしているので割愛。(自分用のメモなのですまん)

WSL のインストール

Docker Desktop for Mac and Windows | Docker

ディレクトリ作成＋移動

$ mkdir vuepress-tutorial
$ cd vuepress-tutorial

Dockerfile, docker-compose.ymlなどを作成

ディレクトリ構造

vuepress-tutorial
├── blog
├── docker
│   └── Dockerfile
├── docker-compose.yml
└── package.json

Dockerfile

FROM node:13.12-alpine
ENV NODE_PATH /opt/node_modules

RUN apk update && apk add git

WORKDIR /workspace
ADD .yarnrc /workspace/.yarnrc
ADD package.json /workspace/package.json
RUN yarn install

ADD blog /workspace/blog
CMD ["yarn", "build"]

docker-compose.yml

version: '3.8'

services:
 blog:
   build:
     context: .
     dockerfile: docker/Dockerfile
   container_name: vuepress-blog
   tty: true
   ports:
     - "8080:8080"
     - "9229:9229"
   volumes:
     - ".:/workspace"
   command: yarn dev

package.json 空でいいです。

{}

.yarnrc

--modules-folder /opt/node_modules

コンテナをビルドする

$ docker-compose build

VuePressが用意しているひな形を自動生成する

$ docker-compose run --rm blog yarn create vuepress

docsかblogか選択する場面でblogを選択する(十字キー＋Enterキーで選択)
その他の質問（名前など）はEnterですっとばしてもOK。

create vuepress後のディレクトリ構造

vuepress-tutorial
├── blog
│   ├── _posts
│   |   ├── 2018-11-7-frontmatter-in-vuepress-2.md
│   |   ├── 2018-11-7-frontmatter-in-vuepress-3.md
│   |   ├── 2018-11-7-frontmatter-in-vuepress.md
│   |   ├── 2019-2-26-markdown-slot-2.md
│   |   ├── 2019-2-26-markdown-slot-3.md
│   |   ├── 2019-2-26-markdown-slot-4.md
│   |   ├── 2019-2-26-markdown-slot.md
│   |   ├── 2019-5-6-writing-a-vuepress-theme-2.md
│   |   ├── 2019-5-6-writing-a-vuepress-theme-3.md
│   |   ├── 2019-5-6-writing-a-vuepress-theme-4.md
│   |   └── 2019-5-6-writing-a-vuepress-theme.md
│   └── .vuepress
|       ├ components
|       │   ├── Foo
|       │   │   └── Bar.vue
|       │   ├── OtherComponent.vue
|       │   └── demo-component.vue
|       ├── config.js
|       ├── enhanceApp.js
|       └── styles
|             ├── global.styl
|             ├── index.styl
|             └── palette.styl
├── docker
│   └── Dockerfile
├── docker-compose.yml
└── package.json

コンテナを立ち上げる前にpackage.jsonを少し確認。
scriptsの各スクリプトのはじめにyarnがなかったら書き足す。

{
 "name": "sample-blog",
 "version": "0.0.1",
 "description": "tutorial",
 "main": "index.js",
 "authors": {
   "name": "Dainoji",
   "email": ""
 },
 "repository": "",
 "scripts": {
 # --ここ、yarnがなかったら書き足す--
   "dev": "yarn vuepress dev blog",
   "build": "yarn vuepress build blog"
 },
 "license": "MIT",
 "devDependencies": {
   "vuepress": "^1.3.1",
   "@vuepress/theme-blog": "^2.1.0"
 }
}

コンテナを立ち上げる

$ docker-compose up -d

http://localhost:8080

ひとまずクリア。

次はコンポーネントを書き足したりします。