Git 和 Hexo 搭建自己的博客

转眼间,过去了几个月,之前写的博客因为自己的疏忽大意而付之一炬,心痛之余进行了总结。当时是在windows环境下搭建,这次尝试用Mac环境搭建,发现还是有些改动,目录结构也有变化。参考网上的资料,结合自己之前的思路,将其重新搭建起来,写下心得与思路! 😅

思路

  • 在这之前,先理清思路:
    1
    2
    3
    4
    5
    6
    Hexo 基于Nodejs,所以先安装nodejs;
    Hexo 提交部署github需要使用git工具,所以需要安装git,用 homebrew 的话也是一句话搞定;
    安装node的方法有很多,windows上直接下载可执行程序(.exe)安装就OK了;
    Mac上当然也可以啦,也有可执行程序来安装,不过还是推荐用 homebrew 来安装;
    什么 ?你不知道 homebrew ?一句话就是mac下的软件包管理器;
    什么 ?软件包管理器又是什么鬼 ?好吧,无底洞了,自行去网上找资料吧。。。

安装工作

安装homebrew
  1. Mac自带ruby脚本功能,一句话搞定:

    1
    ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"
  2. homebrew 官网上提到的方法:将以下命令粘贴至终端:

    1
    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
安装Node
  1. homebrew 安装,一句话搞定:

    1
    brew install node
  2. 如果之前安装了 Xcode 和 git 的话:

    1
    2
    3
    4
    5
    git clone git://github.com/joyent/node.git
    cd node
    ./configure
    make
    sudo make install
  3. 下载源码编译执行同上

安装git
  1. homebrew 安装,一句话搞定:

    1
    brew install git
  2. 前提是安装好了 Xcode:

    1
    2
    3
    4
    5
    6
    7
    curl -O http://kernel.org/pub/software/scm/git/git-1.7.5.tar.bz2
    tar xjvf git-1.7.4.1.tar.bz2
    cd git-1.7.4.1
    ./configure --prefix=/usr/local
    make
    sudo make install
    which git
  3. 下载源码编译执行同上

  4. 图形界面安装OpenInGitGui,不过我大天朝伟大的防火墙。。。

安装Hexo
  1. 用node自带的npm安装,如果速度不(fang)理(huo)想(qiang),请切换至淘宝源,如何切换还是自行百(guang)度(gao)吧!

    1
    npm install -g hexo
  2. 下载源码编译执行同上

    安装完成后,选择自己“心仪”的目录,然后执行

    1
    2
    hexo init
    npm install
连接至git
  1. 检查SSH key

    1
    cd ~/.ssh

    如果之前没有生成过ssh,那么该目录不存在。备份也就不用看了。

  2. 备份SSH key

    1
    2
    mkdir key_backup
    mv id_rsa* key_backup
  3. 生成SSH key

    1
    ssh-keygen -t rsa -C "xxxx@xxxx.com"

    这里填入自己的邮箱

  4. SSH key添加到Github
    登陆Github,点击自己头像右侧的⬇️ ,Settings > SSH and GPG keys > SSH keys > New SSH keys 将生成的key(id_rsa.pub文件)内容copy到输入框中,然后 Add SSH keys 保存。

    如何copy(id_rsa.pub文件)的内容,请自行。。。

  5. 测试连接

    1
    ssh git@github.com
  6. 设置个人信息

    1
    2
    git config --global user.name "你的GitHub名字”
    git config --global user.email "你的GitHub邮箱"

    这里会弹出输入密码之类的,可以直接回车跳过。
    这一步也可以直接跳过,不过后面每次提交会要求输入账号和密码。

  7. 安装git部署插件

    1
    npm install hexo-deployer-git --save

    安装这个插件之后就可以直接使用 hexo d 来部署到git仓库

    然后配置部署,打开站点配置文件,找到deploy字段,修改为如下格式:

    1
    2
    3
    4
    deploy:
    type: git
    repository: git@github.com:yourname/yourname.github.io.git
    branch: master

    如上配置为免密提交,如果为了安全隐私考虑,需要每次登陆,可将repository字段修改为:

    1
    repository: https://github.com/yourname/yourname.github.io.git
  8. 预览
    到了这里其实前期工作已经结束。直接使用下面的命令预览效果:

    1
    2
    hexo g
    hexo s

    然后本地预览

    既然提到了hexo命令,就来说说常用的hexo命令

    1
    2
    3
    4
    5
    6
    7
    hexo n // hexo new 的简写 #新建文章
    hexo g // hexo generate的简写 #生成,编译
    hexo s // hexo server的简写 #启动本地服务预览
    hexo d // hexo deploy的简写 #部署
    hexo clean // 清除编译文件
    hexo d -g // 编译部署
    hexo s -g // 编译预览

配置工作

本来是要写一下 Hexo 的配置,不过,官方文档已经写的很详细了,而且还是简体中文,感觉没有什么必要了。写写别的。

Next 主题

