Tobias's Blog

使用hexo搭建个人博客的细节

工具使用
Word count: 2.8kReading time: 10 min
2019/09/26 Share

一直都想写点技术文章，但由于鄙人不才，知识储备太少，所以工作一年都是看书和看视频等知识输入类型，并没有进行知识输出，现在决定搭建个人博客，不断学习的过程中写点东西，来当作自己的总结和分享

博客开源框架选择

搭建博客有很多种方式，可以完全靠自己纯手工搭建，或采用开源的东西，前者本人觉得太折腾，所以不太适合我这种只想写点文章的个人用户，所以我选了开源静态博客框架加GitHub Page来托管等实现方案，开源框架目前比较火的有Hexo 、Jekyll、WordPress、ghost、Simple，Octopress…

## Hexo 和 Jekyll

这是两种我比较了解的框架，两个都是比较主流的选择下面说一下选择原因吧！

  1. Jekyll的底层是 Ruby，而Hexo 的底层是NodeJS，所以要求你有NodeJS环境或者Ruby，由于本人上班的电脑是Windos环境，安装Ruby感觉会比NodeJS麻烦，所以这一点我还是选了Hexo

  2. 虽然两者都是支持Markdown语法和有很多主题，但是我更喜欢Hexo的主题

  3. 之前的蚂蚁金服的sofa stack群里发现他们的sofa官网是Hexo写的，同时也期待他们开源这套主题模板，本人想用:joy:

    1569480184234

    废话不多说，下面开始安装搭建环境，hexo官网:https://hexo.io/

Github创建项目

由于我们并没有后端服务器，所以我们把博客的东西都放到GitHub上，让GitHub做托管，这里由于我没有申请域名所以我还是用标准的GitHub Page ，由于GitHub有个特点就是它会用你的用户名.github.io/项目名/访问你仓库的index.html，
例如：tobiasll.github.io/HappyBirthday
所以我们要创建一个项目名叫 你的GitHub用户名.github.io来作为你的blog仓库，到时候如何没有买域名的小伙伴就可以直接用你的用户名.github.io不用加上项目名就可以直接访问你的博客了

新建项目

首先到github创建一个项目，项目名为你的用户名.github.io

1569481199824

为什么图片要用红圈圈着SSH，因为后面我们可以用SSH keys 方式部署hexo提交代码，就不用每次都输入用户名和密码

安装Git

既然是托管到github，那肯定要安装Git啊！Git官网:https://git-scm.com/，git的安装自行Google

安装完我们要设置ssh key ，首先进入或者在菜单里搜索 Git Bash，设置 user.name 和 user.email 配置信息：

1
2
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

然后生成设置SSH密钥文件

1
ssh-keygen -t rsa -C "你的GitHub注册邮箱"

1569482989245

输入命令后去C盘框生存目录的地址找到id_rsa.pub文件然后复制这个文件的密钥字符串到github 的新增ssh key中

1569483307400

然后到gitBash 测试一下输入

1
ssh git@github.com

1569483634365

安装NodeJS

Hexo 基于 Node.js，Node.js 下载地址：Download | Node.js 下载安装包，注意安装 Node.js 会包含环境变量及 npm 的安装，安装后，检测 Node.js 是否安装成功，在命令行中输入 node -v

检测 npm 是否安装成功，在命令行中输入 npm -v :

安装Hexo

先到你的想要存放的hexo数据的目录下创建一个空的文件夹，然后进去文件夹，在地址栏输入cmd进入命令行1569483903636

然后输入安装hexo的命令

1
npm install -g hexo-cli

安装完成输入,初始化我们的博客

1
hexo init blog

这是初始化完成就会出现一个blog文件夹

1569484086387

