使用Hexo快速搭建自己的博客

本篇文章将会介绍如何使用hexo来搭建静态页面博客，并套用目前最多人使用的NexT模版

一、需要准备的工具

• Node.js

  Hexo使用node.js进行静态页面的生成，到 https://nodejs.org/zh-cn/ 下载当前最新的node.js进行安装

• hexo

  hexo官网：https://hexo.io/ 上面有非常完整的文档

  安装node.js完成后在控制台应该就能够直接使用npm，如果不能使用，可以在环境变量中系统变量中的Path添加npm

  安装hexo的命令如下：

  $ npm install hexo-cli -g
  $ hexo init blog
  $ cd blog
  $ npm install

  分别为安装hexo、创建博客的根目录、进入博客根目录、初始化目录

二、配置博客

打开博客根目录下的_config.yml文件进行修改，这里先讲几个最主要的修改，在之后的配置过程中会进一步对这个文件进行修改

title: 博客名
subtitle: 博客子标题
description: 博客的一段描述
author: 作者
language: zh-CN
timezone: Asia/Shanghai

这里要注意一点，每项设置冒号: 后面一定要留一个空格

如果使用git pages来作为博客的托管，并且已经创建好githubname.github.io的仓库的话，按下面这么改

deploy:
  type: git
  repo: https://github.com/YourName/YourName.github.io.git
  branch: master

然后

npm install --save hexo-deployer-git

三、编写并部署博客

• 创建博客

  在博客根目录，控制台中输入

  $ hexo new "new"

  在/source/_post下创建名为new的新博客

• 清除缓存

  每次重新生成博客之前最好要进行这一步操作

  $ hexo clean

• 生成博客

  $ hexo generate
  or
  $ hexo g

• 开启服务器

  $ hexo server
  or
  $ hexo s

  默认会打开在http://localhost:4000/

• 部署博客

  $ hexo deploy
  or
  $ hexo d

  hexo将会将生成的博客push到之前配置文件中定义好的repo中

四、套用模版

hexo有非常多的模版，其中最常见的模版之一就是nexT模版，也是文档相对完善的一套主题

官网：http://theme-next.iissnan.com/

到官网上下载，或者到作者的github上下载相应主题文件后，在/themes下创建一个文件夹next并将下载的子文件拷贝到其下

然后修改博客的配置文件_config.yml（注意：下载的主题文件中也有同名的配置文件，以后会以主题的配置文件加以区分）

重新清理–>生成–>查看–>部署，然后登录自己博客的主页看看效果吧！

五、SEO

• 安装sitemap

  进入根目录，输入

  npm install hexo-generator-sitemap --save
  npm install hexo-generator-baidu-sitemap --save

• 在站点配置文件 _condig.yml中添加

  ##自动生成sitemap
  sitemap:
  path: sitemap.xml
  baidusitemap:
  path: baidusitemap.xml

• 在站点配置文件 _condig.yml中修改url为首页地址

• 重新生成并部署

• 提交sitemap

  在百度站长工具中链接提交中选择sitemap提交方式，输入

  https://yoursite.com/baidusitemap.xml

  谷歌也可以以类似的方式

  https://yoursite.com/sitemap.xml

• 如果是新网站，可能需要验证网站所有权，谷歌可以使用Google Analyze直接验证，或者百度和谷歌都可以提交HTML标签来验证。

  将提供的<meta>标签加入\themes\next\layout\_partials下的head.swig中最上方重新生成上传，然后在百度谷歌中点验证就可以了

六、Fancybox开启图片放大缩小

• 安装与更新

  $ rm -rf themes/next/source/lib/fancybox
  $ cd themes/next
  $ git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox

七、添加分享功能

主题配置文件

needmoreshare2:
  enable: true
  postbottom:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone
  float:
    enable: true
    options:
      iconStyle: box
      boxForm: vertical
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone

see more

• 在站点配置文件 _config.yml中修改

  fancybox: true