Vuepress 搭建带评论功能的静态博客的实现

vuepress 是 Vue 驱动的静态站点生成工具

本文仅介绍，搭建静态博客的过程，具体教程及文档请点击进入 vuepress中文网

点击查看项目代码

vuepress初始化

下面初始化

# 将 github 新创建的仓库克隆到本地
git clone git@github.com:zhb333/readme-blog.git
# 进入项目
cd readme-blog
# npm 初始化, 按照提示回车
npm init
# 安装 vuepress
npm i vuepress -D
# 安装 gh-pages
npm i gh-pages -D
# 创建一个 docs 目录
mkdir docs
# 创建一个 markdown 文件
echo '# Hello VuePress' > docs/README.md

npm 脚本

然后，给 package.json 添加一些 scripts 脚本：

{
 "scripts": {
  "dev": "vuepress dev docs",
  "build": "vuepress build docs",
  "deploy": "npm run build && gh-pages -d docs/.vuepress/dist"
 }
}

运行本地开发环境

运行 vurepress 的本地开发环境

npm run dev

访问 localhost:8080 ， 已经成功开启

基础配置

生成静态资源

执行下面的命令，生成静态资源

npm run build

默认情况下，构建的文件会位于 docs/.vuepress/dist 中，该文件可以通过 docs/.vuepress/config.js 中的 dest 字段进行配置。

配置

创建 docs/.vuepress/config.js， 并进行简单配置

var config = {
 // 静态网站部署的目录
 base: '/readme-blog/',
 // 网站标题
 title: '标 の 博客',
 // <meta name="description" content="...">
 description: '种一棵树最好的时间是十年前，其次是现在', 
 markdown: {
  // 显示代码行号
  lineNumbers: true
 }
}
module.exports = config

博客首页

公共文件

创建 docs/.vuepress/public 用于存放公共文件

我在 public/ , 存在了 favicon.ico 图标， 以及 zlx.jpg 首页的头像图片

简单的首页编写

将 docs/README.md设置为首页， 修改代码为：

---
home: true
heroImage: /zlx.jpg
footer: MIT Licensed | Copyright © 2018 ZhangHuanbiao
---

设置网站 ico 图标

配置网站的 ico 图标， 修改 .vuepress/config.js：

const config = {
 head: [
  ['link', { rel: 'icon', href: '/favicon.ico' }] ]}

导航栏

配置导航栏

使用 vuepress 的默认主题配置导航栏 .vuepress/config.js：