GitHub上搭建Hexo个人博客

最新推荐文章于 2024-06-11 02:45:00 发布

Anyers

最新推荐文章于 2024-06-11 02:45:00 发布

阅读量2.4k

点赞数 1

本文链接：https://blog.csdn.net/u012995964/article/details/50152261

版权

NodeJs 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

Hexo

2 篇文章 0 订阅

订阅专栏

GitHub上搭建Hexo个人博客

标签： hexo blog node github

Hexo介绍

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

- 风一般的速度
Hexo基于Node.js，支持多进程，几百篇文章也可以秒生成。
- 流畅的撰写
支持GitHub Flavored Markdown和所有Octopress的插件。
- 扩展性
Hexo支持EJS、Swig和Stylus。通过插件支持Haml、Jade和Less.

Hexo安装

安装前提

Node.js
Git
在安装Hexo前，需要确定以上条件是否满足！具体安装步骤不在赘述。

搭建环境

GitHub账号
创建新的github仓库
获得github仓库地址
安装GitHub for Windows 客户端

使用GitHub for Windows 客户端一个是因为不用配置ssh，另外就是使用较方便。
验证ssh

    ssh -T git@github.com

出现如下提示，则表示ssh配置完成了。

验证ssh
- Clone新建的github仓库到本地
clone仓库到本地

