一、前言

如果你对博客感兴趣并打算搭建一个属于自己的博客网站,本文可以给你一些帮助。本博客网站是依托hexo静态博客框架搭建,可以在短时间内,修改少量代码建立自己的博客。博客主题是butterfly,GitHub上标星较高的一款主题,主题可以自己选择喜欢的进行更换。

二、下载所需环境

搭建hexo博客需要下载Node.js和Git,并且还需要一个可以正常使用的GitHub账号,官网地址和安装过程下面已给出。

1. 安装Node.js

  • Node.js官网下载Node.js,根据自己的电脑选择合适的版本。
  • 在选择合适的安装位置后,安装过程一路next。
  • 安装完成后键盘win+r,输入cmd调出命令框,在命令框中输入node -v ,出现版本号则安装成功。 版本号

2. 安装Git

  • git官网下载安装git,根据自己的电脑选择合适的版本。
  • 在选择合适的安装位置后,安装过程一路默认next。
  • 安装完成后,鼠标右键会出现 Git GUI HereGit Bash Here 两个选项。
  • 安装完成后键盘win+r,输入cmd调出命令框,在命令框中输入 git --version ,出现版本号则安装成功。 版本号

3. 创建并登录GitHub账号

  • 账号创建及使用方法不在此阐述,自行百度。

4. 配置Git

  • 配置git需要你的GitHub用户名和注册邮箱,以便git可以访问。
  • 鼠标右键点击 Git Bash Here ,在界面中分别输入两行命令,并回车。
    1
    2
    git config --global user.name "此处填写你注册时的用户名"
    git config --global user.email "此处填写你注册时的邮箱"
  • 找到 C:/Users/username/.gitconfig 文件,打开,里面的 name 和 Email 如果正确则配置成功。

5.创建GitHub仓库

  • 登录GitHub并创建一个以你用户名命名的.github.io仓库,如用户名为abc,那么仓库名为 abc.github.io 。
  • 仓库选择公开Public。
  • 最好不要勾选 Add a readme file。
  • github仓库.png

6.配置SSH

配置SSH获取SSH key,用来访问GitHub仓库。

  • 打开 Git Bash Here ,输入 ssh-keygen -t rsa -C "邮箱" ,按照提示按三次enter。
  • 生成 id_rsa 和 id_rsa.pub 两个文件,在 C:\Users\admin.ssh 文件夹下,打开pub文件复制里面内容。
  • 打开GitHub,将内容粘贴到仓库 SSH keys位置。
  • title可以随意填写

三、 安装hexo

  1. cmd运行 npm install -g hexo-clihexo -v显示版本号则安装成功。
  2. 新建文件夹,存放博客相关的代码,如D:\Blog。
  3. cd到Blog,或者在Blog文件夹地址框输入cmd打开该文件。
  4. 输入 hexo init 初始化hexo。
  5. 输入 hexo g 生成博客。
  6. 输入 hexo s 生成本地预览,在最后会有 http://localhost:4000 本地网址,复制到浏览器打开即可看到博客内容。

四、 将hexo部署到GitHub

到目前位置生成的博客只能通过本地浏览,不能通过网络访问,因此需要将其部署到GitHub上,以便能够通过网络访问博客内容。注意GitHub在国内访问不稳定,因此其他人访问博客的速度可能会很慢,可以将其部署到gitee等其他国内的pages上,部署过程相似。

  1. cd到blog,输入 npm install hexo-deployer-git --save ,这是一个部署插件。
  2. 在blog内找到_config.yml文件,打开修改文件配置。
    1
    2
    3
    4
    5
    deploy:
    type: git
    repo: github上对应仓库的ssh 链接
    //也可使用https地址,如:https://github.com/Github用户名/Github用户名.github.io.git
    branch: main
    branch以前为master,现在已经修改为main(原因竟是因为种族歧视)。
  3. 输入 hexo g, hexo d 生成推送博客。
  4. 在浏览器输入 https://用户名.github.io 就可以访问自己的博客了。
  5. 后续使用博客命令三连:
    命令 含义
    hexo clean 清除本地文件
    hexo g 生成博客
    hexo d 上传博客

五、主题配置

到目前位置博客已经可以编辑、上传、通过网址访问,但是博客界面很简陋,功能很少,因此需要对其美化,安装主题可以很好的解决这件事。在GitHub上搜索hexo,会发现有很多的主题可以选择,根据个人爱好可以选择自己喜欢的主题进行配置。
本博客采用的主题是butterfly,在GitHub上将butterfly主题下载下来,放到blog文件夹下的themes里面,打开博客的_config.yml文件(注意区分博客的config文件和主题的config文件),将theme修改为 theme: butterfly,这样主题就配置好了,但是其中的主题参数都是默认值,修改参考butterfly官方文档。其他的主题都有自己的文档,自行参考修改。

六、小结

通过上面简单的配置就可以搭建一个属于自己的博客,对照主题官方文档进行修改可以对页面进行很大程度的美化,但是更进一步的想要属于自己风格的博客页面就需要对主题进行魔改,请自行寻找魔改教程。