hexo搭建博客记录 | COOLGuysneverSleep

hexo搭建博客记录

NENEIIII Sep 02, 2021

今天有空上来换个主题，顺便完善下一些效果

[^ hexo-Material]: 以下只记录一些问题, hexo的相关配置省略

Theme: [^ hexo-Material]

来比力留言

“将data-uid后的代码复制，然后打开主题配置文件_config.yml，找到livere_uid，将代码复制到其后即可：”

livere_uid: "你的代码"

^问这里代码外有””吗？

傻了，人家说的是data-uid之后的代码

忽略要编译的文件

搜索引擎确认网站所有权时往往会提供一个html文件来进行验证，要是这个文件被渲染了，验证自然就会失败了。或者，有时候会有一些文件不希望Hexo渲染的，因此有必要针对某个文件或者目录进行排除。Hexo的配置文件中提供了配置项skip_render。只有source目录下的文件才会发布到public（能够在网络上访问到），因此Hexo只渲染source目录下的文件。skip_render参数设置的路径是相对于source目录的路径。

skip_render:   #部署时不包含的文件

#单个文件
skip_render: hello.html

#单个文件夹下全部文件
skip_render: test/* 

#单个文件夹下指定类型文件
skip_render: test/*.md  

#单个文件夹下全部文件以及子目录
skip_render: test/**  

#跳过多个目录，或者多个文件
skip_render: ['*.html', demo/**, test/*]

发布博客文章

1 修正图片显示问题

经过上面的配置后，发现上传的博客文章里面的本地图片居然显示不来（没有同步上传）。

于是，找到解决方案：

1 把主页配置文件_config.yml 里的post_asset_folder:这个选项设置为true

2 在你的hexo目录下执行这样一句话npm install hexo-asset-image --save，这是下载安装一个可以上传本地图片的插件

3 等待一小段时间后，再运行hexo n "xxxx"来生成md博文时，/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹

4 最后在xxxx.md中想引入图片时，先把图片复制到xxxx这个文件夹中，然后只需要在xxxx.md中按照markdown的格式引入图片：

  {% asset_img 图片名.jpg 你想输入的替代文字 %}

注意： xxxx是这个md文件的名字，也是同名文件夹的名字。只需要有文件夹名字即可，不需要有什么绝对路径。你想引入的图片就只需要放入xxxx这个文件夹内就好了，很像引用相对路径。

设置首页不显示全文

next7.8里默认就是不显示，都设置好了
material里只有一行代码也是默认true，但字数感觉不太对，记录在后面

插入mermaid

Next下

失败，rnm明明又是按照[原文档](webappdevelp/hexo-filter-mermaid-diagrams: mermaid diagrams for hexo (github.com))做的

已解决: 除了上述步骤，还需要在主题配置文件中把mermaid改成enable

Material下

待解决

设置标签云和网易云音乐

以下是在Next主题中的配置

#npm安装标签云插件
npm install hexo-tag-cloud@^2.0.*

🤫在主题文件夹找到文件 theme/next/layout/_macro/sidebar.swig, 然后添加如下代码：

  <div class="site-overview-wrap sidebar-panel">
    {{ partial('_partials/sidebar/site-overview.swig', {}, {cache: theme.cache.enable}) }}

    {{- next_inject('sidebar') }}
  </div>

  {%- if theme.back2top.enable and theme.back2top.sidebar %}
    <div class="back-to-top motion-element">
      <i class="fa fa-arrow-up"></i>
      <span>0%</span>
    </div>
  {%- endif %}
####标签云代码 文章添加标签就可以显示出来
    {%- if site.tags.length > 1 %}
      <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcloud.js') }}"></script>
      <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcanvas.js') }}"></script>
      <div class="widget-wrap">
        <h3 class="widget-title">标签云</h3>
        <div id="myCanvasContainer" class="widget tagcloud">
          <canvas width="250" height="250" id="resCanvas" style="width:100%">
            {{ list_tags() }}
          </canvas>
        </div>
      </div>
      ####网易云音乐代码 自动播放
      <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1428534769&auto=1&height=66"></iframe>
    {%- endif %}

</div>

问题：出现乱码？？
解决：按照官方给的instruction重新配置

彩色标签页

以下是在Next主题下的配置
🤫在 /themes/next/layout/ 目录下，新增 tag-color.swig 文件，填入如下内容:**

#直接覆盖掉源文件
<script type="text/javascript">
     var alltags = document.getElementsByClassName('tag-cloud-tags');
     var tags = alltags[0].getElementsByTagName('a');
     for (var i = tags.length - 1; i >= 0; i--) {
       var r=Math.floor(Math.random()*75+130);
       var g=Math.floor(Math.random()*75+100);
       var b=Math.floor(Math.random()*75+80);
       tags[i].style.background = "rgb("+r+","+g+","+b+")";
     }
</script>

<style>
  .tag-cloud-tags{
    /*font-family: Helvetica, Tahoma, Arial;*/
    /*font-weight: 100;*/
    text-align: center;
    counter-reset: tags;
  }
  .tag-cloud-tags a{
    border-radius: 6px;
    padding-right: 5px;
    padding-left: 5px;
    margin: 8px 5px 0px 0px;
  }
  .tag-cloud-tags a:before{
    content: "🔖";
  }

  .tag-cloud-tags a:hover{
     box-shadow: 0px 5px 15px 0px rgba(0,0,0,.4);
     transform: scale(1.1);
     /*box-shadow: 10px 10px 15px 2px rgba(0,0,0,.12), 0 0 6px 0 rgba(104, 104, 105, 0.1);*/
     transition-duration: 0.15s;
  }
