GitHub Pages + Hexo 搭建博客

第一篇博客，记录一下博客搭建过程。

安装 node.js

安装 Git

安装 Hexo

在文件夹中建立名为 hexo 的文件夹，右键打开 Git Bush，使用 npm 安装 Hexo。

1	npm install hexo-cli -g

初始化 blog， Hexo 自动在 blog 文件夹下创建网站所需文件。

1	hexo init blog

进入 blog 文件夹，安装依赖包。

1 2	cd blog npm install

生成静态页面

1	hexo g # 或 hexo generate

启动本地 web 服务

1	hexo s # 或 hexo server

此时在浏览器地址栏中键入 http://localhost:4000/ ，可以看到内置的页面。

hexo-init-page

GitHub Pages 设置

在 GitHub 上创建仓库，而且仓库的名字格式为： username.github.io，username 与 GitHub 账号名对应，每个帐号只能有一个仓库来存放个人主页。可以通过 http://username.github.io 来访问个人主页。

部署 Hexo 到 GitHub Pages

其实就是将 Hexo 生成的静态页面提交 (git commit) 到 GitHub 上。

在 Hexo 根目录下的配置文件 _config.yml 中进行修改:

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

还得安装一个扩展

1	npm install hexo-deployer-git --save

然后在命令行部署

hexo d

Hexo 主题基本配置

选择喜欢的主题。Hexo 官网主题。我的博客选用的是 NexT 主题，官方提供了详细的使用文档。

下载 NexT 主题

1	git clone https://github.com/iissnan/hexo-theme-next themes/next

启用 NexT 主题

克隆完成后，打开站点配置文件 __config.yml，找到 theme 字段，修改为：

1	theme: next

站点配置文件：博客目录下的 __config.yml 文件。

主题配置文件： themes/next 目录下的 __config.yml 文件。

启动本地 web 服务验证

1	hexo s --debug

至此，即完成了基于 GitHub Pages + Hexo 的个人博客框架搭建。

博客推广

将个人博客推广到 Google 搜索引擎上。

验证网站

推荐文件验证。

下载 HTML 验证文件，将该文件放到博客 source 目录下。

hexo 编译文件时，会给下载的 HTML 文件中添加其他的内容，导致验证失败，所以需要在文件开头添加 layout: false 来取消 hexo 对其进行的转换。

1 2	layout: false --- google-site-verification: googleb6fc53a32f5418d9.html

部署到 GitHub，输入https://zywudev.github.io/googleb6fc53a32f5418d9.html ，能访问即可点击验证按钮进行验证。

站点地图

站点地图是一种文件，您可以通过该文件列出您网站上的网页，从而将您网站内容的组织架构告知 Google 和其他搜索引擎。Google 等搜索引擎网页抓取工具会读取此文件，以便更加智能地抓取您的网站。

使用 hexo-generator-sitemap 插件来生成 Sitemap，执行

1	npm install hexo-generator-sitemap --save

执行

hexo g

博客根目录的public下面生成了 sitemap.xml 。如果没有，在博客目录的 _config.yml 中添加如下代码重新编译

1 2	sitemap: path: sitemap.xml

要将博客目录 __config.yml 中的 url 字段设置为自己的域名

1	url: http://zywudev.github.io

部署到 Github，访问 https://zywudev.github.io/sitemap.xml。

提交 sitemap 到 Google站长工具，找到添加站点地图按钮，添加 sitemap.xml 即可，如下图。

google-sitemap

博客优化

添加 about 页面

1	hexo new page "about"

在 \source\about\ 目录下会生成一个 index.md 文件,添加个人信息即可。

添加分类、标签页面

1 2	hexo new page "categories" hexo new page "tags"

博客标题、作者等

打开站点配置文件

title: Wu's blog 
subtitle:
description: O ever youthful,O ever weeping
author: Wu 
language: zh-Hans
timezone:

修改文章内文本链接样式

将文本链接设置为蓝色，修改
themes\next\source\css\_common\components\post\post.styl,
添加

.post-body p a{
  color: #0593d3;
  border-bottom: none;

  &:hover {
    color: #0477ab;
    text-decoration: underline;
  }
}

修改博客 logo

通过网站 favicon在线制作网站制作 favicon 图片。

将图片放在博客 source 目录下即可。

添加 Fork me on GitHub 挂件

在官网选取样式。

拷贝代码，修改 href 地址为自己的 GitHub 地址

1
2
3

<a href="https://github.com/you">
改为：
<a href="https://github.com/zywudev">

修改文件: themes/next/layout/_layout.swig，将代码拷贝至对应位置。

<body>

  {% include '_scripts/third-party/analytics.swig' %}

  <div class="{{ container_class }} {% block page_class %}{% endblock %} ">
    <div class="headband"></div>
    
    <!--------------add Fork me on GitHub ------------->
    
    <a href="https://github.com/zywudev"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/8b6b8ccc6da3aa5722903da7b58eb5ab1081adee/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_orange_ff7600.png"></a>

	<!--------------add Fork me on GitHub ------------->
		
    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"> {%- include '_partials/header.swig' %} </div>
    </header>

参考链接

如何搭建一个独立博客——简明Github Pages与Hexo教程

手把手教你使用Hexo + Github Pages搭建个人独立博客

博客推广——提交搜索引擎