使用gitbub和hexo制作免费博客

原文引用https://www.dazhuanlan.com/2019/08/25/5d621e3ce7ae0/

.

准备工作

解决npm慢的问题

npm config set registry https:``//registry.npm.taobao.org

npm install

核心安装步骤

1. 安装git工具，并配置用户及邮箱地址
2. 生成 SSH Key
3. 将生成日pub内容复制至github ssh中
4. 安装nodejs
5. 全局安装hexo [npm install -g hexo]
6. 初始化hexo [hexo init]
7. 安装github插件[npm install hexo-deployer-git –save]

hexo 常和命令

hexo new “postName” #新建文章
hexo new page “pageName” #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，’ctrl + c’关闭server）
hexo deploy #部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本

缩写

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

组合命令

hexo s -g #生成并本地预览
hexo d -g #生成并上传

使用本主题

安装主题

git clone https://github.com/blinkfox/hexo-theme-matery.git theme/matery

新建分类

hexo new page "categories"

hexo new page "tags"

hexo new page "about"

hexo new page "friends"

在对应分类index.md文档中输入如下内容

---
title: friends
date: 2018-12-12 21:25:30
type: "categories/tags/about/friends"
layout: "categories/tags/about/friends"
---

在你的博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文档，文档内容如下所示：

[{
    "avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
    "name": "码酱",
    "introduction": "我不是大佬，只是在追寻大佬的脚步",
    "url": "http://luokangyuan.com/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/4027734.jpeg",
    "name": "闪烁之狐",
    "introduction": "编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬",
    "url": "https://blinkfox.github.io/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/avatar.jpg",
    "name": "ja_rome",
    "introduction": "平凡的脚步也可以走出伟大的行程",
    "url": "ttps://me.csdn.net/jlh912008548",
    "title": "前去学习"
}]

几个常用插件

功能	插件
代码高亮	npm i -S hexo-prism-plugin
内容搜索	npm install hexo-generator-search –save
中文链接转拼音	npm i hexo-permalink-pinyin –save
文章字数、阅读时长信息	npm i –save hexo-wordcount
RSS	npm install hexo-generator-feed –save

修改页脚

页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主题文档的 /layout/_partial/footer.ejs 文档中，包括站点、使用的主题、访问量等。

修改社交链接

在主题的 _config.yml 文档中，默认支持 QQ、GitHub 和邮箱的配置，你可以在主题文档的 /layout/_partial/social-link.ejs 文档中，新增、修改你需要的社交链接地址，增加链接可参考如下

其中，社交图标（如：fa-github）你可以在 Font Awesome 中搜索找到。以下是常用社交图标的标识，供你参考：

• Facebook: fa-facebook
• Twitter: fa-twitter
• Google-plus: fa-google-plus
• Linkedin: fa-linkedin
• Tumblr: fa-tumblr
• Medium: fa-medium
• Slack: fa-slack
• 新浪微博: fa-weibo
• 微信: fa-wechat
• QQ: fa-qq

修改打赏的二维码图片

在主题文档的 source/medias/reward 文档中，你可以替换成你的的微信和支付宝的打赏二维码图片。

配置音乐播放器（可选的）

要支持音乐播放，就必须开启音乐的播放配置和音乐数据的文档。

首先，在你的博客 source 目录下的 _data 目录（没有的话就新建一个）中新建 musics.json 文档，文档内容如下所示：

[{
    "name": "五月雨变奏电音",
    "artist": "AnimeVibe",
    "url": "http://xxx.com/music1.mp3",
    "cover": "http://xxx.com/music-cover1.png"
}, {
    "name": "Take me hand",
    "artist": "DAISHI DANCE,Cecile Corbel",
    "url": "/medias/music/music2.mp3",
    "cover": "/medias/music/cover2.png"
}, {
    "name": "Shape of You",
    "artist": "J.Fla",
    "url": "http://xxx.com/music3.mp3",
    "cover": "http://xxx.com/music-cover3.png"
}]

注：以上 JSON 中的属性：name、artist、url、cover 分别表示音乐的名称、作者、音乐文档地址、音乐封面。

然后，在主题的 _config.yml 配置文档中激活配置即可：

music:
  enable: true
  showTitle: false
  title: 听听音乐
  fixed: false 
  autoplay: false # 是否自动播放
  theme: '#42b983'
  loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none'
  order: 'list' # 音频循环顺序, 可选值: 'list', 'random'
  preload: 'auto' # 预加载，可选值: 'none', 'metadata', 'auto'
  volume: 0.7 # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
  listFolded: false # 列表默认折叠
  listMaxHeight: # 列表最大高度

文章 Front-matter 介绍

Front-matter 选项详解

Front-matter 选项中的所有内容均为非必填的。但我仍然建议至少填写 title 和 date 的值。

配置选项	默认值	描述
title	Markdown 的文档标题	文章标题，强烈建议填写此选项
date	文档创建时的日期时间	发布时间，强烈建议填写此选项，且最好保证全局唯一
author	根 _config.yml中的 author	文章作者
img	featureImages中的某个值	文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg
top	true	（文章是否置顶），如果 top 值为 true，则会作为首页
cover	false	v1.0.2版本新增，表示该文章是否需要加入到首页轮播封面中
coverImg	无	v1.0.2版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
password	无	文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项
toc	true	是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项
mathjax	false	是否开启数学公式支持 ，本文章是否开启 mathjax，且需要在主题的 _config.yml 文档中也需要开启才行
summary	无	文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则进程会自动截取文章的部分内容作为摘要
categories	无	文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类
tags	无	文章标签，一篇文章可以多个标签

以下为文章的 Front-matter 示例。

最简示例

---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
---

最全示例

---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
author: 赵奇
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则进程会自动截取文章的部分内容作为摘要
categories: Markdown
tags:
  - Typora
  - Markdown
---

自定制修改

在本主题的 _config.yml 中可以修改部分自定义信息，有以下几个部分：

• 菜单
• 我的梦想
• 首页的音乐播放器和视频播放器配置
• 是否显示名称和按钮配置
• favicon 和 Logo
• 个人信息
• TOC 目录
• 文章打赏信息
• 复制文章内容时追加版权信息
• MathJax
• 文章字数统计、阅读时长
• 点击页面的’爱心’效果
• 我的项目
• 我的技能
• 我的相册
• Gitalk、Gitment、Valine 和 disqus 评论配置
• 不蒜子统计和谷歌分析（Google Analytics）
• 默认特色图的集合。当文章没有设置特色图时，本主题会根据文章标题的 hashcode 值取余，来选择展示对应的特色图

我认为个人博客应该都有自己的风格和特色。如果本主题中的诸多功能和主题色彩你不满意，可以在主题中自定义修改，很多更自由的功能和细节点的修改难以在主题的 _config.yml 中完成，需要修改源代码才来完成。以下列出了可能对你有用的地方：

修改主题颜色

在主题文档的 /source/css/matery.css 文档中，搜索 .bg-color 来修改背景颜色：

/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
    background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}

@-webkit-keyframes rainbow {
   /* 动态切换背景颜色. */
}

@keyframes rainbow {
    /* 动态切换背景颜色. */
}

修改 banner 图和文章特色图

你可以直接在 /source/medias/banner 文档夹中更换你喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。如果你会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文档的 <script></script> 代码中：

$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');

在 /source/medias/featureimages 文档夹中默认有 24 张特色图片，你可以再增加或者减少，并需要在 _config.yml 做同步修改。

来源：https://www.cnblogs.com/petewell/p/11407847.html