| Author | |
|---|---|
| Yaoyao Liu | yaoyaoliu@msn.com |
前言
对于广大CS专业的学生和码农，找一个地方写博客，记录一些编程、配置环境、阅读论文的心得体会是一个很常见的习惯。当然想搭建个人博客，就需要找个靠谱的平台，主要就是以下的两种方式：
- 使用网站提供的博客平台，例如国内的CSDN、博客园；国外的Blogger、Wordpress
- 自己建站，发布到自己的服务器上，或者发布到GitHub、GitLab、Bitbucket等支持静态网页发布的git平台
针对于第一种方式，最大的特点就是省心。CSDN和博客园都支持多种编辑器，其中就包括Markdown。而且基本上不需要任何设置，注册个账号直接写文章就可以了。缺点是国内的这些平台都不支持使用自有域名，而且在海外访问速度也不快，有些平台还有广告。国外的平台，blogger支持自有域名，但是很多设置都不太好用，而WordPress很多功能是收费的。而且这两个平台好像在国内无法访问。总而言之，就是使用别人家的平台，可以改的东西就会比较少，受到的限制也很多。
所以许多人就选择了第二种方式。第二种方式也有很多选择。比如hexo、jekyll，而且WordPress也提供开源安装包可以部署在自己的服务器上。相对于自己购买服务器，我更倾向于使用GitHub、GitLab这些支持Pages服务的平台。原因很简单，自己买服务器首先就要花钱，而且在各种网络条件下链接速度也不好保证。GitHub Pages服务虽然有容量上限，但对于博客而且基本等于没有。有着良好的CDN，全世界访问起来都很快。而且支持绑定自有域名，提供SSL认证实现https。最重要的是，所有的服务都是免费的。
使用GitHub Pages服务搭建博客，主要就是hexo和jekyll两个平台。这两个平台都支持Markdown，这一点是最重要的。GitHub Pages服务官方支持的是jekyll，所以jekyll可以在不进行设置的情况下实现CI/CD（持续集成Continuous integration和持续发布 Continuous delivery）。简单来说就是不进行任何配置的情况下直接把Markdown和jekyll的源文件git push到服务器上，网站就会自动编译和发布出来。hexo也支持CI但要进行配置。
但是，很多用户都反映jeyll速度不如hexo。而且我个人觉得hexo主题管理方面是要优于jekyll了，好看的主题也更多。所以本文介绍hexo+GitHub搭建博客。
下载安装hexo
hexo官网提供了良好的开发文档，并且提供了简体中文的版本。其实安装过程参照官网一步步来就没有什么问题。本文也以ubuntu为例简述一下安装配置过程。其他Unix内核的系统比如Debian、macOS过程也很类似。
首先需要安装npm：
sudo apt-get install python-software-propertie
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install nodejs
检查npm的版本，如果能正常显示版本号则安装成功：
npm -v
安装完npm，就可以安装hexo了：
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo s
然后访问http://localhost:4000，如果显示正常，就说明hexo已经安装完成。
这里提供一些hexo的命令，你也可以在官方帮助文档里面找到更全面的命令清单。
npm install hexo -g #安装Hexo
npm update hexo -g #升级
hexo init #初始化博客
hexo n "new post" == hexo new "new post" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署
hexo server #Hexo会监视文件变动并自动更新，无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存，若是网页正常情况下可以忽略这条命令
将项目部署到GitHub
首先在GitHub新建一个空的Repository，名字为your-username.github.io（把your-username替换为你的用户名），这样GitHub会自动将网页发布到your-username.github.io。
git@github.com:y2l/y2l.github.io.git
打开_config.yml 文件，找到deploy，进行如下配置：
deploy:
type: git
repo: git@github.com:y2l/y2l.github.io.git
branch: master
然后执行：
npm install hexo-deployer-git --save
hexo clean
hexo g
hexo d
这样生成的静态网页就被推送到GitHub上了。
然后你需要在GitHub对应的Repository的settings界面上（https://github.com/your-username/your-username.github.io/settings），在GitHub Pages的Source设置中，选择master branch并点击save。这样，几分钟之后你的网页就被发布了。
绑定自己的域名
选择域名注册上并注册域名可以参考：域名注册与域名解析
配置域名给GitHub Pages可以参考《通过Github实现URL转发》中配置域名的相关部分。
GitHub可以免费提供SSL认证，实现https，在settings中可以一键开启。
要注意的是，如果使用自己的域名，你需要在source目录下创建一个名为CNAME的文档，在其中输入你的域名。如果不建立这个文档，每次部署的时候GitHub Pages的域名配置都会被清空。
配置和使用NexT主题
之所以使用hexo搭建博客，就是为了使用hexo所支持的大量主题。这里就像大家介绍一个界面干净整洁，很多hexo博客都使用的主题：NexT。这个主题提供良好的中文开发文档。而且功能齐全，一个博客需要有的功能，比如标签、分类、背景设置、分享、评论功能、计数器、Google Analytics等等很多功能都被集成进去，可以说是非常好用。
安装NexT
cd blog
git clone https://github.com/iissnan/hexo-theme-next themes/next
然后修改站点配置文件_config.yml， 找到 theme字段，并将其值更改为 next。
theme: next
到此，NexT 主题安装完成。
然后执行如下命令查看效果：
hexo clean
hexo s
基本信息配置
基本信息包括：博客标题、作者、描述、语言等等。
打开 站点配置文件 ，找到Site模块
title: 标题
subtitle: 副标题
description: 描述
author: 作者
language: 语言（简体中文是zh-Hans）
timezone: 网站时区（Hexo 默认使用您电脑的时区，不用写）
关于 站点配置文件 中的其他配置可参考站点配置
菜单设置
菜单包括：首页、归档、分类、标签、关于等等
我们刚开始默认的菜单只有首页和归档两个，不能够满足我们的要求，所以需要添加菜单，打开 主题配置文件 找到Menu Settings
menu:
home: / || home //首页
archives: /archives/ || archive //归档
categories: /categories/ || th //分类
tags: /tags/ || tags //标签
about: /about/ || user //关于
#schedule: /schedule/ || calendar //日程表
#sitemap: /sitemap.xml || sitemap //站点地图
#commonweal: /404/ || heartbeat //公益404
看看你需要哪个菜单就把哪个取消注释打开就行了；
关于后面的格式，以archives: /archives/ || archive为例：
|| 之前的/archives/表示标题“归档”，关于标题的格式可以去themes/next/languages/zh-Hans.yml中参考或修改
||之后的archive表示图标，可以去Font Awesome中查看或修改，Next主题所有的图标都来自Font Awesome。
Next主题样式设置
我们百里挑一选择了Next主题，不过Next主题还有4种风格供我们选择，打开 主题配置文件 找到Scheme Settings
# Schemes
# scheme: Muse
# scheme: Mist
# scheme: Pisces
scheme: Gemini
侧栏设置
侧栏设置包括：侧栏位置、侧栏显示与否、文章间距、返回顶部按钮等等
打开 主题配置文件 找到sidebar字段
sidebar:
# Sidebar Position - 侧栏位置（只对Pisces | Gemini两种风格有效）
position: left //靠左放置
#position: right //靠右放置
# Sidebar Display - 侧栏显示时机（只对Muse | Mist两种风格有效）
#display: post //默认行为，在文章页面（拥有目录列表）时显示
display: always //在所有页面中都显示
#display: hide //在所有页面中都隐藏（可以手动展开）
#display: remove //完全移除
offset: 12 //文章间距（只对Pisces | Gemini两种风格有效）
b2t: false //返回顶部按钮（只对Pisces | Gemini两种风格有效）
scrollpercent: true //返回顶部按钮的百分比
头像设置
打开 主题配置文件 找到Sidebar Avatar字段
# Sidebar Avatar
avatar: /images/header.jpg
这是头像的路径，只需把你的头像命名为header.jpg（随便命名）放入themes/next/source/images中，将avatar的路径名改成你的头像名就OK啦！
RSS设置
先安装 hexo-generator-feed 插件
npm install hexo-generator-feed --save
打开 站点配置文件 找到Extensions在下面添加
# RSS订阅
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
打开 主题配置文件 找到rss，设置为
rss: /atom.xml
添加分类模块
新建一个分类页面
hexo new page categories
你会发现你的source文件夹下有了categorcies/index.md，打开index.md文件进行如下设置
---
title: 分类
type: "categorcies"
comments: false
---
打开 主题配置文件 找到menu，将categorcies取消注释
把文章归入分类只需在文章的顶部标题下方添加categories字段，即可自动创建分类名并加入对应的分类中， 如：
title: 分类测试文章标题
categories: 分类名
添加标签模块
新建一个标签页面
hexo new page tags
你会发现你的source文件夹下有了tags/index.md，打开index.md文件，进行如下设置：
---
title: 标签
type: "tags"
comments: false
---
打开 主题配置文件 找到menu，将tags取消注释
把文章添加标签只需在文章的顶部标题下方添加tags字段，即可自动创建标签名并归入对应的标签中
举个栗子：
title: 标签测试文章标题
tags:
- 标签1
- 标签2
...
添加关于模块
新建一个关于页面
hexo new page about
你会发现你的source文件夹下有了about/index.md，打开index.md文件即可编辑关于你的信息，可以随便编辑。 打开 主题配置文件 找到menu，将about取消注释，该页面就能够正常显示。
添加搜索功能
安装 hexo-generator-searchdb 插件
npm install hexo-generator-searchdb --save
打开 站点配置文件 找到Extensions在下面添加
# 搜索
search:
path: search.xml
field: post
format: html
limit: 10000
打开 主题配置文件 找到Local search，将enable设置为true
添加阅读全文按钮
因为在你的博客主页会有多篇文章，如果你想让你的文章只显示一部分，多余的可以点击阅读全文来查看，那么你需要在你的文章中添加
<!--more-->
后记
至此你的博客就算简单的配置完成了。hexo的NexT主题还集成了评论、分享等众多第三方插件，大家今后还可以慢慢开发。写博客不是做网站，如果你希望建立一个有价值的博客，还应该更加重视博客的内容。hexo给我们提供了一个良好的平台，也希望大家都能多多分享自己的经验和见解。