hexo + next 博客安装、使用

发表于   |   分类于   |     |   阅读次数

最近经常遇上了 hexo 主题的博客，心底痒痒的，于是自己也开始由之前的 WordPress个人博客 转向了 hexo 。过程的坑坑补补虽是郁闷，不过折腾过后还是感觉棒棒的。
第一次正式使用 markdown 写文章，好像有点慢，幸好上手还是挺快的。

准备工作

本次安装的 hexo 版本为 hexo 3.2.0 （git bash 下执行 hexo -v 可知），win10 的 64位 系统。
首先需要安装以下：

  • node.js
    跟普通软件安装一样不断 next ，搜一下也有详细图文安装教程
  • git
    同上，选择对应的系统、位数的版本
  • tortoisegit
    这个可装可不装，它是 git 操作的简化
  • sublime text
    文本编辑器，用来修改配置、编辑文章；当然 txt 也行

安装 hexo

  1. 新建一个文件，可明名 hexo 。
  2. 在 hexo 下，右键点击 git bash .

  3. 用 npm 安装 hexo （默认安装的是最新的版本），输入：

    1
    npm install hexo-cli -g

    备注：卸载

    1
    npm uninstall hexo-cli -g

    旧版本的安装/卸载，去掉 -cli ，即 npm install hexo -g 。

  4. 用 npm 安装 hexo ，输入：

    1
    npm install hexo-cli -g

  5. 安装依赖包、插件 ，输入：

    1
    npm install

  6. 启动本地服务器，输入：

    1
    hexo s

  7. 用浏览器打开 http://localhost:4000 若看到博客页面初识页面（默认主题是 landscape） ，即成功。

配置 _config.yml

用文本编辑器 sublime text 或 txt 打开 hexo 目录下的 _config.yml ，进行站点的信息配置。这里只挑一些常规的看看：
（详细请看 官方中文api）

1
2
3
4
5
6
7
8
9
10
11
12
# Site
title: Gjincai  #标题
subtitle: 理性地过，感性地活    #副标题
description: Front End  #描述
author: guojc  #作者
language: zh-Hans  #语言
timezone:
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next #主题

安装主题

更多主题选择尽在 官方主题；
本站博客选择的主题是 next ，简明详细官方说明文档 5 分钟快速安装 。

官方说明文档已经好简明易懂的了，这里简单说一下个人使用时的一些情况：

  • 在 下载 Next 主题 项，提供 2 种方法，明显的一个差异是：

    1. git clone 得到的是最新版，它包含有三种 scheme :

      1
      2
      3
      #scheme: Muse
      #scheme: Mist
      #scheme: Pisces

    2. 下载稳定版本 只有一种：

      1
      #scheme: Muse

  • 一些坑：

    1. 配置文件的修改、mardown 的编写， : x 冒号的后面切记有一个空格！！！

    2. 社交链接图标全为地球形状时，注意主题文件夹下的 _config.yml 里、将 # Social links 和 # Social Icons 中的 GitHub Weibo 保持一致，包括大小写：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      # Social links
      social:
        GitHub: https://github.com/gjincai
        Weibo: http://weibo.com/3891598477/profile?topnav=1&wvr=6&is_all=1
      # Social Icons
          social_icons:
              enable: true
              GitHub: github
              Weibo: weibo

部署到 GitHub

  1. 到 GitHub 注册一个账号，记下注册名：username 和注册邮箱：email@email.com 。

  2. git config 配置
    打开 git 命令行、输入（注意改成你自己的 email 、username）：

    1
    2
    git config --global user.email "1262868349@qq.com"
    git config --global user.name "gjincai"

  3. 生成 ssh key
    输入（注意改成你自己的 username）：

    1
    ssh-keygen -t rsa -C "1262868349@qq.com"

    回车后，出现英文提示、能看懂的，大概是：

    1
    2
    3
    4
    让你输入密钥的保存路径，##直接回车、保持默认路径 /c/Users/Administrator/.ssh/id_rsa
    让你输入密码，##直接回车；
    让你再次输入密码，##直接回车；
    出现一些信息、最后出现正方图形状，##成功了

  4. 登录 GitHub 并添加公钥
    网页登录 GitHub ，头像 ==》 settings ==》SSH keys ==》 New SSH key ==》 随意输入 title ==》 Key 的值为 公钥的值：在刚才默认保存的路径下、打开 id_rsa.pub、复制里面的全部内容并粘贴。

  5. 链接 GitHub 测试
    输入：

    1
    ssh -T git@github.com

    然后会弹出，询问 are you sure …connect? 输入 yes 回车：

    1
    are you sure ...connect?yes

    成功的话会弹出：

    1
    hi，gjincai!.....sccessfully.....

  6. 在 GitHub 上 New 一个 repository
    输入的项目名称为 gjincai.github.io ，即是 username.github.io

  7. 安装 deploy
    在 hexo 目录下右键 git bash ，进行安装 hexo-deployer-git 插件：

    1
    npm install hexo-deployer-git --save

  8. 配置 deploy
    打开 hexo 目录下的 _config.yml ，配置 deploy项：

    1
    2
    3
    4
    deploy:
        type: git
        repo:
            github: git@github.com:gjincai/gjincai.github.io.git    #usernsme

    （备注：传说 hexo2.x.x 版本的 type:github 等等是不同的）

  9. 部署到 GitHub
    hexo 目录下执行 git:

    1
    hexo d

    现在，在浏览器打开： http://gjincai.github.io，即 http://username.github.io

多 PC 同步

这几天对 hexo 折腾，在公司的 PC 上搞、在宿舍自己的笔记本上也搞；问题来了，我在公司更改了 hexo 配置、写了文章，然后自然是保存在了公司 PC ；回到宿舍后，笔记本的本地文件当然就与公司不一致了。

如何使得 hexo 在多电脑端始终保持同步呢？那就网络同步喽，可以把 hexo文件 上传到网盘、上传到 git ；然后下载、pull 回来。

然而，当初一开始我选择一个最笨的直接方法 ———— U盘直接把 hexo 整个文件拷贝回来完全替换替换！哈哈！

当然，前提是要在每一 PC 都要安装好 hexo 环境喽。注意一点：要再设置一次 user.email 、user.name； ssh key 也要生成新的并添加到 github。
也就是说，从 5.部署到 GitHub 开始再配置一次，不然的话，执行部署命令 hexo d 会被阻止。

继续前行

折腾到这里，相信已经心痒痒地想要把自己的 hexo next 配置到更完美的境界吧？！
常用的几个命令？新建分类、标签云页面？评论？统计？写文章？等等等……

这一次由 wordpress 转成 hexo ，希望以此为契机、促使自身再起航不断飞跃向前吧！

参考链接：
为NexT主题添加文章阅读量统计功能
Hexo常见问题解决方案