路漫漫其修远兮

灵自天生，用心雕琢

0%

hexo-Next + Github Page制作个人网站使用记录

发表于 更新于 分类于 Valine：
记录使用github page发布个人网站的方法和调整hexo-Next主题的步骤

github page

  1. 在github上创建仓库
  2. 仓库命名为：{github用户名}.github.io, 比如 XiaobinZhao.github.io
  3. 仓库新建分支gh-page
  4. 在仓库的settings –> options –> github pages 设置仓库的gh-page分支为发布分支，并save
  5. 打开https://{github用户名}.github.io即可享用， 比如https://xiaobinzhao.github.io/

hexo-Next 主题使用记录

  1. 修改内容自动重载并启动server

    安装 hexo-browsersync即可：npm install hexo-browsersync

    安装成功之后，只需要正常执行 hexo server 或 hexo s 就能查看效果了。

    经过测试，当保存文章的 Markdown 文件时，网页会自动刷新。另外，修改主题配置文件并保存之后，网页也会自动刷新，非常 nice。唯一一个缺憾是修改站点配置文件没办法触发网页的自动刷新，需要重新执行 hexo g。

  1. 背景动画

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # JavaScript 3D library.
    # Dependencies: https://github.com/theme-next/theme-next-three
    three:
      enable: fasle
      three_waves: true
      canvas_lines: false
      canvas_sphere: false
      
    vendors:
      three: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three.min.js
      three_waves: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three-waves.min.js
      canvas_lines: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_lines.min.js
      canvas_sphere: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_sphere.min.js

  2. 其他可以参考

坚持原创技术分享，您的支持将鼓励我继续创作！