VuePress on Dockerでブログを作る
ブログをはじめたい。
自分でサーバーを立ててみたい。
ほなWordPressか。
でもPHPを書くのはしんどい。。。
なんかないか。
VuePress?WordPressみたいなものかいな?
WordPressみたいな名前だけど、その実は似て非なり、MarkdownファイルをWebページにしてくれる仕組みらしい。
ブログ用のプラグインもあるらしい。
とりあえずやってみる。
Docker自体は半年くらい前にDockerDesktop + WSL2で使えるようにしているので割愛。(自分用のメモなのですまん)
ディレクトリ作成+移動
$ 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
ひとまずクリア。
次はコンポーネントを書き足したりします。
この記事が気に入ったらサポートをしてみませんか?