使用 Hexo+NexT 在 Github 上搭建静态博客

Hexo 是一个快速, 简单而高效的静态博客框架, 本文将介绍如何在 GitHub 上使用 Hexo+NexT 搭建静态博客

准备

你需要在 Github 上创建一个属于自己的账户, 然后新建一个仓库(new repository), 并命名为 YourSiteName.github.io, 此时 Github 会帮助你初始化一个静态网页, 你可以根据自己的喜好选择一些模版(这都不是重点), 接着尝试访问下你所建的站点, 成功后就可以开始动工了。

Node.js 环境

需安装 nvm, 任何版本皆可

nvm 5
nvm alias defaults 5

安装 Git

如果你的系统没有 git, 则必装

sudo apt-get install git

Hexo 初始化博客框架

参考链接

Hexo 官网

Hexo 配置文档

Hexo 相关指令

Hexo 主题

安装 Hexo

npm install -g hexo-cli

初始化框架

hexo init [yourFolder]
cd [folderName]
npm install

新建文章

hexo new "Hello World"

./source/_post 里添加 hello-world.md 文件, 之后新建的文章都将存放在此目录下。

新建页面

hexo new page tags
hexo new page categories

./source/ 里添加 tagscategories 目录, 即标签页和分类页

取消标签页和分类页的评论功能

标签页 ./source/categories/index.md

---
title: null
date:
type: "categories"
comments: false
---

分类页 ./source/tags/index.md

---
title: null
date:
type: "tags"
comments: false
---

建议修改默认的文章模板

vim ./scaffolds/post.md

修改成

---
title: {{ title }}
date: {{ date }}

categories:
tags:
---

生成静态网站

hexo generate

此时会将 /source.md 文件生成 html 文件到 /public 中, 形成网站的静态文件。

本地预览

hexo server -p 3000

输入 //localhost:3000 即可查看网站, 若无指定端口号, 将采用默认端口 4000 。 使用 Ctrl + C 快捷键终止该进程

部署网站至 github

hexo deploy

静态化且部署简化命令

hexo g -d

部署网站前请配置

./_config.yml

deploy:
    type: git
repo: git @github.com: youName / youName.github.io.git
branch: master

部署前请执行

npm install hexo-deployer-git --save
hexo clean
hexo generate

使用 NexT 主题让站点更酷炫

参考链接

NexT 参考文档

NexT 主题配置

NexT 第三方服务

更多的配置问题

下载主题

cd <yourFolder>
git clone https://github.com/iissnan/hexo-theme-next themes/next

修改配置文件

vim ./_config.yml

修改

theme: next

验证主题效果

hexo s --debug

访问 //localhost:4000 , 确保站点正确运行

站内搜索

npm install hexo-generator-search --save

编辑配置文件

./_config.yml

在任意位置添加以下内容

search:
    path: search.xml
field: post
format: html
limit: 10000

编辑主题配置文件

./themes/next/_config.yml

#
Local search
local_search:
    enable: true

开启字数统计和阅读时长

安装 hexo-wordcount

npm install hexo-wordcount --save

编辑主题配置文件

./themes/next/_config.yml

post_wordcount:
    item_text: true
wordcount: true
min2read: true

我的配置(只写出部分配置)

站点配置文件

./_config.yml

#
Site
language: zh - Hans

# search
search:
    path: search.xml
field: post

# URL
url: . /

    #Writing
highlight:
    enable: true
line_number: true
auto_detect: true
tab_replace:

    #Pagination
per_page: 5
pagination_dir: page

# Extensions
theme: next

# Deployment
deploy:
    type: git
repo: git @github.com: vxhly / vxhly.github.io.git
branch: master

主题配置文件文件

./themes/next/_config.yml

# Specify the date when the site was setup
since: 2016

# Footer `powered-by` and `theme-info` copyright
copyright: true

menu:
  home: /
  categories: /categories
  #about: /about
  archives: /archives
  tags: /tags
  #sitemap: /sitemap.xml
  commonweal: /404.html

# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces

# Social Links
social:
  #LinkLabel: Link
  GitHub: //github.com/vxhly
  Weibo: //weibo.com/5039312152

# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true

# Automatically Excerpt. Not recommand.
auto_excerpt:
  enable: true
  length: 150

# Code Highlight theme
highlight_theme: night eighties

# Duoshuo ShortName
duoshuo_shortname: vxhly
  enable: true
  length: 150

# Post wordcount display settings
post_wordcount:

    item_text: true

wordcount: true
min2read: true

# Share
duoshuo_share: true

# Make duoshuo show UA
duoshuo_info:
  ua_enable: true
  admin_enable: true
  user_id: 13846473
  admin_nickname: Author

腾讯公益 404 页面

./themes/next/source/404.html

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8;" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="robots" content="all" />
    <meta name="robots" content="index,follow" />
</head>

<body>
    <script type="text/javascript" src="//www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="/" homePageName="回到我的主页">
    </script>
</body>

</html>