基于Hexo的博客搭建 for Mac

这是迁移博客后的第二篇,其实我很懒,并不喜欢写博客这种吃力不讨好的活儿,看的人也未必多,但是每次写完一篇博客之后的短暂的成就感以及写的这个过程中这种强制性的学习过程是很令人受用的。

关于Hexo

我先后用过博客园、、GithubPage+Hexo三个博客,从一个迁移到另一个根本原因就是好不好看,Hexo提供了众多丰富的主题,这点是最打动我的。至于什么是Hexo?套用官网的话来说:

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

Hexo没有编辑器,也没有可视化的操作页面,在配置好必要的环境之后,书写文章要依赖其他的Markdown编辑器,而且关键是相对于这种平台类博客,缺少了推广的重要渠道,写博客自然是想让更多的人们看到,而自建博客(如我的博客)需要你去研究SEO…如果这么多缺点还没打消你看下去的想法,那么恭喜你将会有一个有(neng)个(zhuang)性(bi)的博客。

环境配置及安装

  1. Node.js

    移步Node.js官网进行安装。

  2. Git

    Xcode自带Git环境,或者移步Git官网进行安装,再或者使用Homebrew安装:

    $ brew install git
    

当安装完Node.jsGit之后,就可以进行Hexo安装了:

$ sudo npm install -g hexo-cli

安装成功之后可以cd到你想要存放博客的目录,默认为~/目录,执行建站命令:

$ hexo init BlogName
$ npm install
// 成功之后的目录结构如下
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

命令执行结束后,就可以正式使用Hexo了,使用debug模式进行查看:

$ hexo s --debug

访问http://localhost:4000就可以看到Hexo的默认界面了。

托管博客

在本地Hexo搭建好之后就要选择服务器进行托管,这里只讲一下通过Github进行托管的方法。关于自有VPS的托管可以参考这篇文章。

创建仓库

进入Github新建仓库,名称格式为UserName.github.io,例如xuhaoranLeo.github.io。然后将本地Hexo站点配置文件的配置仓库修改为当前仓库的git地址:

$ cd ~/blog/
$ open _config.yml
// 修改repository
deploy:
  type: git
  repository: https://github.com/xuhaoranLeo/xuhaoranleo.github.com.git
branch: master

此处注意:后面要接Space,这种格式才能被Hexo识别。

配置ssh key

仓库配置好之后,要为你的Github添加ssh public key

SSH 密钥对可以让您方便的登录到 SSH 服务器,而无需输入密码。由于您无需发送您的密码到网络中,SSH 密钥对被认为是更加安全的方式。

SSH 密钥对总是成双出现的,一把公钥,一把私钥。公钥可以自由的放在您所需要连接的 SSH 服务器上,而私钥必须稳妥的保管好。

所谓"公钥登录",原理很简单,就是用户将自己的公钥储存在远程主机上。登录的时候,远程主机会向用户发送一段随机字符串,用户用自己的私钥加密后,再发回来。远程主机用事先储存的公钥进行解密,如果成功,就证明用户是可信的,直接允许登录 shell,不再要求密码。这样子,我们即可保证了整个登录过程的安全,也不会受到中间人攻击。

—— archlinux page

理解完ssh key之后就可以进行生成了:

$ ssh-keygen -t rsa -C "[email protected]"
Enter file in which to save the key (/Users/xuhaoran/.ssh/id_rsa): // 输入绝对地址和名称,直接enter使用默认
Enter passphrase (empty for no passphrase):  // 输入ssh key的密码,直接enter是不使用密码

// 生成成功
The key's randomart image is:
+---[RSA 2048]----+
|    ..o .    ..+ |
|     oo. .    o.o|
|     +  o .  o +B|
|      o+ +. + =.%|
|       +S.++ + B+|
|      ..+O= E   *|
|         +.o   .o|
|        .      . |
|                 |
+----[SHA256]-----+

成功生成之后使用任意方法打开.public文件,复制里面的密钥,粘贴到Github -> Settings -> SSH and GPG keys -> New SSH key ->Key中,Title可以随意写。

基本使用

安装完Hexo就可以进行日常使用了,在blog目录下新建文章:

