在github上搭建blog(基于Node.js的Hexo+next)

简介: 演示安装node.jswget https://nodejs.org/dist/v4.4.6/node-v4.4.6.tar.gz$ tar zxvf node-v0.8.16.tar.gz $ ./configure $ sudo make && sudo make install或者使用Hexo官网说的方式:安装 Node.js 的最佳方式是使用 nvm。

演示

安装node.js

wget https://nodejs.org/dist/v4.4.6/node-v4.4.6.tar.gz
$ tar zxvf node-v0.8.16.tar.gz 
$ ./configure 
$ sudo make && sudo make install

或者使用Hexo官网说的方式:

安装 Node.js 的最佳方式是使用 nvm。
cURL:
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

Wget:
$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

安装完成后,重启终端并执行下列命令即可安装 Node.js。
$ nvm install 4
  • 需安装其它工具:git
sudo apt-get install git-core

安装博客框架

sudo npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

此时blog目录下的文件有:
~/blog$ ls
_config.yml db.json node_modules package.json scaffolds source themes

配置Hexo(关联github)

在github新建一个仓库(new repository),命名为YourSiteName.github.io(例如我的就是lizer2014.github.io)
本地创建公私钥:
ssh-keygen -t rsa
并把公钥添加到github中,以后提交博客可以免密登陆。

修改站点信息:

title: lizer's blog
subtitle: lizer2016
description: 发令枪一响,你不可能有时间去看对手>是怎么跑的,你只有一路狂奔。~马云1999
author: lizer

关联github:(最后)
vim _config.yml

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

然后执行命令:(安装git插件)
npm install hexo-deployer-git --save

安装next主题

在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。

为了描述方便,在以下说明中,将前者称为 站点配置文件, 后者称为 主题配置文件。

下载主题

$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

启用主题

与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后,打开 站点配置文件, 找到 theme 字段,并将其值更改为 next。
theme: next

验证主题

本地运行:
hexo generate
hexo server
命令行提示:
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

浏览器访问:
http://localhost:4000

主题设定

选择 Scheme

Scheme 是 NexT 提供的一种特性,借助于 Scheme,NexT 为你提供多种不同的外观。同时,几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme,他们是:

  • Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
  • Mist - Muse 的紧凑版本,整洁有序的单栏外观
  • Pisces - 双栏 Scheme,小家碧玉似的清新
    Scheme 的切换通过更改 主题配置文件,搜索 scheme 关键字。 你会看到有三行 scheme 的配置,将你需用启用的 scheme 前面注释 # 即可

这里我启用的是Mist

设置语言为中文

站点配置文件_config.yml
language: zh-Hans

设置 菜单

菜单项(名称和链接),菜单显示文本,菜单对应图标
编辑主题配置文件
- 设定菜单内容,对应的字段是 menu。 菜单内容的设置格式是:item name: link。其中 item name 是一个名称,这个名称并不直接显示在页面上,她将用于匹配图标以及翻译。

menu:
  home: /
  archives: /archives
  #about: /about
  categories: /categories
  tags: /tags
  #commonweal: /404.html
  • 设置菜单项的显示文本。在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用 这个名称查找对应的语言翻译,并提取显示文本。这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml

  • 设定菜单项的图标,对应的字段是 menu_icons。 此设定格式是 item name: icon name,其中 item name 与上一步所配置的菜单名字对应,icon name 是 Font Awesome 图标的 名字。而 enable 可用于控制是否显示图标,你可以设置成 false 来去掉图标。

设置 侧栏

设置头像

编辑站点配置文件_config.yml,添加字段
# Site
avatar: /uploads/avatar.jpg

头像链接地址可以是
互联网URI:http://example.com/avtar.png
站点内的地址:
这里用
将头像放置主题目录下的 source/uploads/ (新建uploads目录若不存在)
配置为:avatar: /uploads/avatar.png

或者 放置在 source/images/ 目录下
配置为:avatar: /images/avatar.png

集成第三方服务

多说评论

使用多说前需要先在 多说 创建一个站点。具体步骤如下:
1. 登录后在首页选择 “我要安装”。
2. 创建站点,填写站点相关信息。 多说域名 这一栏填写的即是你的 duoshuo_shortname
3. 创建站点完成后在 站点配置文件 中新增 duoshuo_shortname 字段,值设置成上一步中的值。

# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------

duoshuo_shortname: lizerblog

百度统计

注意: baidu_analytics 不是你的百度 id 或者 百度统计 id
1. 登录 百度统计, 定位到站点的代码获取页面
2. 复制 hm.js? 后面那串统计脚本 id
3. 编辑 站点配置文件, 新增字段 baidu_analytics 字段,值设置成你的百度统计脚本 id
例如:
baidu_analytics: daaa7ce1b92a38c5e0c28cfcd70605ad

阅读次数统计(LeanCloud)

在注册完成LeanCloud帐号并验证邮箱之后,我们就可以登录我们的LeanCloud帐号,进行一番配置(创建自己的应用,在应用中的设置里有应用key)之后拿到AppID以及AppKey这两个参数即可正常使用文章阅读量统计的功能了。

在自己创建的应用里有个数据的选项,在应用的数据配置界面,左侧下划线开头的都是系统预定义好的表,为了便于区分我们新建一张表来保存我们的数据。点击左侧右上角的齿轮图标,新建Class:
在弹出的选项中选择创建Class来新建Class用来专门保存我们博客的文章访问量等数据:
点击创建Class之后,理论上来说名字可以随意取名,但是为了保证我们前面对NexT主题的修改兼容,此处的新建Class名字必须为Counter:
由于LeanCloud升级了默认的ACL权限,如果你想避免后续因为权限的问题导致次数统计显示不正常,建议在此处选择无限制。

选择左侧的应用Key选项,即可发现我们创建应用的AppID以及AppKey,有了它,我们就有权限能够通过主题中配置好的Javascript代码与这个应用的Counter表进行数据存取操作了:

复制AppID以及AppKey并在NexT主题的_config.yml文件中我们相应的位置填入即可,正确配置之后文件内容像这个样子:

leancloud_visitors:
  enable: true
  app_id: SwEvK4t9RaHtQCqTapfWMjMX-gzGzoHsz #<app_id>
  app_key: cz8cWYhHo43i3tlWbLP1w1vx #<app_key>

这个时候重新生成部署Hexo博客,应该就可以正常使用文章阅读量统计的功能了。需要特别说明的是:记录文章访问量的唯一标识符是文章的发布日期以及文章的标题,因此请确保这两个数值组合的唯一性,如果你更改了这两个数值,会造成文章阅读数值的清零重计。

为了安全,在应用的安全选项卡中添加自己的web安全域名

美化显示:
修改主题next/languages/zh-Hans.yml中
visitors: 阅读次数 为 visitors: 热度
修改主题下的next/layout/_macro/post.swig第114行添加°C
<span class="leancloud-visitors-count"></span>°C

多说分享

编辑 站点配置文件,添加字段 baidushare,值为 true。

duoshuo_share: true

主题配置

设置 RSS

NexT 中 RSS 有三个设置选项,满足特定的使用场景。 更改 主题配置文件,设定 rss 字段的值:
npm install hexo-generator-feed –save
false:禁用 RSS,不在页面上显示 RSS 连接。
留空:使用 Hexo 生成的 Feed 链接。 你可以需要先安装 hexo-generator-feed 插件。
具体的链接地址:适用于已经烧制过 Feed 的情形。

添加「标签」页面

hexo new page tags

在新生成的/source/tags/index.md添加
comments: false
type: “tags”

文章里使用:
tags: [tag1, tag2]

添加「分类」页面

hexo new page categories

在新生成的/source/categories/index.md添加
comments: false
type: “categories”

文章里使用:
categories: [cate1, cate2]
这里有顺序的区别

侧边栏社交链接

侧栏社交链接的修改包含两个部分,第一是链接,第二是链接图标。 两者配置均在 主题配置文件 中。

  1. 链接放置在 social 字段下,一行一个链接。其键值格式是 显示文本: 链接地址。
social:
  #LinkLabel: Link
  GitHub: https://github.com/lizer2014
  # Twitter: https://twitter.com/your-user-name
  Weibo: http://weibo.com/u/3645318624?is_all=1
  1. 设定链接的图标,对应的字段是 social_icons。
social_icons:
  enable: true
  # Icon Mappings.
  # KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome
  GitHub: github
  # Twitter: twitter
  Weibo: weibo

