我也想要这个博客

本博客使用Hexo进行搭建，皮肤使用hexo-theme-solitude,如果你是一个熟悉前端开发的研发，那你上手简直不要太容易了

安装

如果系统没有 Hexo 环境,执行 npm install -g hexo-cli 安装Hexo

使用

  • 创建新文档 使用 hexo new post "your-new-doc-name"

其中 your-new-doc-name 替换你的文档名
名称建议遵循以下规则：文件名应该要么始终是单词大写开头 (PascalCase),要么始终是横线连接 (kebab-case)。

  • 文档头部内容,使用了Front Matter 扩展，定义了页面的配置内容,前往官网
    示例如下:
1
2
3
4
5
6
7
8
# 示例如下
title: Docker安装和配置
date: 2019-06-27 16:58:06
categories:
- Docker
tags:
- Docker
# 具体配置可前往官网查看
  • 生成静态文件 hexo g

其中 g 是 generate 的缩写,将在主目录的 /public 目录下创建以给定规则建立的静态Html页面结构

  • 本地预览 hexo s

其中s 是 server 的缩写，将在本机的 4000 端口创建服务,在hexo s执行前,先执行 hexo g 生成静态文件。
hexo s 后可增加 -p 5000 指定5000端口创建服务，即命令为 hexo s -p 5000

  • 清理 hexo clean

在发现预览网页显示异常可执行该命令，清理 /public 目录下所有文件,防止文件错乱导致的显示异常

其他选择

Vuepress

如果不想要这种风格的博客，你更想要一个类似 VueJS API风格的博客，推荐使用Vuepress
如果系统没有 vuepress 环境,执行 npm install -D vuepress 安装Vuepress
vuepress 的文档统一放在docs目录下
建议同一主题创建新文件夹
每个文件夹下必须包含一个 README.md 文档

  • /docs下的README.md为Vuepress的首页内容

文档头部内容,使用了Front Matter 扩展，定义了页面的配置内容,具体前往官网查看

  • 新文档 在/docs 目录下新建文件夹，并在新文件夹在创建 README.md 文档

  • 导航栏,在 ./vuepress/config.js下，配置nav节点

  • 本地查看 npm run dev 将在指定5000端口(config.js中可配置)创建服务

  • 静态文档 npm run build 将在指定目录 ../public/vuepress (config.js中可配置,未设置默认为.vuepress/dist)

  • 更多配置，建议去官网查看具体配置