09月
18

Hexo入门搭建

发表于

前言

花了大概三天的时间，总算大致把博客的雏形搞定了。虽然说很多东西最终都不是我自己完成的，只是在别人的基础上在表面进行敲敲打打（后悔自己学习了后端，囧Orz）但不管怎样，没有文章的博客终归只是没有灵魂的躯壳，尽管自己的水平有限，但是还是希望能通过书写自己的一点一滴来见证自己的成长吧！ 现在就开始我们今天的内容——hexo博客的搭建

初识Hexo

先让我们了解一下hexo：

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

比起它的前辈wordpress，hexo最大的特点就是使用markdown编写文章，同时以node.js作为运行环境，你只需要在服务器上安装好node.js环境，就可以轻松安装hexo，这时你再回头看看wordpress的LAMP环境，是不是觉得繁琐又笨重呢？（hh其实hexo还是wordpress都是非常主流的博客框架，两者的优劣我们之后有时间或许可以再讨论）

Hexo基本搭建

知识前提

安装hexo前你最好了解的基本知识

  1. markdown语法基础
  2. node.js基本认识（其实用不到多少，但是最好能了解一点语法基础）
  3. html、css基础（为你个性化博客很有帮助）
  4. github相关知识（程序猿必备）

基础环境

本人用的Win10

搭建的基本流程

环境配置->本地调试->服务器部署

环境配置

安装git bash

首先本地安装Git，具体可以自行百度。

安装完后再任意目录下点击右键

gitbash

进入git bash，之后我们的操作都将在这里进行

（PS：实测cmd也可以，如果遇到一些操作在git bash里得不到响应可以在cmd中尝试进行，注意要在相同的路径下面）

安装node.js

首先安装好node.js环境，直接官网下载就行了

安装好后查看版本

正常无误即可

安装hexo

进入gitbash，使用node.js的包管理器npm，输入

1
npm install -g hexo

等待安装完成即可

本地调试

安装完成后在自己想要放博客的文件夹根目录下，输入

可以看到hexo生成以下文件

  • node_modules（项目依赖包）
  • public（存放生成页面）
  • scaffolds：命令生成文章等的模板
  • source：资源库，放置比如文章、跳转页面等
  • themes：主题
  • _config.yml：整个博客的配置
  • package.json：项目所需模块项目的配置信息

这时你已经可以启动你的博客了，输入

1
2
3
hexo clean    //清除之前的配置，防止博客配置出错的必要操作 
hexo generate  //可缩写为hexo g   创建资源文件 
hexo server    //可缩写为hexo s   启动server服务器

当显示下面代码时说明启动成功

1
2
$INFO  Start processing
$INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop

按流程输入localhost:4000当你看到下图说明基本配置成功了

hexo_bg

3.服务器部署

现在我们就要在公网上部署hexo了

这里我用的是Github Page对博客进行托管，有条件的同学也可以自己部署到服务器上，这是暂时不提

首先需要在GitHub上新建一个仓库，命名形式为yourusername.github.io（yourusername是你的git账户,重要)

然后进入setting查看是否开启

github1

github2

接着创建ssh密钥对，将公钥放在GitHub上

在全局setting->SSH and GPG keys->new SSH keys添加

github3

如何本地创建SSH密钥对，请查

1
2
3
$git config --global user.name "Your Name"
$git config --global user.email "email@example.com"
$ssh-keygen -t rsa -C "youremail@example.com"

接着打开博客文件夹根目录，前往_config.yml文件，找到如下字段，修改自己的repo 

1
deploy:   type: git   repo: git@github.com:yourusername/yourusername.github.io.git   branch: master

然后在gitbash输入

1
$npm install hexo-deployer-git --save

依次执行

1
2
3
hexo clean
hexo generate  //可缩写为hexo g
hexo deploy    //可缩写为hexo d  部署hexo

打开https://yourgithubname.github.io，看到与上一步相同的页面，证明博客搭建完成

至此，博客的基本搭建基本完成。

接着如果需要书写博客，使用如下命令

1
hexo new <layout> "title"

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

1
hexo publish <layout> <filename>

发布内容，实际上是将内容从drafts（草稿）文件夹移到posts（文章）文件夹。 接着重启就行

hexo优化配置

虽然搭建了基本的博客，但是每次初始化时都要花很多时间（可以但没必要） 因此我们可以写一个脚本自动完成固定命令的执行 新建一个txt文件，输入 1 2 3 hexo clean hexo g hexo d 保存后将后缀名改成.bat就可以点击执行了

个性化你的Hexo 博客

真正让人充满激情的地方在于它可以让你个性化，真正把博客作为你自己的小天地，这次我就结合自己搭建博客的实例分析一下如何个性化自己的博客吧

添加主题NEXT

添加RSS

菜单图标选择

如何选择博客上丰富的图标？难道要下载到本地？为了提升博客的打开速度，建议所有的静态资源能通过HTTP下载就HTTP下载，因为部署博客的服务器带宽终究有限，如果因为加载静态资源而占用带宽，会降低博客的阅读体验

这里那awesome icon举例

在首页寻找自己想要的图标，然后再主题配置文件的菜单图标项填<! class="fa fa-fw fa-envelope></i>即可

引入评论插件gitalk

gitalk插件将GitHub作为你的数据库，评论用户通过GitHub账号登录并发表评论，非常适合国内的开发者进行及交流讨论

  1. 注册oauth app
  2. 下载gitalk插件

集成Gitalk

引入Aplayer

外链生成地址

踩坑

搜索模块 config.yml没有注意空格 注意备份 require是node.js的语法。。

打包js文件 出现各种都是npm包的问题

json.package是用来处理依赖问题的，有了它，就不用像远古时代那样一个个install，同时写好webpack.comfig.js才可以打包成功

分享到：