hexo + next 创建个人博客

hexo是一个github上开源的博客系统,可以根据markdown的文档生成静态的html文件。只需要简单的命令就可以实现自动提交及部署到github的强大工具。
hexo还提供了海量的主题风格供用户选择,本文讨论的是next主题的使用及优化。
其他主题可以多看看官方文档https://hexo.io/themes/

安装hexo

  1. 下载&安装node.js
  2. 安装hexo
$ npm install hexo-cli -g

注:由于npm是从国外下载资源,推荐使用cnpm淘宝镜像,安装后可以使用cnpm来替代所有的npm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
  1. 创建一个hexo
$ hexo init blog
  1. 安装必要的插件
$ cd blog
$ npm install
  1. 启动hexo
$ hexo server

以上就配置了一个简单的hexo项目

项目效果如下:

目录基本介绍

新建完成后,指定文件夹的目录如下:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml

网站的 配置 信息,您可以在此配置大部分的参数。

scaffolds

模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的markdown文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。

source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。

themes

主题 文件夹。Hexo 会根据主题来生成静态页面。

安装next主题

这里是从github上下载next主题,这里需要本地安装有git,也可以去官网上下载到桌面解压到themes/

$ git clone https://github.com/theme-next/hexo-theme-next themes / next

设置主题

在hexo根目录下的配置文件config.yml里设置主题

theme: next

配置主题

接下来我们就可以来按需配置主题内容了,所有内容都在themes/next文件夹下的config.yml文件里修改。
官方文档里写的是有些配置需要将一部分代码添加到配置文件中,但其实不用,我们逐行看配置文件就会发现,有很多功能都已经放在配置文件里了,只是注释掉了,我们只需要取消注释,把需要的相关信息补全即可使用

个人网站效果http://www.yigehui.top

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章