我的第一篇Blog 【附搭建教程】

Blog搭建 教程
技术
发布日期:   2019-08-16
文章字数:   4.2k
阅读时长:   16 分

相信自己明天会更好！

前言

我是一个学习机械电子专业的学生，对于这块也只是凭着自己浓厚的兴趣，不断的摸鱼和学习，转眼间混迹计算机这个领域也有四五年了。很早的时候就有想过要搭建一个自己的博客，记录自己学习的东西，因为太忙，也因为自己太懒，终于在19年8月的时候下定决心开始搭建自己的独立博客，到现在也稍微像模像样了。我想很多小伙伴应该也想过搭建一个自己的博客，网上也有一堆详细教程。我在此就分享一下自己修改的博客源码以及搭建教程，其他的个性化操作就需要你们自己以后去摸索。

因为我用的电脑是MacOS，因此我只对Mac的终端安装做讨论，Windows和其他系统应该差不多，网上有很多很好的教程，有不懂的可以问我，大家也可以问度娘。

我的博客源码地址

———————————————我的博客源码地址———————————————

欢迎大家支持，借鉴和使用！

我也是一个刚刚接触前端的学习者，有些东西都不是很了解，如果其中有任何问题的话，还望大家指出。

这里我用到的框架是Hexo；hexo 可以理解为是基于node.js制作的一个博客工具，看到后缀js，我想很多的程序猿都很熟悉这个语言，不是我们理解的一个开源的博客系统。其中的差别，有点意思。另外Hexo是高效的静态站点生成框架，它基于node.js。通过Hexo，你可以直接使用Markdown语法来撰写博客。对于markdown在此我就不在余缀了，因为写过工程文件的都知道，在工程文件里面附于README.md就是用它编写的，当然，如果是会使用Xcode，那会是更加简单！写完后只需要三条代码就可以上传，所以它做起来是很简单的事情！

既然选择Hexo，那我们先来了解一下Hexo的优势和劣势吧

其实上面也有提到过了

  • 快速 - Node运行环境、前端个人站点首选
  • 简洁 - MarkDown
  • 轻量 - 全部静态文件
  • 支持导入WordPress等博客
  • 还可以使用免费的github仓库做你的服务器，比如我就是。

不足

  • 更换电脑不变 - 需重新安装环境
  • 静态博客 - 后期不便于维护
  • 多媒体管理较难

好了，说了这么多，我们就开始吧，跟上我的节奏，你会发现其实很简单！

先来一个目录吧

目录结构

  • 安装Node.js
  • 添加国内镜像源
  • 初始化Hexo
  • 启动Blog
  • 新建blog
  • 注册github
  • 上传Hexo到仓库
  • 为Hexo应用主题
  • Hexo插件
    • 音乐播放器aplayer
    • 增加建站时间
    • 美化-添加动漫人物
  • 总结

安装nodejs

以下的安装步骤都是以超级管理员权限运行的，打开中的时候先输入 “sudo su” 然后输入你的开机密码获取超级权限

————————————————–nodejs————————————————-

根据你对应的平台，下载LTS的版本，安装就行了（一直点继续就行了）

最后安装好之后，按 “command+space” 打开终端，输入node -v和npm -v，如果出现版本号，那么就安装成功了。

安装国内的镜像源

如果有梯子的话，可以直接安装Hexo。

npm install hexo-cli -g

但如果你没有梯子，就要先安装淘宝源，再安装，这样会更快！

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装好了之后输入cnpm -v验证，如果出现版本号，那么就安装成功了。

然后再用cnpm安装hexo
输入以下代码

cnpm install -g hexo-cli

完成之后少不了验证，输入 hexo -v 验证，如果出现版本号，那么就安装成功了。

到这里，我们的hexo环境就搭建好了，有了环境，我们接下来就开始写我们的第一篇blog吧！

初始化Hexo

