网络热度

技术 新知 共享

Hello World

欢迎来到网络热度的博客站点！

Somewhere, something incredible is waiting to be known.
— Carl Sagan（卡尔·萨根，美国天文学家、科幻和科普作家）

这是一个专注于计算机网络技术及软件设计与实现的博客站点，我是博主子曦。在这里，我会分享多年工作和学习中积累的许多经验和体会，主题包括TCP/IP协议族、路由与交换技术、网络安全和密码学、系统编程、数据结构与算法，以及思科技术和产品介绍。

新的开始

作为一个非常热爱计算机科学和工程技术的程序员，自己很早于2005年就开了自己的博客。可惜由于研发工作繁忙，在发表了两篇文章之后就再无暇再写了。近年来，由于工作性质的变化，逐渐有了一些时间，于是就有了全面整理和总结自己的实践经验和学习体会想法。今年惊奇地发现，虽然域名有了一些变化，原始的博客站点竟然还在线。但是位于国内的原始站点访问不是很方便，文章更新和存档管理也不理想，所以必须寻找新的博客构建和管理系统。

上网搜索程序员博客平台，才大开眼界，时过境迁，已经有多个新一代的 amazing 博客技术平台，极大地方便了博主建站和发布过程。经过一些研究，并参考和比较了一些优秀的博客网站，最终选择了 Hexo 这个快速、简洁且高效的博客框架，及基于 Hexo + Next + GitHub Pages 组合的解决方案：

系统 功能 特点
Hexo 博客框架 Markdown 解析文章，强大的插件系统
Next 博客主题 为Hexo量身定制的高品质优雅主题页面
GitHub Pages 博客部署 开源协作社区 GitHub 免费博客发布站点

建站过程

在2020年的感恩节假期突击三天建站成功。得益于不少博主的文章，再加上之前已有用 GitHub 管理项目仓储（repository）的经验，一步步走到底还比较顺利。在 MacBook Pro (v10.15.7) 系统上，基本的过程如下：

  1. 安装 Node.js JavaScript 运行环境
  2. 安装 Git 应用程序
  3. 安装 Hexo 博客框架
  4. 初始化 Hexo 站点
    • 完成后在根目录下运行hexo g && hexo s启动本地站点
    • 浏览器输入 http://localhost:4000 可看到站点主题样式
    • Hexo 缺省使用 Landscape 主题
  5. 安装 Next 主题
    • 输入命令行npm install hexo-theme-next
    • 成功后运行hexo version显示： 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      ========================================
      NexT version 8.0.2
      Documentation: https://theme-next.js.org
      ========================================
      hexo: 5.2.0
      hexo-cli: 4.2.0
      os: Darwin 17.7.0 darwin x64
      node: 15.2.1
      v8: 8.6.395.17-node.17
      uv: 1.40.0
      zlib: 1.2.11
      brotli: 1.0.9
      ares: 1.16.1
      modules: 88
      nghttp2: 1.41.0
      napi: 7
      llhttp: 2.1.3
      openssl: 1.1.1g
      cldr: 37.0
      icu: 67.1
      tz: 2020a
      unicode: 13.0
    • 修改根目录下站点配置文件_config.yml，设定theme: next
    • 拷贝node_modules/hexo-theme-next至theme/next
    • 重新启动本地站点hexo g && hexo s，浏览器显示 Next 主题
    • Next 主题缺省使用 Muse 分区结构
  6. 创建 GitHub Pages
    • 配置本地 SSH-Key，拷贝公钥到 SSH and GPG Keys 页面
    • 测试本地 SSH 连接ssh -T git@github.com
    • 设置 Git 全局参数
      • git config --global user.name "Name"
      • git config --global user.email "email@example.com"
  7. 安装 Git Deployer 和 Backup 插件
    • 在根目录下运行 npm 安装命令
      • npm install hexo-deployer-git --save
      • npm install hexo-git-backup --save
    • 修改站点配置文件_config.yml，设定deploy和backup参数： 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      deploy:
        type: git
        repo:
          github: git@github.com:packetmania/packetmania.github.io.git,master

      backup:
        type: git
        theme: next
        repo:
          github: git@github.com:packetmania/packetmania.github.io.git,hexo
  8. 查看所有已安装模块和插件npm list： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    ├── hexo-asset-link@2.1.0
    ├── hexo-deployer-git@2.1.0
    ├── hexo-generator-archive@1.0.0
    ├── hexo-generator-category@1.0.0
    ├── hexo-generator-index@2.0.0
    ├── hexo-generator-searchdb@1.3.3
    ├── hexo-generator-sitemap@2.1.0
    ├── hexo-generator-tag@1.0.0
    ├── hexo-git-backup@0.1.3
    ├── hexo-math@4.0.0
    ├── hexo-renderer-ejs@1.0.0
    ├── hexo-renderer-pandoc@0.3.0
    ├── hexo-renderer-stylus@2.0.1
    ├── hexo-server@2.0.0
    ├── hexo-theme-next@8.0.2
    ├── hexo-word-counter@0.0.2
    └── hexo@5.2.0
  9. 部署 GitHub Pages
    • 在根目录下运行hexo clean && hexo g -d（部署 ）和hexo b（备份）
    • 成功后查看 GitHub repository 会看得到两个分支
      • master：博客站点（本地根目录下 public 目录的全部内容）
      • hexo: 博客框架和主题系统备份
    • 浏览器输入 https://packetmania.github.io BOOM!

