前言：跨出成为CS人的重要一步

  • 当我们从头开始迈入CS学习的大门时，都必然会参考学习网络上丰富的各类资源。无论你是习惯于查阅CSDN、知乎，还是在浏览器中直接搜索，都一定会找到许多前人之鉴。很多个人博客文章，都能给予小白莫大的帮助。
  • 然而，随着CS学习的深入，我们可能会发现，许多博客文章也许并不正确，亦或我们自己也找到一些很好的解决方法。这时，我们可能会萌生自己搭建一个博客的想法，以便于记录自己的学习过程，分享自己的心得体会，甚至与志同道合的人交流。
  • 因此，本教程将简要介绍如何使用GitHub Pages和Hexo搭建一个Window系统下的简易个人博客，并使用Butterfly主题进行美化，同时配置Picgo作为图床以提高访问速度。通过本教程，你可以快速搭建一个属于自己的博客，并享受写作和分享的乐趣。

本教程面向的是和我一样的CS小白，也会提供一些我遇上的bug我解决思路。并且我需要强调的是，如果你有更多的精力和资源，完全可以选择购买云服务器，甚至可以自己从头开始写一个博客网站。但如果你像我一样，既想有一个自己的博客，又不想投入太多学习成本，那么本教程将是一个很好的选择。

所需工具网站

  1. GitHub账号：首先，你需要有一个GitHub账号，用于在Github pages在线部署博客，在Github仓库托管和发布自己的静态网站页面。如果没有，请先注册一个Github账号。

  2. Node.js和npm：Hexo是基于Node.js的静态博客框架，因此你需要安装Node.js和npm。我们可以从Node.js官网下载并安装。

  3. Git：Git是一个版本控制工具，用于管理代码的版本。我们可以从Git官网下载并安装。

  4. PicGo：PicGo是一个用于快速上传图片并生成图片链接的工具，我们将使用它来配置图床。我们可以从PicGo官网下载并安装。

搭建步骤

流程图

免费个人博客搭建流程图

环境搭建

  1. 进入Git官网https://git-scm.com/download/win 下载对应版本(此处以Windows为例)

  1. 进入Node.js下载界面下载安装对应版本(仍以Windows为例)

  1. 在桌面右键点击"在终端打开"，输入以下命令检查是否安装成功：
1
git --version
1
node -v
1
npm -v

当三个命令都返回版本号时，说明环境搭建成功。

创建GitHub Pages仓库

  1. 登录或注册GitHub后，桌面右键打开Git Bash，输入以下命令设置用户名和邮箱：
1
git config --global user.name "Github 用户名"
1
git config --global user.email "Github 用户邮箱
  1. 输入以下命令创建SSH Key：
1
ssh-keygen -t rsa -C "Github 用户邮箱"
  1. 按照提示完成创建，默认保存路径为C:\Users\用户名.ssh，用记事本打开该路径，复制id_rsa.pub文件中的内容。
  2. 登录GitHub，点击右上角头像，选择Settings，在左侧选择SSH and GPG keys，点击New SSH key，将刚刚复制的公钥粘贴到Key中，Title可以随意填写，最后选择Add SSH key。

  1. 打开Git Bash，输入以下命令检查是否连接成功：
1
ssh -T git@github.com

输入yes确认后，如果返回Hi 用户名! You've successfully authenticated, but GitHub does not provide shell access.说明连接成功。

  1. Github首页点击右上角的“+”号，选择“New repository”创建Github Pages仓库。

  1. 在“Repository name”中输入你的用户名，例如用户名.github.io。
  2. 选择“Public”作为仓库的可见性。
  3. 勾选“Add a README file”。
  4. 点击“Create repository”按钮。

安装部署Hexo程序

  1. 打开终端，输入以下命令安装Hexo：
1
npm install -g hexo-cli
  1. 打开资源管理器，选择一个合适的目录，创建一个新的Hexo博客文件夹，例如myblog，并进入该文件夹：
1
2
mkdir myblog
cd myblog
  1. 初始化Hexo博客并安装组件：
1
2
hexo init      # 初始化
npm install    # 安装组件

需要耐心等待一段时间，可以挂个梯子加速

  1. 成功后可输入以下命令查看博客：
1
2
hexo g
hexo s

Ctrl+左键点击终端上的http://localhost:4000或打开浏览器，输入http://localhost:4000，即可看到Hexo博客的初始页面。

  1. 打开Hexo博客文件夹，找到_config.yml文件，使用文本编辑器打开。
  2. 修改以下配置： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    # Site
    title: Your Blog Title
    subtitle: Your Blog Subtitle #选填
    description: Your Blog Description #选填
    author: Your Name
    language: zh-CN
    timezone: Asia/Shanghai #一般填这个

    ···

    # URL
    url: https://用户名.github.io #或是绑定的域名

    ···
    # Deployment
    deploy:
      type: git
      repo: https://github.com/用户名/用户名.github.io.git
      branch: master
  3. 保存并关闭_config.yml文件，输入hexo d部署网站。这时候访问https://用户名.github.io就可以看到你的博客了。

安装配置Butterfly主题

  1. 在终端中输入以下命令安装Butterfly主题： 
    1
    npm i hexo-theme-butterfly
  2. 打开Hexo博客文件夹，打开_config.yml文件，修改以下配置： 
    1
    2
    ···
    theme: butterfly
  3. 保存并关闭_config.yml文件。
  4. 按照themes\butterfly_config.yml的路径打开配置文件，根据Butterfly主题的官方文档进行配置。

文档比较长，一些不想要的功能跳过就好

  1. 重新部署网站，即可看到Butterfly主题的效果。

绑定配置域名(可选)

  1. 去腾讯云、阿里云或者其他域名注册商走一遍注册流程，购买一个域名，如yourdomain.com。

  2. 在Github仓库下创建一个CNAME(别名记录)文件，命名为CNAME文件内容为你的域名，如yourdomain.com。

  3. 在域名管理后台添加CNAME解析，将yourdomain.com解析到用户名.github.io。参考网站上的教程或者搜索相关教程。

  4. 等待解析生效，即可通过域名访问博客。

配置PicGo图床

由于Github国内访问速度感人，现在配置出来的博客访问也是极其缓慢的，这时我们可以考虑使用国内的图床网站，如腾讯云COS，阿里云COS，Gitee等，利用PicGo软件进行图床管理，将图片上传到图床，然后在博客中引用图床中的图片。此处建议搜索相关教程，我使用的是Gitee (因为免费)

创建博客文章

  1. 在终端中输入以下命令创建新的博客文章： 
    1
    hexo new post "Your Blog Post Title" #hexo n
  2. 根据source/_posts/Your Blog Post Title.md路径打开文件编辑即可。
  3. 写完后保存文章文件。

部署博客

  1. 在终端中输入以下命令生成静态文件： 
    1
    hexo generate
  2. 在终端中输入以下命令部署博客： 
    1
    hexo deploy

或者直接输入以下命令

1
hexo clean && hexo g && hexo d && hexo s
  1. 等待部署完成，打开浏览器，访问https://用户名.github.io或者绑定的域名即可查看你的博客。

结语

至此，我们已经成功创建了一个基于Hexo和Github Pages的博客，并且可以通过域名访问你的博客。我自己在搭建的过程中还碰见了很多问题，但都可以通过搜索相关回复解决。这篇文章只是给出博客搭建的实现思路和简要教程，你仍然可以通过Hexo的其他插件来美化你的博客。希望这篇博客对你有所帮助，祝你使用愉快！