Abstract: I believe that everyone wants to have a blog, a place for their own writing, today I will talk about how to use VuePress and github Github Pages to create a blog of their own, without the need to build a website or a lightweight blog with a domain name, the key is to support Writing in markdown greatly improves the favorability of writing. This article was first published on the public account:
漫步coding
The blog address is as follows:
- Blog address: easyhappy.github.io/travel-codi…
- Code address: github.com/easyhappy/t…
You can open it to see the effect:
VuePress
Needless to say, VuePress is a static website generator based on Vue, with a simple style and relatively simple configuration. The reason why I don't use VitePress is because I want to use the existing themes, and VitePress is not compatible with the current VuePress ecosystem. As for why not choose VuePress@next, considering that it is still in the Beta stage, it will be stable before starting the migration.
Installation process
The node version I am currently using is: v16.14.2, you should check your own node version before installing it. If it is too low, you may not be able to install it.
You can also watch the official website tutorial of VuePress: v2.vuepress.vuejs.org/guide/getti…
1. Create a project
mkdir vuepress-starter
cd vuepress-starter
复制代码2. Initialize the project
git init
yarn init
复制代码3. Install VuePress
yarn add -D vuepress
复制代码4. Add the following script to package.json
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
复制代码5. Create the first file
mkdir docs
echo '# Hello VuePress' > docs/README.md
复制代码6. Run the following command to start the local server
yarn docs:dev
复制代码At this time, you visit http://localhost:8080/. If the following interface appears, it means that you have built a blog.
7. Basic configuration
Create a .vuepress directory under the docs directory, where all VuePress related files will be placed.
Order
mkdir docs/.vuepress
touch docs/.vuepress/config.js
复制代码At this point your project structure might look like this:
.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
└─ package.json
复制代码6. Add config.js to the .vuepress folder to configure the title and description of the website to facilitate SEO:
cat > docs/.vuepress/config.js
复制代码module.exports = {
title: '漫步coding的博客',
description: '公众号: 漫步coding, 欢迎大家关注， 一个聚焦于算法、数据库、架构的公众号'
}
复制代码At this time, you can see that the title of the website has become: Blog of Strolling Coding
7. Add a navigation bar
We now add a navigation bar in the upper right corner of the page header and modify 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' }
]
}
]
}
}
复制代码The operation effect is as follows:
8. Add a left sidebar
Now we add some md documents, the current document directory is as follows:
run the following command
Command 1:
mkdir docs/about
cat > docs/about/brief.md
Hello 大家好，我是公众号: 漫步coding 的作者, 很高兴我们能在这里相聚。可以关注公众号, 一起交流。
复制代码Command 2:
mkdir docs/mysql
cat > docs/mysql/brief
一般来讲在面试当中， 关于数据库相关的面试题频率出现比较高的几个关键词是SQL优化、索引、存储引擎、事务、死锁、乐观锁、悲观锁、关系型数据库和非关系数据库对比等等。 把这几个点问完基本也差不多10~20分钟了(一般一轮面试1小时左右), 基本这些可以让面试官对你的数据库知识有一定的了解了。
如果你线上运维经验, 一般也会问一些比如数据库扩容, 如何给大表加索引, 如何在业务高峰是给一个大表添加字段等。
复制代码The current document directory is as follows:
.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
| └─ mysql
| └─ brief.md
| └─ about
| └─ brief.md
|
└─ package.json
复制代码8. Set the docs/.vuepressconfig.js sidebar module, add the left navigation bar, and complete the settings as follows:
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"},
]
}
]
}
}
复制代码The effect diagram is as follows:
9. Set the blog theme
yarn add vuepress-theme-reco
复制代码Put the following code in config.js
module.exports = {
// ...
theme: 'reco'
// ...
}
复制代码You can set the display mode by yourself.
9. At this point, the construction of VuePress is basically completed, and the following is to publish the blog to Github Page. We create a new repository on Github, here I got the repository name: travel-coding.
module.exports = {
// 路径名为 "/<您建的REPO名字>/"
base: '/travel-coding/',
//...
}
复制代码10. Add the following files or directories to the .gitignore file.
echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore
复制代码11. Then we create a script file in the project vuepress-starter directory: deploy.sh, pay attention to modify the corresponding user name and warehouse name:
#!/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. Running the command will push the compiled blog file to the gh-pages of the github project
sh deploy.sh
复制代码13. You can see the corresponding blog address in the project's Settings -> Pages, or you can set the root directory and custom domain name yourself
The blog address I finally generated: easyhappy.github.io/travel-codi…Code
address: github.com/easyhappy/t…
So far, we have completed the deployment of VuePress and Github Pages.
Let's walk coding together, enjoy your self.