使用Hexo在GitHub、Coding空间上搭建技术博客--处女篇(基于Intellij Idea)

HexoIntelliJ IDEAGit
, , , ,

Hexo是什么?

  • Hexo 的中文官网：http://hexo.io/zh-cn/
  • yelee主题：http://moxfive.coding.me/yelee/
  • Hexo是基于Node.js快速、高效而简洁的博客框架,可以通过编辑Markdown文件快速生成静态页面,托管到GitHub Pages、Coding Pages上,通过平台提供的域名访问。

部署前介绍

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

Hexo适合做什么?

  • 当然，最适合做个人博客记录个人成长、技术总结、经验积累，并且可以部署到GitHub、Coding上。
  • 作为技术博客是最佳的选择,学习一下Markdown基本语法,就是记录的利器

软件准备(本人在Windows环境)

文章前提

域名绑定

  • 如果你一开始就打算要绑定域名，则下面教程中所有可以填写域名的地方你都填写上你要绑定的域名，如果你没独立域名，那就使用 Github 默认给你的：XXXXXX.github.io 域名即可。

部署开始

git 安装

  • 双击运行 Git-2.7.0.2-64-bit.exe，接下来一律下一步，不需要多余的选择，假设你安装的目录位置跟我一样：C:\Program Files\Git
  • 打开 Git Bash（路径：C:\Program Files\Git\git-bash.exe），输入：git --version
    • 如下图，如果出现：git version 2.7.0.windows.2，这表示安装成功
    • 验证 git 安装

Node.js 安装

  • 双击运行 node-v5.7.0-x64.msi，接下来一律下一步，不需要多余的选择。
  • 安装完之后，打开 Git Bash，输入：npm -v
    • 如下图，如果出现：3.8.9，则表示 Node.js 安装成功。如果你没有显示这个信息，我怀疑你需要重启电脑试试看，因为我在给我弟讲解这一步的时候发现有这个问题。
    • 验证 node.js 安装

Node.js 源设置

  • 在安装 Hexo 之前，先说一下 Node.js 的源，Node.js 官方源默认是：http://registry.npmjs.org，但是由于在国外，说不定你使用的时候就抽风无法下载任何软件。所以我们决定暂时使用淘宝提供的源，淘宝源官网：http://npm.taobao.org/
  • 在 Git Bash 中我们执行下面这一句（这是一整句的）：
1
2
3
4
alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"
  • 现在验证下是否可以使用淘宝的 cnpm 命令：cnpm info express
    • 如果能输出一大堆介绍，则说明成功了，以后每次要使用淘宝的源都需要这样来。现在除了默认的 npm，还多了一个 cnpm 可以使用，我们下面有关安装的讲解内容也都是基于此临时命令。
    • 如果输出：bash: cnpm: command not found，则表示没成功，需要你在排查下

安装 Hexo 框架

$ cnpm install -g hexo-cli

使用命令创建Hexo博客

1
2
3
4
5
6
7
8
9
10
11
<!-- 进入刚才创建的博客文件夹 -->
$ cd <your-blog-folder>

<!-- 初始化博客(这个时间也会比较长，也有可能要等几分钟，有显示 WARN 也不用管)-->
$ hexo init

<!-- 安装博客项目所需的packages ,有显示 WARN 也不用管 -->
$ cnpm install

<!--安装hexo-server,否则不能使用：hexo s 命令-->
$ cnpm install hexo-server --save
  • 安装完成之后，E:\git_work_space\hexo 目录结构是这样的：
    • 安装 hexo 后的目录结构
      • 现在我们启动 hexo 本地服务，看下默认的博客是怎样的，命令：hexo server
      • 现在用浏览器访问：http://localhost:4000/，效果如下图
      • 默认模板效果
      • 如果要停止 hexo 服务：在 Git Bash 下按 Ctrl + C 即可

选用其他主题

  • 由于默认主题太大众了，所以现在我们换个主题。
  • 你可以去这里找主题：
  • 我这里选择的 yelee：https://github.com/MOxFIVE/hexo-theme-yelee
    • 原因是能最大化衬托出：目录、文章内容、代码块。因为我对这个博客的定位就是用来放技术类内容，所以不会让它太杂或是太花。只是目前这个颜色偏浅，后续还需要调整。
  • 现在假设你跟我要用的模板是一样：
    • 还是让 Git Bash 保持在 E:\git_work_space\hexo 目录下，然后输入命令：git clone https://github.com/MOxFIVE/hexo-theme-yelee.git themes/yelee
    • 这样就在 E:\git_work_space\hexo\themes 目录下生成了一个 yelle 文件夹，里面有我们刚刚 clone 下来的主题内容。
    • 如果以后你不自己修改这个主题的话，可以考虑经常更新下作者的更新内容：
      • cd e:/git_work_space/hexo/themes/yelee
      • git pull origin master
  • 下载好主题文件之后，我们现在要修改 E:\git_work_space\hexo 目录下的项目配置文件：_config.yml，把对应的主题目录名改下，编辑如下图。
    • 修改主题目录
  • 更改主题目录名后，我们还要重新生成主题静态内容：
    • 继续在 Git Bash 中输入命令：
      • 重新生成静态博客的所有内容：hexo generate
      • 重启 hexo 本地服务：hexo server
      • 重新访问：http://localhost:4000/，效果如下图
      • 新主题效果

