一分钟速成hexo搭建博客教学

博客环境#

1. Node.js你要有吧，版本当然是越新越好，越稳定越好;

2. Git 你要有吧，不用多说

3. 安装 Hexo-cli，命令行全局下载

   npm install -g hexo-cli

4. 找一个你喜欢的位置，初始化 hexo 文件作为你的博客本地仓库

   $ hexo init <你的仓库名>
   $ cd <你的仓库名>
   $ npm install

5. 本地启动 hexo 博客

   $ hexo s

6. 本地博客在http://localhost:4000启动了！

github 仓库#

1. 在 github 上创建名为 <你的Github帐号>.github.io 的仓库

2. 使用命令，将本地 hexo 博客的仓库推送到 github 仓库(加入的命令越多，构建越慢)

   • 安装 hexo-deployer-git 插件

   $ npm install hexo-deployer-git

   • 修改本地仓库根目录下的_config.yml 文件中的

   # Deployment
   ## Docs: https://hexo.io/docs/deployment.html
   deploy:
     type: git
     repo: git@github.com:<你的git账户名>/<你的git账户名>.github.io
     branch: master

   • 使用 hexo 的推送命令

   $ hexo g
   $ hexo d

3. 上个厕所，喝杯茶，等一会~在浏览器访问 https://<你的git账户名>.github.io 即可看到你的博客

添加主题#

1. hexo 的默认主题是 landscape，虽然是很丑，但是确实不好看，这里列举几个我觉得 UI 或功能性好的主题

   • Next 大佬都在推
   • Material-T 我在用的
   • One 二次元大佬
   • Archer 功能全面
   • Cxo 一开始的选择

   更多主题点这里或这里

2. 下载主题

   • 将下载的主题文件夹，粘贴到根目录的 thems 目录下(有些是直接下载到该目录下)
   • 修改_config.yml 的 theme 配置

   # Extensions
   ## Plugins: https://hexo.io/plugins/
   ## Themes: https://hexo.io/themes/
   theme: <你的主题名>

3. 主题优化 一般主题的文档中都会有相应的主题自定义优化空间，不然就自己添加配置

自动构建#

1. 什么是自动构建？

   指将源码转换为可以实际运行的代码，配置各种资源(css、js、img 等)

2. hexo 为什么要自动构建？

   大家可以看下自己 github 的博客仓库，细心的你会惊讶的发现，怎么目录和本地仓库的不一样？ 这是因为 hexo 在 deploy 的时候会把生成的代码上传到 git 仓库里，而开发环境的源码都不会上传，这样的话对于有多个终端的用户来说就很蛋疼。总不能说换个电脑就要从头来一遍博客的搭建吧… 于是，我们就需要在 git 仓库里也要上传一份源码，便于以后可以在不同的终端环境下也能方便的编辑博客。

   这里我使用的构建工具是Travis-CI

3. travis-ci 配置

   • Travis-CI 是开源持续集成构建项目，用来构建托管在 github 上的代码，提供了多种语言的支持。

   当我们每次进行git push等动作时，Travis CI 会自动检测提交，然后根据.travis.yml配置文件自动生成一份线上代码。

   • 使用你的 git 账户登录Travis-CI，进入travis-ci.org/account/repositories页面，如下图

     

   • 点击<你的git名>.github.io仓库后的 settings，进入设置页

     

   • 在这里需要配置你的环境变量(Environment Variables)，起一个你觉得好听的名字(我这里叫ACCESS_TOKEN)，然后去 github 获取 token

     

   • 进入github.com/settings/developers页面，点击Personal access tokens，选择生成一个新 token(Generate new token)

   • 选择 repo 所有权限

     

   • 将生成的 token 复制，粘贴到 travis ci 页面的 value 里(此 token 以后在 github 中不会再次显示，若是忘记可再次生成一个)，添加进去

   • 下面就是配置.travis.yml 文件

     • 在本地博客根目录下新建.travis.yml 文件

     • 配置如下(简易版)

     # 指定语言环境
     language: node_js
     # 指定nodejs版本
     node_js: 10.15.3
     # 指定缓存模块，可加快编译速度(可选)
     cache:
       directories:
         - node_modules
     # 指定源码所在分支
     branches:
       only:
         - dev
     # 构建前执行的命令
     before_script:
       - git config user.name "<你的git账户名>"
       - git config user.email "<你的邮箱>"
       # 这里的 ${ACCES_TOKEN} 对应之前在travis中设置的环境变量名
       - sed -i'' "s~https://github.com/<你的git账户名>/<你的git账户名>.github.io.git~https://${ACCESS_TOKEN}@github.com/<你的git账户名>/<你的git账户名>.github.io.git~" _config.yml
     # 构建所执行命令
     script:
       - hexo clean
       - hexo g
       - hexo d

     • 修改根目录下的_config.yml

     deploy:
     type: git
     # 使用https的url
     repo: https://github.com/<你的git账户名>/<你的git账户名>.github.io.git
     branch: master

   • 至此基本配置完毕，现在来提交下看是否开始自动构建

     • 在本地输入

     $ git init
     $ git remote add origin <git仓库的ssh链接>
     $ git checkout -b dev
     $ git add

     • 这时候可能会报错You've added another git repository inside your current repository., 这是因为主题文件和本地文件隶属两个不同的仓库，那么这时候就需要

     $ git rm --cache <报错主题的路径eg: theme/Material-T>
     $ git add <报错主题路径后加斜杠eg: theme/Material-T/>

     git add 的时候在路径后加斜杠，表示将这个文件夹加入，而不是将这个文件作为一个子模块

     • 再次

     $ git add .
     $ git commit -m 'first commit'
     $ git push

   • 喝杯水回来，再上 travis 上看下，出现该仓库的提交信息时。 恭喜你！只用了一分钟就配置好了一个完美的 github+hexo 博客！