找一个路径新建一个文件夹，当然了，这里我是使用终端直接建立的，在终端输入“mkdir blog” 新建一个为blog的文件夹，之后我们的blog就存放在此文件夹了！如果出现了什么错误，直接把此文件夹干掉重来就行了。

建立好文件夹之后，接下来我们用Hexo帮我们生成（初始化一个blog）！！！

敲入以下命令就行了

sudo hexo init

一切都是这么简单！！

你只需要等待一会儿就好了，一切都是这么美好！！

等待克隆完了还会自动给你生成一个theme的默认主题，记住此文件夹，我们一会儿要用到！！

到此安装就完成了，我们可以看来启动测试一下

生成Blog

hexo g
hexo clean

启动Blog

终端命令：

hexo s

接下来终端会在本地的服务器为你生成一个ip地址为4000的服务器，此时按住“command”键单击这个地址，你就会看到输入你自己blog了，是不是很简单！！
是的，一切都是这么简单！！一切都是这么美好！！

打开你会看到里面还有一片名为“Hello Worldd”的博文，但这篇博文是Hexo为我们生成的，有的伙伴会问，像我这样优雅的博文，是怎么写出来的呢？
现在就要用到我前面所提到的“Markdown”了，所有的博文都是基于Markdown写的，至于Markdown的语法是怎么样的，我就不做讨论了。

新建Blog

那我们怎么生成一片新的博文呢？这个就很简单

hexo n "your blog name"

打开 ../blog/source/_posts 在里面你就会看到刚刚你创建的blog，然后你可以选着适合你自己的编辑器，开始愉快的写属于你自己的blog吧！

注册github

接下来还有什么呢？我们是不是需要把我们的blog推向远端，不然你总不可能只在本地的计算机访问吧！好的，说干就干！

接下来就去注册一个github账号，用来存放我们的网站。注册我就不余缀了，相信大多数小伙伴应该都有了吧，作为一个合格的程序猿（媛）这个是必须要有一个。（像我这个业余的都有了）

我把网址贴在下面吧！

————————————————github————————————————

注册好之后

就可以进行下面的操作了

新建一个项目，如下所示：

新建仓库1

然后如下图所示，输入自己的项目名字，后面一定要加.github.io后缀(必须是这个名字)，README初始化你随意吧，一般是要勾上的。

新建仓库2

你就会在顶栏看到属于自己的网站地址，没错，就是那一长串“XXXXXX.github.io”
到这里我们的仓库就建好了！！

上传Hexo到仓库

是的，我们的Blog已经搭建好了，仓库（服务器）我们也有了，那么接下来就是上我们的Blog到仓库，这样我们就能实现远程的访问了。。。Let’s go ！！

上传之前，我们还需要修改一下blog的配置文件，找到我们blog的根目录，打开其中的_config.yml文件，搜索deploy
把其中的repository改成你自己的仓库地址就行了

例如我的仓库地址就是 https://github.com/GodXYHZ/GodXYHZ.github.io.git
当然了，如果你有自己的服务器，那你就改成自己服务器的地址就行了

完成之后，我们回到终端，用三条命令就能实现上传我们的blog了

hexo g
hexo clean
hexo d

三条命令是分开的哦，每敲完一条代码请耐心等待执行完毕

完成之后，大概等差不多一分钟左右，在你的浏览器输入你的guithub仓库的地址，就能看到你的blog了，怎么样，是不是很简单呢！

为Hexo应用主题

这个时候有的同学可能会问了，为啥你的blog那么好看，而我的却这么low，这时候我们就需要用到上看我贴出来的源码以及那个要求你们记住的theme主题文件夹了，我们替换里面的主题文件就好了。

**找一个你喜欢的主题样式（百度，Google一搜一大堆），下载解压，然后复制替换原blog的theme文件夹里面的主题文件夹,然后修改 Hexo 根目录下的 _config.yml 的 theme 的值：theme: ”your theme name“即可，完成之后再去终端执行上面的三条命令。

hexo g
hexo clean
hexo d