</style>

在同级目录的 page.swig 中引入 tag-color.swig

#找一下有没有相识的这一段，有的话覆盖掉，没有就粘贴上去  
<div class="tag-cloud">

        <!-- 目前共计xxx个标签
        <div class="tag-cloud-title">
            {{ _p('counter.tag_cloud', site.tags.length) }}
        </div>
        -->
    
        <div class="tag-cloud-tags">
          {{ tagcloud({min_font: 10, max_font: 15, amount: 300, color: true, start_color: '#ccc', end_color: '#111'}) }}
        </div>
      </div>
    
+     {% include 'tag-color.swig' %}
    
    {% elif page.type === 'categories' %}
      <div class="category-all-page">
        <div class="category-all-title">
            {{ _p('counter.categories', site.categories.length) }}
        </div>
        <div class="category-all">
          {{ list_categories() }}
        </div>
      </div>

以下是文章底部的标签样式（代码拷入 /themes/next/source/css/_schemes/(自己选择的主题)/index.styl 即可

*文章底部标签样式*/
.posts-expand .post-tags a {
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  font-family: 'Comic Sans MS', sans-serif;
  transition: .2s ease-out;
  padding: 3px 5px;
  margin: 5px;
  background: #f5f5f5;
  border-bottom: none;
  border-radius: 15px;

  +mobile(){
    padding: 1px 3px;
    font-size: 8px;
  }

  &:hover {
    background: rgba(100,154,182,0.902);
    color: #fff;
    -webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    -moz-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  }
}

^问没效果？？

艹改了一圈又出问题，头好痛睡觉去了

关于更换material主题后在背景中出现的不明黑色图案

就是说搞了一下午都没解决，重新查看了文档和之前参考的文章，不知道哪一步配置出错了，结果今早上我把之前安装的Next适配的插件卸载了就好了？？（卸载了hexo-cake-moon）

最后一个问题，我发现material下的首页文章预览有点问题？

设置的是显示20个字，然而并不起作用。。。

代码的字数不计算吗？？

待解决

绑定域名后无法访问，看有人说等10min。。

。。等待中

官方有给出[解决方案](Managing a custom domain for your GitHub Pages site - GitHub Docs)【采用ping的方式不行，因为ip要变】

省流提醒👉🏾下面四条都要解析到A记录

185.199.108.153

185.199.109.153

185.199.110.153

185.199.111.153

material中的标签云

脚本都已经写好了，但貌似没什么动效？有时间研究下修改

捏妈，为啥`hexo d`之后又不能访问了。。

等一会就好了、。、

为啥手机端无法访问了又(刚配置好可以访问，不知道又按啥了。。)

我好像只按了一个这个：先记录一下

Enforce HTTPS

HTTPS provides a layer of encryption that prevents others from snooping on or tampering with traffic to your site.
When HTTPS is enforced, your site will only be served over HTTPS. Learn more.

关于优化访问速度的一些尝试

将`GitHub page`托管到`Vercel`

Overview标签下，点击
在左侧Import Git Repository里粘贴你仓库地址（也可以直接登陆你的github，然后项目全都会列出来选择即可）
之后部署即可(省略过程了)
以后更新仓库会自动同步(还有邮件提醒)

直接将博客推送到`vercel`上