重要功能已经具备，以后就是各种 hexo 插件的安装和配置，将会不断(慢)的更新。

写博客#

$ hexo new post '你的博客名称' // 新建的md会在/source/_post/文件夹中
$ hexo clean                  // 删除和清理之前生成的不需要的文件
$ hexo g                      // 生成文件
$ hexo d                      // 上传git
$ hexo s                      // 本地预览
// 配置完CI后 hexo g 和 hexo d无需使用
$ git add .
$ git commit
$ git push

hexo 扩展插件#

留言系统(gitment)#

留言系统基本有 Valine,Livere,Gitment,Disqus 几种，这里选择的是 Gitment(大家都是有 gitment 帐号的人了)，所有的评论会已提交 issue 的形式保存在配置的仓库中。 下面，开始干货输出。

• 注册 gitment,在New OAuth App为博客创建一个密钥

  

  Application name: '给你放置评论的仓库起名'
  Homepage URL: '可以直接填你的博客链接'
  Application deccription: '描述...'
  Authorization callback URL: '这个必须填博客地址'
  # 注意 Homepage 和 callback 的url后都要加 / (这里也是一个坑)
  # 例 https://elegantyu.github.io/

• 在你博客主题里找到或添加

  gitment:
  enable: true
  mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
  count: true # Show comments count in post meta area
  lazy: false # Comments lazy loading with a button
  cleanly: false # Hide 'Powered by ...' on footer, and more
  language: # Force language, or auto switch by theme
  github_user: 你的github ID
  github_repo: 刚才填的仓库名(注意，只要名字，不要链接)
  client_id: 刚才申请的ClientID
  client_secret: 刚才申请的Client Secret
  proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
  redirect_protocol: # Protocol of redirect_uri with force_redirect_pro

• 添加 gitment.ejs

  有的主题有，我的是自行创建的。

  <!-- 放gitment的div -->
  <div id="gitment"></div>
  <!-- 下面两个链接时助你越过一个大坑 -->
  <script src="https://cdn.jsdelivr.net/gh/theme-next/theme-next-gitment@1/gitment.browser.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theme-next/theme-next-gitment@1/default.css" />
  <!-- 初始化gitment实例 -->
  <script>
    let gitment = new Gitment({
      // 关于id这一点要重点说下，这里又是一个大坑，在下面细说
      id: '<%= page.slug %>',
      // 这里要注意映入yml里面的配置 要加上theme,不然默认引入最外层的config.yml
      owner: '<%= theme.gitment.github_user %>',
      repo: '<%= theme.gitment.github_repo %>',
      oauth: {
        client_id: '<%= theme.gitment.client_id %>',
        client_secret: '<%= theme.gitment.client_secret %>',
      },
    });
    gitment.render('gitment');
  </script>

• 初始化 gitment

  啥都整差不多了，只需add commit push三步走。部署完成后，在文章页面找到你的留言区域，使用你的 Git 帐号登录授权，然后点击出现的蓝色按钮，初始化！

  初始化完成后还不留言测试下？

  ‘comment’！这时候可以去你的博客留言仓库看下，会发现issue板块多了你的文章标题，并且其中还有你的测试信息。那么恭喜你，gitment 搭建完毕，剩下的就是根据你的喜好改变样式了。

• gitment 的坑

  • gitment 原始的 js、css 外链因为作者已经不维护，其内部有个请求的 url 已不存在，会导致 gitment 的主人初始化一直转圈圈。就用我这个吧，这是被大佬们 down 下来加了 cdn 的，稳。

  • 初始化实例的 id。此 id 默认是获取文章的 title 作为 id，这就意味着你的文章标题不能够恣意洒脱的长短由心。吾辈中人岂能受这气？尤其是像我这样标题喜欢浪的。苦苦寻觅之下，终得一良方，便是在文章的 Front Matter(md 文章最上边的变量区域)里加入一个变量slug，并将其赋值给 id。

    ---
    title: 一分钟速成hexo搭建博客教学
    slug: learn hexo
    date: 2019-04-18 22:12:46
    tags: 教程
    ---

    如此这般，即可解决此大坑。

    另外，为了方便以后的使用，可以在/scaffolds/post.md中，加入此变量。

    ---
    title: { { title } }
    slug:
    date: { { date } }
    tags:
    ---

