使用hexo+Github Pages搭建你的第一个个人博客

作者 ethanw 日期 2017-02-08
GitHub Hexo
使用hexo+Github Pages搭建你的第一个个人博客

一、为什么要写博客

写一个博客有很多好处，却没有明显的坏处。

在16年的下半年，我开始思考是不是要写一个博客。那时是我研究生的第一个学期，本科是仪表系的我转到计算机系攻读研究生。每天都接触到很多新的知识，我希望借助一个平台来把新的知识记录下来，同时也跟更多的人分享我的知识。起初我在csdn上申请了一个博客，并照着像模像样的写了一两篇文章，但是后来课程越来越紧，平常的时间十分琐碎，只够在evernote上写简短总结。因此这个博客就荒废了。

2017年开始，我制定了一些小目标。其中两条是学会写网站（主要是python后端）以及开始维护一个博客。新年开始回到实验室也没什么事情，就开始折腾起来了。

这篇文章也就是记录我作为一个新人，是如何做出这个网站的，希望我的经验对你有所帮助。

二、为什么选用Github Page+Hexo来搭建网站

抱着学习技术的目的，我在腾讯云上购买了一块钱的云服务器（另外还附送了一个域名），尝试自己用python写出一个博客网站。几天之后，我发现这个目标对于刚接触web技术的我来讲还是太大了。在查资料的时候，我了解到了wordpress、hexo、github page等博客系统。hexo的主题更加丰富简约，githubpage上提供了了300M免费空间，于是我决定尝试利用这两者搭配来建造我的第一个个人博客。

三、配置github page

什么是github page

Github Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服务，站点可以被免费托管在 Github 上，你可以选择使用 Github Pages 默 认提供的域名 github.io 或者自定义域名来发布站点。

每个github账号都有一个仓库来存放你的个人主页，仓库的名字一定是username/username.github.io，你可以通过https: //username.github.io来访问你的主页。比如我的github用户名是ethanww，那么我的个人主页就是https: //ethanww.github.io

创建github page

这部分我是参考了如下文章：
如何搭建一个独立博客——简明Github Pages与Hexo教程
一步步在GitHub上创建博客主页
手把手教你使用Hexo + Github Pages搭建个人独立博客
需要注意的是，新建好仓库后，需要在本地建立一个同名的仓库，同时进行一次commit。现在仓库里还没有东西，你可以自己写一个.md文件，commit登陆你的主页看看是否能用了。

四、配置hexo

什么是hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装前的准备

hexo是用node.js编写的，因此首先你需要安装git以及node.js

安装hexo

打开git bash，输入下面指令
$ npm install hexo-cli -g

部署hexo

新建一个hexo目录，输入

$hexo init blog    #新建一个blog文件夹
$cd blog    #进入blog
$npm install   #安装nodejs依赖包
$hexo generate  #生成静态文件，在当前目录下生成一个叫做public的文件夹
$hexo server #启动本地web服务，通过 http://localhost:4000/ 可以预览

在这里我遇到了一个问题，我的4000端口被占用了（可能是由于安装了福昕阅读器）。通过代码：
hexo s -p 3600

将端口转换成3600端口。在浏览器中输入http://localhost:3600/ ，可以进行预览。你也可以使用其它端口。

文件夹目录

新建完成后，文件夹下的目录如下：
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

各个目录的含义如下：

_config.yml:包含了网站的配置信息，可以在这里配置绝大多数的参数。
package.json:是应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": ""
  },
  "dependencies": {
"hexo": "^3.0.0",
"hexo-generator-archive": "^0.1.0",
"hexo-generator-category": "^0.1.0",
"hexo-generator-index": "^0.1.0",
"hexo-generator-tag": "^0.1.0",
"hexo-renderer-ejs": "^0.1.0",
"hexo-renderer-stylus": "^0.2.0",
"hexo-renderer-marked": "^0.2.4",
"hexo-server": "^0.1.2"
  }