主题配置

博客站点上线以后，需要精细调整 Next 主题配置，进行个性优化和美化。调整过程一波三折，开始时读其他博主的文章，应用时却发现许多对自己的系统不适用。后来发现，我的 NexT 版本 8.0.2 非常新，已经集成了大多数主题配置选项和第三方服务，只需要简单修改主题配置文件theme/next/_config.yml就可以了。一些第三方服务需要单独注册，整个过程又折腾了三天时间，终于打造出现在的模样。下表总结了我的主题配置：

配置选项 配置参数 说明
分区结构 Gemini 流行的双栏结构，就是现在看到的布局
菜单 menu 添加首页、关于、标签、分类和归档菜单项
字体 font 设置各个部分中英文字体
配色 darkmode 设置自动明暗配色模式
代码块 codeblock 设定高亮主题和拷贝按钮
内置标签 note 设定内置笔记标签
站点概览 site_state 侧栏显示日志、分类和标签统计
标签图标 tag_icon 显示标签图标而非 # 字符
本地搜索 local_search 添加搜索菜单项，需要安装搜索插件
社交链接 social，social_icons 侧栏概览显示带链接的社交图标
文章目录 toc 侧栏显示当前文章目录结构
文章预览 excerpt_description 首页只显示文章开头部分
阅读全文 read_more_btn 首页添加阅读全文按钮
字数统计 symbols_count_time 需要安装字数统计插件
阅读进度 reading_progress 侧栏显示阅读进度 %
回到顶部 back2top 侧栏添加回到顶部图标
添加书签 bookmark 文章页面右上方显示书签图标
访客统计 busuanzi_count 添加不蒜子访客和阅读次数统计
数学公式 math:mathjax 需要安装 Pandoc 插件, Mathjax参考
流程图 mmermaid Mermaid 可绘制多种流程、时序和甘特图
图像缩放 fancybox 添加图像缩放功能
许可协议 creative_commons 选用 BY-NC-ND 4.0 版权协议
评论系统 comments 添加了 Gitalk，Utterances，Disqus 三种评论
网页分享 add_this_id 页面底部加入 AddThis 分享图标

Next 主题配置没有运行网站时间统计，搜索一番，选择的办法是打开主题布局脚注文件，在powered-by层下面插入另一个<div class="powered-by">...</div>代码段计算运行时间，效果就是在页面底部由 Hexo & NexT.Gemini 强力驱动下加入新行显示：本站已运行#年#天#小时#分钟#秒。代码段如下：

themes/next/layout/_partials/footer.njk
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
28
29
30
31
32
  <div class="powered-by">
    {%- set next_site = 'https://theme-next.js.org' if theme.scheme === 'Gemini' else 'https://theme-next.js.org/' + theme.scheme | lower + '/' %}
    {{- __('footer.powered', next_url('https://hexo.io', 'Hexo', {class: 'theme-link'}) + ' & ' + next_url(next_site, 'NexT.' + theme.scheme, {class: 'theme-link'})) }}
  </div>
  <div class="powered-by">
<span>本站已运行<span id="showDays"></span></span>
<script>
  var seconds = 1000;
  var minutes = seconds * 60;
  var hours = minutes * 60;
  var days = hours * 24;
  var years = days * 365;
  var birthDay = Date.UTC(2020,11,25,14,00,00); // 这里设置建站时间
  setInterval(function() {
    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();
    var now = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
    var diff = now - birthDay;
    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('showDays').innerHTML=""+diffYears+"年"+diffDays+"天"+diffHours+"小时"+diffMinutes+"分钟"+diffSeconds+"秒";
  }, 1000);
</script>
  </div>

博客更新

主题配置完成之后，就是更新文章或日志了。我使用的是 macOS上的 MacDown 开源 Markdown 文件编辑器，非常易学好用，强烈推荐。发布文章或日志的步骤很简单：

  1. 在根目录下运行hexo new <new-post-title>创建新文章或日志
  2. 用 Markdown 编辑器编辑 source/_posts/<new-post-tiltle>.md
  3. 运行hexo clean && hexo g && hexo s，用浏览器本地查看校对
  4. 重复以上第2，3步直到文章或日志内容完整无误
  5. 运行hexo clean && hexo g && hexo d一键部署
  6. 运行hexo b一键备份

联系交流

博客网站上线是我的一个新的起点。在这里，我既要总结自己，又要回馈社区，争取保持每周至少一篇文章或日志的产出量。未来也希望分类整理、结集开源出版。如果读者有任何意见和建议，请发电邮或者直接在文章或日志页面底部添加评论。无论您在哪里，三种评论系统应该总有一个可以适用您的网络环境。

最后，如果觉得我的博客站点能够对您有一些帮助或启迪，敬请推荐给您觉得需要的人。卡尔·萨根说过“我们都是星尘”，那么在我们回归宇宙之前，让网络热度一直保持传递下去！

祝您每天都能有新的发现，谢谢！

2020年11月