咸鱼鱼的Blog
0%

科技向 | Hexo+GithubPages+Next建站记录

Posted on Valine:

本来应该在高中毕业的那个暑假就把博客搭好的，然而后来就咕咕了。
在班主任的提醒下，准备在国庆节这段时间把博客搭好！

1. 简介

本博客使用 Hexo 5.4.0 与 Node.js 14.17.6 搭建，部署在 Github Pages 上，使用 Next 7.8.0 主题。

博客源码参考 我的Github（如果没找到的话，就是我 正在 放）

Hexo 试一个基于 Nodejs 的快速生成静态博客的开源框架，支持Markdown等很多插件…
（总之现在大家都用这玩意搭建博客）

本文主要参考：ryanluoxu的教程、inertia的教程

2. 准备

2.1 申请 Github Pages

  1. 注册一个 Github 账号

  2. 创建一个名为 yourname.github.io 的 Repository

    • 点击个人首页(github.com/yourname)右上角的加号
    • 点击 New repository
    • 在 Repository name 中，输入 yourname.github.io
    • 在 Initialize this repository with 中，选择 Add a README file
    • 其他按默认处理，点击 Create repository

  1. 设置 Github Pages

    • 进入刚刚创建的 Repository
    • 点击 Settings -> Pages
    • 设置 Source 为 “Branch: main” , “/ (root)”
    • 点击 Save

  • 测试一下刚刚设置的 Github Pages

    • 访问 yourname.github.io
    • 能够正常访问，出现一个非404的网页即可

2.2 安装 Node.js

  • 访问 Node.js官网，下载 Node.js，并按照教程安装

  • 打开cmd，输入 node -v

    • 若出现版本信息，则安装成功（我的是 v14.17.6）

2.3 安装 Git

  • 访问 Git官网，下载 Git，并按照教程安装
    • Git安装时会出现许多选项，具体查阅本文，也可以直接全部选择默认选项
  • 打开cmd，输入 git --version
    • 若出现版本信息，则安装成功（我的是 git version 2.33.0.windows.2）

2.4 安装 Hexo

  • 打开cmd，输入 npm install -g hexo-cli
  • 打开cmd，输入 hexo -v
    • 若出现版本信息，则安装成功（我的是 hexo-cli: 4.3.0 ... ...）

3. 搭建博客

3.1 搭建本地博客

  • 选择一个好位置，创建博客根目录，进入博客根目录
  • 右键空白处，选择 Git Bash Here
    • 之后所有操作都在 Git Bash 中输入
  • 输入 hexo init
  • 输入 npm install
  • 输入 hexo g，生成网页
  • 输入 hexo s，将网页部署在本地服务器上
  • 访问 http://localhost:4000，本地的博客网页
  • 按 Ctrl+C 关闭本地服务器

3.2 发布一篇博客

3.3 将博客部署到 Github Pages 上

  1. 获取 Repository 的 git 链接

    • 进入博客的 Repository
    • 点击右上角 绿色的Code 按钮
    • 在 Clone 的下方，选择 HTTPS，复制 URL 链接

  1. 修改配置文件

    • 打开 “根目录/_config.yml”
    • 搜索 “deploy”，修改配置为
      1
      2
      3
      4
      deploy:
        type: git
        repository: <Your Repository URL>
        branch: main
    • 早期版本的Github的默认分支(branch)为 master，现在为 main

  2. 安装自动部署插件 hexo-deployer-git

    • 输入 npm install hexo-deployer-git --save

  1. 部署到 Github Pages 上

    • 输入 hexo d
    • 待 Github 后台编译完毕，访问 yourname.github.io 即可进入你的博客
      • 若出现网页数据缺失或其他bug时，网页数据不会刷新

*. 放慢脚步，聊点东西

  • 到此为止，博客的基础框架就已经搭建完毕了。
    剩下的就是完善、优化你的博客了！
    比如进入 主站配置(根目录/_config.yml) 中，改下博客的标题，写下你的名字 … …

  • 介绍下 Hexo 在 Git Bash 中的常用命令

    • hexo init：初始化命令，新建一个新的Hexo文件夹
    • hexo clean：清空生成的文件和缓存
      • 有时候生成(generate)网站会略过一些插件的变动，所以需要重新生成
    • hexo generate：生成静态网页
    • hexo server：启动服务器
    • hexo deploy：将静态网页部署在对应网站上
    • hexo new "name"：新建一篇以 name 命名的博客
    • Git Bash 中的多个命令可以使用 && 连接，达到输入一次执行多个命令的效果，在调试时十分有用
    • 例如：hexo clean && hexo g && hexo s

  • 调试的时候，可以将错误信息输出在网页中，提高debug效率，方便调试（把网站当作cmd输出）

  • 我把我自己参考的教程列表贴在了文章末尾。

  • 接下来使用 Next 7.0 主题做演示

4. 使用主题

  • 配置文件分为两种
    • 博客配置(根目录/_config.yml)
    • 主题配置(根目录/themes/next7/_config.yml)

4.1 安装 Next 主题

  • 输入 git clone https://github.com/theme-next/hexo-theme-next themes/next7

    • 可能要使用 vpn 才能流畅下载

  • 在 博客配置 中，搜索 “theme”，将配置改为

    1
    theme: next7

4.2 其他

  • 摸了摸了，3小时连课要结束了，赶快传博客了233
  • 成功在国庆节前摸完建站记录233

5. Bug

  • Typora编辑markdown，在插入图片时，使用 ‘\‘ 作为路径分割符，但 ‘\‘ 不会被图片插件识别，需要替换成 ‘/‘ 才能正常显示图片。

  • hexo使用主题时，访问网站报错

6. 参考资料