github的Next主题博客搭建

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

准备工作(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
    

####### 快捷键
|hexo的几个常用命令|作用|
|:——–:|:——–:|
|hexo clean| 清除缓存|
|hexo g|生成静态网页|
|hexo s|本地生成博客网站|
|hexo d|部署到远程|
|hexo new ‘文章名称’|新建文章|

####### 博客头格式

1
2
3
4
5
6
7
8
9
10
11
---
title: postName #文章页面上的显示名称,一般是中文
date: 2013-12-02 15:30:16 #文章生成时间,一般不改,当然也可以任意修改
categories: 默认分类 #分类
# tags: [tag1,tag2,tag3] #文章标签,可空,多标签请用格式,注意:后面有个空格,或者:
tags:
- 标签1
- 标签2
- 标签3
description: 附加一段文章摘要,字数最好在140字以内,会出现在meta的description里面
---

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
    
评论系统Gitalk的配置使用

首先,你得有一个Github账号(这个就不多说了吧),下面,打开这个链接,具体填法如下:

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

对应到主题配置文件下的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) 提交评论.
推送远程仓库的常见问题
deploy:
type: git
repository: git@github.com:xxx/xxx.github.io.git
branch: master
参考附录