前言
最近看到阳春面的博客,感觉非常漂亮,正好最近也想自己搭个博客,记录一下自己的学习经历和生活感悟,给自己留下点回忆,同时整理一下自己的思路,于是就想仿照着弄一个类似的静态博客网站,正好最近有时间,而且内心搭博客的念头越来越汹涌,所以,说干就干!
主要内容
拉到阳春面博客的最下方,发现他的静态博客是Hexo驱动,使用的NexT.Mist主题,而且我非常喜欢这个主题,所以我完全就是冲着阳春面的博客效果去的,所以这片文章主要介绍:
1. 基于Hexo和github pages搭建静态博客
2. Next主题配置及优化
最终目标是实现阳春面博客那样的效果!另外,因为我用的电脑是Mac Pro,所以这篇文章所说的方法都是在mac下才有用的,windows下基本步骤类似,可能只是依赖工具安装方法不同。最后,我还没有申请和绑定自己的域名,所以域名注册和绑定都没有介绍,我认为,在自己真正开始经营博客之前,没有必要花钱注册域名,所以这部分工作留在博客小有名气,有一定流量之后再做!
基础准备
好,下面正式开始搭建博客!首先要想使用Hexo和github pages搭建博客,需要以下环境:
- Github账号一枚,并创建一个指定名字的repo
- Homebrew套件管理器,主要用来安装git和node.js
- Git版本管理工具
- node.js
- 配置SSH key(可忽略)
- 安装Hexo
- 同步Hexo博客到github
- NexT主题配置及优化(如果你喜欢别的主题,请忽略)
这些东西都不熟悉没关系,下面都会详细介绍。
注册Github账号并创建repo
因为我们的博客是基于github pages的,也就是博客内容都托管在github pages,所以需要有一个github账号,并且创建一个公开库(repo),用来存放你的博客。Github账号大家应该都有了,俗话说,没有Github 账号的程序员,不是好段子手,身为程序员,不加入这个全球最大的技术(搞基)社区怎么说的过去呢。如果还没有github账号,去这里申请一个就好了,申请步骤很简单,不再详述,记住选免费服务就可以。在github上创建public库是免费的,也就是传说中的创建开源库。创建private库是要付费的,我们使用github主要就是为了拥抱开源,如果没有特殊需求,创建public库就可以,我们一会儿要创建的博客仓库就是public库。
申请完账号,登陆之后,就可以创建repo了,点击New repository
,会跳转到这个界面:
需要注意的地方,我都在图上做了标注,这些标注里最需要注意的就是新创建的库的名字,必须是username.github.io
,等你创建库的时候,把username
换成你的用户名就可以,例如我的用户名是madongqiang2201,那库名就是madongqiang2201.github.io
。信息填写完毕,点击create repository
就可以把库创建出来。
要想进一步深入了解github,可以阅读这些资料:
安装Homebrew套件管理器
Homebrew并不是必须的,你也可以通过其他途径安装git和node.js,但是,个人认为Homebrew相当nice,而且在mac下管理安装包特别方便,所以在这里强行安利一波,Homebrew需要你的mac安装了Xcode,很多其他mac应用也需要,所以建议先安装一下,appstore里就有。装完Xcode之后,剩下的步骤就特别简单了,打开mac terminal终端,输入以下命令
1 | /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" |
就可以自动完成该工具的安装,如果这条命令失效了,可能是Homebrew更新了安装方式,可以去这里查看最新安装命令以及Homebrew的简要介绍。Homebrew安装完成之后,安装git和node.js简直简单的不要不要的。
Homebrew一些常用命令可以阅读以下资料,深度应用请自行检索:
安装Git版本管理工具
Git是一个强大的版本管理工具,Github的版本管理就是基于Git的,现在svn基本过时了,使用Git进行版本管理才是王道。安装完Homebrew之后,安装Git几乎零成本,还是在terminal终端,输入以下命令:
1 | brew install git |
然后等一段时间就ok了,Homebrew会自动去帮你完成下载安装。
Git使用教程,可以参考以下资料:
安装node.js
Hexo是基于node.js的,所以要让Hexo运行,node.js环境是必不可少的。使用Homebrew安装node.js也特别简单,在terminal终端输入如下命令:
1 | brew install node |
然后等着Homebrew帮你完成下载安装就可以了,舒爽到爆炸!安装完node.js就可以使用常见的npm命令了。
配置SSH key
这一步可以忽略,配置SSH key与否,并不影响博客的搭建和使用,只是配置了之后,更新博客方便一点,不用每次都输用户名和密码。
检查本机上是否存在SSH key
打卡终端,输入如下命令:
1 | cd .ssh |
检查终端输出的文件列表中是否已经存在id_rsa.pub 或 id_dsa.pub 文件,如果文件已经存在,那么你可以跳过步骤2,直接进入步骤3.
创建一个SSH key
在终端输入以下命令:
1 | $ ssh-keygen -t rsa -C "your_email@example.com" |
回车,接着会提示你,让你输入文件名,直接回车会创建使用默认文件名的文件(推荐使用默认文件名);然后会提示你输入两次密码(输入密码之后没有反馈,显示还是空白,但是你确实已经输入了),当然密码也可以不输,直接回车,如果这里没有输入密码,以后提交博客更新的时候就不需要输入密码了。
添加SSH key到github
经过第二步,如果你没有指定文件名(也就是使用的默认文件名),那么你的.ssh文件夹下,应该有一个id_rsa.pub文件了,打开该文件,复制里面的文本。然后登陆github,点击右上角头像右边的三角图标,点击Settings,然后在左边菜单栏点击SSH and GPG keys,点击new ssh key,title 随便填一个,在key 栏填入你复制的内容,点击add ssh key,就可以添加一个ssh key了,如下图:
验证SSH key是否配置成功
在终端输入以下命令:
1 | ssh -T git@github.com |
如果你创建的key没有设密码的话,直接一顿回车,到最后提示你1
Hi yourusername! You've successfully authenticated, but GitHub does not provide shell access.
说明你的ssh key添加成功了。如果过程中提示你perimission deny相关错误,就在命令前加上sudo
然后执行命令的时候输入你的appleid密码应该就可以了。sudo
用来说明用管理员权限运行。
以上简略介绍了怎么配置SHH key,如果想知道命令里面参数的含义,或者配置过程不顺利的话,可以看这里的详细教程。
安装Hexo
经过以上步骤的铺垫,终于到了Hexo安装了,前面我们安装了node.js,装完node之后,我们就可以使用npm命令了,而Hexo安装就是使用npm,在终端输入以下命令:
1 | npm install -g hexo |
然后等待一会儿,hexo会自动完成下载安装。Hexo安装完成之后,在你喜欢的位置随意创建一个文件夹,这个文件夹以后就是你存放本地博客的地方了,通过cd filepath
(filepath替换成你创建的文件夹目录)命令,进入到你创建的文件夹目录,然后执行以下命令:
1 | hexo init |
这样Hexo会在该文件夹创建本地博客所需的一切资源。这样本地博客就搭建好了,输入以下命令:
1 | hexo g // 全拼是:hexo generate,可以简写成 hexo g |
这样就开启了一个本地博客服务器,打开浏览器,在地址栏输入localhost:4000
,就可以查看本地博客了,hexo默认生成了一片hello world博客。注意,以上hexo开头的命令,执行目录必须是你创建的博客文件夹目录。
同步Hexo博客到Github
现在你已经可以在本机查看你的博客了,但是要想让别人通过网络可以查看你的博客,还需要一步,那就是将你的博客发布到github仓库。在terminal终端,将当前目录切换到你的本地博客目录,执行以下命令:
1 | npm install hexo-deployer-git --save |
安装完成之后,打开本地博客目录的_config.yml
文件,编辑其中的deploy节点:
1 | deploy: |
将上面yourusername
替换成你的github用户名即可,你也可以去你开始的时候创建的名为yourusername.github.io
的仓库去直接复制完整的地址,如下图:
当前复制出来的值,就是通过SSH方式clone的地址,配置完成后,以后提交博客更新不用输用户名和密码(如果你ssh key没有设置密码的话);点击上图右上角Use HTTPS
,复制出来的clone地址也可以配置到repo,但是这样,提交更新的时候,就需要输入用户名和密码了。
保存配置之后,在本地博客目录执行以下命令:
1 | hexo clean // clean本地项目,防止缓存 |
然后,在浏览器地址栏输入yourusername.github.io
就可以访问你的博客了,别人也可以通过这个地址访问你的博客。
如果想了解Hexo常用命令可以点击这里,Hexo常用命令没几个,常用的有创建新博客、clean、生成静态文件、发布等,上述官方文档有详细介绍,这里记录几个我经常用到的:
1 | hexo init //在指定目录执行该命令,会将当前目录初始化为hexo站点,生成hexo站点所需的一切文件 |
NexT主题配置及优化
NexT主题是一套简约的主题,设置完成之后,就像我的博客现在的样子,NexT主题的详细配置请看这里,这个是NexT主题作者维护的配置文档,作者是国人,所以文档是中文的,而且写的非常详细,对照文档,所有功能都能轻松实现。等你配置完成后,你的博客将拥有评论系统,访问次数统计,站内搜索,代码高亮,百度统计,社交分享(分享到微博,微信,qq等)等等强大的功能。官方文档很详细,我就不再赘述了。
其他遗漏的点
1.如何删除一篇博文
当然,我们辛辛苦苦写了博文,一般是不会删除的,最多修改一下,但是我们搭建的过程中或者刚搭建好个人博客站点,可能一激动就发了好多测试博文,如果想删除这类文章,在Finder中,找到本地博客所在目录,找到/source/_posts
文件夹,里面放了所有我们写的博客,想删除哪篇,直接在这里删除,然后再重新发布到github,这篇博文就不见了
2.fork me on github
如果你访问我的个人博客,你会发现右上角有一个倾斜的fork me on github
图标,想要集成这个图标,只需要去这里挑选你喜欢的样式,把样式代码复制过来,然后打开你本地博客目录下的themes/next/layout/layout.swig
文件,然后把你复制过来的样式代码粘贴到如下位置:
1 | <body itemscope itemtype="http://schema.org/WebPage" |
其中哪个超链接就是复制的样式代码,粘贴位置在body内header
标签之上。
3.给博文添加tag和分类
使用如下命令:
1 | hexo new "blog title" |
创建的新博文文件,打开之后顶部会有一段自动生成的文本,在其中加入tag和category标签即可指定tag和分类。
1 | --- |
4.手动实现某条博文置顶
Next主题没有博文置顶相关设置(或许这个功能Hexo应该提供,但我分不清),但是我发现发布的博文是根据发布日期倒序排序的,即:越早发布的,排的越靠后!而发布日期,我们可以通过博文的头部date
字段指定:
1 | --- |
所以我们可以给想要置顶的博文,指定一个将来的日期,这样就可以让这篇博文一直排在别的博文前面,达到手工置顶的目的!但是要注意:对于已经发布的博文,发布日期和文件名称(不是title字段的值,而是md文件名)是该文章访问url的组成部分,也就意味着,已经发布的文章如果改了发布日期,针对这篇文章的链接就都不能用了,而且浏览统计等信息都会受到影响,所以手工置顶应该慎重使用!
总结
Hexo博客至此搭建完毕,并且应用了简约美丽的NexT.Mist主题,但是仍有一些不足之处,例如没有通过正常渠道博文置顶功能;该主题的主页过于简单,没有边栏,导致主页展示的有效信息减少,不利于访客浏览,也不利于推广自己的其它渠道,这可能就是简约付出的代价,主题作者以后可能也会改进吧!如果不喜欢这个主题,可以参看一下开源实验室或者stormzhang的个人博客主题,我感觉这两个都不错。但是最重要的还是博客要有内容,没有内容,再好的个人站点也没有意义!所以样式先这样吧,这段时间先写技术文章,如果以后自己开始认真经营博客了,再绑定域名和优化样式。最后,如果大家有什么问题,欢迎留言讨论!