序文
私もこのフレームワークを使うのは初めてで、勉強しながら構築していますが、その過程で色々な問題に遭遇したので、記録しておきますので、お役に立てれば幸いです。
通常の施工手順はこれ以上書きませんが、このブログに従って自分で入力しましたが、大きな問題はありませんでした。
ここでは、テーマのインストールから直接開始します。使用されるテーマはvuepress-theme-recoです。
テーマをインストールする
npm install @vuepress-reco/theme-cli -g
インストールが完了したら、プロジェクトを作成できます
theme-cli init azusaWebBlog
// 填写一些项目相关的信息
// style选的是blog的1.x版本
作成が完了したら、プロジェクト フォルダーに入り、最初に依存関係をインストールします。
npm install
ディレクトリ構造
インストール後、ディレクトリ構造は次のようになっていることがわかります。
azusaWebBlog
- .vuepress
+ public
...
+ config.js
- blogs
+ category1
...
+ category2
...
+ other
...
- docs
+ theme-reco
...
- gitignore
- node_modules
- package.json
- README.md
注意深く見てみると、ディレクトリ構造が公式のものと同じではなく、package.json 内のスタートアップ プロジェクトのスクリプトも一貫性がないことがわかります。
// package.json
// 本项目的
"scripts": {
"dev": "vuepress dev . --open --host \"localhost\"",
"build": "vuepress build ."
}
// 官方的
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
後者のパラメータは、プロジェクト起動後に自動的にブラウザから開く –open、ホストを指定する –host の方が分かりやすいです。
主な違いは、vuepress dev/build の背後にある . と docs です。
プロジェクトの構造を分析すると、プロジェクトの主な構成が config.js、つまり .vuepress ディレクトリにあることを見つけるのは難しくありません。公式ディレクトリは .vuepress と他のすべてのディレクトリを docs に配置するため、彼のスクリプトの後に docs が続きます。このテーマのディレクトリ構造はドキュメントから抽出されるため、..
ブログの記録のみに使用する予定なので、docsの機能はあまり必要ないので、このディレクトリを削除しました。
私は公式のディレクトリ構造を好むので、すべてを .blogs の下に移動し、構造は次のようになりました。
azusaWebBlog
- blogs
+ .vuepress
+ public
...
+ config.js
+ category1
...
+ category2
...
+ other
...
- gitignore
- node_modules
- package.json
- README.md
もちろん、これを次のように変更する場合は、対応するスタートアップ スクリプトとコンパイル プロジェクト スクリプトも変更する必要があります。
// package.json
"scripts": {
"blogs:dev": "vuepress dev blogs --open --host \"localhost\"",
"blogs:build": "vuepress build blogs"
}
次に、スクリプトを実行して起動します。
npm run blogs:dev
構成
ブログ情報やナビゲーションバー、サイドバーなどの設定は上記のブログにいくつか含まれていますし、参考となる公式ドキュメントもあるのでこれ以上は紹介しませんが、ここではその他をいくつか紹介します。
中国語の設定
テーマのデフォルト言語は英語ですが、中国語に変更したい場合は、自分で変更する必要があります。
// config.js
module.exports = {
...
"locales": {
'/': {
"lang": "zh-CN"
}
}
}
ホットデプロイメント
リアルタイムでは更新されないため、ドキュメントの作成時に効果を確認することができないため、自分で設定する必要があります。
"scripts": {
"blogs:dev": "vuepress dev blogs --open --host \"localhost\" --temp .temp",
"blogs:build": "vuepress build blogs"
},
起動後、.temp ディレクトリが生成されますが、git に導入したくない場合は、gitignore 上で無視してください。
配備
まずコードを github に置きましょう。
azusaWebBlog という名前のウェアハウスを Github 上に作成し、ローカルで git を初期化し、リモート ウェアハウスにリンクして、プロジェクトを送信します。
git init
git add .
git commit -m "初始化网站"
git branch -M main
git remote add origin https://github.com/underwater133/azusaWebBlog.git // 对应你自己的仓库地址
git push -u origin main
この一連のトリックの後、プロジェクトが github にアップロードされ、正式なデプロイメントが始まりました。
https://<USERNAME>.github.io/<REPO>/ に公開する予定なので、.vuepress/config.js のベースを変更する必要があります。
module.exports = {
"base": "/azusaWebBlog/", // 仓库名称
...
}
次に、プロジェクトのルート ディレクトリにdeploy.sh スクリプトを作成します。
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run blogs:build
# 进入生成的文件夹
cd blogs/.vuepress/dist
# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io
# git push -f [email protected]:<USERNAME>/<USERNAME>.github.io.git master
# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f [email protected]:underwater133/azusaWebBlog.git master:gh-pages
cd -
次に、このスクリプトを git bash で実行すれば問題ありません。
github にアクセスすると、パッケージ化されたプロジェクトが gh-pages ブランチに配置されていることがわかります。また、自分のブログ Web サイトにアクセスすることもできます。
最後に、皆さん、私のブログを訪問してください。ご質問がございましたら、お気軽にお尋ねください。
https://underwater133.github.io/azusaWebBlog/