创建 Github pages 并 SSH 授权

  • 现在假设你已经有一个 Gtihub 账号，你还需要一个特别的仓库，特别在仓库名就是你的 Github 账号登录名，比如我的用户名是：jibaole，那我要创建的仓库名字完整滴填写是：jibaole.github.io。

    • 新主题效果

  • 创建好仓库之后，要本地生成 SSH 秘钥，方便电脑上的 git 软件好提交内容到 Github 上

    • 在 Git Bash 中，输入：ssh-keygen -t rsa -C "你的邮箱地址"，然后回车，回车，再回车，一共 3 次回车，具体含义自己 Google。

    • 比如我的：ssh-keygen -t rsa -C "1577608819@gmail.com"：

    • 此时，生成密钥后，在你电脑目录：C:\Users\你的计算机用户名\.ssh 下，会生成两个文件：

      • 私钥：id_rsa
      • 公钥：id_rsa.pub
      • 如果生成的不是这样的文件，那删除掉这两个生成的，重新执行上面的命令，让它再一次生成。

    • 现在用记事本打开 id_rsa.pub，复制文件中的所有内容。

把本地的博客内容同步到 Github 上

  • 要把本地的静态博客同步到 Github，我们还需要先安装两个跟部署相关的 hexo 插件：

    • 继续在 Git Bash 中输入：
    • cnpm install hexo -server --save
    • cnpm install hexo-deployer-git --save

  • 编辑全局 hexo 的配置文件：_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    # Hexo Configuration
    ## Docs: https://hexo.io/docs/configuration.html
    ## Source: https://github.com/hexojs/hexo/

    # Site，这一块区域主要是设置博客的主要说明，需要注意的是：每个冒号后面都是有一个空格，然后再书写自己的内容的
    title: Paul
    subtitle: 这里只有代码相关，要了解更多 >>> jibao.top
    description: 这里是 jibao.top 一部分
    author: Paul
    email: 1577608819@qq.com
    language: zh-CN
    timezone:

    # URL，这一块一般可以设置的是 url 这个参数，比如我要设置绑定域名的，这里就需要填写我的域名信息
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: http://www.jibaole.top
    root: /
    permalink: :year/:month/:day/:title/
    permalink_defaults:

    # Directory
    source_dir: source
    public_dir: public
    tag_dir: tags
    archive_dir: archives
    category_dir: categories
    code_dir: downloads/code
    i18n_dir: :lang
    skip_render:

    # Writing
    new_post_name: :title.md # File name of new posts
    default_layout: post
    titlecase: false # Transform title into titlecase
    external_link: true # Open external links in new tab
    filename_case: 0
    render_drafts: false
    post_asset_folder: false
    relative_link: false
    future: true
    highlight:
      enable: true
      line_number: true
      auto_detect: false
      tab_replace:

    # Category & Tag
    default_category: uncategorized
    category_map:
    tag_map:

    # Date / Time format
    ## Hexo uses Moment.js to parse and display date
    ## You can customize the date format as defined in
    ## http://momentjs.com/docs/#/displaying/format/
    date_format: YYYY-MM-DD
    time_format: HH:mm:ss

    # Pagination
    ## Set per_page to 0 to disable pagination
    per_page: 10
    pagination_dir: page

    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: yelee

    # Deployment
    ## 这里是重点，这里是修改发布地址，因为我们前面已经加了 SSH 密钥信息在 Github 设置里面了，所以只要我们电脑里面持有那两个密钥文件就可以无需密码地跟 Github 做同步。
    ## 需要注意的是这里的 repo 采用的是 ssh 的地址，而不是 https 的。分支我们默认采用 master 分支，以后你翅膀硬了要换其他也无所谓。
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
     type: git
     repo:
           github: git@github.com:jibaole/jibaole.github.io.git,master
           coding: git@git.coding.net:jibaole/jibaole.git,master

  • 编辑全局配置后我们需要重新部署：

    • 继续在 Git Bash 中输入命令：
    • 先清除掉已经生成的旧文件：hexo clean
    • 再生成一次静态文件：hexo generate
    • 在本地预览下：hexo server
    • 本地没问题之后，Ctrl + C 停掉本地预览。
    • 在部署到 Github 之前，需要先确定你是否已经用过 Git，如果你没用过，则此时你需要做如下设置，在 Git Bash 中依次输入下面两个命令：
      • git config --global user.email "你的 Github 注册邮箱地址"
      • git config --global user.name "你的 Github 用户名"
    • 使用部署命令部署到 Github 上：hexo deploy，有弹出下面提示框，请输入：yes
      • 确认提交
    • 提交成功效果如下：
      • 提交成功
    • 访问服务器地址进行检查：http://jibaole.github.io，效果如下
      • 服务器效果
    • 但是，也不排除你 deploy 不了到 Github，报这个错误：Host key verification failed，那解决办法如下：
      • 还是在 Git Bash 界面中，输入如下命令：ssh -T git@github.com，根据界面提示，输入：yes 回车。之后你可以再试一下是否可以 deploy。

  • 通过上面几次流程我们也就可以总结：以后，每次发表新文章要部署都按这样的流程来：

    • hexo clean
    • hexo generate
    • hexo deploy

  • 也因为这几个命令太频繁了，所以又有了精简版的命令：

    • hexo clean == hexo clean

    • hexo g == hexo generate

    • hexo s == hexo server

    • hexo d == hexo deploy

      或使用：hexo clean && hexo g && hexo s 清数据->生成->启动本地服务(本地)

      hexo clean && hexo g && hexo d     一键部署Pages空间(线上)

    常用插件

    1
    2
    3
    4
    > 本地服务：  npm install hexo -server --save
    > 部署到Pages: cnpm install hexo-deployer-git --save
    > 搜索：npm install --save hexo-generator-search
    > RSS: npm install hexo-generator-feed --save

