Github&Hexo&Next搭建个人博客实践

发表于   |     |   阅读次数

搭建Github Pages

安装git

下载安装

安装node.js

安装hexo

  • 验证是否安装成功

    1
    $ hexo version

  • 如出现错误:Missing+write+access+to+/usr/local/lib/node_modules

    1
    $ sudo npm install --unsafe-perm --verbose -g hexo  //需要输入密码时输入密码

初始化hexo

  • 直接在[yourname] 这个文件夹下创建一个folder名字的文件夹,并将会在指定文件夹(folder)中新建建站所需要的文件

    1
    hexo init folder  //这样就是

    ​ 注:如果成功会显示:INFO Start blogging with Hexo!

  • 初始化成功的folder文件夹下文件层级如下:

    1
    2
    3
    4
    5
    6
    7
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    ├── source
    |   ├── _drafts
    |   └── _posts
    └── themes

  • 生成静态页面至hexo\public\目录。

    1
    2
    $ cd /Users/yourMacName/folder //cd 到你的init目录。yourMacName为你电脑的名称文件夹
    $hexo generate （hexo g 也可以) //生成静态页面至hexo\public\目录。如成功,会在folder目录下创建一个public文件夹

  • 本地启动
    启动本地服务，进行文章预览调试，命令：

    1
    $ hexo server

    浏览器输入http://localhost:4000
    或者点击网址http://0.0.0.0:4000

    更多问题参见:这里

  • 本地已经简单的设置好了，但是现在域名和服务器都是基于自己的电脑，接下来需要跟github进行关联。

与github关联

  • 在folder文件夹内,找到_config.yml 这个文件,用文本编辑器打开.翻到最下面编辑如下:
1
2
3
4
deploy:
  type: git
  repository: https://github.com/yourID/yourID.github.io.git  
  branch: master
1
2
3
注:1.博主本人的报错为bad indentation of a mapping entry at line 73, column 10: branch: master
请确认您使用空格进行缩进（Soft tab），并确认冒号后有一个空格。
   2.yourID请换成自己的用户名。这个地址为SSH地址

  • _config.yml文件编辑保存后,执行如下命令git部署

    1
    npm install hexo-deployer-git —save

  • hexo deploy 成功后显示:INFO Deploy done: git

  • 现在浏览器打开,http://yourID.github.io

  • 更多问题参见:这里

安装Next主题

在 folder文件夹内有两份主要的配置文件，其名称都是 config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。为了描述方便，在以下说明中，将前者称为 ==站点配置文件==(根目录下的config.yml)， 后者称为 ==主题配置文件==(theme文件夹内的_config.yml)。

下载主题

  • Hexo 安装主题的方式非常简单，

    • 方法1:只需要将主题文件拷贝至站点目录的 themes 目录下， 然后修改下配置文件即可。具体到 NexT 来说，安装步骤如下。

    • 方法2:在终端窗口下，定位到 Hexo 站点目录下。使用 Git checkout 代码：//当然,用git 更方便了.

      1
      2
      $ cd your-hexo-site //就是folder根目录
      $ git clone https://github.com/iissnan/hexo-theme-next themes/next

启用主题

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

1
theme: landscape 改为 theme: next

到此，NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前， 我们最好使用 hexo clean 来清除 Hexo 的缓存。

验证主题

首先启动 Hexo 本地站点，并开启调试模式（即加上 –debug），整个命令是 hexo s –debug。 在服务启动的过程，注意观察命令行输出是否有任何异常信息，如果你碰到问题，这些信息将帮助他人更好的定位错误。 当命令行输出中提示出：

1
INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

此时即可使用浏览器访问http://localhost:4000, 检查站点是否正确运行。

出现如上图片说明:你已经成功安装并启用了 NexT 主题。下一步我们将要更改一些主题的设定，包括个性化以及集成第三方服务。

主题设定

选择 Scheme

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

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

1
2
3
4
选用Pisce Scheme
#scheme: Muse
#scheme: Mist
scheme: Pisces

设置 语言

