Vue2 + Nuxt.js + Semantic UI で構築された新世代の個人ブログで、サーバーサイド レンダリングをサポートします。
デモサイト: blog.kamtao.com
inis インターフェース文書: inis.cc
サーバーサイドレンダリング
モバイル端末をサポート
ダークモード、スリークモード、シャープモードをサポートします。
ページごとにコードを分割する
重要なCSSのみをロードします(ページレベル)
カスタムボトムなど
経路スムーズ切替処理
プロジェクトは inis に基づいて開発されており、関連する API には inis のサポートが必要です。
inis ブログ システムが導入されていない場合は、https://inis.cn/#/article/1 にアクセスしてください。
パゴダパネルを取り付けます
サーバーに接続できる shh ツール
やり抜く心(重要)
まず、pm2 管理ツールをインストールし、Pagoda ソフトウェア ストアからダウンロードします。 (すでにインストールされている場合は、この手順を無視してください)
サイトを追加し、自分でドメイン名をバインドします
次に、nuxt プロジェクト全体をドメイン名にバインドされたディレクトリにコピーします (このディレクトリの場所は前の手順のディレクトリです)。
次に、プロジェクト ファイル nuxt.config.js を開き、図に示すように、API アドレスをバックエンド インターフェイスのドメイン名に変更します。
SSH ツールを使用してサーバーに接続し、Web サイトのディレクトリ (cd /www/xxx など) に入り、コマンドを実行します。
# cd到网站目录(是你的项目目录)
$ cd /www/xxx
# 安装依赖(请注意 要在你的站点目录下执行,请注意node版本是14)
$ npm install 或者 cnpm install
# 构建你的项目
$ npm run build 或者 nuxt build
# 运行
$ pm2 start
# 测试一下
$ pm2 list
# 如果看到以下的样子 说明成功了
この時点で問題がなければ、成功します。次に、リバース プロキシを設定します。作成した Web サイトを見つけて、[設定] をクリックして、リバース プロキシを見つけます。具体的な設定は図に示すとおりです。
特別: 現在のポートが設定したポートと競合する場合は、ポートを変更できます (プロジェクト ファイルのルート ディレクトリにある ecosystem.config.js)。変更後は PM2 を再起動する必要があることに注意してください。 (ポートの競合がない場合は無視してください)
# 重启PM2
$ pm2 restart all
それでもアクセスできない場合は、ポートに問題がある可能性があります。 Alibaba Cloud と Tencent Cloud はセキュリティ グループをオープンにする必要があり、Pagoda のセキュリティ グループもオープンにする必要があります。
楽しめ!
インストール中および使用中に問題が発生した場合は、作成者に問題を送信してください。 QQコミュニケーショングループ:632274746
パートナーは、インターフェイス、機能、改善、バグ修正などを含むがこれらに限定されない、さまざまな形で貢献することを歓迎します。