$ hexo new "This is a new article"

Hexo会自动生成.md文件在~/BlogName/source/_posts目录下,可以使用各种Markdown编辑器进行博客的书写了。

在每篇文章里面可以配置Front-matter,来标记类别、时间、标签等:

---
title: Terminal命令小结
date: 2017-11-22 13:56:34
tags: 
    - Terminal Command Line
---

书写完成之后生成generate静态文件后进行部署deploy操作,会让你的文章发到Github托管的服务器上:

$ hexo g -d

日常书写之外,如果你还想定制多样化的博客样式,可以使用各种ThemeHexo默认的样式为landscape,我的博客的样式为NexT。其他各种样式可以去Hexo官网主题搜索。

例如找到NexT主题后进入其Github,使用git进行安装:

$ git clone https://github.com/iissnan/hexo-theme-next themes/next

之后修改站点配置文件中的theme属性:

theme: next

最后清空缓存并重新生成部署:

$ hexo clean
$ hexo g -d

配置文件

在了解Hexo基本的部署和使用方法之后,就要进行一些站点和主题的配置了,这会让你的博客更具个人色彩。

站点配置文件

blog根目录下的_config.yml文件就是站点配置文件,可以使用编辑器打开:

title: Leo
subtitle: 侠心交友,素心做人。
description: 站在更高的地方,看见更广的世界。
author: 许昊然
language: zh-Hans

关于titledescription等属性的具体表现形式是根据你使用的Theme而言的,language属性匹配的是./themes/CurrentTheme/languages下面的文件名,NexT下对应的简体中文就是zh-Hans,里面的内容之后再讲。

如果你的博客是在一个子目录下,可以设置root属性:

url: http://xuhaoranleo.top
root: /myBlog

其他的一些属性都有相关注释解释。

主题配置文件

./themes/CurrentTheme目录下的_config.yml文件即是主题配置文件,每个主题都有自己对应的属性来配置,这里只拿NexT这个主题简单来说:

override: false // 可以用来覆盖掉站点配置文件
menu:
  home: / || home
  jottings: /tags/随笔 || calendar
  tags: /tags/ || tags
  archives: /archives/ || archive
menu_icons:
  enable: true

menu是主要需要配置的,这个就是你的博客展现出来的分类,/表示根目录,||后面接的是icon name,如我的博客有一个随笔分类,我是利用标签tags来配置的,/tags/随笔表示了点击的链接随笔标签。在随笔文章中的Front-matter里面配置:

tags: 
- 随笔

而具体是使用tags还是其他分类archivescategories,再或者是其他自定义的类别,主要还是根据每个类别的layout决定的,这个布局文件在./themes/CurrentTheme/layout,例如tag.swig

social:
  GitHub: https://github.com/xuhaoranLeo || github
  # E-Mail: mailto:[email protected] || envelope
  微博: https://weibo.com/5711479827 || weibo
links:
  我的: http://www.jianshu.com/u/8f0c4d84e87c

social用来配置关于你的一些其他链接的,同样||后面是icon namelinks则是一些友情链接,除了关联一些你喜欢的网址,据说可以在SEO中发挥一些作用,这点我并未深入了解。

reward_comment: 请我喝一杯咖啡?
wechatpay: /assets/blogImg/wechatpay.jpg
# alipay: /assets/blogImg/alipay.jpg
#bitcoin: /images/bitcoin.png

reward属性是用来接受赞助的,这没什么好讲的,主要是利用这块说一下Hexo里面图片的摆放,正常来说Hexo的博客资源都是基于source这个目录作为根目录的,你可以把图片全部摆在一个目录中,例如assets,也可以在其下具体建立新的目录进行分类,如用的时候直接用Markdown导入就好:

![this is a image](/assets/blogImg/avatar.jpg)

其他的关于百度分析等第三方服务的接入可以自行参考NexT文档来学习。

语言配置文件

语言配置文件主要是用来显示博客整体的文字效果的,目录为./themes/CurrentTheme/languages,例如在主题配置文件中我添加了jottings这个新的menu,那么我就要在语言配置文件,对应其展现的文字:

menu:
  home: 首页
  archives: 归档
  tags: 标签
  about: 关于
  jottings: 随笔

