[开发工具]利用hexo构建个人博客

hexo构建个人博客

hexo是什么

Hexo 是一个快速、简洁且高效的博客框架。

Hexo 是基于Node.js的一个静态博客框架，使用 Markdown（或其他渲染引擎）解析文章。

在几秒内，即可利用靓丽的主题生成静态网页。

欢迎访问老李的博客：HEI_LAIOLI

前期准备

1. 安装Node.js

   (版本需不低于10.13，建议使用Node.js 12.0及以上版本)

2. 安装git bash工具

如果以前没装过，点击蓝色链接进入官网下载，然后直接next下去就好。

已经安装过Node.js和Git的，可以直接跳过上两步。

1. 安装hexo

   • 先新建一个存放hexo文件的文件夹(以下称blog文件夹)，位置随意，想必不会有人放进系统盘。

   • 在 blog文件夹内 右击空白处，点击弹出菜单的git bash here

     

   • 在界面中输入以下命令，使用npm安装Hexo

     npm install -g hexo-cli

   • 输入hexo -v 查看版本号

     

Hexo建站

1. 初始化hexo

   • 在blog文件夹内，右击 git bash here 打开的命令框中输入 hexo init

   • 初始化可能会花费一些时间，稍安勿躁，暂时别离开，应该不够你泡杯茶。

     

   • 命令执行后的blog根目录，会发现多出很多文件，暂时不管他。

     

     • node_modules：hexo的插件目录，作用是利用此目录的插件生成对应功能的静态HTML等代码。

     • scaffolds：模板文件夹。新建文章时，Hexo会根据scaffolds里的模板文件来新建文章。

     • source：存放用户资源，文章图片之类。该文件夹内除 _posts 文件夹之外，其他开头为 _ 的文件/文件夹将被忽略。

     • themes：主题文件夹，hexo会根据主题来生成静态页面，这个我们后面会用到。

     • _config.yml：配置文件，在这里可以配置hexo的大部分参数。

2. 查看hexo

   • 到这里基本就算完成了，可以输入 hexo server 或偷懒直接输 hexo s 启动服务

     

   • 打开浏览器，输入localhost:4000 就可以看到博客的页面了。

     默认是这个样式：

     

     

   • Ctrl + C 关闭服务器

     下次开启还是 blog 文件夹 => 右键菜单 => git bash here => hexo s

Hexo主题

1. hexo有个官方的样式网站 themes

   

2. 选择自己喜欢的主题

   • 点击图片可以查看主题，点击标题进入GitHub仓库

     

3. 下载主题

   

4. 解压后放到 blog\themes\

   

5. 使用编辑器打开 blog\_config.yml 配置文件

   注意：是blog根目录下的配置文件，而不是我们下载的主题内的同名配置文件

   • 找到 theme ，将 landscape 修改为我们刚刚下载的主题文件夹的名字

     

   • 记得保存...

6. 解决更换主题报错

   • 更换主题时会报错误：

     extends includes/layout.pug block content #recent-posts.recent-posts include includes/recent-posts.pug include includes/pagination.pug

   • 此时需要在 git bash 中输入以下命令：

     npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

   • 问题解决，皆大欢喜

     

valine无后台评论系统

hexo支持Valine无后台评论系统。Valine是一款基于LeanCloud的评论系统，无需自建后端，即引即用。以下简述使用valine的步骤。

1. 注册LeanCloud

   在使用valine之前，我们首先需要注册一个LeanCloud账号，并且创建一个APP。

   开发版有用量限制，但是对于个人博客来说，完全够用。最主要的是，它免费！！！

   当然，土豪随意。

2. 获取AppID、AppKey

   

3. 打开主题文件夹下的 _config.yml 配置文件

   注意：主题文件夹下的配置文件，而非 blog 根目录下的配置文件

   

4. 找到 valine 将刚刚赋值的AppID、AppKey粘贴进来

   

5. 恭喜你，大功告成。

   • 打开博客，在文章的最下方查看你的评论系统吧

     

gitee Pages

完成上面的步骤之后，本地访问博客已经没问题了。但是博客只能自己看和日记有什么区别，正经人谁写日记啊。

下面将通过简单的几步操作，让我们将自己的博客托管到gitee上去。

1. 生成静态文件

   • 还是 blog根目录打开 git bash

   • 输入 hexo generate ，或者太长懒得记直接输入 hexo g

   • 此时发现根目录中多出一个 public 文件夹，这个文件夹就是我们要托管到码云上的静态文件了。

2. 托管静态页面到gitee

   • 首先要有一个 gitee 账号，没有的自己注册。

   • 新建一个项目仓库，复制项目的Https地址

     

3. 一键部署到gitee

   hexo提供了一键部署功能，只要一条命令就可以将项目上传。

   • 首先我们需要先安装一个插件，回到我们熟悉的 blog => git bash ，在命令行输入：

     npm install hexo-deployer-git --save

   • 配置根目录下_config.yml 文件的 deploy 属性

     

   • 返回gitee仓库页面，打开page服务

     

     .

     

   • 让我们再再再次回到 blog\_config.yml 配置文件

     url ：page页的博客访问网址

     root: 相对路径

     

   • 更新gitee静态页

     1. 老规矩 blog => git bash 依次执行以下命令

        hexo clean
        hexo generate
        hexo deploy

        或者偷个懒直接执行
        ?

        hexo generate --deploy

     2. 回到码云Pages页，更新静态页
        

   • 码云page页面显示以最后上传为准，博客更新文章后需要再次更新码云静态页。

