使用GitHub + hexo + maupassant主题搭建个人博客小结。

Hexo便捷安装

HEXO 便捷版

安装Hexo

安装Hexo前准备:

(1) Node.js 下载地址 建议安装LTS版本，稳定。

(2) Git 下载地址

如果已经安装完成以上程序，右键打开Git-bash，切换至淘宝NPM镜像进行接下来的安装:

(3) 使用定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm

1
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

(4) 可能遇到 npm command not found的问题

1
2
计算机->属性->高级系统设置->环境变量->用户变量 :
在 PATH 中添加 C:\Users\your computer name\AppData\Roaming\npm

(5) 安装Hexo:

1
$ cnpm install -g hexo-cli

使用Hexo进行本地建站

新建一个本地的文件夹，如C:\HEXO

进入Git安装的目录，选择git-bash.exe右键管理员权限打开， 输入

1
2
3
$ hexo init C:/HEXO
$ cd C:/HEXO
$ cnpm install

如果hexo安装成功，则在C:\hexo文件夹下的文件目录为

1
2
3
4
5
6
7
8
.
├── _config.yml // 网站的配置信息，你可以在此配置大部分的参数。
├── package.json 
├── scaffolds // 模板文件夹。当你新建文章时，Hexo会根据scaffold来建立文件。
├── source // 存放用户资源的地方
|   ├── _drafts
|   └── _posts
└── themes // 存放网站的主题。Hexo会根据主题来生成静态页面。

创建和配置Github

(1) 创建Github账号

Github

(2) 登录或者注册github，登录之后点击右上角的“+”号，选择“New repository”菜单，创建仓库，用于存储和博客相关的源文件。

(3) 在Repository name对应处填写仓库名(Github用户名.github.io)，下一步Create repository。

(4) 选择仓库上方的Setting， 进入设置页面。


Setting->GitHub Pages->Change Theme->Sellect Theme

完成会在GitHub Pages : 提示 Your site is ready to be published at …

在页面中点击博客地址链接， 即可看到自己当前的博客首页了。

配置SSH

(1) 生成SSH

检查是否已经有SSH Key，打开Git Bash，输入

1
$ cd ~/.ssh

如果没有这个目录，则生成一个新的SSH，输入 

1
$ ssh-keygen -t rsa -C "your e-mail"

其中，your e-mail是你注册Github时用到的邮箱。然后接下来几步都直接按回车键，最后生成如下

(2) 复制公钥内容到GitHub账号信息中

1
公钥地址 C:\Users\your computer name\.ssh\id_rsa.pub

(3) 打开Github官网，登陆后进入到个人设置(点击头像->setting)，点击右侧的SSH Keys，点击Add SSH key；填写title之后，将之前复制的内容粘贴到Key框中，最后点击Add key即可。

(4) 测试SSH是否配置成功

1
2
3
$ ssh -T git@github.com
如果显示以下，则说明ssh配置成功。
Hi username! You've successfully authenticated, but GitHub does not provide shell access.

(5) 配置github账号

1
2
3
$ git config --global user.name "username"
$ git config --global user.email "email"
$ git config --list查看已设配置

将网站发布到Github的同名repository中

打开C:\HEXO文件夹中的_config.yml文件，找到如下位置，填写

1
2
3
4
5
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy: 
  type: git
  repo: git@github.com:MyGithub/MyGithub.github.io

注： (1) 其中MyGithub替换成你的Github账户; (2)注意在yml文件中，:后面都是要带空格的。

安装Maupassant主题

(1) 安装主题

Manupassant

1
2
3
4
$ cd C:/HEXO
$ git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
$ cnpm install hexo-renderer-jade@0.3.0 --save
$ cnpm install hexo-renderer-sass --save

打开C:\HEXO下的_config.yml文件，找到theme字段，将其修改为maupassant

1
2
3
4
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: maupassant

在gitbash中输入hexo s --debug 访问本地网站http://localhost:4000/，确认网站主题是否切换为maupassant 。

(2) 更新Github

1
2
$ cd C:/HEXO
$ hexo deploy -g #编译本地内容,发布到github

这里可能会报错，如果提示需要安装hexo-deployer-git插件，就执行以下语句：

1
$ cnpm install hexo-deployer-git

(3) Hexo 命令

1
2
3
4
5
6
7
8
9
10
$ hexo new "postName" #新建文章
$ hexo new page "pageName" #新建页面
$ hexo generate #生成静态页面至public目录
$ hexo generate #生成静态页面至public目录
$ hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
$ hexo deploy #将.deploy目录部署到GitHub
$ hexo help # 查看帮助
$ hexo version #查看Hexo的版本
$ hexo deploy -g #生成加部署
$ hexo server -g #生成加预览

