基于GitHub Pages及hexo框架搭建一个独立博客

文章目录
  1. 前言
  2. 搭建博客步骤
    1. 第一步：搭建环境
    2. 第二步：安装hexo
    3. 第三步：配置hexo框架博客
    4. 第四步：上传github仓库
    5. 第五步：发布博客文章
    6. 至此，一个简单的独立博客搭建完成。
    7. 注意事项

前言

GitHub pages是github上用于对开源项目进行说明的网页。我们也可以根据GitHub Pages来生成个人的GitHub个人博客网站。通过GitHub Pages创建的博客属于静态博客网站，其中的内容都是HTML静态页面。

搭建博客步骤

  1. 搭建环境
  2. 安装hexo
  3. 配置hexo框架博客
  4. 上传github仓库
  5. 发布博客文章

第一步：搭建环境

  1. 安装Git
  2. 安装node.js（Hexo框架基于node.js）

第二步：安装hexo

搭建完环境之后，新建一个文件夹，用于保存hexo项目，在该文件夹中，执行如下命令：

使用npm安装hexo:

1
npm install -g hexo-cli

1
2
hexo init  
npm install

安装成功之后，执行如下命令，运行hexo：

1
hexo s

此时，我们就可以在浏览器中输入如下地址，并可访问博客：

1
localhost:4000

在此，可通过Ctrl+C组合件结束hexo的运行。

第三步：配置hexo框架博客

接下来我们来更换博客主题：
进入hexo项目的themes文件夹内，克隆主题项目到改目录下，如下执行命令：

1
git clone https://github.com/litten/hexo-theme-yilia.git

克隆完成后，在hexo项目的themes文件夹下就能看到hexo-theme-yilia主题文件夹，修改该主题文件夹的名称为yilia。
打开hexo项目文件夹根目录下的_config.yml文件，修改里面的theme为yilia，如下所示：

1
theme: yilia

重新运行，我们就能发现，hexo博客的主题已经更改并生效。

第四步：上传github仓库

上传github仓库前，我们要先配置好SSH及Git仓库。

  1. 配置SSH
    执行如下命令生成ssh key，生成的ssh key在用户目录/.ssh/id_rsa.pub文件中：

    1
    ssh-keygen

  2. 将生成的ssh key拷贝黏贴到github->setting的add sshkey 中。

    [img]

  3. 之后，执行如下命令验证git是否连接成功。

    1
    ssh-T git@github.com

若出现
Hi MasonChi! You've successfully authenticated, but GitHub does not provide shell access.
则表示连接成功。

  1. 配置Git仓库
    此处配置的仓库名必须为GitHub用户名.github.io，这一点非常重要。

  2. 之后来配置配置你的本地hexo：
    打开hexo项目根目录中的_config.yml文件，配置发布环境项为如下即可：

    1
    2
    3
    4
    5
    6
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repository: git@github.com:MasonChi/MasonChi.github.io.git 
      branch: master

  3. 配置完本地hexo，依次执行如下命令发布项目到github：

    1
    2
    3
    hexo clean
    hexo g
    hexo d

若不报错，即可。

如果发布时，出现ERROR Deployer not found: git错误，执行如下命令安装git发布插件修复：

1
npm install hexo-deployer-git --save

第五步：发布博客文章

  1. 创建博文
    在命令行中输入：
    1
    hexo new

来创建新的文章,文章将会自动出现在Hexo->Source->_post目录中，你也可以直接在该目录下添加修改文章。

  1. 发布博文
    编辑完博文后，执行如下命令发布：
    1
    hexo d -g

至此，一个简单的独立博客搭建完成。

注意事项

1. 若在上传到GitHub后，博客项目的README.md文件被hexo渲染成html页面，可进行如下配置：
在Hexo目录下的source根目录下添加一个README.md文件之后，修改Hexo目录下的_config.yml。
将skip_render参数设置为：

1
skip_render: README.md

保存退出后，使用hexo d命令就不会再渲染 README.md 这个文件了。

2.使用more标签可以让标签以上的文本作为摘要，在博客列表中显示出来，点击More显示特定博客所有内容。

1
<!--more-->

3.为文章添加目录
比如yilia的主题，就在/themes/yilia/layout/_partial/article.ejs里修改。将下面代码添加在<%- post.content %>之上

1
2
3
4
5
6
<% if(post.toc == true){ %>
<div id="toc" class="toc-article">
  <strong class="toc-title">文章目录</strong>
<%- toc(post.content, {list_number: false}) %>
</div>
<% } %>

之后，在文章中，注明toc: true即可：

1
2
3
4
5
6
7
title: 基于GitHub Pages及hexo框架搭建一个独立博客
date: 2016-03-06 21:00:16 
categories:  
tags: [github pages, hexo, 独立博客]
description: 
toc: true
---