编辑 站点配置文件， 将 language 设置成你所需要的语言。建议明确设置你所需要的语言，例如选用简体中文，配置如下：

1
language: zh-Hans  //注意,这里: 后面也要有空格

设置 侧栏

  • 主题配置文件 里

    • 1.设置侧栏的位置，修改 sidebar.position 的值，支持的选项有：

    left - 靠左放置
    right - 靠右放置

    1
    2
    3
    4
    sidebar:
      # Sidebar Position, available value: left | right
      #position: left
      position: right
    • 2.设置侧栏显示的时机，修改 sidebar.display 的值，支持的选项有：

​ post - 默认行为，在文章页面（拥有目录列表）时显示
​ always - 在所有页面中都显示
​ hide - 在所有页面中都隐藏（可以手动展开）
​ remove - 完全移除

display: post
  #display: always
  #display: hide
  #display: remove

设置 头像

编辑 站点配置文件， 新增字段 avatar， 值设置成头像的链接地址。其中，头像的链接地址可以是

avatar: http://example.com/avtar.png

avatar: http://ww2.sinaimg.cn/large/72f96cbajw1f7s58btvquj20go0cimy0.jpg //这是我加的

设置 作者昵称

编辑 站点配置文件， 设置 author 为你的昵称。

1
author: yourName

站点描述

编辑 站点配置文件， 设置 description 字段为你的站点描述。站点描述可以是你喜欢的一句签名:)

1
description: yourWord

集成第三方服务

多说评论(难度:2颗星,不需要翻墙)

登录多说官网后在首页选择 “我要安装”。
创建站点，填写站点相关信息。 多说域名 这一栏填写的即是你的 duoshuo_shortname，

创建站点完成后在 站点配置文件 中新增 duoshuo_shortname 字段，值设置成上一步中的值。

假如多说域名填写的为adfa ,那么在 站点配置文件 里,最后面添加这么一行:

1
duoshuo_shortname: adfa

多说分享(同上)

多说分享必须与多说评论同时使用!!!

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

1
duoshuo_share: true

多说热评文章 (同上)

站点/主题配置文件 中设置：

1
duoshuo_hotartical: true

Google分析统计(难度:2颗星,需要翻墙)

编辑 站点配置文件， 新增字段 google_analytics， 值设置成你的 Google 跟踪 ID。跟踪 ID 通常是以 UA- 开头。

例如如果 Google 跟踪 ID为UA-110-110,那么在站点配置文件[^注2]最后一行添加:

1
google_analytics: UA-110-110

阅读次数统计（LeanCloud)(难度:4颗星,不需要翻墙)

选用LeanCloud 请查看此网页为Next主题添加文章阅读量统计

一些常用命令：

git内cd进入到floder目录下时

1
2
3
4
5
6
7
8
9
10
11
hexo clean #清除 Hexo 的缓存。
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认地址http://localhost:4000，'ctrl + c'关闭server）
hexo deploy #将.deploy目录部署到GitHub,可与hexo g合并为 hexo d -g 
hexo help  # 查看帮助
hexo version  #查看Hexo的版本
简要二步曲:
hexo new page "pageName" #新建页面  新建成功后,在folder/source/_post内修改文章内容
hexo d -g  #生成目录后部署到GitHub

别人推荐的几款个人认为不错的主题,(我暂时还没试用)

1
2
3
4
5
6
7
　Oishi - A white theme based on Landscape plus and Writing. 
　Sidebar - Another theme based on Light with a simple sidebar 
　TKL - A responsive design theme for Hexo. 一个设计优雅的响应式主题 
　Tinnypp - A clean, simple theme based on Tinny 
　Writing - A small and simple hexo theme based on Light 
　Yilia - Responsive and simple style 优雅简洁响应式主题。 
　Pacman voidy - A theme with dynamic tagcloud and dynamic snow

补充

hexo new page “pageName” #新建页面 将会在/folder/source/_post目录下生成pageName.md

但是这并不是显示在网页中的名称,编辑网页名称,在pageName.md内的YAML Front Matters 中修改title的值:如下

1
title: Github&Hexo&Next搭建个人博客实践

参考文档

热评文章