Mac环境安装Hexo

之前的老博客用的是WordPress,用起来各种插件还是挺丰富多彩的,可惜就是文章排版什么的很让人头痛。后来接触到Markdown语法,简洁清晰,感觉真是很适合写作。
搜索了一下WordPress相关的Markdown插件,结果都不尽人意,反而看到有讨论说用Hexo来搭建博客,可以直接用Markdown来写作,顿时感觉醍醐灌顶,因为平时博客写的都是技术文(水),对其他特殊的排版格式没有要求,于是就萌生了搭建Hexo博客的念头。
下面我假定你是个coder,Xcode已经安装好,那git什么的自然都有了,如果你不是,那么再搜索别的文章吧,我懒得补充哦。

一、环境

  1. Node.js
    • 官网下载Mac的版本就行了,我当时是7.0。
    • 下载完得到pkg包,一路无脑next就行了,安装包含有npm了。
    • 安装完之后执行命令查看node.js的版本和npm的版本:
      • $ node -v$ npm -v,分别显示各自的版本号就算安装成功了。
  2. Hexo全新安装

    • $ sudo npm install -g hexo-cli ,大概要等几分钟,完成后 $ hexo -v 查看版本。
    • $ cd ~ && mkdir blog && cd blog 切换到用户主目录并建立blog文件夹然后切换到blog目录
    • $ hexo init 初始化hexo博客,clone必要的文件,大概也要2分钟。
    • $ npm install 安装依赖包
    • $ hexo s 启动hexo本地服务器,按提示打开http://localhost:4000/ 测试访问,要停止本地服务器,按Ctrl+C键。
  3. Hexo博客文件夹恢复

    如果你已有Hexo博客文件夹,但Hexo环境没有了(重装过系统),按下列步骤。

    • 安装NodeJS
    • $ sudo npm install -g hexo-cli
    • $ cd 博客目录
    • $ rm -rf node_modules, 不做这步可能会提示ERROR Plugin load failed: hexo-server
    • $ npm install
    • $ hexo s 启动hexo本地服务器
  4. Hexo的站点配置文件 _config.yml

    • 简单地翻译一下文件里这些选项的作用

      # Hexo Configuration
      ## Docs: https://hexo.io/docs/configuration.html
      ## Source: https://github.com/hexojs/hexo/

      # Site
      title: Hexo #站点标题
      subtitle: #站点子标题
      description: #站点描述
      author: John Doe #作者名字

      language: en #站点语言,两个字母缩写表示,默认是en,中文是zh
      #这里有ISO-639-1标准参考:https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes

      timezone: #时区,默认采用你系统的设置,
      #这里有参考:https://en.wikipedia.org/wiki/List_of_tz_database_time_zones

      # URL
      ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
      url: http://yoursite.com #站点URL,如果站点在子目录,注意看上面的示例。
      root: / #站点根目录,如果站点在子目录,写成 /子目录
      permalink: :year/:month/:day/:title/ #文章的链接构成,默认是 yyyy/mm/dd/文章title
      permalink_defaults:

      # Directory
      source_dir: source #文章源目录,储存你的所有文章
      public_dir: public #生成静态网站数据的目录
      tag_dir: tags #tag目录
      archive_dir: archives #归档目录
      category_dir: categories #分类目录
      code_dir: downloads/code #代码目录
      i18n_dir: :lang #不知道
      skip_render: #不知道,不渲染的路径

      # Writing
      new_post_name: :title.md #新文章的文件名
      default_layout: post #默认布局
      titlecase: false #文章标题大小写自动改吗?
      external_link: true #在新标签打开外部链接?
      filename_case: 0 #文件名大小写,1-小写,2-大写
      render_drafts: false #是否显示草稿
      post_asset_folder: false #启用附件文件夹吗?
      relative_link: false #是否让链接相对于站点根目录
      future: true #是否显示更加新的文章
      highlight: #代码块高亮设置
      enable: true #开启
      line_number: true #显示行号
      auto_detect: false #自动检测代码语言
      tab_replace: #替换tab制表符为空格

      # 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
      per_page: 10 #站点一页显示多少篇文章,0 - 全部显示
      pagination_dir: page #分页目录(应该是用于链接分段)

      # Extensions
      ## Plugins: https://hexo.io/plugins/
      ## Themes: https://hexo.io/themes/
      theme: landscape #站点主题

      # Deployment
      ## Docs: https://hexo.io/docs/deployment.html
      ## Docs: https://hexo.io/docs/deployment.html
      deploy: #部署设置
      type: git #部署类型
      repo: git@github.com:darkhandz/darkhandz.github.io.git #部署地址,下面说怎么填

