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内容格式如下所示。
未完待续......
领取专属 10元无门槛券
私享最新 技术干货