利用Github和Hexo搭建Yilia主题的博客

一、说明

前面几天时间利用Github和Hexo搭建Yilia主题的博客,过程中也踩了很多的坑,现在也到了填坑的时候了。

废话不多说,现在正式开始教程吧。

1.基本软件安装

  • 首先我们需要从Node.js官网下载并安装这个软件。

    安装成功之后我们在cmd窗口中输入命令:node --version,如果可以得到相对应的版本号则说明安装成功,否则请将安装目录添加到PATH环境变量中。

  • 另外我们还需要安装Git,并且还需要配置与Github的SSH Key,需要的话可以参考我的上一篇文章

2.创建Github仓库

  • 登录GitHub后我们新建一个名为userName.github.io的仓库,userName就是你账户的名字。

    建好之后打开这个仓库的Settings页面,在GitHub Pages我们可以看到类似于这样的显示:

    这里绿色区域显示的网址就是我们博客的网址,因为这个网址有点长,资金允许的话我们可以将它绑定到自己申请的域名,这将在后面进行介绍。

二、Hexo的安装和一些基本命令、配置

1.安装Hexo

  • 打开cmd窗口,运行命令:npm install -g hexo进行安装。

  • 初始化Hexo:新建一个名为blog的文件夹,在PowerShell窗口中运行命令hexo init

    重新打开文件夹之后我们发现多出了这样一些文件

    • source文件夹:这里存放的是博客所有的资源文件,书写文章的Markdown文件存放在_posts子文件夹中,文章的图片资料可以新建imgs文件夹并存放。

    • themes文件夹:这里存放的是博客的主题文件,其中的landspace是默认的主题文件,之后我们更换的Yilia主题文件也将存放在这里。

    • _config.yml文件:这是博客的一些基本配置记录,我们后面将对它进行更改。

2.基本配置

打开_config.yml文件进行配置

  • 基本信息展示:

  • 部署方式配置

关于头像和站点图标的更换将在更换主题之后进行。

3.基本命令

  • 生成静态页面:hexo g

  • 启动本地服务器:hexo s

    • 默认的端口号是4000,如果冲突的话可以通过命令hexo s -p5000更换指定的端口号。

    • 之后我们就可以在浏览器中访问http://localhost:4000查看自己的博客情况。

  • 新建文章:运行命令hexo new "xxxx",在source\_posts文件夹生成新的Markdown文件,后面就可以在这个文件上完成自己的文章。

  • 部署到GitHub:在搭建完博客或者写完文章之后我们需要把它们部署到GitHub上供人浏览。我们依次运行下面的两条命令完成:

    hexo clean

    hexo d -g

  • 如果报错提示:ERROR Deployer not found:,那么我们需要安装deployer插件,运行下面的命令

    1
    npm install --save hexo-deployer-git

三、更换Yilia主题及它的基本配置

1.更换主题

之前说过的,我们可以将下载好的主题文件放在themes文件夹里进行主题更换。这里提供了很多别人开发好的主题,我使用的是Yilia主题。下面具体说说怎么更换:

  • themes文件夹下打开Git Bash,运行git clone git@github.com:litten/hexo-theme-yilia.git

  • 打开blog文件夹下的_config.yml文件,将其中的theme属性的值改为刚刚下好的文件名即可。

    1
    theme: hexo-theme-yilia

2.基本配置

2.1.更换头像和站点图标

  • 打开文件夹themes\hexo-theme-yilia\source\img,将头像、站点图标以及两个打赏二维码图片放在这里。

  • 打开主题文件夹下的_config.yml文件,并对avatarfavicon做如下更改:

    1
    2
    favicon: /img/favicon.jpg
    avatar: /img/avatar.jpg

2.2.配置打赏图片

  • 还是对_config.yml文件进行修改:

    1
    2
    3
    4
    # 支付宝二维码图片地址,跟你设置头像的方式一样
    alipay: /img/alipay.jpg
    # 微信二维码图片地址
    weixin: /img/weixin.jpg

2.3.标签功能缺失模块的补充

  • blog文件夹下执行命令:npm i hexo-generator-json-content --save

  • blog文件夹中的_config.yml文件末尾添加代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    jsonContent:
    meta: false
    pages: false
    posts:
    title: true
    date: true
    path: true
    text: true
    raw: false
    content: false
    slug: false
    updated: false
    comments: true
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true