Hexo Maupassant主题下的配置

(1) 样式配置

①⑧：

1
2
3
4
5
6
7
8
HEXO/_config.yml
# Site
title: You Two
subtitle: Thougth Is Beautiful
description:
author: You Two 
language: zh-CN
timezone:

②：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
HEXO/themes/maupassant/_config.yml
menu:
  - page: home
    directory: .
    icon: fa-home
  - page: archive
    directory: archives/
    icon: fa-archive
  - page: about
    directory: about/
    icon: fa-user
  - page: rss
    directory: atom.xml
    icon: fa-rss

③：

1
2
3
4
5
6
7
8
HEXO/themes/maupassant/_config.yml
widgets:
  - search
  - category
  - tag
  - recent_posts
  - recent_comments
  - links

③④⑤⑦：Front-matter

1
2
3
4
5
6
7
8
9
10
HEXO/source/_posts/explore-blog.md
---
title: 搭建Hexo博客 # 文章标题
categories:        # 文章所属分类
- 知识笔记
tags:              # 文章所属Tag
- hexo
comments: true     # 显示评论
toc: true          # 显示目录
---

⑥ :

1
2
3
4
HEXO/themes/maupassant/_config.yml
self_search: true ## 基于jQuery的本地搜索引擎，需要安装hexo-generator-search插件使用
安装插件 : cnpm install hexo-generator-search --save

⑩：

1
2
3
4
HEXO/themes/maupassant/_config.yml
shareto: true ## 是否使用分享按鈕
## 启用分享按钮需要把HEXO/_config.yml url改为自己网站
url: https://zhdaduo.github.io/

(2) HEXO/themes/maupassant/_config.yml更多说明

fancybox - 是否启用Fancybox图片灯箱效果
duoshuo - 多说评论 shortname
disqus - Disqus评论 shortname
uyan - 友言评论 id
gentie - 网易云跟帖 productKey
google_search - 默认使用Google搜索引擎
baidu_search - 若想使用百度搜索，将其设定为true。
swiftype - Swiftype 站内搜索key
tinysou - 微搜索 key
self_search - 基于jQuery的本地搜索引擎，需要安装hexo-generator-search插件使用。
google_analytics - Google Analytics 跟踪ID
baidu_analytics - 百度统计 跟踪ID
show_category_count - 是否显示侧边栏分类数目
toc_number - 是否显示文章中目录列表自动编号
shareto - 是否使用分享按鈕
busuanzi - 是否使用不蒜子页面访问计数
widgets_on_small_screens - 是否在移动设备屏幕底部显示侧边栏
menu - 自定义页面及菜单，依照已有格式填写。填写后请在source目录下建立相应名称的文件夹，并包含index.md文件，以正确显示页面。导航菜单中集成了FontAwesome图标字体，可以在这里选择新的图标，并按照相关说明使用。
widgets - 选择和排列希望使用的侧边栏小工具。
links - 友情链接，请依照格式填写。
timeline - 网站历史时间线，在页面front-matter中设置layout: timeline可显示。
Static files - 静态文件存储路径，方便设置CDN缓存。
Theme version - 主题版本，便于静态文件更新后刷新CDN缓存。

(3) 主题特性

  • 网站图标:

    将命名为favicon.ico放在Hexo根目录的source文件夹下，建议的大小: 32px*32px。

    将命名为apple-touch-icon.png的图片放在同样的位置，建议的大小：114px*114px。

  • 文章摘要:

    首页默认显示文章摘要而非全文，可以在文章的front-matter中填写一项description:来设置你想显示的摘要，或者直接在文章内容中插入<!--more-->以隐藏后面的内容。
    若两者都未设置，则自动截取文章第一段作为摘要。

  • 添加页面

    在source目录下建立相应名称的文件夹，然后在文件夹中建立index.md文件，并在index.md的front-matter中设置layout为layout: page。若需要单栏页面，就将layout设置为 layout: single-column。

  • 文章目录

    在文章的front-matter中添加toc: true即可让该篇文章显示目录。

  • 文章评论

    文章和页面的评论功能可以通过在front-matter中设置comments: true或comments: false来进行开启或关闭（默认开启）。

  • 语法高亮

    请在Hexo目录的_config.yml中

1
2
3
4
5
highlight:
  enable: true
  auto_detect: true
  line_number: true
  tab_replace:

  • 数学公式

    请在Hexo目录的_config.yml中添加 mathjax: true

    然后在相应文章的front-matter中添加mathjax: true

    ​

链接

有哪些好看的 Hexo 主题？

Hexo- Maupassant简洁主题推荐