“萝卜白菜各有所爱”,我是感觉 next 主题很合心意,简单,简洁。用起来很舒服。其实,next 的官方文档也很详细了,不过还是说一说吧。

  1. 下载主题
    推荐使用 git 直接 clone 最新版本

    1
    2
    cd your-hexo-site
    git clone https://github.com/iissnan/hexo-theme-next themes/next

    cd 到自己的 hexo 根文件夹,然后直接执行以上命令即可。

  2. 启用主题
    cd 到 hexo 根目录

    1
    vim _config.yml

    这样就打开了站点配置文件,然后修改 theme 字段。当然,也可以直接用编辑器打开根目录下的_config.yml进行编辑。

    1
    theme: next

    注意: vim 中修改或者添加的字段,冒号后面都要带一个空格,否则报错!!!

    这步之后其实就可以编译然后本地预览效果了。

  3. 主题设定
    cd 到 hexo/themes/next/theme 目录

    1
    vim _config.yml

    这样就打开了主题配置文件,next 主题提供了三种外观,因个人而异设置,我设置的是 Mist

    修改 Scheme 字段即可,选择哪个主题将其前面的 # 去掉即可,然后将其他两个加上 # 。

    1
    2
    3
    #scheme: Muse
    scheme: Mist
    #scheme: Pisces
  4. 语言设置
    这个要修改站点配置文件,将 language 设置为你需要的语言,然后所有的字段,诸如标签之类的,会全部翻译为对应的语言。

    1
    language: zh-Hans
  5. 设置菜单
    也就是设置需要显示的按钮。对应字段为主题配置文件menu 。可以设置名称和图标。需要的按钮将其对应的前面的 # 除去即可。当然,也可以自己自定义,具体看官方文档吧。

    1
    2
    3
    4
    5
    6
    7
    menu:
    home: /
    archives: /archives
    #about: /about
    categories: /categories
    tags: /tags
    commonweal: /404.html
  6. 设置侧栏
    对应的是主题配置文件中sidebar字段。

    侧栏位置修改项貌似因版本而异,会失效。

    侧栏显示时机修改 sidebar.display 的值。

    1
    2
    3
    4
    5
    6
    sidebar:
    display: always
    #post - 默认行为,在文章页面(拥有目录列表)时显示
    #always - 在所有页面中都显示
    #hide - 在所有页面中都隐藏(可以手动展开)
    #remove - 完全移除
  7. 设置头像
    修改主题配置文件 avatar 字段。可以为网络链接,也可以为站内文件。

    将头像放置主题目录下的 source/uploads/(目录若不存在则新建)配置为:avatar: /uploads/avatar.png

  8. 设置作者昵称以及站点描述
    修改站点配置文件中 author 字段为自己的昵称;修改 description 字段为自己喜欢内容即可。

添加emoji

作为emoji的死忠粉,随时随地能发表情是多么愉快的事情,无奈的是查资料之下发现 Hexo 默认的渲染器不支持插件,这当然不行啦。万幸还有一个是支持插件的,那就是 hexo-renderer-markdown-it ,果断搞起来。

  1. 更换渲染引擎
    进入 hexo 根目录,也就是你自己“心仪”的目录,执行下列命令:

    1
    2
    npm un hexo-renderer-marked --save
    npm i hexo-renderer-markdown-it --save
  2. 安装emoji插件
    hexo-renderer-markdown-it 原装只有5个插件,没有emoji表情插件,所以要自己安装,hexo 根目录:

    1
    npm install markdown-it-emoji --save

    由于emoji表情太丑,不够强大,因此使用 twitter 的 twemoji 插件,在node_modules/markdown-it目录下:

    1
    git clone git@github.com:twitter/twemoji.git
  3. 配置twemoji

    在站点配置文件最下面添加如下配置:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    # Markdown-it config
    ## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
    markdown:
    render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
    plugins:
    markdown-it-abbr
    markdown-it-footnote
    markdown-it-ins
    markdown-it-sub
    markdown-it-sup
    markdown-it-emoji # add emoji
    anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor
    permalinkSymbol:

    hexo-renderer-markdown-it 详细配置请访问GitHub社区

    然后编辑node_modules/markdown-it-emoji/index.js文件,最终文件:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    'use strict';
    var emojies_defs = require('./lib/data/full.json');
    var emojies_shortcuts = require('./lib/data/shortcuts');
    var emoji_html = require('./lib/render');
    var emoji_replace = require('./lib/replace');
    var normalize_opts = require('./lib/normalize_opts');
    var twemoji = require('../markdown-it/twemoji') //添加twemoji
    module.exports = function emoji_plugin(md, options) {
    var defaults = {
    defs: emojies_defs,
    shortcuts: emojies_shortcuts,
    enabled: []
    };
    var opts = normalize_opts(md.utils.assign({}, defaults, options || {}));
    md.renderer.rules.emoji = emoji_html;
    //使用 twemoji 渲染
    md.renderer.rules.emoji = function(token, idx) {
    return twemoji.parse(token[idx].content);
    };
    md.core.ruler.push('emoji', emoji_replace(md, opts.defs, opts.shortcuts, opts.scanRE, opts.replaceRE));
    };

    由于原生表情太魔性,接下来要用 css 控制 emoji 表情的样式

    比如:在 hexo/themes/next/source/css/_custom/custom.styl文件添加如下样式:(这里发现权重不够,样式不能生效,所以加了权重,但记得之前在windows下无此问题)

    1
    2
    3
    4
    5
    6
    .post-body img.emoji {
    height: 1.2em;
    border: 0;
    padding:0;
    display:inline;
    }

    样式可以随便写,自己开心就好。😄 😃 😆

    然而还有一个问题,图片被绑定,可以点击,还有边框,吃藕!

    这个问题因主题而已,通过DOM追踪来排查,我的修改在 hexo/themes/next/source/js/src/utils.js 这点和windows有差异,文件夹不同。

    1
    .not('.group-picture img, .post-gallery img, img.emoji')

    至此,添加 twemoji 结束,可以尽情的使用了!!!

推荐一个 emoji 表情网站 EMOJI CHEAT SHEET

0%