我们使用npm安装Vercel控制台客户端。

npm install -g vercel

Hexo自带了一个生成静态站点的功能，我们只需把Hexo博客生成静态站点然后就可以直接部署到Vercel。Vercel是可以自动识别根目录和子目录的index.html文件的。

hexo g

然后cd到博客的public目录。执行

vercel

第一次会提示你登录。输入你注册Vercel账号的邮箱地址，然后Vercel会给这个邮箱发一封邮件，控制台程序也会等待验证完成，打开这个邮件点击验证（VERIFY）按钮，点击之后就显示验证完成，控制台程序也会提示登录成功。

这时候再执行

vercel --prod

然后出现这些提示，按照提示操作！

如果需要自动化集成（也就是不用回答下列问题）的话，前面的命令也可以使用vercel --prod --confirm，但是这样的话项目名称会自动使用缺省值，~~如果需要指定项目名称的话就需要在博客的source目录添加vercel.json文件，配置name属性：{ name”: “my-hexo-blog” }~~尝试之后发现这样不太对而且会影响部署

? Set up and deploy “/home/runner/no5972tk/my-hexo-blog”? [Y/n] 
# 选择发布到的位置 -> 直接回车
# 默认就是账户名，显示在提示下面
# 可以在官网登录后访问这个地址查看：https://vercel.com/dashboard
Which scope do you want to deploy to?
·[username]
# 是否链接到一个存在的项目 -> n
? Link to existing project? [y/N]
# 为项目命名，这里输入的项目名会反映在域名上
? What’s your project’s name? (my-hexo-blog)
# 选择代码的位置，当前代码位置就是根目录 -> 直接回车
? In which directory is your code located? ./

最后显示

✅ Production : https://xxxxxx.vercel.app [copied to clipboard] [10s]

的时候就部署到Vercel上了，其中xxxxxx是项目名称。这个域名就是部署好的域名，从这个网址进去就可以访问博客了。

以后需要更新博客的话执行下列操作：

hexo cl && hexo g && cd public && vercel --prod --confirm && cd ..

如何使用`vercel`的自定义域名

点进你的博客项目
点击右上角
注意这里既可以修改vercel提供的域名，也可以添加你自己购买的域名
点击可以填写你自己的域名,然后它会提示你在DNS解析商那(比如我用的阿里云就去到对应的域名控制台)添加一条记录
```
@ A 76.76.21.21
```
配置完毕的效果如下：
1. 我自己购买的域名
1. 修改了vercel提供的域名
2. 点击二者都可以打开博客页面

如何绑定自己购买的域名到`vercel`上(涉及`github page`的域名解绑)

由于我们的目的是优化访问速度，原先我将自己都买的域名绑定了github page的域名，因此需要解绑

我做了以下的操作：

在DNS解析商那删除了之前添加的记录(目前就只有vercel一条)

删除github项目里的CNAME文件

去github page页面查看显示如下：
说明已经解绑了，点进链接可以打开，并且不会将域名解析成你购买的那个

提示：如果操作完不能打开，或者域名还绑定着github page，清除浏览器缓存[不过我发现清除之后，对github等网址的访问变慢好多，还有就是不要把其它的一些记录清除了，比如表单自动填写，密码填充等，这些还是非常方便的清除了挺麻烦的]

配置中出现的问题

vercel绑定自己的域名后，还是打不开页面。。

这个我等会过来看..

突然想起，之前看到一篇文导致我把DNS服务器修改了

但是我之后就没看到有说要这样做的(官方文档也没有提示)，所以我还是先换过来看啊可能

说是48小时内生效，但一会就好了(会有邮件提醒)

就是说真的不知道为撒。。我最新部署之后已经显示的是个人域名了还是不能访问，只能用vercel提供那个。。等服务器生效了再看看

总结

原先我把博客部署在github上，绑定了个人域名可以进行访问
现在需要优化访问速度，于是找到另一个平台vercel
我第一次先将github项目直接导入进vercel，然后通过vercel提供的域名1访问
第二次直接将我的hexo文件部署到vercel,同样可以通过vercel提供的域名2访问(并且还可以修改名字)
为了用我自定义的域名访问，我先解绑原先github的，然后新绑定在直接部署在vercel上的项目

因此目前可以访问的途径：

访问部署在github上的：

github page的原始域名：https://heimdall-nss.github.io/

访问部署在vercel上的：

whatisay.vercel.app

babytoast.vercel.app
babytoast.space