二、GitHub设置

注册GitHub账号这些简单的操作我就不说了,下面说建立一个博客repo的注意点

  1. 登录GitHub找到右上角的+号,New RepositoryRepository name你的名字.github.io,比如我的就是 darkhandz.github.io,Description随便写,然后Create repository
  2. 打开你的这个新仓库,点击右上方星星下面的Settings,滚下去,看见GitHub Pages,点击Automatic page generator,提示Your site is published at https://darkhandz.github.io/,等十几分钟,能打开这个网址访问,就说明静态页面生成了。

三、部署Hexo的静态页面到GitHub

  1. 安装hexo-deployer-git:$ npm install hexo-deployer-git --save
  2. 如何生成SSH key这个是老生常谈了,github官方教程,添加到GitHub之后就可以开始部署了。
    1. 还是展开说一下具体过程吧……照顾新手。
    2. 打开终端,执行$ ls -lA ~/.ssh,如果有id_rsa,id_rsa.pub,进行第4。
    3. 生成SSH key
      • 执行:$ ssh-keygen -t rsa -b 4096 -C "你的email@example.com"
      • 提示Enter a file in which to save the key (/Users/you/.ssh/id_rsa):,直接回车
      • 提示Enter passphrase (empty for no passphrase):,你喜欢设个密码就输入,我直接回车
      • 提示Enter same passphrase again:,意思是再输入一次密码,我也是回车
    4. 把SSH key添加到GitH
      • 执行$ ssh-add ~/.ssh/id_rsa
      • 执行$ pbcopy < ~/.ssh/id_rsa.pub
      • 打开GitHub主页,点击你右上角的小头像,选择Settings,左边点击SSH and GPG keys,右上角点击New SSH key,Title填一个你用于区分的名字,比如“My Dell Key”,Key里面按Command + V,出现一大串字母,就是你的Key啦,点击绿色的Add SSH key,好了。
  3. 具体部署命令:
    • $ cd ~/blog 切换到站点目录
    • $ hexo clean && hexo g 清理并重新生成静态网页数据
    • $ hexo deploy,部署到配置文件指定地方(这里是git),过1分钟,提示Deploy done: git表示成功了。
  4. 打开https://darkhandz.github.io就可以看到博客啦,和本地查看的内容一模一样的哦。

四、Hexo常用命令

hexo help 			#查看帮助
hexo init #初始化当前目录为hexo博客
hexo new "postName" #新建标题为postName的文章
hexo new page "pageName" #新建名为pageName的页面
hexo generate #生成静态网页, 可以在public目录查看整个网站的文件
hexo server #运行本地web服务器预览,'Ctrl+C'关闭
hexo deploy #部署.deploy目录
hexo clean #清除缓存, 建议每次执行命令前先清理缓存
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

一般写文章的流程是这样的:

  • hexo new "新文章",然后在终端提示的_post目录下用客户端打开这个md文件写作(如用MacDown)
  • hexo s ,让本地服务器运行,打开终端提示的本地网址进行文章预览
  • 发现文章有问题,继续修改md文件,改完保存,然后刷新本地网址预览修改……循环本步骤直到修改满意为止。
  • 当修改满意了:
    • Ctrl+C 停止本地服务器
    • hexo clean 清理之前生成的静态网站文件
    • hexo g 生成最新的静态网站文件
    • hexo deploy 部署到远程服务器
    • 然后打开部署的GitHub博客查看最终效果。

五、遇到各种 ERROR Plugin load failed:

  • 我是直接cd到博客目录,删除node_modules文件夹,然后npm install一次,就全好了。

参考