**提示**：如果出现问题，请卸载 GitHub for Windows 客户端，重新安装一遍，或转到使用 [Git 方法](http://cnfeat.com/2014/05/10/2014-05-11-how-to-build-a-blog/)
常见错误请参考：

> [GitHub Help - Generating SSH Keys](https://help.github.com/articles/generating-ssh-keys/)
> [GitHub Help - Error Permission denied (publickey)](https://help.github.com/articles/error-permission-denied-publickey/)

Hexo安装

选择本地github仓目录（我的地址为F:\github\anyerblog.github.io），在anyerblog.github.io目录上右击菜单中选择git bash Here,打开git终端。输入如下代码：（注：右键菜单没有选项，则在开始菜单中，找到github程序文件夹，打开git bash，之后cd到github仓目录）
```
   npm install -g hexo
```
检查是否安装
安装完成后通过hexo version查看安装的hexo版本信息

hexo创建

在git bash中输入以下命令，完成hexo的创建:

    $ hexo init

hexo init
- 将hexo相关的插件安装到githut仓库目录中

    $ npm install

此时github仓库目录内容如下：(搭建完成后补的图，里面会比实际情况多文件夹)

添加node_modules目录

Hexo运行

生成静态页面

安装好hexo后，通过下面代码可以生成静态页面，生成的静态页面存储在public目录下:

    $ hexo generate  #可简写为`hexo g`

运行服务

开启预览访问端口（默认端口4000，git bash下 ‘ctrl + c’ 关闭server）

    $ hexo server  #可简写为`hexo s`

运行后出现下图结果，则表示服务已启动：

运行服务
此时在浏览器中访问http://localhost:4000/ ，即可看到hexo自带的hello world 页面
hexo页面
至此，hexo已经在本地搭建完成。

NexT主题

修改主题

hexo默认使用的是landscape主题，下文将采用NexT主题。
- NexT主题
NexT主题特色：精于心，简于形
NexT主题是我接触Hexo的第一款主题，一见钟情的一款Hexo主题。
NexT主题简约却并不简单，功能特性多样；响应式设计，电脑手机访问体验好，超级nice，你值得拥有！

安装主题
将next的代码clone到项目中，保存在github仓库中的themes/next目录下:

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

修改配置
下载完主题后，修改根目录下的_config.yml配置文件：

新建的hexo文件中使用的是默认的主题landscape，将其修改为next（next为主题安装的目录名themes/next）

运行新主题
修改完成后保存，运行代码：

    $ hexo server -g  #为`hexo generate`及`hexo server`的缩写

此代码运行吼，NexT的主题页面如下：
NexT主题页面

主题设置

添加blog名称及副标题
修改根目录下配置文件_config.yml
修改语言

修改根目录下的_config.yml文件：
更改主题方案
NexT 通过 Scheme 提供主题中的主题。 Mist 是 NexT 的第一款 Scheme。启用 Mist 仅需在主题配置文件中将 #scheme: Mist 前面的 # 注释去掉即可。

修改themes/next目录下的_config.yml文件：
头像设置
通过avatar字段设置，站点外头像设置avatar：图片url，站点内头像设置avatar：目录/图片名.图片格式

在根目录下的_config.yml文件中，添加avatar字段：

头像图片存储在themes/next/source/images/目录下。

添加页面

标签云页面
```
    hexo new page tags  
```
修改刚创建的tags文件夹(github仓库目录\source\tags)下的index.md文件：

在themes/next目录下的_config.yml文件中，将 menu关键字中 about 前面的注释去掉即可
分类页面
```
    hexo new page categories
```
修改刚创建的categories文件夹(github仓库目录\source\categories)下的index.md文件：

在themes/next目录下的_config.yml文件中，将 menu关键字中 about 前面的注释去掉即可
about页面
```
    hexo new page about
```
在themes/next目录下的_config.yml文件中，将 menu关键字中 about 前面的注释去掉即可

404页面
腾讯公益404页面使用方法，新建 404.html 页面，放到主题的 source 目录下(themes/next/source)，内容如下：


    <!DOCTYPE HTML>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta name="robots" content="all" />
      <meta name="robots" content="index,follow"/>
    </head>
    <body>

    <script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="your site url " homePageName="回到我的主页"></script>

    </body>
    </html>

第三方插件配置

多说配置
登录多说后，点击我要安装：

然后按下图填写自己的信息：

在themes/next目录下的_config.yml文件中，修改duoshuo_shortname关键字：
百度统计配置
登录百度统计，添加统计网站后，获得下面的定位代码，将baidu_analytics字段设置为下面代码中hm.js？后面的代码（本文为43d55965147dc8e978f7b55a19736357，注意自己的这个代码）。

    <script>
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "//hm.baidu.com/hm.js?43d55965147dc8e978f7b55a19736357";
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        })();
    </script>

获得上面的代码后，在`themes/next`目录下的_config.yml文件中，修改baidu_analytics关键字：

百度统计配置

JiaThis分享配置
在themes/next目录下的_config.yml文件中，修改baidu_analytics关键字：
RSS配置
配置RSS，在此之前需要使用 hexo-generator-feed 插件生成 Feed。此时设置rss:，rss值为空的时，默认会使用站点的 Feed 链接。

    npm install hexo-generator-feed --save

通过上述代码，生成feed，此时在`themes/next`目录下的_config.yml文件中修改：

rss设置

添加github绶带

通过下面链接，可以获得各种样式的绶带源码，更具自己需要获取：

GitHub Ribbons

获取源码后，修改anyer.github.io\themes\next\layout目录下的_layout文件：

绶带设置

将绶带的代码，添加在</body>上方即可。

完成以上步骤后，运行效果：
页面效果
插件效果：

GitHub部署

部署设置

修改根目录下的_config.yml文件：
这里写图片描述

部署

    hexo clean
    hexo generate  
    hexo deploy

hexo命令
- 常用命令：
  hexo new “postName” #新建文章
  hexo new page “pageName” #新建页面
  hexo generate #生成静态页面至public目录
  hexo server #开启预览访问端口（默认端口4000，’ctrl + c’关闭server）
  hexo deploy #将.deploy目录部署到GitHub
- 常用复合命令：
  hexo deploy -g
  hexo server -g
- 简写：
  hexo n == hexo new
  hexo g == hexo generate
  hexo s == hexo server
  hexo d == hexo deploy
部署成功提示如下：

部署注意事项

github仓库地址有两种，分别为https和SSH，在配置_config.yml文件时，注意区分。
使用https地址时，部署hexo时，会出现如下选项
使用SSH提交时，github for windows可能会出错，具体解决见上文。
部署完成后，使用xxx.github.com访问时，可能会出现404页面：

若之前操作没有报错，则此时可能是由于解析未完成，等一段时间登录即可；也可能是邮箱没有验证通过（我的就是这个问题吧。。。）。

引用参考

github地址
 中文官网地址
 Next 官网
 Next GitHub
hexo-generator-feed
Hexo搭建Github静态博客
 hexo你的博客
 Windows下一步步搭建自己的独立博客——使用 GitHub Pages + Hexo 基础教程（一）

Anyers

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
GitHub上搭建Hexo个人博客

GitHub上搭建Hexo个人博客标签： hexo blog node githubHexo介绍Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。 - 风一般的速度 Hexo基于Node.js，支持多进程，几百篇文章也可以秒生成。 - 流畅的撰写支持GitHub Flavored Markdow
复制链接

扫一扫

专栏目录