一些诸如reward你是想叫做打赏还是乞讨都可以在此处设置。

其他配置

Hexo置顶问题

参考这篇文章,安装插件:

$ sudo npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

之后再需要置顶文章的Front-matter中加上top: true属性即可,同时添加多个置顶按照时间顺序排序。

NexT自定义首页展示文章内容

之前遇到的一个需求,例如我的博客中存在随笔分类,而我希望我的首页只展现我的技术类文章。这篇文章解决了这个问题,具体来说就是修改layout文件:

$ cd YourBlogDir/themes/YourCurrentTheme/layout
$ open index.swig
{% extends '_layout.swig' %}
{% import '_macro/post.swig' as post_template %}
{% import '_macro/sidebar.swig' as sidebar_template %}

{% block title %}{{ config.title }}{% if theme.index_with_subtitle and config.subtitle %} - {{config.subtitle }}{% endif %}{% endblock %}

{% block page_class %}
  {% if is_home() %}page-home{% endif -%}
{% endblock %}

{% block content %}
  
{% for post in page.posts %} {% if post.visible !== 'hide' %} {{ post_template.render(post, true) }} {% endif %} {% endfor %}
{% include '_partials/pagination.swig' %} {% endblock %} {% block sidebar %} {{ sidebar_template.render(false) }} {% endblock %}

直接复制即可,主要就是添加了一个判断:如果文章中的Front-matter包含一个visible属性切属性为hide,那么首页就不进行展示。之后只要在随笔类的文章中添加属性即可:

---
title: Hello World
visible: hide
tags: 
- 随笔
---

更换个人域名

如果想进一步装逼优化,那么可以为你的github.io包一个更具个性的域名,域名可以在阿里万网上买,经常有活动,便宜的一年也就10多块钱。

当你选好了一个域名之后需要对其进行解析,添加解析记录:

记录类型: A // 指向一个IPV4地址
主机记录: @ + www // @表空,再配置一个www的,不管你是输入www.xuhaoran.top还是xuhaoran.top都可以直接进入博客
解析线路: 默认 
记录值: 添加你的github.io的IP,可以终端ping一下就知道了,例如我的是151.101.1.147
TTL值: 默认10分钟

配置好域名解析之后进入Github的仓库,Setting —> Options —> GitHub Pages —> Custom domain中设置好你申请的新域名。

[图片上传失败...(image-f217ec-1513156524164)]

最后新建一个CNAME文件:

$ cd YourBlogDir/themes/YourCurrentTheme/source
$ touch CNAME
$ vim CNAME

填写你的新域名在其中,:wq保存离开,这样就可以让你每次编译之后都可以直接使用新域名了。请愉快地访问你的新博客地址吧。

备份博客

备份博客思路参考这篇文章。这里按照我的理解说一下:

[图片上传失败...(image-d7b349-1513156524164)]

总体来说就是使用git branch来代替静态页面仓库+源码仓库的组合,新建一个分支并设为主分支,用来保存源码,master分支依然用来保存静态页面,这样做的好处是你日常的hexo g -d命令不受到影响,而当你面临着迁移博客的时候直接拉取你的git就可以了,任何修改直接提交,非常方便且简洁。

按照上面新建博客的步骤,我们已经有了一个可以部署到Github的博客了,现在直接对这个博客进行备份,直接简单粗暴的方法:

  • Github新建仓库,名字随意
  • clone新仓库到本地,新建分支hexo并切换到该分支
  • Github上设置hexo分支为主分支
  • 复制本地blog文件到本地仓库,并提交代码到hexo分支
  • 删除Github上的xuhaoran.github.io仓库,并将新仓库Renamexuhaoran.github.io

这样其他配置不需要修改,强行把仓库迁移了[手动微笑],以后如果切换电脑就可以直接拉取代码了~

这是这个博客的第二篇文章,中间断断续续地写了半个月,实在是汗颜,这两篇都是基础类的,之后会写一些iOS技术类博客,希望能给你帮助。如若有任何纰漏可以直接发邮件给我,还请见谅。

你可能感兴趣的:(基于Hexo的博客搭建 for Mac)