依旧等待一分钟，刷新你的blog，是不是发现你的blog就变得特别的好看，特别的漂亮了！

是的，一切都是这么美好，一切都是这么优雅！！

主题已经变得很漂亮了，但是缺少了许多的功能，相信很多接触过的小伙伴都知道，这些功能都是拓展出来的，比如：音乐播放器，站点运行时间等等。。所以我们只需要安装一些插件或者脚本就行了！

Hexo 插件

  • 音乐播放器aplayer

原先 hexo-tag-aplayer 不支持 MetingJS，使得需要图片url，音乐url等等参数，操作起来都很麻烦，需要去音乐网站扒音乐播放链接或者下载下来存储在七牛云或本地

但是现在不一样了！！因为一切都变美好了！

现在的aplayer非常强大，因为有了MeingJS的支持，MetingJS 是基于Meting API 的 APlayer 衍生播放器，引入 MetingJS 后，播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。相信这支持的平台基本上都有平实我们用的播放器了，有了这个插件到时候直接插入你的音乐播放列表的ID就行了！

还是一样，终端执行下面的命令 

npm install --save hexo-tag-aplayer

完成之后，我们只需要在主题文件的的_config.yml配置文件中启用即可：

aplayer
meting ：true

之后我们只需要找到歌曲或者播放列表的ID插入进去就行了！

有关选项如下表：

选项 默认值 描述
ID 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server 必须值 音乐平台: netease, tencent, kugou, xiami, baidu
type 必须值 song, playlist, album, search, artist
fixed false 开启固定模式
mini false 开启迷你模式
loop all 列表循环模式：all, one,none
order list 列表播放模式： list, random
volume 0.7 播放器音量
lrctype 0 歌词格式类型
listfolded false 指定音乐播放列表是否折叠
storagename metingjs LocalStorage 中存储播放器设定的键名
autoplay true 自动播放，移动端浏览器暂时不支持此功能
mutex true 该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
listmaxheight 340px 播放列表的最大长度
preload auto 音乐文件预载入模式，可选项： none, metadata, auto
theme #ad7a86 播放器风格色彩设置
  • 增加建站时间

这里我只针对我使用的matery主题做设置

修改../themes/matery/layout/_partial/footer.ejs文件，在最后加上

<script language=javascript>
    function siteTime() {
        window.setTimeout("siteTime()", 1000);
        var seconds = 1000;
        var minutes = seconds * 60;
        var hours = minutes * 60;
        var days = hours * 24;
        var years = days * 365;
        var today = new Date();
        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth() + 1;
        var todayDate = today.getDate();
        var todayHour = today.getHours();
        var todayMinute = today.getMinutes();
        var todaySecond = today.getSeconds();
        /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
        year - 作为date对象的年份，为4位年份值
        month - 0-11之间的整数，做为date对象的月份
        day - 1-31之间的整数，做为date对象的天数
        hours - 0(午夜24点)-23之间的整数，做为date对象的小时数
        minutes - 0-59之间的整数，做为date对象的分钟数
        seconds - 0-59之间的整数，做为date对象的秒数
        microseconds - 0-999之间的整数，做为date对象的毫秒数 */
        var t1 = Date.UTC(2017, 09, 11, 00, 00, 00); //北京时间2018-2-13 00:00:00
        var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
        var diff = t2 - t1;
        var diffYears = Math.floor(diff / years);
        var diffDays = Math.floor((diff / days) - diffYears * 365);
        var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
        var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);
        var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);
        document.getElementById("sitetime").innerHTML = "本站已运行 " +diffYears+" 年 "+diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
    }/*因为建站时间还没有一年，就将之注释掉了。需要的可以取消*/
    siteTime();
</script>

然后再在最后加上这串代码：

<span id="sitetime"></span>

初始化数据：

依旧在最后加上下面的代码

