使用GitHub+Hexo+hexo-theme-indigo(主题)搭建自己的个人技术博客

 

• 本次搭建实在windows系统下完成：

前提条件：已经下载git、Hexo、node.js等必要的工具环境

第一步：初始化一个本地的Hexo项目

1. 再本地创建一个博客系统目录：我建立的是项目根目录：OyjBlog
2. 再OyjBlog目录下右键打开Git Bash终端
3. 创建hexo格式的文件夹：$ hexo init
4. 生成静态文件:$ hexo g 或 $ hexo generate  
5. 在本地服务器运行：hexo s 或 hexo server
6. Hexo is running at http://localhost:4000 .在这一步可以打开浏览器进行访问、

到这里为止Hexo默认主题的博客系统搭建完毕。测试跑通，修改高大上的主题来啦！！！

第二步：利用github上面提供的hexo-theme-indigo主题修改本地刚刚搭建的博客系统

    在hexo官网有很多比较不错的主题推荐，可以在上面选择自己喜欢的主题，然后进行相应的个性化修改，这是我使用的主题hexo-theme-indigo，下面我也是用这个主题作为教程。

主题安装

1. 安装需确认你的 Hexo 版本在 3.0 以上，以及 Node 版本为 6.x 以上。在 Hexo 根目录（第一步中的OyjBlog），执行以下命令。

   git clone git@github.com:yscoder/hexo-theme-indigo.git themes/indigo

          这个命令要在博客文件夹的根目录右击鼠标打开Git Bash输入命令，其中themes/indigo就是会在博客文件夹根目录中的themes新建一个indigo文件夹存放clone下来的主题，以后的主题通常都是存放在这个目录下。
                            通俗来说就是这样git clone +通过主题的github中获取的URL+ +themes/indigo

依赖安装

1、安装Less

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

 npm install hexo-renderer-less --save

2、安装Feed

用于生成 rss。

  npm install hexo-generator-feed --save

 

3、Json-content

用于生成静态站点数据，用作站内搜索的数据源。这个我也还不懂，后续完善吧。

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

4、QRCode

用于生成微信分享二维码。网页分享中微信可以动态生成该网页的分享分二维码。

   npm install hexo-helper-qrcode --save

 开启标签页

1、该命令在hexo/source/目录下创建tags文件夹：OyjBlog\source\tags

OyjBlog\source\categories\index.md

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

 layout: tags
  comments: false
  ---

开启分类页

2、 再OyjBlog\source目录下创建categories文件夹：OyjBlog\source\categories

hexo new page categories

 

 

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

 layout: categories
  comments: false
  ---

切换主题

主题配置好之后就等着主题的切换了，下面来切换主题

     找到OyjBlog目录下的_config.yml文件（站点配置yml文件）

     修改theme: indigo（否者主题用的还是默认的landscape）