Mac＋Hexo＋GitHub搭建博客教程（一）
1.为什么写博客
以前利用Jekyll+Github搭建过几次博客，但每次博客搭建完成后都没有继续坚持写博文，直到最近找实习才认识到技术博客的重要性。曾经学习的很多知识点都已经忘记啦，所以下定决心这次认真总结以前学习的知识点，认真写点技术文章。
2.Mac+Hexo+GitHub博客
现在GitHub博客主流的就是Jekyll和Hexo两种搭建方式，选择Jekyll还是Hexo就根据个人喜好啦，但个人更推荐使用Hexo。
Jekyll没有本地服务器，无法实现本地文章预览，需要上传到WEB容器中才能预览功能，而Hexo可以通过简单的命令实现本地预览功能，并直接发布到WEB容器中实现同步。
Jekyll主题和Hexo主题对比而言，Hexo主题更加简洁美观(个人观点)。
选择GitHub的原因不用多说，程序员的乐园，更是支持pages功能，虽然很多其他社区也支持，比如GitLab、coding、码云等，但GitHub更加活跃，自己的项目就是放在上面，所以更加方便。但GitHub有最大一点不好之处便是百度爬虫无法爬取博客内容，自己也找了好久解决方法，比如利用coding托管(免费版绑定域名有广告)、CDN加速(对于流量太小的网站没什么用)，所以暂时没什么太好的解决方法。
3.博客本地环境搭建
3.1安装Node.js和Git
Mac上安装可以选择图形化方式和终端安装，此处直接使用客户端方式安装。Node.js官网下载文件，根据提示安装即可，安装成功后在目录/usr/local/bin目录下。测试Node.js和npm，出现下述信息则安装成功。
Git官网下载相应文件根据提示直接进行安装，检查git是否安装成功，直接查看git版本。
3.2安装Hexo
Node.js和Git都安装成功后开始安装Hexo。安装时注意权限问题，加上sudo，其中-g表示全局安装。
3.3博客初始化
创建存储博客的文件，比如命名为myblog，然后进入到myblog之中。
执行下述命令初始化本地博客，下载一系列文件。
执行下述命令安装npm。
执行下述命令生成本地网页文件并开启服务器，然后通过http://localhost:4000查看本地博客。
4.本地博客关联GitHub
4.1本地博客代码上传GitHub
注册并登陆GitHub账号后，新建仓库，名称必须为 ，如 。
终端cd到myblog文件夹下，打开_config.yml文件。或者用其他文本编辑器打开可以，推荐sublime。
打开后到文档最后部分，将deploy配置如下。
其中将repository中 改为自己的用户名，注意type、repository、branch后均有空格。通过如下命令在myblog下生成静态文件并上传到服务器。
若执行 出错则执行 ，若执行 出错则执行 。错误修正后再次执行 和 上传到服务器。
若未关联GitHub，执行 时会提示输入GitHub账号用户名和密码，即:
执行成功后便可通过https://weizhixiaoyi.github.io访问博客，看到的内容和http://localhost:4000相同。
4.2添加ssh keys到GitHub
添加ssh key后不需要每次更新博客再输入用户名和密码。首先检查本地是否包含ssh keys。如果存在则直接将ssh key添加到GitHub之中，否则新生成ssh key。
执行下述命令生成新的ssh key，将 改成自己注册的GitHub邮箱地址。默认会在 中生成 和 文件。
Mac下利用 打开文件夹，打开id_rsa.pub文件，里面的信息即为ssh key，将此信息复制到GitHub的Add ssh key 中即可。Title里填写任意标题，将复制的内容粘贴到key中，点击Add key完成添加。
此时本地博客内容便已关联到GitHub之中，本地博客改变之后，通过 和 便可更新到GitHub之中，通过https://weizhixiaoyi.github.io访问便可看到更新内容。
5.更换Hexo主题
可以选择Hexo主题官网页面搜索喜欢的theme，这里我选择hexo-theme-next当作自己主题，hex-theme-next主题是GitHub中hexo主题star最高的项目，非常推荐使用。
终端cd到myblog目录下执行如下所示命令。
将blog目录下_config.yml里的theme的名称 更改为 。
执行如下命令（每次部署文章的步骤）
当本地博客部署到服务器后，网页端无变化时可以采用下述命令。
6.配置Hexo-theme-next主题
Hexo-theme-next主题为精于心、简于形，简洁的界面中能够呈现丰富的内容，访问next官网查看配置内容。配置文件主要修改主题next文件夹中_config.yml文件，next有三种主题选择，分别为Muse、Mist、Pisces三种，个人选择的是Pisces主题。主题增加标签、分类、归档、喜欢（书籍和电影信息流）、文章阅读统计、访问人数统计、评论等功能，博客界面如下所示。
6.1增加标签、分类、归档页
首先取消next/config.yml文件中的 前面的 。
增加标签页，通过 增加新界面，在myblog/sources中发现多了tags文件夹，修改index.md中内容，将type更改为 。利用 和 将界面重新上传到服务器便可看到新增加的标签页，分类和归档页同理。
6.2增加‘喜欢’界面图片流
‘喜欢’界面用于展现自己看过的书籍和电影，通过图片流的形式进行安装。
从GitHub上https://github.com/weizhixiaoyi 中的themes/next/scripts下载image-stream.js，放到你的主题/scripts目录中。如果博客主题已经默认引入了jQuery，建议在配置中将image_stream.jquery设置为false。
在Hexo博客的本地目录中创建一个favorite页面目录，同6.1步骤。并在Next主题中配置config.yml，配置如下所示，其中heart表示图标为心形。
然后在source/favorite/index.md中使用插件自定义的两个模版来生成页面，index.md内容格式如下所示。
未完待续......
- 发表于:
- 原文链接：http://kuaibao.qq.com/s/20180316G1EY7V00?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