然后在命令行测试hexo是否搭建成功，输入(注意如掉//后面的内容，)

1
2
3
hexo n test_tobias      # 注释 hexo new "我的博客" 新建文章
hexo g                  # hexo generate  生成
hexo s  				# hexo server 启动服务预览

1569484661570

然后在浏览器输入：http://localhost:4000，出现以下页面则说明搭建成功

1569484704075

推送本地hexo到github托管

因为我们要做到的时让别人能通过外网访问我们的博客，上面的方式是在本机部署的方式，所以我们要把代码放到GitHub上，让github24小时托管，我们每次在本地写完文章或修改配置后部署到github上就好了

为了达到此目的，我们需要修改_config.yml配置文件，绑定我们的git地址，但是_config.yml是有两个一模一样的名子的，希望大家注意一下，别被坑到

  1. 第一个是在blog文件夹下的，是用来配置hexo站点的站点配置文件

    1569485334754

  2. 第二个是在themes文件下的，是用来配置主题也就是页面样式的主题配置文件

    1569485426158

那我们需要推送网站到github上，所以我们就需要配置站点的git地址，所以我们要修改blog目录下_config.yml的站点配置文件

打开config.yml文件添加 下面的配置：type、repo、brach前面一定要有两个空格，冒号：后面也要一个空格

1
2
3
4
deploy:
  type: git
  repo: 这里填入你之前在GitHub上创建仓库的ssh完整路径，记得加上.git
  branch: master

1569485764012

注意repo地址是ssh地址，不是https地址，

1569485961666

然后按保存，其实就是给 hexo d 这个命令做相应的配置，让 hexo 知道你要把 blog 部署在哪个位置，很显然，我们部署在我们 GitHub 的仓库里。最后安装 Git 部署插件，输入命令：

1
npm install hexo-deployer-git --save

安装完就可以开始推送博客了

1
2
3
4
hexo clean  # 清除缓存文件 (db.json) 和已生成的静态文件 (public)。
在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。
hexo g # hexo generate 生成静态文件。
hexo d # hexo deploy 部署网站。

然后出现，这时你的GitHub项目也有一堆文件1569486164154

然后就可以在你的浏览器输入 你的github用户名.github.io就可以访问博客了，ok，这时候如果成功出现页面则说明推送成功了，也可以正常使用，只是页面有很多参数都不是你想要的，而且很丑，所以这时候我们要去修改参数和主题，使这个博客变成真正属于你的网站

修改站点参数

站点的config.yml可以修改一部分参数，例如

1569486666588

1569486739448

但是修改内容非常有限，所以这里不建议修改站点配置来达到目的，我们去修改themes下的另一个config.yml文件来达到修改样式的目的，那不喜欢这个主题的样式怎么办，这时候我们就可以换个主题，hexo是一个支持自定义主题模板的框架，同时官网也有很多开源的主题开源更换

更换主题

1569487354825

到官网选一个自己喜欢的主题，然后点图片进去预览，点红框的主题模板名字就可以进去模板的github了，里面都有很详细的配置和安装教程

1569487435408

然后就一步步按着安装就好了，然后遇到坑就自己去Google解决

archer主题启用 Algolia 搜索

因为我用的模板是支持Algolia服务的，里面有个小坑，安装步骤

主题启用Algolia的链接https://github.com/fi3ework/hexo-theme-archer/wiki/%E5%90%AF%E7%94%A8-Algolia-%E6%90%9C%E7%B4%A2

1569487753234

其中这一段是有坑的，因为cmd打开的命令行执行hexo aligolia一直报错1569487913848

加上当时上班中午没睡觉在搭博客，有点懵逼，不断在从新添加apikey和换不同的apiKey来尝试，但是都没生效，于是我就在不用set 变量了改用git bash的export了，结果一次就成功了，所以这个坑，如果大家遇到的话，注意一下

再说一个坑：Algolia 跳转到yoursite.com

1569739861945

点击搜索结果的时候跳转地址居然不是你的网页，跑到了http://yoursite.com/xxxx去了

1569739974064

解决，首先去\blog\node_modules\hexo-algolia\lib修改command.js文件1569740454076

找到INDEXED_PROPERTIES这个字段 向里面添加一个path字段1569740545375

1
2
3
4
5
6
7
8
9
10
11
var INDEXED_PROPERTIES = [
  'title',
  'date',
  'updated',
  'slug',
  'path',
  'excerpt',
  'permalink',
  'layout',
  'image'
];

1569740625530

然后到站点配置文件修改掉url字段值

1569740685270

把这个值修改为你的博客链接，然后更新下Algolia 就好了

1569740790892

使用Hexo

其实一般正常使用就记住那几个最简单的命令，也可以上官网看看命令，

  1. 1
    2
    3
    4
    5
    6
    7
    hexo new [layout] <title>
    新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。
    特别想开启about me功能时，执行 hexo new page "about"
    在 hexo 目录下 source/about/index.md 中添加字段 layout: about（这个字段必须有且不可更改为其他）
    不能用 hexo n "文章名"
    hexo n 新增的文章会保存在\hexo\blog\source\_posts文件夹下，直接去哪里打开md文件编写内容保存即可
    hexo new page "文章名" 出现在\hexo\blog\文章名\aboutindex.md
  2. 1
    2
    3
    4
    hexo generate
    生成静态文件。
    简写 hexo g
    编写完文章，运行hexo g就好生存新增静态文件，然后部署到GitHub即可
  3. 1
    2
    3
    hexo deploy
    部署网站。
    简写 hexo d
  4. 1
    2
    3
    4
    hexo clean
    清除缓存文件 (db.json) 和已生成的静态文件 (public)。

    在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

  5. other 看官网，或者等更新，常用的就这几个

小结

其实搭建博客基本一步步按照说明搭建，坑会很少的，而且很快就搭建起来的，关于hexo的使用遇到小坑或好用的骚操作，由于自己也是第一次用这个东西，加上鄙人不才，所以就写了一点点，后续我再不断更新博客，希望大家搭建博客都非常顺利，第一次写博客，花了我两个小时，写的非常不好，希望大家见谅，文章有错误和需要修改的地方，或者有好的建议都可以在博客判断的微信二维码或者邮箱或者GitHub issue 给我发信息，谢谢大家！

关于绑定域名这块请看下面《GitHub+Hexo 搭建个人网站详细教程》的文章，由于我并没有操作过，以及我没有需要补充的地方，所以我就没有写这一块的内容

参考资料

《GitHub+Hexo 搭建个人网站详细教程》

《Hexo 官网》

Author：tobias

原文链接：http://tobiasll.github.io/2019/09/26/使用hexo搭建个人博客的细节/

发表日期：September 26th 2019, 2:05:45 pm

更新日期：November 19th 2019, 2:36:59 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 博客开源框架选择
  2. 2. Github创建项目
    1. 2.1. 新建项目
    2. 2.2. 安装Git
  3. 3. 安装NodeJS
  4. 4. 安装Hexo
  5. 5. 推送本地hexo到github托管
  6. 6. 修改站点参数
  7. 7. 更换主题
  8. 8. archer主题启用 Algolia 搜索
  9. 9. 使用Hexo
  10. 10. 小结
  11. 11. 参考资料
Total : 6
2019
MySQL jvm 工具使用 数据结构与算法