本篇博客主要记录了如何使用github的pages以及Hexo搭建博客, 方便读者快速实现个人博客梦想
什么是Github Pages
首先得知道Github pages的规则: > 每个Github账号下面只能建立一个Pages，且命名必须符合这样的规则："username.github.io" > 创建成功后，username.github.io就是你的域名（当然你可以通过别名解析绑定自己的域名）
搭建步骤
- 在Github建立一个新的Repository：命名为：username.github.io
- 本地clone仓库
1
git clone https://github.com/username/username.github.io
- 使用Hexo管理博客
- 进入clone下来的仓库目录 创建hexo分支
1
git checkout -b hexo
- 安装hexo，以及相关扩展依赖 并初始化(需要首先安装nodejs, MacOS平台执行 brew install node)
1
npm install -g hexo
完成初始化后将[your hexo dir]再移入仓库目录 在仓库根目录下执行 npm install1
hexo init [your hexo dir] // 初始化
- 进入clone下来的仓库目录 创建hexo分支
hexo主题 推荐next主题, 常用功能直接配置
1
git submodule add git@github.com:matt90luo/hexo-theme-next.git themes/next
hexo 插件安装
1
2
3
4
5
6npm 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, 分别记作 站点配置文件 和 主题配置文件 以下是站点配置文件主要配置:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24# 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
以下是 主题配置文件 主要配置: 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42gitalk:
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 <!-- more --> 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