hexo+next制作博客 | matt90luo's Blog

本篇博客主要记录了如何使用github的pages以及Hexo搭建博客, 方便读者快速实现个人博客梦想

什么是Github Pages

首先得知道Github pages的规则: > 每个Github账号下面只能建立一个Pages，且命名必须符合这样的规则：“username.github.io” > 创建成功后，username.github.io就是你的域名（当然你可以通过别名解析绑定自己的域名） <!— more —>

搭建步骤

在Github建立一个新的Repository：命名为：username.github.io
本地clone仓库

git clone https://github.com/username/username.github.io

使用Hexo管理博客
1. 进入clone下来的仓库目录创建hexo分支
```
git checkout -b hexo
```
1. 安装hexo，以及相关扩展依赖并初始化(需要首先安装nodejs, MacOS平台执行 brew install node)
```
npm install -g hexo
```
```
hexo init [your hexo dir] // 初始化
```
完成初始化后将[your hexo dir]再移入仓库目录 在仓库根目录下执行 npm install
hexo主题推荐next主题, 常用功能直接配置

git submodule add git@github.com:matt90luo/hexo-theme-next.git themes/next

hexo 插件安装

npm install hexo-renderer-pandoc  --save  // 渲染Mathjax数学公式需要(pandoc本身功能强大)
npm install hexo-generator-search --save  //本地搜索功能需要
npm install hexo-deployer-git --save  //git发布
npm install hexo-filter-mermaid-diagrams --save //mermaid流程图
npm install hexo-tag-plantuml --save  //绘制UML图  
npm install hexo-symbols-count-time --save // 博客文章字数统计

配置说明需要关注两个配置文件_config.yml 和 themes/next/_config.yml, 分别记作站点配置文件和主题配置文件以下是站点配置文件主要配置:

# hexo-math
math:
engine: 'mathjax' # or 'katex'
mathjax:
    #src: custom_mathjax_source
    config:
    # MathJax config
katex:
    #css: custom_css_source
    #js: custom_js_source # not used
    config:
    # KaTeX config

# search
search:
path: ./public/search.xml
field: post
format: html
limit: 10000
# deploy
deploy:
type: git
repo: https://github.com/yourname/yourname.github.io.git
branch: master

以下是主题配置文件主要配置:

gitalk:
enable: true
github_id: yourname # GitHub repo owner
repo: yourname.github.io # Repository name to store issues
client_id: XXXXXXXXXXXXXX # GitHub Application Client ID
client_secret: XXXXXXXXXX # GitHub Application Client Secret
admin_user: matt90luo # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
distraction_free_mode: true # Facebook-like distraction free mode
# Gitalk's display language depends on user's browser or system environment
# If you want everyone visiting your site to see a uniform language, you can set a force language value
# Available values: en | es-ES | fr | ru | zh-CN | zh-TW
language:

# Automatically Excerpt. Not recommend.
# Please use &lt;!-- more --&gt; in the post to control excerpt accurately.
auto_excerpt:
enable: true
length: 150

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

# Math Formulas Render Support
math:
# Default (true) will load mathjax / katex script on demand.
# That is it only render those page which has `mathjax: true` in Front-matter.
# If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
per_page: true

# hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
mathjax:
    enable: true
    cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: false

其中 clientID clientSecret 需要去github申请可以查看此连接 Hexo中Gitalk配置使用教程-可能是目前最详细的教程以及服务体验更棒的Gitalk评论系统获取详细信息