使用hexo框架+ayer主题+gitalk评论插件搭建个人博客
谭修竹
（第一次搭建个人博客，记录一下搭建方法还有那些踩过的坑）
环境：windows10
前提：
1.安装好node.js 和 Git
2.安装淘宝的cnpm
npm install -g cnpm --registry=http://registry.npm.taobao.org
cnpm -v //查看安装版本
一、使用hexo框架搭建静态博客
1.安装 hexo 框架
cnpm install -g hexo-cli
hexo -v //查看hexo版本
2.在磁盘中新建 blog 文件夹
在 blog 文件夹中打开 Git Bash，输入
hexo init //新建一个网站
3.启动服务器
hexo server
打开浏览器中，输入 http://localhost:4000 访问博客
ctrl+c 关闭服务器
4.新建一篇博客
hexo new "第一篇博客"
- 文件路径：D:\blog\source_posts\第一篇博客.md
- 在vscode中打开.md文件、编辑
5.清除缓存文件
hexo clean
建议每次生成站点或部署之前都用该命令清理一下缓存
6.生成静态文件
hexo generate
7.再次启动服务器
hexo server
在刚才打开的浏览器博客页面刷新，出现新写的文章
8.把博客部署到Github
- 打开你的Github------>新建仓库，仓库名必须是:你的github名字.github.io.git
- 回到命令行，ctrl+c断开hexo
cnpm install --save hexo-deployer-git
- 设置 _config.yml 文件:最下方 #Deployment 的 deploy 修改：
type: git
repo: git@github.com:basssss/basssss.github.io.git（仓库地址）
branch: master
- 部署到 Github
hexo deploy
9.进入博客页面
浏览器中输入地址：basssss.github.io跳转到博客页面
至此hexo框架搭建静态博客完毕
参考资料
二、安装ayer主题
1.下载主题
git clone https://github.com/Shen-Yu/hexo-theme-ayer.git themes/ayer
2.设置_config.yml文件
打开_config.yml文件，找到theme修改为ayer保存退出。
3.新增menu
仿照分类和标签的方式，新增menu如"关于我"
hexo new page AboutMe
至此ayer主题安装完毕
参考资料（作者文档中的安装步骤写的很详细，看文档就好）
三、安装Gitalk评论插件
1.安装
- Gitalk安装步骤
- 直接在ayer的_config.yml文件中修改就行，不需要再添加div代码块
- 部署好后要登录github初始化才能评论
2.在自己新建的menu页面中安装Gitalk评论插件
ayer主题默认在主页和文章底部添加Gitalk，在自己新增的页面如友情链接link页面中安装Gitalk需要修改代码
- 在D:\blog\source\links\index.md
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
- 在D:\blog\themes\ayer\layout_partial\article.ejs文件中添加一个容器，用下面的 Javascript 代码来生成 gitalk 插件
<div id="gitalk-container"></div>
var gitalk = new Gitalk({
clientID: 'GitHub Application Client ID',
clientSecret: 'GitHub Application Client Secret',
repo: 'GitHub repo',
owner: 'GitHub repo owner',
admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
id: location.pathname, // Ensure uniqueness and length less than 50
distractionFreeMode: false // Facebook-like distraction free mode
})
gitalk.render('gitalk-container')
至此Gitalk评论插件安装完毕
参考资料：Gitalk
四、添加友情链接页面
原主题是没有友链页面的，需要自己写代码，这是我的
在D:\blog\source\links下新建文件夹LinkImage存放图片，新建文件link.css
- index.md
<body>
<ul class="allLinks">
<li>
<img src="图片地址" alt="图片描述">
<a href="友情链接地址">博客名</a>
</li>
</ul>
</body>
- link.css
.allLinks {
display: -webkit-flex; /* Safari */
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.allLinks li {
list-style: none;
display: inline-flex;
border-radius: 1rem;
width: 20rem;
height: 8rem;
margin-top: 3rem;
margin-right:2rem;
overflow: hidden; /*超出边界部分隐藏*/
background-color: #403e3e;
}
.allLinks li img {
width:6rem;
height:6rem;
border-radius: 50%;
margin: 1rem;
}
.allLinks li a {
width: 12rem;
padding-top: 10%;
text-align: center;
cursor: pointer;
text-decoration: none;
font-size: 1.7rem;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, Arial, sans-serif;
color:#bbb;
word-wrap: break-word; /*文字换行*/
}
五、hexo给文章添加分类和标签
1.添加分类
- 在D:\blog\source\categories\index.md中添加
type: "categories"
layout: "categories"
- 需要添加分类的文章中添加
categories:
- 分类名
2.添加标签
- 在D:\blog\source\tags\index.md中添加
type: "tags"
layout: "tags"
- 需要添加标签的文章中添加
tags:
- 标签名
六、修改Github ribbon样式
修改D:\blog\themes\ayer\layout_partial\ayer.ejs的代码，将原来的a标签修改为在Github ribbon中选中样式的代码，并修改所有的"github-corner"为"forkMe"
{% asset_img 六GithubRibbon.JPG GithubRibbon %}
七、hexo框架插入图片
在写的博客中插入图片时，不能用普通的Markdown语法，参考hexo文档，应该：
- 安装插件
npm install https://github.com/CodeFalling/hexo-asset-image -- save
- 将 config.yml 文件中的 post_asset_folder 选项设为 true
- 创建新文章和同名文件夹，将图片资源放到文件夹中
hexo new [layout] <title>
- 在文档中需要插入图片的地方
{% asset_img 图片名.jpg 描述语句 %}
八、hexo修改文章路径
hexo默认文章路径为年/月/日/文件名，目录层次过长不利于收录，所以在根目录的config.yml文件中，修改默认路径
permalink: :year/:month/:day/:title/
为
permalink: archives/:title.html
类似资料：