基于github的Next主题博客搭建

有关github搭建免费博客的方法已有很多,再次赘述的目的是为了记录自己在搭建时所遇到的诸多比较麻烦的问题,方便以后查阅.

1. 准备工作(github,git bash,node.js,npm,Next主题)

• github
  新建一个名称为 github用户名.github.io 的仓库,作为存放博客文件和代码的地方

• git
  在自己的计算机上安装git,用于将写好的博客和配置文件推送到github的远程仓库

• node.js
  node.js是JavaScript的一种运行环境,npm是包含在npm的,具体的下载可以百度

• npm
  npm用来安装hexo(简洁高效的博客框架),在git bash使用以下命令安装

    npm install -g hexo
  

• hexo
  在本地新建一个文件夹作为本地仓库(在本地仓库写博客修改再推送到远程仓库),在文件夹内输入以下命令

    hexo init
  

2. Next主题配置

Next主题的安装,建议去github上下载zip包,本地解压放进博客根目录下的themes文件夹下,对应的修改站点配置文件_config.yml里的theme项为next(next是存放主题的文件名称)

• 修改Next主题风格
  Next通过四种风格可选,个人比较偏好最后一个,可以自己尝试修改

    # Schemes
    # scheme: Muse
    # scheme: Mist
    # scheme: Pisces
    scheme: Gemini
  

• 菜单设置
  Next默认只有两个菜单导航条,可以在主题配置文件中修改

    menu:
    home: /                       #主页
    categories: /categories #分类页（需手动创建）
    about: /about       #关于页面（需手动创建）
    archives: /archives     #归档页
    tags: /tags         #标签页（需手动创建）
    commonweal: /404.html        #公益 404 （需手动创建）
  

  手动创建是指,举个例子,譬如要打开tags导航条,在git bash下运行,

    hexo new page "tags"
  

  并修改/source/categories目录下的index.md文件

    title: tags
    date: 2015-09-29 14:47:21
    type: "tags"
    ---
  

• sitmap插件
  Sitemap 可方便管理员通知搜索引擎他们网站上有哪些可供抓取的网页，有助于让别人更好地通过搜索到自己的博客

    安装
    npm install hexo-generator-sitemap --save
  

3. 评论系统Gitalk的配置使用

首先，你得有一个Github账号（这个就不多说了吧），下面，打开这个链接，具体填法如下：

    Application name //应用名称，随便填
    Homepage URL //没有过多要求，可以填自己的博客地址
    Application description //应用描述，描述一下，无要求
    Authorization callback URL //这个就有要求了，填自己要使用Gitment的博客地址，不可乱填

对应到主题配置文件下的gitalk

    enable: true #指的是是否开启Gitalk
    ClientID: xxxxxx #之前的Client ID
    ClientSecret: xxxxxxxxxxxx #之前的Client Secret
    repo: gitalk #你要存放的项目名，下文会详细再说
    owner: geedme #这个项目名的拥有者（GitHub账号或组织）
    adminUser: geedme #管理员用户，下文也会详细讲
    ID: location.pathname #页面ID，不知道就默认的就好了
    labels: gitalk #GitHub issues的标签，下面会详细说
    perPage: 15 #每页多少个评论
    pagerDirection: last #排序方式是从旧到新（first）还是从新到旧（last）
    createIssueManually: true #如果当前页面没有相应的 isssue ，且登录的用户属            于 admin，则会自动创建 issue。如果设置为 true，则显示一个初始化页面，创建 issue 需要点击 init 按钮。
    distractionFreeMode: false #是否启用快捷键(cmd|ctrl + enter) 提交评论.

4. 推送远程仓库的常见问题

    deploy:
    type: git
    repository: git@github.com:xxx/xxx.github.io.git
    branch: master

参考附录

• 小茗同学的博客园
• 关于HEXO搭建个人博客的点点滴滴
• Hexo搭建Github博客(三)-Next主题配置使用
• Hexo中Gitalk配置使用教程