手把手教你使用 VuePress 搭建个人博客

时间：2021-09-30|栏目：其它CMS|点击：次 |我要投稿

一、为什么你需要一个博客？

优秀的程序员都在写博客，写博客有很多好处：

帮助自己梳理、总结、理解知识点（个人提升）
帮助别人理解知识点（好人一生平安）
简历更好看，更多面试机会（升职加薪）

二、什么是 VuePress，为什么要使用 VuePress ？

VuePress 是尤雨溪（vue.js 框架作者）4月12日发布的一个全新的基于 vue 的静态网站生成器，实际上就是一个 vue 的 spa 应用，内置 webpack，可以用来写文档。详见 VuePress中文网

其实类似的建站工具有很多，比如 WordPress、Jekyll、Hexo 等，其中 WordPress 需要自己购买虚拟主机，不考虑；Jekyll 是 Github-Page 默认支持的，听说操作比较复杂，没有用过不做过多评价了；Hexo 之前一直在用，但一直觉得主题不好看，风格不够简洁优雅。自从遇见 VuePress，嗯，就是它了~

VuePress 有很多优点：

界面简洁优雅（个人感觉比 HEXO 好看）
容易上手（半小时能搭好整个项目）
更好的兼容、扩展 Markdown 语法
响应式布局，PC端、手机端
Google Analytics 集成
支持 PWA

三、开始搭建

创建项目文件夹

可以右键手动新建，也可以使用 mkdir 命令新建：

mkdir vuepressBlogDemo

全局安装 VuePress

npm install -g vuepress

进入 vuepressBlogDemo 文件夹，初始化项目

使用 npm init 或 npm init -y（默认yes）

npm init -y

创建文件夹和文件

在 vuepressBlogDemo 文件夹中创建 docs 文件夹，在 docs 中创建 .vuepress 文件夹，在.vuepress中创建 public 文件夹和 config.js 文件，最终项目结构如下所示：

vuepressBlogDemo
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json

在 config.js 文件中配置网站标题、描述、主题等信息

module.exports = {
  title: 'Chen\'s blog',
  description: '我的个人网站',
  head: [ // 注入到当前页面的 HTML <head> 中的标签
    ['link', { rel: 'icon', href: '/logo.jpg' }], // 增加一个自定义的 favicon(网页标签的图标)
  ],
  base: '/', // 这是部署到github相关的配置
  markdown: {
    lineNumbers: false // 代码块显示行号
  },
  themeConfig: {
    nav:[ // 导航栏配置
      {text: '前端基础', link: '/accumulate/' },
      {text: '算法题库', link: '/algorithm/'},
      {text: '微博', link: 'https://baidu.com'}      
    ],
    sidebar: 'auto', // 侧边栏配置
    sidebarDepth: 2, // 侧边栏显示2级
  }
};

在 package.json 文件里添加两个启动命令

"scripts": {
  "dev": "vuepress dev docs",
  "build": "vuepress build docs"
}

一切就绪跑起来看看吧

npm run dev

四、一些小亮点

完成了基础搭建后，就可以在docs目录下新建 .md 文件写文章了（.md 是 Markdown 语法文件，你需要知道 Markdown 的一些基本写法，很简单，这里给大家一份 Markdown 语法整理大集合）

下面给大家安利一些实用的方法。

代码块高亮

在 .md 文件中书写代码时，可在 ``` 后增加 js、html、json等格式类型，代码块即可按照指定类型高亮

自定义容器

代码：

::: tip 提示
this is a tip
:::

::: warning 注意
this is a tip
:::

::: danger 警告
this is a tip
:::

效果：

支持Emoji

代码：

:tada: :100: :bamboo: :gift_heart: :fire:

效果：

这里有一份 Emoji 大全

支持 PWA

VuePress 默认支持 PWA，配置方法如下：

config.js 文件中增加

head: [ // 注入到当前页面的 HTML <head> 中的标签
  ['link', { rel: 'manifest', href: '/photo.jpg' }],
  ['link', { rel: 'apple-touch-icon', href: '/photo.jpg' }],
],
serviceWorker: true // 是否开启 PWA

public 文件夹下新建 manifest.json 文件，添加

{
  "name": "张三",
  "short_name": "张三",
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#2196f3",
  "description": "张三的个人主页",
  "theme_color": "blue",
  "icons": [
    {
      "src": "./photo.jpg",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "related_applications": [
    {
      "platform": "web"
    },
    {
      "platform": "play",
      "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
    }
  ]
}

最后在 iPhone 的 safrai 浏览器中打开本网站，点击 +添加到主屏幕 就能在桌面看到一个像原生 App 一样的图标（感觉自己写了一个 App 有木有）

(资源库 www.zyku.net)

原文链接：https://segmentfault.com/a/1190000017207205

VuePress 个人博客

上一篇：UCMS按照ID从大到小排序

栏目：其它CMS

下一篇：SSCMS恢复数据库报错指定的转换无效。(SqlManagerUI)

本文标题：手把手教你使用 VuePress 搭建个人博客

本文地址：https://www.zyku.net/qtcms/3913.html

更多互联网推荐教程

其它CMS

手把手教你使用 VuePress 搭建个人博客

一、为什么你需要一个博客？

二、什么是 VuePress，为什么要使用 VuePress ？

三、开始搭建

创建项目文件夹

全局安装 VuePress

进入 vuepressBlogDemo 文件夹，初始化项目

创建文件夹和文件

在 config.js 文件中配置网站标题、描述、主题等信息

在 package.json 文件里添加两个启动命令

一切就绪跑起来看看吧

四、一些小亮点

代码块高亮

自定义容器

支持Emoji

支持 PWA

您可能感兴趣的文章

最近更新

阅读排行

猜你喜欢

其它CMS

手把手教你使用 VuePress 搭建个人博客

一、为什么你需要一个博客？

二、什么是 VuePress，为什么要使用 VuePress ？

三、开始搭建

创建项目文件夹

全局安装 VuePress

进入 vuepressBlogDemo 文件夹，初始化项目

创建文件夹和文件

在 config.js 文件中配置网站标题、描述、主题等信息

在 package.json 文件里添加两个启动命令

一切就绪 跑起来看看吧

四、一些小亮点

代码块高亮

自定义容器

支持Emoji

支持 PWA

您可能感兴趣的文章

最近更新

阅读排行

猜你喜欢

一切就绪跑起来看看吧