こんにちは！みやしんです。
今回はWebページを簡単に作成できるライブラリ「MKDocs」についてご紹介します！
プライベートではWordpress使いですが、こんな便利なライブラリもあります！
PythonやAIをもっと勉強したい方🤗
MKDocsとは？
MkDocsは簡単なWebページを作成する際にコーディングプロセスを自動化してくれる便利なライブラリです。難しい言葉で言うと、静的サイトジェネレータといいます。静的とはJavaScriptなどで動きを加えたWebサイト(動的)ではなく、文章や画像のみで作成したWebサイトです。
MKDocsの特徴
・HTMLやCSSが書けなくてもWebページを作れる(細かなアレンジをしたい場合は必要)
・文章はマークダウン方式で記載
・テーマ(Webサイトデザイン)のテンプレートがあり、簡単にキレイなWebページを作れる
・デザインのアレンジは1つのyamlファイル上に簡単な記述で管理できるので簡単
・htmlファイルを出力でき、ユーザーはWebページをすぐに利用できる
MkDocsライブラリのインストール
pip install mkdocsプロジェクト作成
mkdocs_test というプロジェクトを作成。
mkdocs new mkdocs_testコマンドを打つとプロジェクト名のフォルダが出来る。
フォルダの中はこんな感じです。
カレントディレクトリをmkdocs_testフォルダに移します。
cd mkdocs_testプロジェクトをビルドする
mkdocs build上記のコマンドを実行するとsiteフォルダが生成されました。
下記のコマンドでサーバーを起動。MkDocsには組み込みの開発サーバーが付属しており、ドキュメントを作成中にプレビューできる。
mkdocs serve実行結果
ブラウザで http://127.0.0.1:8000/ を開くと、デフォルトのページが表示される。
serveを実行している間は変更を自動で検知してビルドします。
mkdocs.yml
サイトをカスタマイズしたい時は、mkdocs.ymlファイルを編集します。プロジェクトを作成したときにmkdocs.ymlが生成されています。サイトのタイトルやテーマ、拡張機能の設定などを記述します。
mkdocs.ymlファイルを開くと最初はこんな感じです。
テーマの設定
テーマとは、サイトやブログをつくるときにデザインや機能を決める「テンプレート」のことです。
readthedocsという名前のテーマを見てみましょう。
mkdocs.ymlに下記を追記します。
site_name: My Docs
theme: readthedocsすると、デザインがこんな感じに変わります。
他のテーマも試してみます。materialというテーマが人気のようです。
このテーマはpipインストールが必要です。
pip install mkdocs-materialmkdocs.ymlのthemeの部分を書き換えます。
site_name: My Docs
theme:
name: materialすると次はこのようなデザインになりました。
フォント設定
フォントを設定する場合もmkdocs.ymlに追記します。
今回はRobotoにします。使用できるフォントはgoogle fontで確認できます。
site_name: My Docs
theme:
name: material
font:
text: Roboto
変化が良く分からないけど、まいっか。
サイト名の変更
mkdocs.yml内の一番上にsite_nameがありますので、ここを修正します。
My Docs → MKDocs Test に変えます。
site_name: MKDocs Test
theme:
name: material
font:
text: Roboto
色の変更
色の変更もmkdocs.ymlを編集して変えることが出来ます。
メインカラーを「緑」に変えます。
theme:
name: material
font:
text: Roboto
palette:
primary: green
おお！キレイですね！
本文を編集
本文を編集するときは、index.mdファイルを編集します。
index.mdを開くと最初はこんな感じです。
サイト内の文章がマークダウン方式で記述されています。
簡単に書き換えてみましょう。
# Pythonを楽しもう!!
* ブログ記事はこちら！ [みやしんのプログラミングスキル通信](https://miyashinblog.com/).
## ブログ人気記事
* `PyAutoGUIでPC操作を自動化` - PythonでRPA！
* `OpenCVで特徴量マッチング` - 特徴が似ている画像を抽出
* `Python OpenCVで写真の歪み補正` - カメラをキャリブレーション
おお！mkdocs serveコマンドで起動していれば、書き換えて保存したときに自動で更新されます！
簡単ですね！
HTMLファイルに出力
index.mdファイルを編集して更新した内容を.htmlファイルに出力しましょう！
やり方は簡単で、前半に記載したビルドコマンドを入力するだけです。
mkdocs buildすると、index.htmlファイルが更新されます。
index.htmlをダブルクリックすると作成したWebページが表示されます。
簡単で便利！すごいですね！
PythonやAIをもっと勉強したい方🤗
コメント