开启打赏功能

主题配置文件 中填入 微信 和 支付宝 收款二维码图片地址 即可开启该功能。

reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
wechatpay: /uploads/weixin_pay.png

友情链接

编辑 主题配置文件 添加:

links_title: Links
#links_layout: block
#links_layout: inline
links:
  #Title: http://example.com/
  csdn博客:i立志的专栏: http://blog.csdn.net/u014595668

多说评论显示 UA

要启用此功能(显示楼主),需要配置 duoshuo_info 这个字段。 编辑 主题配置文件,查找 duoshuo_info 字段, 设置如下:

duoshuo_info:
  ua_enable: true
  admin_enable: false
  user_id: 6302689811505350000
  admin_nickname: Author

站点建立时间

编辑 主题配置文件,新增字段 since。

since: 2016

搜索服务

官网说用的是Swiftype,但是除了网站本身打开慢,而且github采用的是https,所以Swiftype是无法爬取的,无法搜索,所以采用本地搜索Local Search
1. 安装 hexo-generator-search,在站点的根目录下执行以下命令:

$ npm install hexo-generator-search --save
  1. 编辑 站点配置文件,新增以下内容到任意位置:
search:
  path: search.xml
  field: post
  1. 编辑 站点配置文件,修改网站url
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://lizer2014.github.io/

博客迁移

首先,安装 hexo-migrator-rss 插件。

$ npm install hexo-migrator-rss –save
插件安装完成后,执行下列命令,从 RSS 迁移所有文章。source 可以是文件路径或网址。

$ hexo migrate rss

其它优化

自动折叠首页文章

编辑主题设置:
auto_excerpt:
enable: true
length: 150

或者在文章中使用 括取部分作为摘要

或者在文章的开头加入description: 属性描述文章

修改主题模板:scaffolds/post.md

---
title: {{ title }}
date: {{ date }}
categories: 
tags: 
description: 
comments: true
---

基本操作

hexo clean 清除生成文件
hexo generate 生成静态文件
hexo server 本地运行blog
hexo deloy 发布博客


参考:

Hexo官网
next主题官网
动动手指,NexT主题与Hexo更搭哦(基础篇)

HEXO+Github,搭建属于自己的博客
使用Hexo + Next搭建静态博客
Concise主题

目录
相关文章
|
开发工具 git
如何运行github上面的node+express项目
如何运行github上面的node+express项目
256 0
|
8天前
|
运维 监控 JavaScript
鸿蒙next版开发:分析JS Crash(进程崩溃)
在HarmonyOS 5.0中,JS Crash指未处理的JavaScript异常导致应用意外退出。本文详细介绍如何分析JS Crash,包括异常捕获、日志分析和典型案例,帮助开发者定位问题、修复错误,提升应用稳定性。通过DevEco Studio收集日志,结合HiChecker工具,有效解决JS Crash问题。
25 4
|
1月前
|
JavaScript 开发工具 git
已安装nodejs但是安装hexo报错
已安装nodejs但是安装hexo报错
26 2
|
2月前
|
网络协议 开发工具 git
hexo github部署,通过域名访问你的博客
本文介绍了如何使用Hexo命令部署博客到GitHub,并详细说明了如何通过自定义域名访问GitHub上部署的博客。
hexo github部署,通过域名访问你的博客
|
3月前
|
JavaScript 前端开发
Next js:点击登录显示登录表单,点击注册显示注册表单的功能
本文提供了一个Next.js中使用React状态管理实现点击按钮切换显示登录和注册表单的功能示例,包括创建`authform.tsx`组件和在页面组件中引入使用的方法。
|
6月前
|
JavaScript 网络安全 开发工具
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
|
缓存 JavaScript 网络安全
基于Hexo的主题Fluid搭建Github博客
基于Hexo的主题Fluid搭建Github博客
170 1
|
6月前
|
资源调度 前端开发 JavaScript
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
172 0
|
6月前
|
开发框架 前端开发 JavaScript
next.js博客搭建_初始化next项目(第一步)
next.js博客搭建_初始化next项目(第一步)
91 1
|
数据采集 JavaScript 搜索推荐
hexo搭建github.io博客
hexo搭建github.io博客
179 0