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
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券