Mac下使用Hexo和Github搭建静态博客

原文地址:AC4Fun.com, 转载请注明出处。

最近两天加周三的一个晚上,参照网上的博客搭建了属于自己的博客,其实之前也对比过Jekyll,Octopress,Python实现的myblog, 以及第三方博客,如Blogger,cnblogs,csdn等等,只能说各有千秋吧,还是希望能够有一个属于自己的空间。为避免忘记,也为了表示对社区的感谢,现在对部署过程进行一下纪录。主要包括:

  1. 基本Hexo的搭建
  2. 主题的选择
  3. 扩展功能的介绍

开始之前,先对系统环境进行一下说明,Hexo的部署需要Node.js的支持。我的网站部署在Github上,也有其他的开源空间(如Coding)可选,本文以Github为例,并假设你已经有了Github帐号。

系统环境:
  • OS X 10.11
  • Xcode 7.2
  • Node.js v4.4.6 LTS 直接官网下载,一路默认安装即可
  • Git 2.6.2(Windows用户请下载客户端)
  • SSH

以上对于Mac用户来说,只需下载并安装Node.js即可。
在Terminal下进行测试:

$ npm -v

显示版本号

$ 2.15.5

说明Node.js安装成功。

SSH连接Github(可选)

本步骤可选,但是为了避免每次访问Github都需要输入密码,可以选择配置SSH Key,直接上步骤:

1.设置git参数:

$ git config --global user.name "Your Name"
$ git config --global user.gmail "Your Email"

这里的用户名和邮箱不一定是你的Github帐号的用户名和邮箱

2.生成SSH密钥(此处省略备份已有密钥的步骤)

$ ssh-keygen -t rsa -C "kingsleynuaa@gmail.com"

按三次回车即可,可以在~/.ssh目录下看到id_rsa(私钥,注意保密)和id_rsa.pub(公钥,可随意公开)两个文件

3.添加私钥到SSH,添加公钥到Github页面

$ ssh-add id_rsa

Github-setting-key页面添加公钥,即id_rsa.pub里面的内容(可用vim打开查看并复制)

4.测试是否成功

$ ssh git@github.com

出现类似提示表示成功

$ Hi kingsleynuaa! You've successfully authenticated, but GitHub does not provide shell access.
Connection to github.com closed.

此处推荐学习Git的好书Pro Git

OK, 现在开始用Github正式搭建Hexo.

基本Hexo的搭建