scaffolds:模版文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。
source:资源文件夹是存放用户资源的地方。除 posts 文件夹之外，开头命名为 (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
themes：主题 文件夹。Hexo 会根据主题来生成静态页面。

更换主题

通过上面步骤，我们已经建立了博客，但是默认的主题真的是太丑了，我们可以在hexo丰富的主题里面挑一个自己喜欢的主题，来进行我们的写作。
以我使用的yilia这个主题为例。
在你的blog目录下打开git bash。

1）首先安装主题。

$hexo clean  #清除缓存文件（db.json）和已生成的静态文件（public）
$git clone https://github.com/litten/hexo-theme-yilia

2）启用主题。在站点配置文件下找到theme，将其改成yilia
theme: yilia

3）然后在新主题下生成静态文件，通过服务器查看

$hexo generate  #生成静态文件，在当前目录下生成一个叫做public的文件夹
$hexo serve

站点配置文件

可以在_config.yml修改大部分的配置。具体可以参考官方文档。
以下是我的修改，可以供大家参考：

title: Hello World
subtitle: 兴趣遍地都是，专注和持之以恒才是稀缺的
description: 爬虫 算法 机器学习
author: ethanw  #作者
language: zh-Hans #简体中文
timezone: Asia/Shanghai #时区
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: true  #是否启用asset文件夹
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: yilia
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:    #部署部分，后面会讲
  type: git
  repo: git@github.com:ethanww/ethanww.github.io.git
  branch: master
disqus_shortname: ethanw

主题配置文件

在主题目录（这里是themes\yilia）下，也可以看到_config.yml配置文件，这份配置由主题作者提供，主要用于配置主题相关的选项。

设置知乎、github、微博、mail

在主题配置文件的subnav下面，可以添加你的社交网络账号链接到对应项即可。如果没有，则在该项选上#。
我的设置如下：

# SubNav
subnav:
  github: "https://github.com/ethanww/"
  weibo: "http://weibo.com/p/1005052956289533/home"
  #rss: "#"
  zhihu: "https://www.zhihu.com/people/yu-guan-tou-a"
  #qq: "#"
  #weixin: "#"
  #jianshu: "#"
  #douban: "#"
  mail: "mailto:ethan_w@aliyun.com"
  #facebook: "#"
  #google: "#"
  #twitter: "#"
  #linkedin: "#"

设置文章的打赏

我们下载的主题中可以方便的配置打赏功能。在reward_type下，设置为0则关闭打赏；1-文章对应的md文件里有reward:true属性，才有打赏； 2-所有文章均有打赏。打赏的方式可以选用支付宝或者微信的任一一种。
二维码图片的获取方式：
微信、支付宝。

如果你像我一样，在站点设置文件里面将
post_asset_folder: true

启动assets文件夹，可以在assets文件夹中内新建一个img文件夹将二维码图片放置其中，然后在主题配置文件内，设置相对路径即可。

我的配置如下（只配置了支付宝）：

reward_type: 2
reward_wording: '一块两块也是支持'
alipay: /assets/img/alipay.jpg
weixin:

配置后的效果

设置头像

同理，将头像图片放置在img文件夹下，在avatar下添加相对目录即可。
avatar: /assets/img/avatar.jpg

更改保存后，输入下面的命令：

$hexo clean
$hexo generate
$hexo s

在浏览器中输入http://localhost:4000就能预览更改效果

部署hexo到Github pages

上面的步骤让你可以在本地上查看你的个人博客，怎么把hexo部署到github page上去呢？

1）首先你需要安装一个扩展：
$ npm install hexo-deployer-git --save
2）然后点开站点配置文件_config.xml，这样修改：

deploy:
  type: git
  repo: git@github.com:ethanww/ethanww.github.io.git
  branch: master

3）最后在命令行中输入：
hexo deploy

如果一切顺利，你就能点开http://yourname.github.io查看的的博客了。

给你的博客添加评论功能

经过如上的设置，你已经基本完成了博客的设置，可以添加一些新的功能了。我在我的博客中添加进了评论功能。

我尝试了两个社会化评论系统，多说和disqus。

多说的安装方法如下：
1 )在多说上，注册账号，得到一个duoshuo shortname
2）在主题配置文件_config.yml下，修改:
duoshuo: true
3）添加：
duoshuo_shortname: xxx
4） 修改themes\landscape\layout_partial\article.ejs模板
把

<% if (!index && post.comments && config.disqus_shortname){ %>
<section id="comments">
  <div id="disqus_thread">
    <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
  </div>
</section>
<% } %>

改为

<% if (!index && post.comments && config.duoshuo_shortname){ %>
  <section id="comments">
    <!-- 多说评论框 start -->
    <div class="ds-thread" data-thread-key="<%= post.layout %>-<%= post.slug %>" data-title="<%= post.title %>" data-url="<%= page.permalink %>"></div>
    <!-- 多说评论框 end -->
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
    <script type="text/javascript">
    var duoshuoQuery = {short_name:'<%= config.duoshuo_shortname %>'};
      (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
         || document.getElementsByTagName('body')[0]).appendChild(ds);
      })();
      </script>
    <!-- 多说公共JS代码 end -->
  </section>
  <% } %>

disqus的安装方法更加简单，只需如下几步：
1）登录disqus（需要google,facebook等账号）
2）点击get on your site，填写相关信息

你需要记住你填写的shortname，填写完成后点击Continue，在接下来的页面中选择Universal Code，然后根据提示完成接下来的操作
3）在主题配置文件_config.yml中关闭多说：
duoshuo: false
4）在站点配置文件_config.yml末尾添加上：
disqus_shortname: yourshortname

这里我想谈谈我使用这两个评论系统的感受。多说是国内的一款软件的界面比较华丽，使用微信/微博/qq的主流社交软件都能够登录，评论界面如下所示：

在实际使用中，我发现我发布博客时，多说会自动带上一堆的广告评论，在后台鼓捣了一阵后，还没有办法删除这些评论（如果你有好的解决方法，希望能在评论区跟我交流），所以果断决定告别多说，拥抱disqus。

给你的博客加上统计功能

统计部分我选用了不蒜子，官网有详细的安装步骤，这里我就不多说了。

五、结语

折腾的道路是没有止境的，本文会随时更新。

六、参考

[1]搭建一个免费的，无限流量的Blog—-github Pages和Jekyll入门
[2]如何搭建一个独立博客——简明Github Pages与Hexo教程
[3]手把手教你使用Hexo + Github Pages搭建个人独立博客
[4]为什么写技术博客对新人如此重要？
[5]https://hexo.io/
[6]hexo文档
[7]hexo常见命令

FEATURED TAGS
GitHub Hexo