美文网首页
Hexo使用总结(1)

Hexo使用总结(1)

作者: addapp | 来源:发表于2017-01-06 14:41 被阅读223次

一、安装hexo

1.安装

$ npm install hexo-cli -g  制定一个目录  默认会安装在执行命令的对应的文件夹

$ hexo init blog

$ cd blog

$ npm install

2.Demo生成以及预览

执行命令hexo generate生产静态页面。 执行命令hexo server启动本地预览服务。

然后在浏览器中访问http://localhost:4000/,此时,已经看到了一个漂亮的博客。

二、站点配置文件说明与修改

站点配置文件是 your-hexo-site 目录下的 _config.yml 文件,配置文件中基本都有配置项的说明或者参考官方配置说明。以下说几个常用的配置:

基本配置

title: hexo         #博客的标题

description:            #简介

author: matt   #作者

language: zh-Hans      #语言,该设置使用的是next主题的简体中文

timezone: Asia/Shanghai #时区配置

URL显示以及主题配置

permalink: posts/:year/:month/:day/:title.html

theme: next

打赏配置 

reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!

wechatpay: /images/wechatpay.jpg

alipay: /images/alipay.jpg

图片必须加后缀名,类型一定要对  也可以用七牛存储相关图片

所有的配置,冒号:后面都必须有空格。有几个需要特殊说明的项目:

permalink:默认的文章链接是以:http://localhost/2016/11/29/you-title/的格式,个人喜欢在末尾加.html有动态页面的感觉,于是就修改为以上配置。 默认情况下配置文件中没有打赏配置,改内容是手动添加的。

三、主题选择及下载

在官方网站有很多主题预览,选择自己喜欢的进行下载。我选择的是NexT主题,根据官方的开始使用和主题配置进行配置主题。

在终端窗口下,定位到 Hexo 站点目录下。使用 Git checkout 代码:


$ cd your-hexo-site

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

启用主题需要在站点配置文件中修改默认配置theme: landscape => theme: next。其他配置请根据NexT的主题设定进行配置。

四、添加分类和标签

1.添加分类

$ hexo new page categories

确认站点配置文件里有category_dir: categories 确认主题配置文件里有categories: /categories 编辑站点的source/categories/index.md,添加: *

title: categories

date: 2016-11-29 11:49:50

type: "categories"

comments: false

2.添加标签

$ hexo new page tags

确认站点配置文件里有tag_dir: tags 确认主题配置文件里有tags: /tags *

title: tags

date: 2016-11-29 11:49:50

type: "tags"

comments: false

之后需要在主题中开启对应的配置选项。

五、文章写作

在 your-hexo-site 目录下执行下系列语句,生成一个名为 title 的空文章。

$ hexo new "title"

可以看到提示生成了一个title.md,博客内容是用markdown语法写的。可以使用编辑器的插件,也可以在线编辑,还有专门的编辑器。我的mac使用的是 Mou。

每篇文章都有标头,格式如下:

title: postName          #文章页面上的显示名称,可以任意修改,不会出现在URL中

date: 2016-11-29 15:30:16 #文章生成时间,一般不改,当然也可以任意修改

categories:              #文章分类目录,可以为空,注意:后面有个空格

tags:                    #文章标签,可空,多标签请用格式[tag1,tag2,tag3],注意 ":" 后面有个空格

---这里开始使用markdown格式输入你的正文。

添加分类与标签的另一种形式:

tags:

- tag1

- tag2

categories: xxx

文章摘要,在需要显示摘要的地方添加如下代码:

以上是摘要

<!-- more -->

以下是全文

more以上的内容既是文章的摘要,在主页显示,more以下的内容点击 “阅读全文” 连接打开。

六、添加站内搜索

添加站内搜索可以参考插件主页和插件说明,根据说明进行安装:

$ npm install hexo-generator-search --save

配置,到主题的根目录打开 _config.yml 文件添加一下内容:

search:

path: /search.xml

field: all

教程要求在站点配置文件中填入,但是填写后就会报错,所以不确定是否应该在主题根目录下配置。

七、最后

网络上有很多部署到git的教程,自行参考。执行命令hexo generate后会在目录下生产public文件夹,该文件夹是hexo生产的静态文件。可以部署发布到自己建的web服务器。以下列一些常用命令:

hexo new "postName"      #新建文章

hexo new page "pageName" #新建页面

hexo generate            #生成静态页面至public目录

hexo server              #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)

hexo deploy              #将.deploy目录部署到GitHub

hexo help                #查看帮助

hexo version            #查看Hexo的版本

以下是命令的简写:

hexo n == hexo new

hexo g == hexo generate

hexo s == hexo server

hexo d == hexo deploy

生成,部署也可以这样写:

hexo d -g

相关文章

  • Hexo使用总结(1)

    一、安装hexo 1.安装 $ npm install hexo-cli -g 制定一个目录 默认会安装在执行命令...

  • hexo的使用技巧

    总结一下hexo的使用技巧 首页展示折叠 在需要折叠的地方添加 `` 指令 指令集 hexo g = hexo g...

  • hexo使用总结

    安装hexo 同步github 解决hexo编写博文的时候加入图片问题

  • 使用hexo+github搭建个人博客

    本次使用hexo+github搭建个人博客,使用Linux平台。 一.准备工作 1.了解Hexo Hexo是高效的...

  • Hexo博客(一) 搭建

    Hexo简介与安装 1. 什么是Hexo?Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdo...

  • nginx快速搭建静态博客

    1.安装配置Hexo 在mac上安装Node/Npm,使用homebrew安装 安装Hexo 2.配置Hexo文件...

  • hexo + yilia-plus + mathjax 显示数学

    hexo + yilia-plus + mathjax 显示数学公式 1. 使用 Kramed 代替 hexo 自...

  • 编写发布博客

    【详细】 →→→ →→→【Hexo搭建独立博客全纪录】(三)使用Hexo搭建博客 1.新建文章 hexo会帮我们在...

  • 使用hexo搭建个人博客并部署到GitHub

    1、什么是 Hexo? Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引...

  • hexo+Github搭建博客

    1、hexo是什么: Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎...

网友评论

      本文标题:Hexo使用总结(1)

      本文链接:https://www.haomeiwen.com/subject/ohmtbttx.html