要約：誰もが自分のブログを書きたいと思っていると思います。今日は、VuePressとgithub Github Pagesを使用して、独自のブログを作成する方法について説明します。これは、作成する必要のない軽量のブログです。ウェブサイトまたはドメイン名であり、重要なのは、マークダウンでの書き込みをサポートすることです。書き込みの好感度が大幅に向上します。この記事は、最初に公開アカウントで公開されました。
漫步coding
ブログのアドレスは次のとおりです。
- ブログアドレス：easyhappy.github.io/travel-codi…
- コードアドレス：github.com/easyhappy/t…
それを開いて効果を確認できます。
VuePress
言うまでもなく、VuePressはVueをベースにした静的なWebサイトジェネレーターであり、シンプルなスタイルと比較的シンプルな構成を備えています。VitePressを使用しない理由は、既存のテーマを使用したいため、VitePressは現在のVuePressエコシステムと互換性がないためです。VuePress@ nextを選択しない理由は、まだベータ段階であることを考慮してください。移行を開始する前に安定します。
インストールプロセス
現在使用しているノードのバージョンはv16.14.2です。インストールする前に、自分のノードのバージョンを確認する必要があります。低すぎると、インストールできない場合があります。
VuePressの公式ウェブサイトチュートリアルもご覧いただけます：v2.vuepress.vuejs.org/guide/getti…
1.プロジェクトを作成します
mkdir vuepress-starter
cd vuepress-starter
复制代码2.プロジェクトを初期化します
git init
yarn init
复制代码3.VuePressをインストールします
yarn add -D vuepress
复制代码4.次のスクリプトをpackage.jsonに追加します
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
复制代码5.最初のファイルを作成します
mkdir docs
echo '# Hello VuePress' > docs/README.md
复制代码6.次のコマンドを実行して、ローカルサーバーを起動します
yarn docs:dev
复制代码このとき、http：// localhost：8080 /にアクセスします。次のインターフェースが表示された場合は、ブログを作成したことを意味します。
7.基本構成
docsディレクトリの下に.vuepressディレクトリを作成します。このディレクトリには、すべてのVuePress関連ファイルが配置されます。
注文
mkdir docs/.vuepress
touch docs/.vuepress/config.js
复制代码この時点で、プロジェクト構造は次のようになります。
.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
└─ package.json
复制代码6. config.jsを.vuepressフォルダーに追加して、SEOを容易にするためにWebサイトのタイトルと説明を構成します。
cat > docs/.vuepress/config.js
复制代码module.exports = {
title: '漫步coding的博客',
description: '公众号: 漫步coding, 欢迎大家关注， 一个聚焦于算法、数据库、架构的公众号'
}
复制代码この時点で、Webサイトのタイトルが次のようになっていることがわかります。Blogof Strolling Coding
7.ナビゲーションバーを追加します
ここで、ページヘッダーの右上隅にナビゲーションバーを追加し、config.jsを変更します。
module.exports = {
title: '漫步coding的博客',
description: '公众号: 漫步coding, 欢迎大家关注， 一个聚焦于算法、数据库、架构的公众号',
themeConfig: {
nav: [
{ text: '首页', link: '/' },
{
text: '漫步coding 博客',
items: [
{ text: 'Github', link: 'https://github.com/easyhappy/travel-coding' },
{ text: '公众号', link: 'https://mp.weixin.qq.com/s/Npkk0oHEszZrUP2yRiTaSA' }
]
}
]
}
}
复制代码操作効果は以下のとおりです。
8.左側のサイドバーを追加します
ここで、いくつかのmdドキュメントを追加します。現在のドキュメントディレクトリは次のとおりです。
次のコマンドを実行します
コマンド1：
mkdir docs/about
cat > docs/about/brief.md
Hello 大家好，我是公众号: 漫步coding 的作者, 很高兴我们能在这里相聚。可以关注公众号, 一起交流。
复制代码コマンド2：
mkdir docs/mysql
cat > docs/mysql/brief
一般来讲在面试当中， 关于数据库相关的面试题频率出现比较高的几个关键词是SQL优化、索引、存储引擎、事务、死锁、乐观锁、悲观锁、关系型数据库和非关系数据库对比等等。 把这几个点问完基本也差不多10~20分钟了(一般一轮面试1小时左右), 基本这些可以让面试官对你的数据库知识有一定的了解了。
如果你线上运维经验, 一般也会问一些比如数据库扩容, 如何给大表加索引, 如何在业务高峰是给一个大表添加字段等。
复制代码現在のドキュメントディレクトリは次のとおりです。
.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
| └─ mysql
| └─ brief.md
| └─ about
| └─ brief.md
|
└─ package.json
复制代码8. docs / .vuepressconfig.jsサイドバーモジュールを設定し、左側のナビゲーションバーを追加して、次のように設定を完了します。
module.exports = {
title: '漫步coding的博客',
description: '公众号: 漫步coding, 欢迎大家关注， 一个聚焦于算法、数据库、架构的公众号',
themeConfig: {
nav: [
{ text: '首页', link: '/' },
{
text: '漫步coding 博客',
items: [
{ text: 'Github', link: 'https://github.com/easyhappy/travel-coding' },
{ text: '公众号', link: 'https://mp.weixin.qq.com/s/Npkk0oHEszZrUP2yRiTaSA' }
]
}
],
sidebar: [
{
title: 'mysql',
path: '/',
collapsable: false, // 不折叠
children: [
{ title: "前言", path: "/mysql/brief"},
]
},
{
title: '关于我',
path: '/',
collapsable: false, // 不折叠
children: [
{ title: "公众号", path: "/about/brief"},
]
}
]
}
}
复制代码効果図は次のとおりです。
9.ブログのテーマを設定します
yarn add vuepress-theme-reco
复制代码次のコードをconfig.jsに入れます
module.exports = {
// ...
theme: 'reco'
// ...
}
复制代码表示モードは自分で設定できます。
9.この時点で、VuePressの構築は基本的に完了しており、以下はブログをGithubPageに公開することです。Githubに新しいリポジトリを作成します。ここで、リポジトリ名を取得しました：travel-coding。
module.exports = {
// 路径名为 "/<您建的REPO名字>/"
base: '/travel-coding/',
//...
}
复制代码10.次のファイルまたはディレクトリを.gitignoreファイルに追加します。
echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore
复制代码11.次に、プロジェクトvuepress-starterディレクトリにスクリプトファイルを作成します：deploy.sh、対応するユーザー名とウェアハウス名を変更することに注意してください：
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run docs:build
# 进入生成的文件夹
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'
### imporant 注意替换 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f [email protected]:easyhappy/travel-coding.git master:gh-pages
cd -
复制代码12.コマンドを実行すると、コンパイルされたブログファイルがgithubプロジェクトのgh-pagesにプッシュされます
sh deploy.sh
复制代码13.プロジェクトの[設定]->[ページ]で対応するブログアドレスを確認できます。または、ルートディレクトリとカスタムドメイン名を自分で設定することもできます
私が最終的に生成したブログアドレス：easyhappy.github.io/travel-codi…コード
アドレス：github.com/easyhappy/t…
これまでに、VuePressとGithubPagesのデプロイは完了しました。
一緒にコーディングを歩き、楽しんでみましょう。