绑定域名

  • 绑定域名不排除会遇到很多网络问题或是七七八八，所以这里先提供先官网的一些说明：

  • 首先我们要一个 CNAME 文件（文件名叫 CNAME，没有文件后缀的），把该文件放在 E:\git_work_space\hexo\source 目录下，以后一些需要放在根目录的资源文件都可以放这里。如果你找不到这样的文件可以到我的项目上下载：https://github.com/jibaole/jibaole.github.io

    • CNAME 上的内容需要写你具体要绑定的域名信息，比如我是：www.jibaole.top，：

  • 接着我们需要到阿里云上设置域名解析：https://www.aliyun.com/

    • 设置域名解析

      提高访问速度：
      默认记录值(国内)：jibaole.coding.me.
      另一个记录值(海外)：jibaole.github.io.

  • 设置好之后，等过几分钟域名解析好之后，我们访问：http://www.jibao.top，效果如下：

    • 域名访问效果
    • 2016-08-19 更新：Github 提示，建议我们使用 CNAME 方式来指向，别用 IP，所以建议你这样配置，还是以我的为例：
      • 主机记录：code
      • 记录类型：CNAME
      • 记录值：jibaole.github.io.（后面的这个点别忘记了）
      • 还有，要记得把 CNAME 那个文件再 deploy 到 Github 哦，不然还是访问不了的。

    整合 IntelliJ IDEA 提高效率

  • 为了提交写作效率，我个人建议使用 IntelliJ IDEA 作为 Markdown 编辑工具

    • IntelliJ IDEA 有各种各样的快捷键支持你的操作
    • IntelliJ IDEA 可以快速地全文检索项目所有的文件
    • 对 JavaScript、CSS、HTML 等常见语言的良好支持，方便你修改你的主题

  • 如果你还不会使用 IntelliJ IDEA 或是 JetBrains 家其他产品，你可以看下我写一整套教程：http://wiki.jikexueyuan.com/project/intellij-idea-tutorial/

  • 现在我们用 IntelliJ IDEA 打开我们本地目录：E:\git_work_space\hexo，打开后效果如下图：

    • IntelliJ IDEA 打开项目

  • 由于 IntelliJ IDEA 在 Windows 下的默认终端是 cmd 不好用，我们现在需要重新修改下 IntelliJ IDEA 的终端工具，把它指向我们习惯的 Git Bash，这样方便操作，如下图 gif 演示。

    • IntelliJ IDEA 下操作 hexo
    • 如 gif 演示，我们可以 IntelliJ IDEA 里面安心写文章、做发布等操作。

  • 为了更稳定地使用 IntelliJ IDEA，在不修改主题的情况下，我们还需要这样做：

    • IntelliJ IDEA 下操作 hexo

  • hexo 新文章内容的开头需要这样定义：

    • categories：表示文章所属分类
    • tags：表示文章所属标签
    1
    2
    3
    4
    5
    6
    ---
    title: 这是文章标题
    date: 2016-02-28 17:58:27
    categories: [Hexo,IntelliJ IDEA]
    tags: [Hexo,IntelliJ IDEA,Git,Github,Node.js]
    ---

    结束语

评论