cd命令进入你要部署的文件目录,在Terminal下运行以下命令(去掉#以后的说明文字):

$ cd ~/                    #进入用户目录
$ mkdir AC4Fun             #建立文件夹,你的网站将部署在这里,名称可自行修改
$ cd AC4Fun                 
$ npm install -g hexo      #安装Hexo
$ hexo init
$ npm install

至此,Hexo已经在本地部署完成。来试试写一篇文章吧

$ hexo new "文章名字"

然后使用vi或者其他编辑器编辑文档并保存,生成网页文件,并开始服务器

$ hexo generate
$ hexo server

此时,即可在本地浏览器中打开页面http://localhost:4000 查看啦,😄,第一次看到自己的网站的时候是不是还有一些激动呢?

OK,此时,网站文件仍然在本地,需要部署到Github才能被更多人看到呢

安装Git部署插件

首先在你的Github中新建一个Repository:用户名.github.io (如kingsleynuaa.github.io),接下来安装插件:

$ npm install hexo-deployer-git --save

配置 _config.yml 文件

在Hexo安装的目录,如 ~/AC4Fun/ 中找到 _config.yml 文件,打开并翻到最后,找到 deploy 字样,改成如下格式:

deploy: 
  type: git 
  repo: https://github.com/用户名/用户名.github.io.git 
  branch: master

需要注意的是:冒号后面有一个空格;使用github可以不用写branch那一行。接下来就可以将网站从本地部署到Github啦(你也可以选择修改以上标签部署到别的空间),输入命令:

hexo deploy

至此,如果没问题的话,打开你的github同名网站就可以看到属于你自己的个人博客啦~
如我的博客:kingsleynuaa.github.io

下面对上述经常需要使用的命令做一下简单总结:

$ hexo clean    #清楚public文件夹,重新部署之前的步骤
$ hexo generate #修改配置或者提交新文章后都需要重新部署,主要是生命public文件夹里面的内容
$ hexo deploy   #将更新后的的博客上传至你的github空间

现在你已经部署好了你的个人博客,并且学会了如何写一篇博客。

不过,这个网站仍然有很多不足,比如,界面你就不太喜欢,怎么办呢?我们可以更换主题啊~

选择主题与优化

在开始选择合适的主题与优化之前我们先来了解一下Hexo博客的结构,并做一下简单的说明。
Hexo的结构如下:


treeMain
  • .deploy_git:执行hexo deploy命令部署到GitHub上的内容目录
  • public:执行hexo generate命令,输出的静态网页内容目录
  • scaffolds:layout模板文件目录,其中的md文件可以添加编辑
  • scripts:扩展脚本目录,这里可以自定义一些javascript脚本
  • node_modules安装的一些Hexo工具,每个都会在这里建立一个文件夹,并以Hexo-开头
  • source:文章源码目录,该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录,404文件、 favicon.ico文件,CNAME文件等都应该放这里,该目录下可新建页面目录。
    • _drafts:草稿文章
    • _posts:发布文章
  • themes:主题文件目录
  • _config.yml:全局配置文件,大多数的设置都在这里。详情可以查看源文件注释。
  • package.json:应用程序数据,指明hexo的版本等信息,类似于一般软件中的关于按钮

下面开始修改主题,一般都去官网选择自己喜欢的主题,clone到自己的theme文件夹下并修改全局配置文件下的theme标签,Hexo默认为landscape。每个主题的作者都会比较详细的介绍自己主题的配置说明。这里就不详述了。

我选择的是coney,可以点击AC4Fun查看。一般觉得比较好的还有Pacman等等

自定义域名(可选)

首先需要购买域名,可选网站有GoDaddy(听说有优惠码,会便宜很多),我选择的是阿里云的服务,直接购买了三年的域名,对比价格发现相差不多。
你需要在source文件夹下新建一个文件名为CNAME,文件内容为你的自定义域名(如www.ac4fun.com),然后在Aliyun后台添加域名解析到你的github地址即可。参考

扩展功能的介绍

评论框

Hexo默认采用的是Disqus,我觉得挺好的,直接在全局配置文件下修改disqus标签enable为true即可。
当然你可以可以配置duoshuo,需要注册多说的帐号,并修改你的主题下_config.yml中配置duoshuo_shortname为多说的基本设置->域名中的shortname,并修改你的主题下文件夹中的layout_partial\comment.ejs

<% if (config.disqus_shortname && page.comments){ %>
<section id="comment">
  #你的通用代码
<% } %>

通用代码见多说官网,注册登录后可以找到。

自定义页面

在hexo\source\下手工新建about和index.md,并在主题配置文件下修改memu下的标签。

页面统计

  1. 注册并登录百度统计,获取你的统计代码。
  2. 在主题配置文件下新建
baidu_tongji: true
  1. 在\layout_partial\目录下新建baidu_tongji.ejs并添加如下代码:
<% if (theme.baidu_tongji){ %>
<script type="text/javascript">
#你的百度统计代码
</script>
<% } %>
  1. 编辑文件layout_partial\head.ejs,在『/head』之前增加:
<%- partial('baidu_tongji') %>

站内搜索

本部分来自教程[3],当然使用Baidu站内搜索功能也可以的。

主要步骤如下:

  1. Swiftype官网注册帐号,按照提示输入你的自定义域名,起名字(最好和你的域名一致)
  2. 安装。按照提示一步步往下即可,一路Next,注意“Results container”部分如果不喜欢弹出模式可以选择否,然后点击Active激活
  3. 在主题配置文件_config_yml中添加标签:
swift_search:
  enable: true

然后在Hexo主目录下新建search文件夹并新建index.md文件,在index.md写入:

layout: search
title: search
----

然后在主题目录下的layout_partial目录下,先打开header.ejs,

header.ejs 插入点之前

header.ejs 插入点之后

之间添加

<% }else if (theme.swift_search&&theme.swift_search.enable){ %>
                        <form class="search" action="<%- config.root %>search/index.html" method="get" accept-charset="utf-8">
                        <label>Search</label>
                        <input type="text" id="search" 
class="st-default-search-input" maxlength="20" placeholder="Search" />
                        </form>
待插入代码示例

有一定程序设计经验的人应该很容易看懂,就是在if-else中加入一种情况

然后将search.js文件清空,并替换如下代码:

<% if(theme.swiftype_search.enable) { %>
<div  id="container" class="page">
  <div id="st-results-container" class="st-search-container" 
style="width:80%"> Loading now...</div>
  <style>.st-result-text {
  background: #fafafa;
  display: block;
  border-left: 0.5em solid #ccc;
  -webkit-transition: border-left 0.45s;
  -moz-transition: border-left 0.45s;
  -o-transition: border-left 0.45s;
  -ms-transition: border-left 0.45s;
  transition: border-left 0.45s;
  padding: 0.5em;
}
@media only screen and (min-width: 768px) {
  .st-result-text {
    padding: 1em;
  }
}
.st-result-text:hover {
  border-left: 0.5em solid #ea6753;
}
.st-result-text h3 a{
  color: #2ca6cb;
  line-height: 1.5;
  font-size: 22px;
}
.st-snippet em {
  font-weight: bold;
  color: #ea6753;
}</style>
<!--注意下面到</script>结束的代码块要替换成自己上面保存的Install Code代码--!>
<script type="text/javascript">
  (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
  (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
  e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
  })(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');  
  _st('install','zpDUHTyGUc4YVxxVWn9w','2.0.0');
</script>
<% } %>

最后打开footer.ejs(其实header也行,随便你),在最后一个标签之前添加一开始拷贝的那段js代码.

然后重新部署即可。效果

扩展功能介绍就到这里,其他关于如何建立更漂亮的博客,分享,图床,微博秀等我觉得没什么必要或者暂时没有时间,就没有弄了,建议感兴趣的自行摸索,有问题欢迎沟通

总结

其实这是我第一次用markdown写这么长的文章,从下午到晚上九点,整整写了快6个小时。不得不说,自己知道了,然后总结出来,还是很耗费时间的,但是我相信这个是十分有意义的,而且也能够方便自己以后查阅。
另外,以前总觉得前端的工作比较烦,但是现在感觉能做好做美观一个页面还是挺有意义,也挺不容易的。昨晚这个博客,希望以后能够好好写博客,做好自己的知识管理。定期和自己来一次约会。如果有人能够看到这里,我真是非常感动的呢~哈哈,也希望通过博客能够找到志同道合的人。如果博客中有什么问题,也希望大家能够告诉我,我会及时修正的。如果有什么可以改进的地方,只要能方便大家理解的,也希望大家能够及时提出来,谢谢啦~
好吧,这是博客开通以来,第一篇博客,希望能够一直坚持下去,争取做到一周一篇。

参考文献
  1. git 使用(ssh key创建和github使用
  2. Hexo你的博客
  3. 利用swiftype为hexo添加站内搜索v2.0

推荐阅读更多精彩内容