准备工作

安装软件

需要安装的软件有Node.jsGitPandocTyporaWord2Md

搭建环境

在电脑上找一个存放网站的地方,新建文件夹,以hexo为例,在hexo文件加上鼠标右键,选择“Git Bash Here”,打开命令窗口,输入命令。

  • 安装hexo,npm install hexo-cli -g,输入hexo -v,检查hexo是否安装成功

  • 初始化,hexo init

  • 安装依赖组件,npm install

  • 安装编译器,npm install hexo-deployer-git --save

  • 本地查看

输入hexo g编译文件,输入hexo s,开启服务器,访问该网址,本地体验Hexo(http://localhost:4000/),假如页面一直无法跳转,那么可能端口被占用了。此时我们ctrl+c停止服务器,接着输入“hexo server -p 端口号”来改变端口号,比如5000 (hexo s -p 5000

连接Github

配置Github

注册Github账户,并新建项目(repository),项目必须要遵守格式:账户名.github.io,不然接下来会有很多麻烦。并且需要勾选Initialize this repository with a README

在建好的项目右侧有个settings按钮,点击它,向下拉到GitHub Pages,你会看到那边有个网址,访问它,你将会惊奇的发现该项目已经被部署到网络上,能够通过外网来访问它。

配置SSH

  • 设置Git的user name和email(如果是第一次的话),这里“xujun”可以替换成自己的用户名,邮箱可以替换成自己的邮箱

    1
    2
    git config --global user.name "xujun"
    git config --global user.email "gdutxiaoxu@163.com"
  • 输入ssh-keygen -t rsa -C “929762930@qq.com”,连续三个回车,生成密钥,最后得到了两个文件:id_rsa和id_rsa.pub(默认存储路径是:C:\Users\Administrator\.ssh)。

  • 输入eval "$(ssh-agent -s)",添加密钥到ssh-agent

  • 再输入ssh-add ~/.ssh/id_rsa,添加生成的SSH key到ssh-agent

  • 登录Github,点击头像下的settings,添加ssh(新建一个new ssh key,将id_rsa.pub文件里的内容复制上去)

  • 输入ssh -T git@github.com,测试添加ssh是否成功。如果看到Hi后面是你的用户名,就说明成功了

配置Deployment

  • 在hexo文件夹中,找到_config.yml文件,修改repo值(在末尾)

    repo值是你在github项目里的ssh(右下角)

测试文章

  • 新建一篇博客,执行命令:hexo new post “博客名”。这时候在文件夹_posts目录下将会看到已经创建的文件。
  • 使用编辑器编好文章。
  • 使用命令:hexo d -g,生成以及部署。
  • 部署成功后访问你的地址:http://用户名.github.io

主题安装

安装主题

安装NexT,在其文件夹中鼠标右键,点击Git Base Here。输入命令:

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

更多主题

启用主题

启用主题,在站点目录中(blog),打开配置文件_config.yml,修改theme:next

主题设置

  • 更换主题样式,在next主题目录下的_config.yml文件中将scheme设定为Pisces

  • 语言设定,在站点根目录下修改配置文件_cofig.yml中的language为zh-Hans(简体中文)

  • 修改菜单项,在主题目录下修改配置文件_cofig.yml中的menu,增添一个something(注:千万不要在这设置中文,后面的值那是查找文件的地方!若你的站点运行在子目录中,请将链接前缀的 / 去掉)

    这些配置都要与你主题目录下的languages文件中对应的yml文档里配置相关联。比如你在站点根目录中的配置文件设置language为zh-Hans,那么就要进入到主题目录下的languages文件中修改zh-Hans.yml,这样才能显示出菜单项新增的中文内容(以something为例子)

  • 设置菜单项图标,对应的字段是menu_icons。格式为item name:icon name,其中item name与所配置的菜单名字对应,icon name是Font Awesome图标的名字。而 enable 可用于控制是否显示图标,你可以设置成 false 来去掉图标。(本机出问题,无法显示icon,还未解决,求指导)

  • 设置侧栏位置,修改主题目录下sidebar的position值

  • 设置头像,在站点根目录下载配置文件中新增avatar,值设置为头像的链接地址。地址可以是网络地址,也可以是本地地址(放置在source/images/ 目录下)

  • 设置文章代码主题,在主题目录下修改配置文件highlight_theme,默认值为nomal。可以设置为night

  • 添加标签页面,前面通过修改next主题下的_config.yml文件中的menu选项,可以在主页面的菜单栏添加标签选项,但是此时点击标签,跳转的页面会显示page not found。此时我们要新建一个页面hexo new page tags

    在新建的index.md文件中添加type: "tags"

    当要为某一篇文章添加标签,只需在blog/source/_post目录下的具体文章的tags中添加标签即可,如:

  • 添加关于我页面,步骤和以上差不多hexo new page about

    在新建的index.md文件中添加如下内容

公式渲染

Hexo 默认选用是 Markdown 渲染引擎是 marked (hexo-renderer-marked)。除了默认的 marked,目前在 Hexo 上已有的其它比较好且还在维护的 Markdown 渲染引擎也就有 hexo-renderer-markdown-ithexo-renderer-pandoc,其中前者 markdown-it 支持 CommonMark 标准,后者则支持 Pandoc

写公式的话可以试下 MathJax 吧,MathJax 渲染器在 Hexo 上的实现也有的。具体自行谷歌:Hexo MathJax

如何使用别的 Markdown 渲染引擎。先安装Pandoc,然后把 hexo 里 package.json 的 Markdown 渲染器依赖换掉,比如 hexo-renderer-marked 换成 hexo-renderer-pandoc。然后重新编译一下文件就可以了。

域名绑定

当然,你不绑定域名肯定也是可以的,就用默认的 xxx.github.io 来访问,如果你想更个性一点,想拥有一个属于自己的域名,那也是OK的。

首先你要注册一个域名,域名注册以前总是推荐去godaddy,现在觉得其实国内的阿里云也挺不错的,价格也不贵,毕竟是大公司,放心!

绑定域名分2种情况:带www和不带www的。

域名配置最常见有2种方式,CNAME和A记录,CNAME填写域名,A记录填写IP,由于不带www方式只能采用A记录,所以必须先ping一下你的用户名.github.io的IP,然后到你的域名DNS设置页,将A记录指向你ping出来的IP,将CNAME指向你的用户名.github.io,这样可以保证无论是否添加www都可以访问,如下:

然后到你的github项目根目录新建一个名为CNAME的文件(无后缀),里面填写你的域名,加不加www看你自己喜好,因为经测试:

另外说一句,在你绑定了新域名之后,原来的你的用户名.github.io并没有失效,而是会自动跳转到你的新域名。

CNAME文件在下次 hexo deploy的时候就消失了,需要重新创建,这样就很繁琐,可以通过安装插件实现永久保留

1
$ npm install hexo-generator-cname --save

之后在_config.yml中添加一条

1
2
Plugins:
- hexo-generator-cname

需要注意的是:如果是在github上建立的CNAME文件,需要先clone到本地,然后安装插件,在deploy上去即可。CNAME只允许一个域名地址。

永久链接

一般来说,URL只能使用英文和数字和一些标点符号表示。这是因为网络标准RFC 1738 做了硬性规定。虽然在Hexo中引用:title可以显示中文的网址,但是复制粘贴到记事本会发现得到的是一大串百分号之类的“乱码”(其实这并不是乱码,而是中文被转码成十六进制编码的结果),看起来不怎么好看。

在permalink中使用文章id替代“:title”

在官方文档永久链接(Permalinks) | Hexo一章中有这样一段描述:

permalink的变量就这几个,其中文章id这个变量非常有用。

我们可以在博客根目录的配置文件(_config.yml)中这样修改:

1
2
#permalink: :year/:month/:day/:title # 这是原配置
permalink: :year/:id.html # 替换为此新配置12

并且在.\scaffolds\post.md中修改为:(注意新增了一个id:

1
2
3
4
5
6
7
8
9
---
title: {{ title }}
id:
date: {{ date }}
updated: {{ date }}
categories:
tags:
permalink:
---123456789

在我们的具体文章中,你可以使用任意字符串作为此文章的id,例如:

1
2
3
4
5
6
7
8
9
---
title: 如何让你的Hexo博客网址使用全英文路径
id: 123456789-abcd
date: 2017-12-30 20:57:46
updated: 2017-12-30
categories: 后台01 文档管理
tags:
permalink:
---

清理Git缓存

1
2
3
4
#清空git缓存
git rm -r --cached .
git add .
git commit -m 'update'

参考文章

[1] http://blog.haoji.me/build-blog-website-by-hexo-github.html

[2] http://www.cnblogs.com/fengxiongZz/p/7707568.html

[3] https://www.cnblogs.com/fengxiongZz/p/7707219.html

[4] http://theme-next.iissnan.com/third-party-services.html

[5] https://hexo.io/zh-cn/docs/index.html

[6] https://www.cnblogs.com/MuYunyun/p/5927491.html

[7] https://blog.csdn.net/likianta/article/details/79343427