Github+Hexo+Next博客搭建之Hexo,Next及部署

博客已经搭建好了,自然可以趁热打铁写一些博客搭建的经验.一是方便自己以后查看,免得忘记.二是如果有人想了解博客搭建的过程,也正好有个参考.(如果SEO做的好,就有可能看到这篇文章).本文仅记录怎么去搭建博客,而不会解释每一步原理,有些东西我自己都没有搞的太清楚.毕竟我只是想借助博客这个平台记录平时工作的经验而已,细究相关方面知识并不是我的最终目的

现在回头看博客的搭建过程,可以总结归纳以下几点. markdown,git和GitHub,github和coding部署, Hexo和Next了解, SEO等

Hexo,Next,部署,SEO
该博客的搭建用的是Hexo博客框架,详细的说明官方文档都有提到.在主题的选择上用的是Next,对应的也有相关的官方文档.接下来就搭建过程中遇到的简单介绍一下

Hexo中基本指令

npm install -g hexo-cli     // npm安装Hexo, 非Hexo中命令

hexo init <folder>      // 指定文件夹下初始化Hexo,若没有设置folder, Hexo默认在目前的文件夹建立网站

cd <folder>     // 进入指定文件夹, 非Hexo中命令

npm install     // 安装配置文件packge.json中的依赖, 非Hexo中命令

hexo new [layout] <title>       // 新建一篇文章.layout默认default_layout参数,标题有空格,需使用引号括起来

hexo generate       // 生成静态文件. -d, --deploy 文件生成后立即部署网站.可简写为 hexo g

hexo server     // 启动服务器.默认情况下网址为:http://loalhost:4000/. -p, --port 重设端口

hexo deploy     // 部署网站. -g, --generate 部署之前预先生成静态文件.可简写为 hexo d

hexo clean      // 清除缓存文件和已生成的静态文件

Hexo部署地址配置

打开站点配置文件_config.yml,找到deploy字段,配置如下

deploy:
- type: git // 以下是我的git地址
   repo: git@github.com:yexiaochen/yexiaochen.github.io.git
   branch: master
- type: git // 以下是我的coding地址
   repo: git@git.coding.net:yexiaochen/yexiaochen.coding.me.git
   branch: master

安装Next主题

定位到Hexo站点目录下,执行一下命令即可

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

克隆完成后,打开站点配置文件_config.yml,找到theme字段,并将其值更改为next

设置菜单页面

Next主题有默认的菜单项,部分菜单项需要自己添加.添加菜单项页面

新建标签页面

在根目录下新建标签页面
```
hexo new page tags
```

在新建的页面编辑一下内容

---
title:  All tags
date: 2018-03-24 18:02:30
type: "tags"
comments: false
---

在主题配置文件_config.yml内, 找到menu字段,添加如下内容

menu:
home: / || home
# about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
# schedule: /schedule/ || calendar
# sitemap: /sitemap.xml || sitemap
# commonweal: /404/ || heartbeat

在菜单项里添加分类项操作同上

添加gitment评论添加gitalk评论

远程仓库新建一个repository,名字随意,待会儿会用到
添加OAuth Apps.登陆GitHub,通过Settings => Developer settings => OAuth Apps,点击New OAuth App.添加后会生成Client ID和Client Secret

gitalk和gitment是差不多的产品, 在我们更换评论系统时, 可以在其基础上修改. 在主题配置文件_config.yml内, 找到gitment字段,添加如下内容.

gitment:
    enable: true
    mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
    count: true # Show comments count in post meta area
    lazy: true # Comments lazy loading with a button
    cleanly: true # Hide 'Powered by ...' on footer, and more
    language: # Force language, or auto switch by theme
    github_user: yexiaochen # MUST HAVE, Your Github ID 18507780
    github_repo: blog-gitment # MUST HAVE, The repo you use to store Gitment comments
    client_id: your_client_id # MUST HAVE, Github client id for the Gitment
    client_secret: your_client_secret # EITHER this or proxy_gateway, Github access secret token for the Gitment
    proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
    redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled

在themes/next/layout/_third-party/comments/gitment.swig文件中, 按照gitalk文档里的配置进行修改.

const gitalk = new Gitalk({
clientID: 'GitHub Application Client ID',
clientSecret: 'GitHub Application Client Secret',
repo: 'GitHub repo',
owner: 'GitHub repo owner',
admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
id: location.pathname,      // Ensure uniqueness and length less than 50
distractionFreeMode: false  // Facebook-like distraction free mode
})

注意: gitalk 需要GitHub账号登陆才可以创建初始化.

部署coding

部署到coding和部署到GitHub类似,也是要添加SSH的.新建的项目名称也是要求按照一定的规范来,细节可参考Coding Pages.在Pages服务的设置可参考下图
coding

DNS解析设置

购买域名后,要对其进行解析设置.因为国外墙的原因,故博客在部署时也选在了不同的平台上.不同的解析路线对应不同的项目URL
DNS

博客的搭建到此就结束了,其中还是有许多细节没有提到,时间久了已经忘了大部分了