スキル

2021-04-05

2021-03-14

VuePressでブログ公開までのロードマップ

目次

今回はVuePressでブログを解説したい方に向けて

ブログ公開ロードマップを公開します！！

参考にしつつ、ブログを自作してみてください。

全体イメージ

環境はこんな感じ

使用するサービス

主に以下の3サービスを使用します。

1. GitHub (opens new window)：コード管理
2. Netlify (opens new window)：静的サイトホスティング
3. お名前.com (opens new window)：ドメイン取得

※GitHubは既に登録してある前提で書いてます。

VuePress

VuePress自体のインストールなどは省略しています。

VuePressの構成

当サイトの構成は以下です。

src
├─ ._posts　　　　　　　    各記事 Markdown
│  └─ category
│     └─ page.md          
└─ .vuepress
   ├─ components           記事用コンポーネント vue
   │  └─ Component.vue    
   ├─ public
   │  └─ img.jpg
   ├─ theme
   │  ├─ components　　　　 コンポーネント vue
   │  │  └─ Component.vue 
   │  ├─ layouts　　　　　  コンポーネント vue
   │  │  └─ Layout.vue    
   │  └─ styles
   │     └─ style.styl
   ├─ config.js　　　　　　vuepress設定 js
   └─ enhanceApp.js       vueのプラグイン js

VuePress自体の設定は主にconfig.jsとtheme以下を設定します。

詳細は以下の記事に書いてあります。
VuePress/blogをカスタマイズしてブログを自作｜構成編

記事の書き方

VuePressはMarkdown形式で記事を作成できます。

原則、Markdownのお作法通りに書けば大丈夫ですが
VuePress専用の記法があります。

Markdownファイルの中にvueコンポーネントを導入できます。
vueファイル内と全く同じで以下のように記述すればOKです。

<Component名 />

独自デザインを作成した場合は、名前付きスロットを利用します。

::: 表示タイプ タイトル名
中はMarkdown形式で記述出来ます。
::: 

index.jsとcssをタイトル名で設定すれば独自デザインが表示されます。

詳細は以下の記事に書いてあります。
VuePressをカスタマイズしてブログを自作｜Markdown編

画像

画像系は以下の構成で配置しています。

src
└─ .vuepress
   ├─ public
   │  ├─ resources
   │  │  └─ category
   │  │     └─ page
   │  │        └─ img.jpg
   │  ├─ top.jpg
   │  ├─ favicon.ico
   │  ├─ favicon.png
   │  └─ robots.txt
   └─ config.js

記事系は記事のディレクトリ構成と同じように。

共通系はpublic直下に配置しています。

サイトマップ

サイトマップはvuepress-plugin-sitemap (opens new window)のプラグインを使用しています。

src
└─ .vuepress
   ├─ public
   │  └─ robots.txt
   └─ config.js

robots.txtはpublic直下に配置する必要があるので注意です。

画像系とサイトマップの詳細は以下の記事に書いてあります。
VuePressをカスタマイズしてブログを自作｜画像系・サイトマップ編

サイト公開まで

記事を書いたらいよいよ公開です。

冒頭で書いた通り、GitHub＆Netlifyで公開します。

ここからは細かい話も入って来るので以下の記事で見ることをおすすめします。
お名前.comで申請した独自ドメインをNetlifyで設定
さらっと確認したい方はこのままスクロールしてください！

Netlify

GitHubにコードをアップロード後、Netlify (opens new window)にログインします。

ログイン後、リポジトリを選択してビルドすると公開されます。

2段階認証等は以下の記事に書いてあります。
VuePress-GitHub-Netlifyで環境構築

独自ドメインを取得

まずはお名前.comでドメイン取得します。

お名前.com (opens new window)にアクセスしたら取得したいドメイン名を入力しましょう。

サーバーは既に作成済みなので、利用しないを選択。

Netlifyの設定

overview画面に遷移すると、前回デプロイ設定した情報が表示されるので
Domain settingsをクリックしてください

諸々進めていくとName serversと表示され、hogehoge.netが4つ表示されます

お名前.comで連携

お名前.comにログインしたらネームサーバーの変更をクリックします。

Netlifyからhogehoge.netをコピペしてください。

あとは取得した独自ドメインに遷移して、表示されれば完了です！！

まとめ

以上で当サイトを作成した際の、VuePressでブログ作成を紹介しました。

当サイトは他にもデザイン系の話もしているので、ブログデザインで困ったりしたら
見ていただけると幸いです！

facebook feedly

tweet

スキル

VuePress Netlify

2021-03-14

同カテゴリの最新記事

Vue.js入門！エンジニアが解説するv-if、v-for

Vue.js入門！エンジニアが解説するv-bind基礎

vue.js入門！エンジニアが解説するcomponent基礎