<script>
    $(document).ready(function () {

        var int = setInterval(fixCount, 50);  // 50ms周期检测函数
        var pvcountOffset = 80000;  // 初始化首次数据
        var uvcountOffset = 20000;

        function fixCount() {
            if (document.getElementById("busuanzi_container_site_pv").style.display != "none") {
                $("#busuanzi_value_site_pv").html(parseInt($("#busuanzi_value_site_pv").html()) + pvcountOffset);
                clearInterval(int);
            }
            if ($("#busuanzi_container_site_pv").css("display") != "none") {
                $("#busuanzi_value_site_uv").html(parseInt($("#busuanzi_value_site_uv").html()) + uvcountOffset); // 加上初始数据 
                clearInterval(int); // 停止检测
            }
        }
    });
</script>

还需要在上面18和24行左右的span id="busuanzi_container_site_pv后面加上style='display:none

修改好了代码如下：

<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %>
    <span id="busuanzi_container_site_pv" style='display:none'>
        <i class="fa fa-heart-o"></i>
        本站总访问量 <span id="busuanzi_value_site_pv" class="white-color"></span>
    </span>
<% } %>
<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalNumberOfvisitors) { %>
    <span id="busuanzi_container_site_uv" style='display:none'>
        人次, 访客数 <span id="busuanzi_value_site_uv" class="white-color"></span> 人.
    </span>
<% } %>

或者按照不蒜子官网的方法安装（点击这里）

  • 美化-添加动漫人物

首先贴出

官网地址配置：https://www.npmjs.com/package/hexo-helper-live2d

安装步骤

首先检查博客主目录下面的 package.json 里是否有
"hexo-helper-live2d": "^3.0.3" 依赖，有的话可以先卸载

卸载命令：

npm uninstall hexo-helper-live2d

然后再安装

如果安装慢，你也可以选择用cnpm安装

cnpm

cnpm install {packagename}

npm

npm install --save hexo-helper-live2d

安装完成之后在 package.json 会看到安装的model

这个时候 package.json 里面就会出现 "hexo-helper-live2d": "^3.0.3" (不一定是3.0.3，版本号而已)这行代码

此时再去 node_moduels 目录下，可以看到一些 live2d 开头的文件夹，这些都是动画主配置

下载各种动画 model ：

地址：https://github.com/xiazeyu/live2d-widget-models.git

下载好之后将 packages 里的所有动画模板拷贝到博客的 node_modules 目录里

最后再配置博客站点配置文件 _config.yml

  live2d:
enable: true
pluginModelPath: assets/
model:
  use: live2d-widget-model-epsilon2_1  #模板目录，在node_modules里
display:
  position: right
  width: 150 
  height: 300
mobile:
  show: false  #是否在手机进行显示

配置完成之后
依旧一样

hexo g
hexo clean
hexo d

就先介绍到这里吧，其他的基本都是差不多的，但是有的插件在一起代码可能会有冲突可能会造成一些功能失效等等，比如我遇到过的，代码的高亮没有了，相册无法显示,以及动漫人物和不蒜子冲突等等，这时候就需要小伙伴们自己摸鱼解决了，Hexo到现在已经很成熟了，许多的问题在百度 或者 Google 都能查到。

我的主题源码我也已经放在GitHub了，如果你也喜欢，欢迎使用！

在这里还要特别感HarborZeng和Blinkfox两位大佬，感谢他们做出的贡献！！

最后再总结一下目录结构

node_modules是node.js各种库的目录，public是生成的网页文件目录，scaffolds里面就三个文件，存储着新文章和新页面的初始设置，source是我们最常用到的一个目录，里面存放着文章、各类页面、图像等文件，themes存放着主题文件，一般也用不到。
总的来说只要部署成功了，基本上不需要改动什么，只需要写文章就行了！

之后我们就可以愉快的写我们的blog了！！

文章作者: 筱雨涵
文章链接: https://www.xyhowen.com/2019/08/16/blog-build/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 筱雨涵 !
Blog搭建 教程
赏
  目录