hexo博客搭建

hexo next主题博客搭建

安装Hexo

安装好node.js和git后,可以通过npm来安装Hexo。

1
npm install -g hexo-cli

建站

1
2
3
hexo init <folder>
cd <folder>
npm install

站内内容

新建好的文件夹目录如下:

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

这里解释一下各个文件夹的作用:

config.yml

博客的配置文件,博客的名称、关键词、作者、语言、博客主题…设置都在里面。

package.json

应用程序信息,新添加的插件内容也会出现在这里面,我们可以不修改这里的内容。

scaffolds

scaffolds就是脚手架的意思,这里放了三个模板文件,分别是新添加博客文章(posts)、新添加博客页(page)和新添加草稿(draft)的目标样式。

这部分可以修改的内容是,我们可以在模板上添加比如categories等自定义内容

source

source是放置我们博客内容的地方,里面初始只有两个文件夹,一个是drafts(草稿),一个posts(文章),但之后我们通过命令新建tags(标签)还有categories(分类)页后,这里会相应地增加文件夹。

themes

放置主题文件包的地方。Hexo会根据这个文件来生成静态页面。

Hexo命令

init

新建一个网站。

1
hexo init <folder>
new

新建文章或页面。

1
hexo new <layout> "title"

这里的<layout>对应我们要添加的内容,如果是posts就是添加新的文章,如果是page就是添加新的页面。

默认是添加posts

然后我们就可以在对应的posts或drafts文件夹里找到我们新建的文件,然后在文件里用Markdown的格式来写作了。

generate

生成静态页面

1
hexo generate

也可以简写成

1
hexo g
deploy

将内容部署到网站

1
hexo deploy

也可以简写成

1
hexo -d
publish

发布内容,实际上是将内容从drafts(草稿)文件夹移到posts(文章)文件夹。

1
hexo publish <layout> <filename>
server

启动服务器,默认情况下,访问网站为http://localhost:4000/

1
hexo server

也可以简写成

1
hexo s
  • hexo n <filename> 新建文章
  • hexo s 启动服务器,在本地查看内容
  • hexo g 生成静态页面
  • hexo deploy 部署到网站

优化

1. 创建“分类”页面
  • 新建分类页面

    1
    hexo new page categories
  • 给分类页面添加类型

    我们在source文件夹中的categories文件夹下找到index.md文件,并在它的头部加上type属性。

  • 1
    2
    3
    4
    5
    ---
    title: 文章分类
    date: 2017-05-27 13:47:40
    type: "categories" #这部分是新添加的
    ---
  • 给模板添加分类属性

    现在我们打开scarffolds文件夹里的post.md文件,给它的头部加上categories:,这样我们创建的所有新的文章都会自带这个属性,我们只需要往里填分类,就可以自动在网站上形成分类了。

    1
    2
    3
    4
    title: {{ title }}
    date: {{ date }}
    categories:
    tags:
  • 给文章添加分类

    现在我们可以找到一篇文章,然后尝试给它添加分类

    1
    2
    3
    4
    5
    layout: posts
    title: 写给小白的express学习笔记1: express-static文件静态管理
    date: 2018-06-07 00:38:36
    categories: 学习笔记
    tags: [node.js, express]
2. 创建“标签”页面

创建”标签”页的方式和创建“分类”一样。

  • 新建“标签”页面

    1
    hexo new page tags
  • 给标签页面添加类型

    我们在source文件夹中的tags文件夹下找到index.md文件,并在它的头部加上type属性。

    1
    2
    3
    title: tags
    date: 2018-08-06 22:48:29
    type: "tags" #新添加的内容
  • 给文章添加标签

    有两种写法都可以,第一种是类似数组的写法,把标签放在中括号[]里,用英文逗号隔开

    1
    2
    3
    4
    5
    layout: posts
    title: 写给小白的express学习笔记1: express-static文件静态管理
    date: 2018-06-07 00:38:36
    categories: 学习笔记
    tags: [node.js, express]

    第二种写法是用-短划线列出来

    1
    2
    3
    4
    5
    6
    7
    layout: posts
    title: 写给小白的express学习笔记1: express-static文件静态管理
    date: 2018-06-07 00:38:36
    categories: 学习笔记
    tags:
    - node.js
    - express

部署域名

  • 阿里云解析记录类型选CNAME,记录值是自己github生成页面的地址。
  • 在博客的页面添加CNAME文件,并在里面记录自己域名的地址,将这个文件放在public文件夹下
  • 最后hexo g && hexo deploy就可以了
技颠 wechat
欢迎您扫一扫上面的微信公众号,订阅我的微信公众号!