hexo 博客框架可用作知识库

心已赠人 2021-07-28 18:41 372阅读 0赞

## 背景 ##

写blog虽然经历了N多不同时代的产品，恒久不变的始终是自己无人问津的网站。虽然没几个人看，还是隔断时间就要折腾一下。从最开始的wordpress，到tale，到现在的hexo，网站变得越来越简单，越来越轻量级，这里主要说说hexo的使用。

## hexo介绍 ##

主页： [https://hexo.io/zh-cn/][https_hexo.io_zh-cn]  
主页中有非常详细的介绍，主页中有介绍内容我这里就不赘述了，这里主要说说主页中没有详细说明内容。

*  hexo 可以理解为是基于node.js制作的一个博客工具，不是我们理解的一个开源的博客系统。其中的差别，有点意思。
 *  hexo 正常来说，不需要部署到我们的服务器上，我们的服务器上保存的，其实是基于在hexo通过markdown编写的文章，然后hexo帮我们生成静态的html页面，然后，将生成的html上传到我们的服务器。简而言之：hexo是个静态页面生成、上传的工具。

## 源码结构 ##

![format_png][]

<table> 
 <thead> 
  <tr> 
   <th>文件/文件夹</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>_config.yml</td> 
   <td>配置文件</td> 
  </tr> 
  <tr> 
   <td>public</td> 
   <td>生成的静态文件，这个目录最终会发布到服务器</td> 
  </tr> 
  <tr> 
   <td>scaffolds</td> 
   <td>一些通用的markdown模板</td> 
  </tr> 
  <tr> 
   <td>source</td> 
   <td>编写的markdown文件，_drafts草稿文件，_posts发布的文章</td> 
  </tr> 
  <tr> 
   <td>themes</td> 
   <td>博客的模板</td> 
  </tr> 
 </tbody> 
</table>

我们正常使用，修改最多的源码是\_config.yml文件，不管是博客的基础配置，还是模板，都是修改这个文件。  
source是我们日常写文章要用的目录，是我们日常操作的文件夹。  
如果针对下载的模板修改，那么就需要操作themes了。hexo是用node.js编写的程序，所以theme的修改也是比较容易的。

## 使用 ##

基本安装和使用直接参考官网即可，这里我主要说两个部分：

### 编写BLOG ###

官方新编写BLOG，建议的是使用命令：

hexo new [layout] <title>

其实，你可以直接在\_drafts新建markdown文件，就是草稿了，在\_posts新建markdown文件，就是发布的文章了。当然，记得在顶部加上相关的描述，如:

---
    title: hexo——轻量、简易、高逼格的博客
    date: 2018-08-31 17:54:54
    tags:
        - IT技术
        - 前端
    ---

效果和命令新建文件，是一样一样的。

### 模板安装和使用 ###

hexo为我们提供了非常多好看实用的模板，官网提供了很多模板，但是，针对模板的使用，只进行了非常简单的说明，这里以我自己的使用的模板Concise为例，进行详细的补充。

![format_png 1][]

其实，模板的使用，简单来说，只需要两个步骤：

*  将模板copy到themes目录，如：

git clone https://github.com/HmyBmny/hexo-theme-concise.git themes/concise

*  修改\_config.yml中的theme：

theme: concise

所有的模板，共有的操作方式就只有这两个，但是不同的模板，会有很多不同的设置，这里就需要针对模板的使用说明进行修改了。建议通过github找到模板，看下readme。如，我使用的Concise就需要修改：

author: 
      name: 公众号：itmifen
      work: IT狗，程序猿，苦B奋斗的伪文中老年
      location: 深圳, shenzhen
      avatar_url: http://oe749te3z.bkt.clouddn.com/logo.png
    
    links:
      github: https://github.com/itmifen

基本上，这样就能在本机进行预览使用了。

## 发布 ##

现在比较流行的方式，都是将代码发布到git，因为我同时要传到github和自己的博客，所有我的处理方式就是：  
先将代码传到github，再在自己的服务器获取github代码，服务器上自己部署一个nginx，解析静态网页即可。  
先安装git插件：

npm install hexo-deployer-git --save

git的配置，修改\_config.yml文件:

deploy:
      - type: git
        repository: git@github.com:itmifen/blog.git
        branch: master

当然，只是这样肯定不行，你要确保你本地能git push到服务端，所以需要配置本地的ssh github私钥。没有操作过的同学，请自行搜索。 这样，我就可以将本地的文章通过hexo官方推荐的方式push到github：

hexo deploy

这样应该就能在你的github上看到上传的代码了，这时看到的应该是纯静态的一个站点。  
既然代码已经上传了，那么只要在我的服务器配置好github和ssh私钥，就能顺利的pull代码了，当然，还需要写个crontab定时来拉取，不需要自己登录服务器操作了。

## 常见问题 ##

### 执行deploy命令了，但是代码未上传？ ###

先执行hexo generate命令，生成静态文件了，再执行hexo deploy上传，上传是只会上传public中生成的文件。

### 修改了模板，但是没有生效？ ###

修改了模板以后不生效，建议先hexo clean，然后再hexo generate。只执行hexo generate，可能模板后者静态文件不会被替换。

### 预览不太方便？ ###

开发环境提供了实时预览的方式，不需要每次都generate，执行命令：

hexo generate -w

系统会实时生成新的HTML，非常方便。

[https_hexo.io_zh-cn]: https://hexo.io/zh-cn/
[format_png]: /images/20210728/c0421d908ff143bb90cc5d1ea3df4f7c.png
[format_png 1]: /images/20210728/bf96b6d3e387483394b7102aa6d34689.png