2.4.百度统计设置

百度统计官网

  • 注册完之后点击新增网站,前面的两个值填写的是GitHub为我们生成的网址即可

  • 在代码获取页面复制官方生成的代码

  • 将复制的代码添加到目录hexo-theme-yilia\layout\_partial中的baidu_tongji.ejs中,格式为:

    1
    2
    <% if (theme.baidu_tongji) { %>
    # 你刚复制的所有代码
  • 打开主题目录下的_config.yml文件,将其中的baidu_analytics的值修改为统计代码中hm.src值的’?‘之后一段字符。

    1
    2
    3
    # Miscellaneous
    baidu_analytics: '0f94e44d75ef0e72600xxxxxxxxxxxxx'
    google_analytics: ''

2.5.其他一些链接更改

  • 这里主要是我对主题里一些链接的更改:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    # SubNav
    subnav:
    github: "https://github.com/Perry961002"
    weibo: "#"
    rss: "#"
    mail: "mailto:Perry961002@163.com"

    #友情链接
    friends:
    Github官网: https://github.com/
    Markdown编辑器Typora: https://www.typora.io/
    阿里云: https://www.aliyun.com/
    VSCode官网: https://code.visualstudio.com/
    LeetCode中国: https://leetcode-cn.com/

    #自我展示
    aboutme: 爱好数学和算法的码农<br><br>喜欢乒乓球的吃货。。。

四、博客进阶功能设置

1.网站访问量和文章阅读量统计

  • 这里我使用的是不蒜子提供的插件

  • 打开目录hexo-theme-yilia\layout\_partial下的footer.ejs文件,在末尾添加代码

    1
    2
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
    </script>
  • 还是在footer.ejs文件中,在footer-leftfooter-right标签之间添加代码

    1
    2
    3
    4
    5
    6
    <span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
    </span>
    <span id="busuanzi_container_site_uv">
    本站访客数<span id="busuanzi_value_site_uv"></span>人次
    </span>
  • 打开同目录下的article.ejs文件,在<%- partial('post/title', {class_name: 'article-title'}) %>一行下添加代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!-- 显示阅读和评论数 -->
    <% if (!index){ %>
    <br/>
    <a class="cloud-tie-join-count" href="javascript:void(0);" style="color:gray;font-size:14px;">
    <span class="icon-sort"></span>
    <span id="busuanzi_container_page_pv" style="color:#ef7522;font-size:14px;">
    本文阅读量: <span id="busuanzi_value_page_pv"></span>次 &nbsp;&nbsp;
    </span>
    </a>
  • 效果:

    网站访问量:

    文章阅读量:

2.评论功能配置

  • 在主题目录下的_config.yml文件中我们发现作者提供了多种方式来实现评论功能,但因为一些原因很多方式已经不能使用,这里我采用了Gitment评论功能。

  • Gitment是使用的GitHub Issues作为评论系统

2.1.在GitHub上创建OAuth Apps

  • 登录自己的Github,进入Settings--Developer settings页面,点击New OAuth App

    • 这里name可以随便写,Homepage URL填GitHub提供的网址

    • 如果博客绑定的域名,callback URL就需要使用绑定域名,否则和上面一样,最后确定即可。

    完成之后可以得到

2.2.配置_config.yml文件

  • 打开主题目录下的_config.yml文件,做下面的修改

    1
    2
    3
    4
    5
    6
    7
    #5、Gitment
    enable: true
    gitment_owner: Perry961002 #你的 GitHub ID
    gitment_repo: 'perry961002.github.io' #存储评论的 repo
    gitment_oauth:
    client_id: 'e686axxxxxxxxx' #client ID
    client_secret: 'aea668xxxxxxxxxx' #client secret

2.3.配置Gitment的中文显示、解决Validation Failed错误

  • 打开目录hexo-theme-yilia\layout\_partial\post下的gitment.ejs文件,将2、3两行修改为

    1
    2
    <link rel="stylesheet" href="https://billts.site/extra_css/gitment.css">
    <script src="https://billts.site/js/gitment.js"></script>

    将id属性的值修改为

    1
    id: "<%= page.date %>"

最终效果:

3.文章目录功能

  • 打开目录hexo-theme-yilia\source下的main.0cf68a.css文件(这里文件名中间的那一段编号可能不一样),添加下面的代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* 新添加的 */
    #container .show-toc-btn,#container .toc-article{display:block}
    .toc-article{z-index:100;background:#fff;border:1px solid #ccc;max-width:250px;min-width:150px;max-height:500px;overflow-y:auto;-webkit-box-shadow:5px 5px 2px #ccc;box-shadow:5px 5px 2px #ccc;font-size:12px;padding:10px;position:fixed;right:35px;top:129px}.toc-article .toc-close{font-weight:700;font-size:20px;cursor:pointer;float:right;color:#ccc}.toc-article .toc-close:hover{color:#000}.toc-article .toc{font-size:12px;padding:0;line-height:20px}.toc-article .toc .toc-number{color:#333}.toc-article .toc .toc-text:hover{text-decoration:underline;color:#2a6496}.toc-article li{list-style-type:none}.toc-article .toc-level-1{margin:4px 0}.toc-article .toc-child{}@-moz-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-webkit-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-o-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.show-toc-btn{display:none;z-index:10;width:30px;min-height:14px;overflow:hidden;padding:4px 6px 8px 5px;border:1px solid #ddd;border-right:none;position:fixed;right:40px;text-align:center;background-color:#f9f9f9}.show-toc-btn .btn-bg{margin-top:2px;display:block;width:16px;height:14px;background:url(http://7xtawy.com1.z0.glb.clouddn.com/show.png) no-repeat;-webkit-background-size:100%;-moz-background-size:100%;background-size:100%}.show-toc-btn .btn-text{color:#999;font-size:12px}.show-toc-btn:hover{cursor:pointer}.show-toc-btn:hover .btn-bg{background-position:0 -16px}.show-toc-btn:hover .btn-text{font-size:12px;color:#ea8010}
    .toc-article li ol, .toc-article li ul {
    margin-left: 30px;
    }
    .toc-article ol, .toc-article ul {
    margin: 10px 0;
    }
  • 打开目录hexo-theme-yilia\layout\_partial下的article.ejs文件,在</header> <% } %>下添加代码:

    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
    <!-- 目录内容 -->
    <% if (!index && post.toc){ %>
    <p class="show-toc-btn" id="show-toc-btn" onclick="showToc();" style="display:none">
    <span class="btn-bg"></span>
    <span class="btn-text">文章导航</span>
    </p>
    <div id="toc-article" class="toc-article">
    <span id="toc-close" class="toc-close" title="隐藏导航" onclick="showBtn();">×</span>
    <strong class="toc-title">文章目录</strong>
    <%- toc(post.content) %>
    </div>
    <script type="text/javascript">
    function showToc(){
    var toc_article = document.getElementById("toc-article");
    var show_toc_btn = document.getElementById("show-toc-btn");
    toc_article.setAttribute("style","display:block");
    show_toc_btn.setAttribute("style","display:none");
    };
    function showBtn(){
    var toc_article = document.getElementById("toc-article");
    var show_toc_btn = document.getElementById("show-toc-btn");
    toc_article.setAttribute("style","display:none");
    show_toc_btn.setAttribute("style","display:block");
    };
    </script>
    <% } %>
    <!-- 目录内容结束 -->
  • 需要注意的是:如果想在页面中显示目录,要在文章的Markdown的开头加入toc: true这样一句话。

效果:

五、绑定域名

1.购买域名

  • 首先需要在阿里云的域名模块购买属于自己的域名,我这里使用的是.com结尾的域名,加入云解析服务,第一年支付了73.36人民币

2.域名解析

  • 点开解析设置页面,添加两个记录,记录类型CNAME主机记录分别写@www记录值填GitHub生成的网址
  • 在博客目录下的source文件夹下新建名为CNAME的文件,将域名信息写入并保存,比如我的就是填perry96.com。稍等几分钟之后就可以通过访问域名来访问自己的博客。
------------- 本文结束 感谢您的阅读 -------------

本文标题:利用Github和Hexo搭建Yilia主题的博客

文章作者:Perry

发布时间:2019年02月21日 - 21:21

最后更新:2019年09月19日 - 13:47

原始链接:https://perry96.com/archives/ac07c93.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%