本教程针对的是使用Hexo框架&Butterfly主题，使用Github Pages作为服务器以供访问，建立个人博客的过程，此外，还包含图床配置内容。此方案免费简单，很好的满足了大家初次尝试建立一个漂亮的博客，并上传经验分享贴或经验总结贴的需求。

博客搭建

入门

  • Hexo是一个快速、简洁且高效的博客框架，使用Markdown解析文章并生成静态网页
  • Butterfly是一个美观简单的Hexo卡片UI设计主题，开发者提供了十分详细的教程并保持了高频率的版本更新，十分适合初学者选择
  • Github建站原理：将所有资源建立在特定的github仓库中，使用Github Pages作为服务器以供访问

工具下载

  • 下载Node.js（JavaScript运行环境）
    • 点击链接Node.js进行下载
    • cmd输入node -v检查是否安装/已安装的Node.js版本号
    • cmd输入npm -v检查是否安装/已安装的Node.js中npm工具的版本号
  • 下载Git（开源分布式版本控制系统，项目版本管理）
    • 点击链接Git进行下载
    • cmd输入git --version检查是否安装/已安装的Git版本号
  • 下载Hexo（博客框架）：
    • cmd输入npm install hexo-cli --location=global下载/更新Hexo
    • cmd输入hexo -v检查是否安装/已安装的Hexo版本号

建立仓库

  • 在github建立仓库：由于该仓库启用Github Pages服务，因此该仓库为特殊仓库，命名必须为Username.github.io（在Settings界面中：Public profile-Name为昵称，Account-username为用户名）
  • 勾选Add a README file
  • 最后点击建立仓库。

生成SSH Keys（github关联本地/上传权限）

  • 在本地任意 文件夹的空白区域右键，并点击Git Bash Here
  • 在打开的Git界面中（该界面环境为Linux，因此粘贴为右键-Paste/而不是ctrl+v）
    • 输入ssh检查是否安装/已安装的ssh（一般在安装Git时已经带有此工具）
    • 输入ssh-keygen -t rsa -C "邮件地址"（邮件地址为github注册时的邮件地址）后，连续敲四次回车,此时已经在电脑本地建立文件夹，路径为/c/Users(用户)/“用户名”/.ssh/id_rsa
  • 右键该路径下的id_rsa.pub文件，用文本编辑器(如Notepad++)打开，对内容进行全选复制
  • 在Github-Settings界面中的SSH and GPG keys选项卡中，点击New SSH key新建一个钥匙，你可以任取一个Title，并把id_rsa.pub文件中复制的内容原封不动 的复制到Key中
  • 最后，在Git界面中输入ssh -T git@github.com测试ssh是否绑定成功（当显示Hi+github注册名即成功）

本地生成博客内容

博客内容需要先在本地建立，并以部署的形式上传到网上，此外，由于部署需要时间，本地生成也是一个十分方便的调试手段

  • 新建一个文件夹(该文件夹将为你的本地博客根目录)，打开后在空白处右键，点击Git Bash Here
  • 在打开的Git界面中
    • 输入hexo init以初始化hexo（由于github是国外网站，若连接失败可以多次尝试或换镜像源）
    • 当出现INFO Start blogging with Hexo!时，代表包安装成功
    • 输入hexo s在本地静态生成hexo页面（打开本地服务器，不需要时按Ctrl+C后可关闭该本地服务器）

发布博客至互联网

到目前为止，我们的本地博客就成功搭建了，但是现在我们只能通过本地静态生成页面查看博客，我们的目标是让其他人也能够访问我们的博客，这就需要我们将博客部署 到Github Pages上

  • 需要了解的github过去进行的两次更新(这使得有些教程已经失效)：
    • 将本地文件上传至github不再使用钥匙验证，而使用令牌验证
    • 默认分支从master改为了main
  • 打开本地博客文件夹中_config.yml文件，将最后的deploy部分修改为
    1
    2
    3
    4
    deploy:
      type: git   //冒号后有空格
      repository: 【这里填你的SSH】例如：git@github.com:NL-REMOTE/NL-REMOTE.github.io.git，SSH可以在特殊仓库-Code-SSH中找到
      branch: main
  • 在博客文件夹下右键并点击Git Bash Here
    • 输入npm install hexo-deployer-git --save，安装hexo部署到git page的自动部署发布工具
      Hexo安装完成后，将会在指定文件夹中新建所需要的文件，其目录如下：
    • 本次为初次生成，因此不需输入hexo clean
    • 输入hexo g生成页面
    • 输入hexo d上传文件至github
    • 在首先弹出的GITHUB登陆界面中输入用户名和密码，登陆
    • 在接下来弹出的SSH界面中输入用户名和令牌（此处不是密码）
    • 在github-Settings-Developer settings-Personal access tokens中新建令牌，命名、设置有效期、赋予权限（可以全部选上）
    • 新建令牌完成后会生成一段序列号（用以取代前面需要输入的密码），强烈建议妥善保存 （关闭页面后该序列号会被隐藏）
      若报错Error: Spawn failed，依次执行以下命令（可重复执行）
      1
      2
      3
      hexo clean
      hexo g
      hexo d
  • 上述命令在之后的博客生涯中将不断使用，人称“hexo三板斧”
    • 当出现INFO Deploy done: git时代表本地网页上传成功
    • 此时可以通过网址打开已经上传至互联网的网页（网址路径：特殊仓库-settings-Pages）

自此，我们已经成功完成了博客的搭建

博客主题配置

美观的主题对于博客来说当然是重中之重（谁不希望常常光顾漂亮的小站呢），Butterfly是一个十分推荐的漂亮主题，但最为重要的是：他的开发者提供了十分详细的操作文档，并保持了高频率的版本更新。（有些很漂亮的主题操作文档并不完善，资料零散，甚至更不上hexo版本，因此十分推荐新手使用Butterfly主题）


点击此处跳转至Butterfly官方安装文档，按照教程即可完成所有基本配置

图床配置

什么是图床？图床就是一个便于在博文中插入在线图片链接的个人图片仓库，它必须位于网上并可通过链接随时访问。设置图床之后，在自己博客中插入的图片链接就可以随时随地在线预览了，并且不会因为任何意外原因无法查看，除非自己亲自删除。

关于图床可以查看这篇文章：图床对比与Github图床的优化

我的博客使用PicGo将图片上传至github图床，选择这个方案的主要原因是稳定且完全免费，但国内访问有时需要科学上网（但个人觉得稳定性最为重要）。

PicGo的使用以及jsDelivr优化加速可以参考这篇文章：使用GitHub+PicGo+jsDelivr搭建自己的私人图床

此外需要提醒的是，github图床中的图片删除，需要到仓库中手动进行，而不能仅在PicGo相册中删除（相比于github，Gitee的图片删除是同步的，但Gitee仓库作为图床有风险！参见此文章gitee图床因外链访问过多被封，我们该怎么办），也希望读到此篇文章的大家对图库进行良好的分层管理，以方便维护。

结尾祝福

最后希望读到此篇文章的大家都能建立起自己的小站，关于此文章教材的疑问都可邮件联系博主（主页有邮件联系按键），也期待大家建站后分享友链！