hexo+github搭建个人github博客

之前看过别人的博客，感觉挺厉害的，博客网站的设计风格看起来挺舒服的，也想着自己也要搭建这样的网站。但之前一直没付出行动 ==。在经历了一个月的找工作后，今天终于有心情来学学搭建自己的博客了。借助hexo+github搭建博客其实很简单，但更重要的是要坚持总结，保持学习，输出有质量的博客。人是健忘的，但用心的记录总结，即使忘记，当你再次看到之前的记录时，仿佛如旧人一般，也能很快熟悉如初。

步骤

1、安装node

如果没有安装过node，需要安装一下node环境。去官网下载即可：
https://nodejs.org/en

2、安装git

如果是mac，自带git，不需要安装
如果是window，需要自己安装，详细安装教程参考：https://www.cnblogs.com/xueweisuoyong/p/11914045.html

3、创建github账号并创建仓库

创建就按照github上的提示一步一步操作即可。
然后点击repositories标签，点击右方的create按钮创建仓库

注意repository name名称最好是自己的username.github.io，这样访问直接访问username.github.io就可以连接到博客页面，否则地址就是 https://be-hard.github.io/xxx.github.io 了，这个具体地址是什么可以在github上的setting中的pages看到。

4、本地创建新的文件夹my-blog

5、进入到文件夹my-blog目录下，执行以下命令

  • 安装hexo
    npm install -g hexo-cli

    如果是mac提示没有权限的话，命令前面加上sudo，然后会提示你输入密码，输入正确即可。

  • 执行hexo init 命令初始化博客
  • 执行命令 hexo g 进行静态部署（g即generate的简写）
  • 执行命令hexo s 启动服务（s即serve的简写）
    此时会出现Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.的提示文字，访问该地址即可看到本地的博客

    6、将本地博客部署到github远程仓库上

  • 打开my-blog文件夹下的_config.yml文件，找到deloy配置项
    1
    2
    3
    4
    5
    6
    # Deployment
    ## Docs: https://hexo.io/docs/one-command-deployment
    deploy:
      type: git
      repository: https://github.com/xxx/xxx.github.io.git #你的仓库地址
      branch: main #绑定的仓库分支

    注意一下语法，yml文件中中每个 冒号： 后面都有一个空格

  • 安装hexo的git部署插件
    1
    npm install hexo-deployer-git --save
    然后执行以下命令
    1
    2
    3
    hexo clean   #清除缓存文件 db.json 和已生成的静态文件 public
    hexo g       #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)
    hexo d       #自动生成网站静态文件，并部署到设定的仓库(hexo deploy 的缩写)
    如果想要一次执行三个命令，可以直接执行
    1
    hexo clean&&hexo g&&hexo d
  • 完成以后，打开浏览器，输入 https://xxx.github.io 就可以打开你的网页了

    7、安装butterfly主题

  • 在my-blog目录下安装butterfly
    1
    git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
    此时可以看到themes目录下多了一个文件夹butterfly
  • 应用主题
    修改my-blog目录下的_config.yml，把主題改為 butterfly
    1
    theme: butterfly
  • 安装渲染器插件
    1
    npm install hexo-renderer-pug hexo-renderer-stylus --save

    8、根据需要对博客主题页面等进行配置

    在themes/butterfly/_config.yml 文件中修改。查看butterfly官方博客文档，里面有非常详细的介绍~ https://butterfly.js.org/posts/21cfbf15/

再次说明一下，每一项的：后面要空一格空格
这里列举简单的一些配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//修改导航栏右边的tab标签
menu:
  Home: / || fas fa-home
  Archives: /archives/ || fas fa-archive
//修改导航栏左边的logo，标题要在根目录下的_config.yml下title项修改
nav:
  logo: # image
  display_title: true
  fixed: false # fixed navigation bar
//修改github为自己的github地址
social:
  fab fa-github: https://github.com/xxx || Github
//修改网站favicon
favicon： 图片地址
//修改用户头像
avatar:
  img: 头像地址
//修改主页banner图片
index_img: banner图片
//修改archive页banner图片
archive_img:

创建tab/categories页面

hexo new page tags
hexo new page categories
在对应的md文件中修改对应的type项，如tags页为tags

1
2
3
4
5
6
7
---
title: 標籤
date: 2018-01-05 00:00:00
type: "tags"
orderby: random
order: 1
---

创建博客文章

执行命令hexo n p 文章标题
此时会在source/_posts看到对应的标题.md文件。使用md语法编写。

使用本地图片

source目录下创建imgs文件夹放置图片
md文件中引用

1
![](/imgs/xx.png)