Jaqen's Studio

GitHub Pages + Hexo 搭建博客

字数统计: 1.2k阅读时长: 5 min
2017/03/04 Share

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

安装 node.js

node.js

安装 Git

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/ , 可以看到内置的页面。

image

GitHub Pages 设置

注册 GitHub 及其使用可以参考 从 0 开始学习 GITHUB 系列汇总

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

部署 Hexo 到 GitHub Pages

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

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

1
2
3
4
deploy:
type: git
repo: git@github.com:zywudev/zywudev.github.io.git
branch: master

还得安装一个扩展

1
npm install hexo-deployer-git --save

然后在命令行部署

1
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

执行

1
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 即可,如下图。

博客优化

添加 about 页面

1
hexo new page "about"

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

添加分类、标签页面

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

博客标题、作者等

打开站点配置文件

1
2
3
4
5
6
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,
添加

1
2
3
4
5
6
7
8
9
.post-body p a{
color: #0593d3;
border-bottom: none;

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

通过网站 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,将代码拷贝至对应位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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搭建个人独立博客
博客推广——提交搜索引擎

(完)

CATALOG
  1. 1. 安装 node.js
  2. 2. 安装 Git
  3. 3. 安装 Hexo
  4. 4. GitHub Pages 设置
  5. 5. 部署 Hexo 到 GitHub Pages
  6. 6. Hexo 主题基本配置
    1. 6.1. 下载 NexT 主题
    2. 6.2. 启用 NexT 主题
    3. 6.3. 启动本地 web 服务验证
  7. 7. 博客推广
    1. 7.1. 验证网站
    2. 7.2. 站点地图
  8. 8. 博客优化
    1. 8.1. 添加 about 页面
    2. 8.2. 添加分类、标签页面
    3. 8.3. 博客标题、作者等
    4. 8.4. 修改文章内文本链接样式
    5. 8.5. 修改博客 logo
    6. 8.6. 添加 Fork me on GitHub 挂件
  9. 9. 参考链接