jekyll迁移到hexo历程

迁移历程

从2016年开始一直坚持写博客，很多都是工作，学习的总结，可以让自己加深记忆，也便于分享。从此也患上了主题选择困难症，在网上查阅博客的时候，一旦发现自己特别喜欢的主题，就会尝试切换主题。从最初的Hexo Next，到Jekyll Hux，以及现在的Hexo BlueLake。下来来介绍下如何使用BlueLake主题。

1. 安装Hexo

1.1 安装

在安装Hexo之前，必须确认你已经安装了Node.js和Git。

 npm install hexo-cli -g

1.2 Hexo初始化

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件:

 $ mkdir hexo-admin
 $ cd hexo-admin
 $ hexo init
 $ npm install

接下来也可以本地预览博客，执行下列命令,然后到浏览器输入localhost:4000看看。

 $ hexo generate
 $ hexo server --debug

输入Ctrl+C停止服务。

2. Hexo配置

用编辑器打开 hexo-admin/ 下的配置文件_config.yml，下面是我修改的key值：

 # Site
 title: 梁波的博客
 subtitle: 专注于Java，Golang，DevOps，Cluster，Distributed
 description: 梁波的博客
 keywords: 梁波，梁波的博客，Java, Golang, Devops, Cluster，Distributed
 author: 梁波
 language: zh-CN
 timezone: Asia/Shanghai
 ​
 # URL
 ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
 url: http://flygopher.top
 ​
 # Writing
 #new_post_name: :title.md # File name of new posts
 new_post_name: :year-:month-:day-:title.md # File name of new posts
 ​
 # Deployment
 ## Docs: https://hexo.io/docs/deployment.html
 deploy:
   type: git
   repo: git@github.com:amuguelove/amuguelove.github.io.git
   branch: master
 ​

其中repo请替换成你在github中新建的你github用户名.github.io仓库。

3. 部署到Github

还需要如下在根目录，输入如下指令：

 $ npm install hexo-deployer-git --save
 $ hexo d -g

上传到Gihub可能会有如下几个错误：

• 没有新建对应的仓库，解决：在你的github账号中创建属于你的仓库

• 没有权限push到远程github仓库，解决：参考我之前写的几篇关于Git的文章

• 出现没有用户名和邮箱地址的warning，解决：在根目录的.deploy_git增加用户名和邮箱地址，不建议设置全局Git用户名和邮箱地址。

   $ cd hexo-admin/.deply_git
   $ git config user.name "liangbo"
   $ git config user.email "908325713@qq.com"

4. Hexo的一些常用命令

 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 deploy -g  #生成加部署
 hexo server -g  #生成加预览
 #命令的简写
 hexo n == hexo new
 hexo g == hexo generate
 hexo s == hexo server
 hexo d == hexo deploy

5. 安装BlueLake主题

5.1安装主题

在根目录hexo-admin下打开终端窗口：

 $ git clone https://github.com/chaooo/hexo-theme-BlueLake.git themes/BlueLake

5.2 安装主题渲染器

BlueLake是基于jade和stylus写的，所以需要安装hexo-renderer-jade和hexo-renderer-stylus来渲染。

 $ npm install hexo-renderer-jade@0.3.0 --save
 $ npm install hexo-renderer-stylus --save

5.3 启用主题

打开根_config.yml配置文件，找到theme字段，将其值改为BlueLake(先确认主题文件夹名称是否为BlueLake)。

 theme: BlueLake

5.4 验证

首先启动 Hexo 本地站点，并开启调试模式：

 $ hexo s --debug

此时即可使用浏览器访问 http://localhost:4000，检查站点是否正确运行。

6. BlueLake主题配置

6.1 添加about页面

在根目录下打开命令行窗口，生成一个关于我页面：

 $ hexo new page 'about'

打开主题_config.yml，补全关于我页面的详细信息：

 # About page 
 about:
   photo_url: ## 头像的链接地址
   email: ## 个人邮箱 
   weibo_url: ## 微博主页链接地址
   weibo_name: ## 微博用户名 
   github_url: ## github主页链接地址
   github_name: ## github用户名

当然您也可以自定义重新布局about页面，只需要修改layout/page.jade模板就好。

6.2 安装RSS订阅和sitemap（网站地图）插件

在根目录下打开命令行窗口：

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

添加主题_config.yml配置：

 Plugins:
   hexo-generator-feed
   hexo-generator-sitemap
   hexo-generator-baidu-sitemap
 ​
 feed:
   type: atom
   path: atom.xml
   limit: 20
 ​
 sitemap:
   path: sitemap.xml
 baidusitemap:
   path: baidusitemap.xml

6.3 添加本地搜索

默认本地搜索是用原生JS写的，但还需要HEXO插件创建的JSON数据文件配合。安装插件hexo-generator-json-content来创建JSON数据文件：

 $ npm install hexo-generator-json-content@2.2.0 --save

然后在根_config.yml添加配置：

 jsonContent:
   meta: false
   pages: false
   posts:
     title: true
     date: true
     path: true
     text: true
     raw: false
     content: false
     slug: false
     updated: false
     comments: false
     link: false
     permalink: false
     excerpt: false
     categories: false
     tags: true

最后在主题_config.yml添加配置：

 local_search: true

6.4 修改站点图标

站点图标存放在主题的Source目录下，已经默认为您准备了两张图片。您也可以自己设计站点LOGO。

您需要准备一张ico格式并命名为 favicon.ico ，请将其放入hexo目录的source文件夹，建议大小：32px X 32px。favicon.ico在线制作

您需要为苹果设备添加网站徽标，请命名为 apple-touch-icon.png 的图像放入hexo目录的“source”文件夹中，建议大小为：114px X 114px。Apple-touch-icon generator

6.5 其他

一些细节的调整这里就不在赘述了，主要是卜算子域名的替换，字体域名地址的替换，以及一些样式的调整。

参考

快速搭建Hexo Next主题 Hexo快速安装以及文档 BlueLake主题github BlueLake博客主题的详细配置