---

title: hexo搭建github
date: 2018-10-16 18:19:29
tags:

搭这个东西着实折腾了很久，所以写下过程，也算是个笔记吧！

Hexo快速搭建静态Blog网站

声明：以下所有操作都是在windows操作系统下进行。

什么是Hexo

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

安装

在安装Hexo前需要确保电脑已经安装以下程序 :
Node.js(https://nodejs.org/en/)
Git(https://git-scm.com/)
这两个程序的安装很简单，windows用户可以使用安装程序进行安装，简单高效。

安装Node.js

建议使用这个下载地址
找到合适的版本进行下载安装即可，安装时的操作请自行参考百度。

安装Git

建议使用这个下载地址 进行下载安装, 这里也请参考百度。建议不要下载最新的版本, 尽量下载大多数人用的版本

安装Hexo

在安装Hexo前，请再次确保Node.js和Git已经成功安装。检查是否安装好以上两个程序，
在桌面点击鼠标右键，可在选项中看到 Git Bash Here 选项，点击进入bash交互界面。

在打开bash交互界面（类似于Linux交互界面）中输入：

$ git --version

$ node --version

如果显示相关的版本信息说明安装成功。

现在可以正式安装Hexo了，使用如下命令安装

$ npm install -g hexo-cli

建站

初始化

安装 Hexo 完成后，执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

$ hexo init <folder>  # folder 是文件夹 即 hexo init 文件夹
$ cd <folder>
$ npm install

命令执行成功没有 error 错误，我们就建站成功了。

$ npm install hexo-server --save
$ hexo server   #这条命令是在本地运行hexo

这两条命令执行完成后会生成一个如下的地址：
127.0.0.1:4000

把这个网址复制下来并粘贴到浏览器中打开即可看到本地 Hexo 默认的主题博客了，如果没有成功的话请检查自己是否有操作不当的地方或者命令错误。

部署

创建Git仓库

登录GitHub账号，创建一个仓库，注意仓库的名字一定要以 “<用户名>.github.io” 这种格式。
用户名为登陆github的用户名。

创建时，注意要将下面这个选项勾上。

生成SSH keys
这个很重要！ 这个如果没有添加 ssh keys 那么等会必定会报错。

使用如下操作生成SSH key

邮箱名称换成你自己的

生成**完成后， 将 id_rsa.pub 中的所有内容拷贝到github中相应的位置中去。
登录GitHub，找到如下位置：


将生成的在 id_rsa.pub 中的内容 拷贝到其中，然后添加。

然后ssh连接

打开git bash，输入以下内容验证ssh连接

ssh -T [email protected]

第一次需要输入“yes”然后回车才能看到连接成功的信息，以后就不需要了

配置全局信息

配置全局的用户名、邮箱信息，作为提交人信息

git config --global user.name "用户名"
git config --global user.email "邮箱"

然后会发现GitHub里面设置的ssh会变绿，上上面的那张图，下面会变绿

更改配置

在初始化文件夹下找到 _config.yml 这个文件并打开

$ vim _config.yml

打开后做如下修改， repo 就是 github 为我们生成的一个地址。这里注意一下空格。

repo里面用户名换成你自己的

生成静态网页并部署

$ hexo clean  # 清理缓存
$ npm install hexo-deployer-git --save
$ hexo g -d

至此，部署完毕。

最后在浏览器中输入地址即可（即 username.github.io ，其中username为你自己创建仓库的名字）。

当然在以上操作中如果遇到什么错误 这里也许可以帮到你 帮助 。

然后，这只是部署一个官方默认的一个主题，接着你可以自定义自己的主题
https://hexo.io/themes/

我用的是这个
https://github.com/yscoder/hexo-theme-indigo

获取主题

git clone [email protected]:yscoder/hexo-theme-indigo.git themes/indigo

切换主题

执行 git branch 显示所有本地分支，如果只存在一个分支，可以执行下面的命令获取另一分支的主题。

获取远程 card 分支，并切换

$ git checkout -b card origin/card

获取远程 master 分支，并切换

$ git checkout -b master origin/master

此命令只需执行一次，之后使用 git checkout [branch] 命令在两个主题之间切换。

依赖安装

还是在 Hexo 根目录，如果以下插件已安装过，无需再次安装。

Less
主题默认使用 less 作为 css 预处理工具。

$ npm install hexo-renderer-less --save

Feed
用于生成 rss。

$ npm install hexo-generator-feed --save

Json-content
用于生成静态站点数据，用作站内搜索的数据源。

$ npm install hexo-generator-json-content --save

QRCode
用于生成微信分享二维码。

可选，不安装时会请求 jiathis Api 生成二维码。

$ npm install hexo-helper-qrcode --save

开启标签页

hexo new page tags

修改 hexo/source/tags/index.md 的元数据

layout: tags
comments: false
---

开启分类页
仅 card theme 支持。

hexo new page categories

修改 hexo/source/categories/index.md 的元数据

layout: categories
comments: false
---

配置

编辑站点配置文件，hexo/_config.yml。

启用主题

theme: indigo

基本配置

为了得到更好的使用体验，以下内容请务必填写完整，因为这些内容会在主题中得到展示。更多

title: your title
subtitle: your subtitle
description: your description
keywords: your keywords
author: your name
email: your email
url: your site url

feed配置
参考 hexo-generator-feed

feed:
  type: atom
  path: atom.xml
  limit: 0

jsonContent配置
为了节约资源，可以对 jsonContent 插件生成的数据字段进行配置，减少数据文件大小。参考 hexo-generator-json-content

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: true
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true

主题配置

编辑主题配置文件，themes/indigo/_config.yml。

左侧菜单
默认配置如下

menu:
  home:
    text: 主页
    url: /
  archives:
    url: /archives
  tags:
    url: /tags
  github:
    url: https://github.com/用户名
    target: _blank
  weibo:
    url: http://www.weibo.com/用户名
    target: _blank
  link:
    text: 测试
    url: /

添加新菜单项时，在 menu 下增加子属性即可。属性说明如下：

menu:
 link:               # fontawesome图标，省略前缀，本主题前缀为 icon-，必须
   text: About       # 菜单显示的文字，如果省略即默认与图标一致，首字母会转大写
   url: /about       # 链接，绝对或相对路径，必须
   target: _blank    # 是否跳出，省略则在当前页面打开

fontawesome 图标已集成到主题中，你可以到 这个页面 挑选合适的图标。

rss
6.x 后移除该配置项，使用站点配置中的 feed 作为统一配置。

rss: /atom.xml

favicon
站点 logo，显示在浏览器当前标签页左上角。

favicon: /favicon.ico

头像
位于左侧菜单上方

avatar: /img/logo.jpg

email
头像下方

email: [email protected]

color
设置 Android L Chrome 浏览器状态栏颜色，不需要可去除此项或设为 false。

color: ‘#3F51B5’

标签页 (old)
配置标签页标题
tags:
title: 标签

页面标题 (card theme)
自定义归档、标签、分类页的大标题。

tags_title: Tags
archives_title: Archives
categories_title: Categories

文章摘要
可以在 Markdown 文件中加 以分割摘要与文章正文。未设置时，按 excerpt_length 设置截取。

#文章摘要渲染方式: 为 true 时将渲染为 html，否则为文本
excerpt_render: false
#截断长度
excerpt_length: 200
#文字正文页链接文字
excerpt_link: 阅读全文...

mathjax
开启后，使你的站点支持公式渲染，by mathjax。 请按需开启，因为此项需要加载额外的 js 文件。

mathjax: false

分享
文章分享开关，by jiathis-api。

share: true

文章打赏
默认开启

reward:
  title: 谢谢大爷~             #显示的文字
  wechat: /img/wechat.jpg     #微信，关闭设为 false
  alipay: /img/alipay.jpg     #支付宝，关闭设为 false

此外在 crad theme 中，可以通过在 markdown 头部添加 reward: false 来控制某些不想开启打赏的页面。

关闭

reward: false

二维码请自行从微信、支付宝中下载。当两个二维码同时存在时，为保持显示效果的一致性，注意截图时的边框留白保持一致。必要时可借助PS等图片处理工具进行图片大小裁剪、压缩等。

站内搜索
是否开启搜索

search: true

布局
开启后，文章页在大屏下会隐藏左侧菜单，专注阅读。

hideMenu: true

Toc
开启文章内容导航。

#toc: false  #关闭
toc:
  list_number: false  # 决定导航使用的标签， true 为 ol， false 为 ul。

copyright (card theme)
文章页版权声明内容，hexo中所有变量及辅助函数等均可调用，具体请查阅 hexo.io。

copyright: 这里写留言或版权声明：<a href="<%- url_for(page.path) %>" target="_blank" rel="external"><%- url %></a>

less
设置 less 编译时的入口文件路径，hexo-renderer-less。

less:

compress: true    # 是否压缩css
  paths:
    - source/css/style.less

评论
集成了 disqus、友言、gitment 和 valine，开启其一即可。

数据统计
集成的有谷歌、腾讯、百度和 CNZZ，请填写你的站点标识。

google_analytics: key
tajs: 站点id
baidu_tongji: 站点id
cnzz: 站点id

谷歌站点验证 (card theme)

google_site_verification: false

规范网址 (card theme)
让搜索引擎重定向你的不同域名、不同子域、同域不同目录的站点到你期望的路径。使用规范网址

canonical: http://imys.net

版权起始年份

since_year: 2018

自定义页面关于
用户页面中作者相关的描述性文字，如不需要设为 false

about: 用户页面中作者相关的描述性文字，如不需要设为 false

cdn
开启后将使用 unpkg cdn 最新的主题样式，如果想让你的自定义样式生效，把此项设为 false。

cdn: true

lightbox
文章图片灯箱效果。

lightbox: true

ICP 备案号

ICP_license: 京ICP备1234556号-1

好了，至此，搭建就完成了，接下来就是写文章了。