hexo配置信息

网站

其中，description主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。

网址

网站存放在子目录

如果您的网站存放在子目录中，例如 http://example.com/blog，则请将您的 url 设为 http://example.com/blog 并把 root 设为 /blog/。

例如：

?# 比如，一个页面的永久链接是 http://example.com/foo/bar/index.html
?pretty_urls:
?  trailing_index: false
?# 此时页面的永久链接会变为 http://example.com/foo/bar/

其他配置请查阅 hexo 文档

hexo基本操作

写作

你可以执行下列命令来创建一篇新文章或者新的页面。

?$ hexo new [layout] <title>

您可以在命令中指定文章的布局（layout），默认为 post，可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

1. 布局（Layout）

   Hexo 有三种默认布局：post、page 和 draft。在创建者三种不同类型的文件时，它们将会被保存到不同的路径；而您自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。

   布局	路径
   post	source/_posts
   page	source
   draft	source/_drafts

   Disabling layout

   If you don’t want an article (post/page) to be processed with a theme, set layout: false in its front-matter. Refer to this section for more details.

2. 文件名称

   Hexo 默认以标题做为文件名称，但您可编辑 new_post_name 参数来改变默认的文件名称，举例来说，设为 :year-:month-:day-:title.md 可让您更方便的通过日期来管理文章。

   变量	描述
   :title	标题（小写，空格将会被替换为短杠）
   :year	建立的年份，比如， 2015
   :month	建立的月份（有前导零），比如， 04
   :i_month	建立的月份（无前导零），比如， 4
   :day	建立的日期（有前导零），比如， 07
   :i_day	建立的日期（无前导零），比如， 7

3. 草稿

   刚刚提到了 Hexo 的一种特殊布局：draft，这种布局在建立时会被保存到 source/_drafts 文件夹，您可通过 publish 命令将草稿移动到 source/_posts 文件夹，该命令的使用方式与 new 十分类似，您也可在命令中指定 layout 来指定布局。

   ?$ hexo publish [layout] <title>

   草稿默认不会显示在页面中，您可在执行时加上 --draft 参数，或是把 render_drafts 参数设为 true来预览草稿。

4. 模版（Scaffold）

   在新建文章时，Hexo 会根据 scaffolds 文件夹内相对应的文件来建立文件，例如：

   ?$ hexo new photo "My Gallery"

   在执行这行指令时，Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md，并根据其内容建立文章，以下是您可以在模版中使用的变量：

   变量	描述
   layout	布局
   title	标题
   date	文件建立日期

1. 支持的格式

   Hexo 支持以任何格式书写文章，只要安装了相应的渲染插件。

   例如，Hexo 默认安装了 hexo-renderer-marked 和 hexo-renderer-ejs，因此你不仅可以用 Markdown 写作，你还可以用 EJS 写作。如果你安装了 hexo-renderer-pug，你甚至可以用 Pug 模板语言书写文章。

   只需要将文章的扩展名从 md 改成 ejs，Hexo 就会使用 hexo-renderer-ejs 渲染这个文件，其他格式同理。

Front-matter

Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量，举例来说：

?---
?title: Hello World
?date: 2013/7/13 20:46:25
?---

以下是预先定义的参数，您可在模板中使用这些参数值并加以利用。

1. 布局

   The default layout is post, in accordance to the value of default_layout setting in _config.yml. When the layout is disabled (layout: false) in an article, it will not be processed with a theme. However, it will still be rendered by any available renderer: if an article is written in Markdown and a Markdown renderer (like the default hexo-renderer-marked) is installed, it will be rendered to HTML.

   Tag plugins are always processed regardless of layout, unless disabled by the disableNunjucks setting or renderer.

2. 分类和标签

   只有文章支持分类和标签，您可以在 Front-matter 中设置。在其他系统中，分类和标签听起来很接近，但是在 Hexo 中两者有着明显的差别：分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar, Foo；而标签没有顺序和层次。

   ?categories:
   ?- Diary
   ?tags:
   ?- PS3
   ?- Games

   分类方法的分歧

   如果您有过使用 WordPress 的经验，就很容易误解 Hexo 的分类方式。WordPress 支持对一篇文章设置多个分类，而且这些分类可以是同级的，也可以是父子分类。但是 Hexo 不支持指定多个同级分类。下面的指定方法：

   ?categories:
   ?  - Diary
   ?  - Life

   会使分类Life成为Diary的子分类，而不是并列分类。因此，有必要为您的文章选择尽可能准确的分类。

   如果你需要为文章添加多个分类，可以尝试以下 list 中的方法。

   ?categories:
   ?- [Diary, PlayStation]
   ?- [Diary, Games]
   ?- [Life]

   此时这篇文章同时包括三个分类： PlayStation 和 Games 分别都是父分类 Diary 的子分类，同时 Life 是一个没有子分类的分类。

3. JSON Front-matter

   除了 YAML 外，你也可以使用 JSON 来编写 Front-matter，只要将 --- 代换成 ;;; 即可。

   "title": "Hello World",
   "date": "2013/7/13 20:46:25"
   ;;;