Hexo搭建github博客-NexT主题

Posted on   |   In   |     |  

系统环境配置

本教程配置系统：Windows

安装Node.js

下载地址:
cmd中查询版本号，验证是否安装成功

1
2
$ node -v
$ npm -v

安装Git

下载地址：
git bash中也可查阅Git的版本号

1
$ git --version

安装Hexo

1
2
3
4
5
6
$ cd d:/blog # 进入新建的放博客的文件夹
$ npm install hexo-cli -g # 安装Hexo
$ hexo init # 初始化Hexo
$ npm install # npm会自动安装需要的组件
$ hexo g # 或者hexo generate，生成静态文件
$ hexo s # 或者hexo server，启动本地Web服务，此时可以在http://localhost:4000/ 中查看本地页面了

至此，Hexo已在本地的部署成功

配置GitHub

需要部署在服务器上，才可以远程访问，我们这里选择GitHub Pages，GitHub有300MB免费空间可以使用。

  • 生成SSH key
    打开上面安装的git bash
    1
    $ ssh-keygen -t rsa -C "your_email@example.com" # 后连续按回车

生成的秘钥保存在C:\Users\yogu.ssh中

  • 添加SSH Key到GitHub
    打开C:\Users\yogu.ssh\id_rsa.pub
    在Github网站找到 “Account Settings” > Click “SSH Keys” > Click “Add SSH key”
    将C:\Users\yogu.ssh\id_rsa.pub内容复制上去
    在git bash中测试ssh keys是否设置成功
    1
    $ ssh -T git@github.com

出现Hi xxx! You’ve successfully authenticated, but GitHub does not provide shell access. 说明配置成功

  • 使用GitHub Pages建立博客
    在主页右下角创建New repository，name必须和用户名一致如xiangnan.github.io，等待几分钟审核，之后即可访问静态主页如http://xiangnan.github.io

NexT主题安装

下载NexT主题

1
2
$ cd d:/blog
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

启用主题
打开站点配置文件（_config.yml），找到theme字段，并将其值更改为next

部署至github

安装hexo-deployer-git

1
$ npm install hexo-deployer-git --save

配置deploy
打开站点配置文件（config.yml）,找到deploy字段

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

配置好后以后执行下面命令即可自动部署

1
2
hexo generate
hexo d # 或者hexo deploy

发表博客时，执行下面命令，会在/source/_posts目录下会生成XXX.md文件，直接在里面用markdown语言编辑即可

1
$ hexo new "postName" #新建文章

这里推荐一个在线编辑工具https://stackedit.io/editor ，也可直接在WebStrome中编写（可安装插件预览）

配置NexT主题

这里使用的是WebStorm IDE进行代码的编辑，我这里将NexT通篇改成了粉色的样式
另外增加了不蒜子访客统计、sitemap（才能在百度或Google上更好的搜到自己的文章）、多说评论、百度Google分析等

关于博客的图片

使用新浪微博图床，在chrome上安装一个新浪微博的图床插件，即可方便的上传图片，获取图片地址