注：本文是以hexo的next主题为例进行配置的。

从0到1搭建过程

看这一篇就够了：GitHub+Hexo 搭建个人网站详细教程

---

图床——七牛云

写博客、写文章的时候，不免经常会用到很多图片，也偶尔会用到一些音频、视频等，这些东西总不能都push到github吧，所以寻找一个好用的存放这些静态资源的平台就比较有现实意义了。

七牛云就不错，我平时使用七牛云的对象存储服务存储图片、音频和视频，有10GB的免费存储空间。

七牛云使用注意点

缓存更新

当修改了对象存储空间中的图片等资源后（重命名、删除等），因为缓存机制，更新是不会立即生效的，如果想立即生效，需要这样去手动刷新：管理控制台--->融合CDN--->刷新预取--->刷新文件--->填入要刷新的资源的URL--->点击"提交"按钮，即可。

---

页面个性化设置

加上Fork me on GitHub按钮

打开文件：blog\themes\next\layout\_layout.swig（注：blog为hexo博客所在的根目录，下同），找到下面这两行内容：

<div class="{{ container_class }} {% block page_class %}{% endblock %}">
    <div class="headband"></div>

在<div class="headband"></div>这一行的下方添加一行a标签代码即可：

<a href="https://github.com/yourgit/xxx.github.io"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>

注：a标签的href属性即为你的GitHub地址，内部的img标签是按钮的样式。

添加背景音乐

参考：
https://blog.csdn.net/foradawn/article/details/78941992
https://www.tiexo.cn/aplayer/

先打开blog\themes\next\layout\_macro\sidebar.swig文件，找到class属性值为site-overview的section标签。

方式一：七牛云存储音乐文件链接

在section标签的最尾部添加如下HTML代码：

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=85 src="http://xxx.bkt.clouddn.com/xxx.mp3"></iframe>

其中http://xxx.bkt.clouddn.com/xxx.mp3为事先存储在七牛云上的歌曲mp3文件的外链地址。

这个方式的优点是方便，缺点是不能灵活地控制歌曲的播放模式，播放器也不美观。

方式二：网易云音乐外链

在网易云音乐搜素到想要的歌曲，然后点击"生成外链"按钮，把生成的外链的HTML代码添加到section标签的尾部，比如：

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=34341360&auto=1&height=66"></iframe>

方式三（推荐）：使用aplayer播放器

在section的尾部添加如下代码：

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script>
<div class="aplayer" data-id="34341360" data-server="netease" data-type="song" data-autoplay="true" data-mode="single"></div>

最后一个div标签就是播放器的代码，支持的几个属性介绍（粗体为必填项）：

• data-id: 歌曲/专辑/歌单ID

• data-server: 音乐平台，支持如下参数：
  netease （网易云音乐）
  tencent （qq音乐）
  xiami （虾米音乐）
  kugou （酷狗音乐）
  baidu （百度音乐）

• data-type: 请求类型，支持如下参数：
  song （单曲）
  album （专辑）
  playlist （歌单）
  search （搜索）

• data-mode: 播放模式，支持如下参数：
  random （随机）
  single （单曲）
  circulation （列表循环）
  order （列表）

• data-autoplay: 自动播放 ，支持如下参数：
  true
  false

---