网易云音乐#

• 进入网易云音乐，选择你喜欢的歌，点击生成外链播放器，就可得到一个 html 的 iframe 标签

• 插进去

代码高亮的 mac panel 样式#

这里不得不说下写博客的其中一条初衷，那就是让更多人从百度这种**搜索引擎的重复答案中，能找到几篇文章是不浑水摸鱼、CV 大师的。

• 在搜寻更好看，简约的高亮主题中，我被这款迷住了双眼。果然，设计领域中只有 mac 设计和仿 mac 设计。话不多说，下面是这种风格效果的实现

• 首先，我们要知道 mac panel 这种效果并不是一种代码高亮的主题，其只是在代码区域外层做的一个样式包裹。所以，我们的主要问题和解决途径就是如何修改代码的外围区域

• 我们在博客的根目录下创建一个scripts文件夹，其中放置一些我们需要的全局脚本文件

• 新建codeblock.js文件，在其中我们使用 hexo 的 apiafter_post_render，用于在文章页渲染时做代码区域的处理

• 主要代码构成如下（这里无需引入什么模块，hexo 执行相关命令的时候会自动访问）

  const attributes = [
    // 用于panel外层div的属性
    'autocomplete="off"',
    'autocorrect="off"',
    'autocapitalize="off"',
    'spellcheck="false"',
    'contenteditable="true"',
  ];
  const attributesStr = attributes.join(' ');
  // 此方法可以获取所有文章的全部内容，具体可以打印 data
  hexo.extend.filter.register('after_post_render', (data) => {
    // 这里是使用while持续获取匹配到的代码区域的dom标签
    // 这里可能就有人问'为什么别人的文章都是/<figure ***>/你的是/<pre>***/'
    // 你说为啥不一样，我们用的不是一个主题呗，这里的正则是根据你当前主题内文章渲染后代码区域的dom标签来定
    // 查看dom都会吧
    while (/<pre>(([\s\S])*?)<\/pre>/.test(data.content)) {
      // 之后的操作就是将匹配到的标签，在其外层拼接一个div，然后返回所有文章
      data.content = data.content.replace(/<pre>(([\s\S])*?)<\/pre>/, () => {
        let lastMatch = RegExp.lastMatch;
        let language = RegExp.$1.match(/(?<= )class=".*?"/)[0].split('=')[1] || 'plain';
        lastMatch = lastMatch.replace(/<pre>/, '<pre class="iseeu">');
        return `<div class="highlight-wrap"${attributesStr} data-rel=${language.toUpperCase()}>${lastMatch}</div>`;
      });
    }
    return data;
  });

• highlight-wrap的 css 样式，写在你的主题目录下的全局 css/less/scss/…文件中

  /* mac panel */
  .highlight-wrap[data-rel] {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.4);
    margin: 35px 0;
  }
  .highlight-wrap[data-rel] ::-webkit-scrollbar {
    height: 10px;
  }
  .highlight-wrap[data-rel] ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }
  .highlight-wrap[data-rel] ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  }
  .highlight-wrap[data-rel] ::before {
    color: white;
    content: attr(data-rel);
    height: 38px;
    line-height: 38px;
    background: #21252b;
    color: #fff;
    font-size: 16px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: bold;
    padding: 0px 80px;
    text-indent: 15px;
    float: left;
  }
  .highlight-wrap[data-rel] ::after {
    content: ' ';
    position: absolute;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fc625d;
    width: 12px;
    height: 12px;
    top: 0;
    left: 20px;
    margin-top: 13px;
    -webkit-box-shadow: 20px 0px #fdbc40, 40px 0px #35cd4b;
    box-shadow: 20px 0px #fdbc40, 40px 0px #35cd4b;
    z-index: 3;
  }
  .highlight-wrap[data-rel] pre {
    margin: 0;
    padding: 40px 0 10px;
  }

• 全部配置完毕，运行hexo s，查看运行效果，基本上就已经完成了(css 细节自行调节)

live2d 动画#

加入右下角可爱的动画人物

• 安装步骤 看这里

• 各种看板娘演示 demo

不蒜子统计#

使用不蒜子统计博客的 uv,pv.

• 在主题下/layout/_partial/footer.js中引入不蒜子脚本 js <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

• pv && uv 的显示

    ```html
    <!-- 站点总访问量(总pv) -->
    <span id="busuanzi_container_site_pv">
      总访问量<span id="busuanzi_value_site_pv"></span>
    </span>
    <!-- 当前页面访问量(单页pv) -->
    <span id="busuanzi_container_page_pv">
  当前页面访问量<span id="busuanzi_value_page_pv"></span>
    </span>
    <!-- 站点所有进入用户数(总uv) -->
    <span id="busuanzi_container_site_uv">
  本站访客数<span id="busuanzi_value_site_uv"></span>
    </span>
    ```