Hexo+GitHub 搭建个人免费博客

前言:Hexo 是一种纯静态的博客，我们必须要在本地完成文章的编辑再部署到 GitHub 上，依赖于本地环境。本文是个人Windows搭建流程，比较详细了，照着流程来都能行，我已经搭建好的网站：tamako.ml.

E3ciI09VcAYjM4u (2).jpg

目录；

Hexo简介

本地环境准备

Github配置

安装Hexo

配置Hexo

主题美化

部署Hexo

自定义域名

开始使用

Hexo简介

官网：hexo.io
Hexo 是一个快速、简洁且高效的静态博客框架，它基于 Node.js 运行，可以将我们撰写的 Markdown 文档解析渲染成静态的 HTML 网页。然后使用 Github Pages 可以将 HTML 页面显示。完全免费，静态站点，轻量快速，但不足是发文不便，依赖于本地环境，并且GitHub 在国内访问速度不稳定。

本地环境准备

Hexo 基于 Node.js，搭建过程中还需要使用 npm 和 git，因此先搭建本地操作环境，安装 Node.js 和 Git。
Node.js : nodejs下载，Git : git下载
下载 Node.js 和 Git 程序并安装，一路点 “下一步” 按默认配置完成安装。
安装完成后，Win+R 输入 cmd 并打开，依次输入 node -v、npm -v 和 git –version 并回车，如下图出现程序版本号即安装成功，否则安装失败。

Github配置

首先要有一个Github账号，没有请先注册一个，官网注册:Github ，用户名用英文，使用邮箱注册并完成邮箱验证。
注册好后登录Github,点击右上角头像找到并点击进入Setting页面，选择左边栏的 SSH and GPG keys，点击 New SSH key，Title 随便取个名字，而Key中的内容要到本地获取，这个时候在自己电脑，右键 -> Git Bash Here，然后依次设置用户名和邮箱：

1 2	git config --global user.name "GitHub 用户名" git config --global user.email "GitHub 邮箱"

然后创建SHH秘钥;
输入 ssh-keygen -t rsa -C "GitHub 邮箱"，然后一路回车。
进入 [C:\Users\用户名.ssh] 目录（要勾选显示“隐藏的项目”），用记事本打开公钥 id_rsa.pub 文件并复制里面的内容,复制好的内容即是我们要的Key，粘贴复制的 id_rsa.pub 内容到 Key 中，点击 Add SSH key 完成添加。

本地连接Github;
这些都设置好了，可以开始本地连接Github,打开 Git Bash，输入 ssh -T git@github.com 出现 “Are you sure……”，输入 yes 回车确认，过程中会让你输入你刚刚设置Github的密码，输入你的密码即可，显示 “Hi xxx! You’ve successfully……” 即连接成功。

创建 Github 仓库;
点击右上角头像左侧的加号找到点击进入New repository
Repository name 中输入 用户名.github.io ,这里的用户名必须是你的Github的用户名，比如我的用户名是kasuie，那么这里就该填 kasuie.github.io ,Description可填可不填，自己随意，然后选择仓库为 public ，勾选 Add a README file ,其他不用勾，最后点击 Create repository 创建。
创建后默认自动启用 HTTPS，博客地址为：https://用户名.github.io,可自己看一下自己的是否可以访问，没有问题就开始下一步了。

安装Hexo

新建一个文件夹用来存放 Hexo 的程序文件，如 myBlog。打开该文件夹，右键 -> Git Bash Here。
使用Git一键安装，输入git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly ,进行安装。
输入npm install -g hexo-cli ，使用 npm 一键安装 Hexo 博客程序，此方法只支持 Hexo 5.0.0 以上版本。
注：安装时间会有点久，界面也没任何反应，耐心等待。使用 npm 安装程序等待很久也没反应，或者下载速度很慢，可以更换 npm 源为国内 npm 淘宝镜像。临时更换方法：在 npm 安装命令后面加上：--registry https://registry.npm.taobao.org。安装完后输入 hexo -v验证是否安装成功。

Hexo 初始化和本地预览;
在刚刚的命令窗口，也就是自己博客文件夹内，输入 hexo init 对我们博客进行初始化，输入 npm install 安装相关依赖。

注：文件夹myBlog目录下有：

node_modules: 依赖包

public：存放生成的页面

scaffolds：生成文章的一些模板

source：用来存放你的文章

themes：主题文件

_config.yml: 博客的配置文件

在命令行输入，hexo g ,编译生成静态网页，输入 hexo s ,启动服务预览，默认是4000端口，访问 http://localhost:4000，就出现 Hexo 默认页面。指定端口输入hexo s -p "端口号" ，如指定8000端口 hexo s -p 8000 。按住 Ctrl+C 则关闭服务。

如果你没有 pug 以及 stylus 的渲染器，请下载安装：
npm install hexo-renderer-pug hexo-renderer-stylus --save

歇一会；

到这里安装已经完成，直接推送到Github，访问：https://用户名.github.io，就能看到刚刚在本地预览时看到的页面，但是只是hexo默认的页面，没有自己配置，所以接下来就开始对博客进行配置及主题美化，打造属于自己的博客。

90445340_p0 (2).jpg

配置Hexo；

配置的话肯定要修改配置文件，所以就要修改 _config.yml 文件，但是为了避免以后主题升级，自己配置的文件被修改而带来的不便，所以我们把主题文件夹中的 _config.yml 复制一份到 Hexo 根目录里即 myBlog 文件夹根目录，同时重新命名为 _config.butterfly.yml ,我们在这里进行我们的配置。Hexo会自动合并配置，如果存在同名配置，会使用 _config.butterfly.yml 的配置，其优先度较高。

基本配置
注：只列出一些自己的配置，供做参考，更多配置请看这篇文章：Butterfly 安装文档(三) 主题配置-1
在_config.butterfly.yml中添加如下，可对导航栏进行修改，可自行按照格式自行添加和修改。

menu:
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  图片: /images/ || fas fa-images
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

在_config.butterfly.yml中修改如下，可对主页打字进行自定义。

subtitle:
  enable: true
  # 打字效果
  effect: true
  # 循环或者只打字一次
  loop: false
  # source调用第三方服务
  # source: false 关闭调用
  # source: 1  调用搏天api的随机语录（简体） 
  # source: 2  调用一言网的一句话（简体） 
  # source: 3  调用一句网（简体） 
  # source: 4  调用今日诗词（简体
  # subtitle 会先显示 source , 再显示 sub 的内容
  source: false
  # 如果有英文逗号' , ',请使用转义字元 &#44;
  # 如果有英文双引号' " ',请使用转义字元 &quot;
  # 开头不允许转义字元，如需要，请把整个句子用双引号包住
  # 例如 ”&quotNever put off till tomorrow what you can do today&quot"
  # 如果关闭打字效果，subtitle只会显示sub的第一行文字
  sub:
    - 我在贩卖日落&#44;你像神明一样慷慨地将光洒向我&#44;从此人间被点亮
    - 后来才发现那是我眼睛里的光&#44;可那又如何
    - 我爱慕的是你&#44;而非你发着光的模样
    - 阿巴阿巴

在_config.butterfly.yml中修改如下，可对侧边栏进行自定义。enable 为true显示，为false不显示。其中 card_announcement 可设置博客公告。

aside:
  enable: true
  hide: false
  button: true
  mobile: true # 手机页面（ 显示宽度 < 768px ）是否显示aside内容
  position: right # left or right
  card_author:
    enable: true
    description:
  card_announcement:
    enable: true
    content: 这里kasuie，请多指教。
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
    sort: date # date or updated
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
  card_webinfo:
    enable: true
    post_count: true
    last_push_date: true

在_config.butterfly.yml中修改如下，可对修改社交信息，书写格式 图标名：url || 描述性文字

1
2
3

social:
  fab fa-github: https://github.com/kasuie || Github
  fas fa-envelope: mailto:kasuie@qq.com || Email

在_config.butterfly.yml中修改如下，可设置自己的头像。

1
2
3

avatar:
  img: /img/avatar.jpg
  effect: false # 头像会一直转圈

在_config.butterfly.yml中修改如下，可设置网站开始运行时间。

runtimeshow:
  enable: true
  publish_date: 6/4/2021 00:00:00  
  ##网页开通时间
  #格式: 月/日/年 时间
  #也可以写成 年/月/日 时间

其他设置

# 设置博客图标
favicon: /img/favicon.ico

# 设置简繁题切换
translate:
  enable: true
  # 默认按钮显示文字(网站是简体，应设置为'default: 繁')
  default: 繁
  #网站默认语言，1: 简体中文, 2: 繁体中文
  defaultEncoding: 1
  #延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
  translateDelay: 0
  #当文字是简体时，按钮显示的文字
  msgToTraditionalChinese: "繁"
  #当文字是繁体时，按钮显示的文字
  msgToSimplifiedChinese: "简"

评论配置；
首先在_config.butterfly.yml中的基本设置

comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo
  use:
    - Valine
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: true
  count: true # Display comment count in top_img
  card_post_count: false # Display comment count in Home Page

其中use有很多中选项，这里选用的是 Valine ，就要对Valine进行配置,配置如下，其中appId 和 appKey 需要注册登录 LeanCloud 获取，具体操作流程请看这里： Valine , avatar 是头像的设定，monsterid 是默认的其中一个参数，如果要自定义头像可以去 Gravatar 注册并上传头像，之后评论带上自己注册时的邮箱，以后评论时就能自动拉取上传的头像。

valine:
  appId:  # leancloud application app id
  appKey:  # leancloud application app key
  pageSize: 10 # comment list page size
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  lang: en # i18n: zh-CN/zh-TW/en/ja
  placeholder: 记得留下你的昵称和邮箱....可以快速收到回复 # valine comment input placeholder(like: Please leave your footprints )
  guest_info: nick,mail,link #valine comment header info (nick/mail/link)
  recordIP: false # Record reviewer IP
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: /img/comment_bg.png # valine background
  emojiCDN: # emoji CDN
  enableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
  requiredFields: nick,mail # required fields (nick/mail)
  visitor: false
  option:

在线聊天；
首先在_config.butterfly.yml中的基本设置

# Chat Button [recommend]
# It will create a button in the bottom right corner of website, and hide the origin button
chat_btn: true

# The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down
# 设为true后，使用工具提供的按钮时，只有向上滚动才会显示聊天按钮，向下滚动时会隐藏按钮。
chat_hide_show: true

这里聊天也有很多选项，我这里配置的是chatra,2需要知道Public key，所以去 chatra 注册并在Preferences中找到Public key，然后在_config.butterfly.yml中配置

# chatra
chatra:
  enable: true
  id: xxxxxxxx # 你的Public key

主题美化;

各个页面的背景图或者顶部图片

background: url(https://kasuie.top/static/img/bg07.jpg)
index_img: https://kasuie.top/static/img/bg07.jpg
# footer是否显示图片背景(与top_img一致)
footer_bg: true
default_top_img: https://i.loli.net/2020/12/01/Ko98GgmpiScRrdA.png
archive_img: https://i.loli.net/2021/01/09/h3EJPHvVXO6cjag.jpg
tag_img: https://i.loli.net/2020/12/04/lRAwu64TUOGg5kb.png
tag_per_img: https://i.loli.net/2020/11/20/7rIap3CbhznFsgW.png
category_img: https://i.loli.net/2020/11/28/Uspv52zZS4r7oQk.jpg
category_per_img: https://i.loli.net/2020/12/18/a2VKIJbEm5FwYDH.jpg

设置打字效果

# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖动特效)
  mobile: false

鼠标点击特效

fireworks:
  enable: true
  zIndex: 9999 # -1 or 9999
  mobile: false

美化页面显示

# 美化页面显示
beautify:
  enable: true
  field: site # site/post
  title-prefix-icon: '\f0c1'
  title-prefix-icon-color: "#F47466"

页面加载动画

1 2	# 加载动画 Loading Animation preloader: true

另外还支持引入自己的css样式

1
2
3

inject:
  head:
    - <link rel="stylesheet" href="/css/self.css">

以上供做参考，更多详细可选配置参见：Butterfly 安装文档(四) 主题配置-2

部署Hexo

本地博客测试成功后，就是上传到 GitHub 进行部署，使其能够在网络上访问。
首先输入 npm install hexo-deployer-git --save 来安装 hexo-deployer-git。
然后修改 _config.yml 文件末尾的 Deployment 部分，修改成如下：

deploy:
  type: git
  repository: git@github.com:用户名/用户名.github.io.git # 这里用户名填自己的，例如我的就是 git@github.com:kasuie/kasuie.github.io.git
  branch: master

修改完成后，就可以一次执行一下命令开始部署了

1
2
3

hexo clean   # 清除缓存文件等
hexo g       # 生成页面
hexo d       # 部署发布

完成！这时访问我们的 GitHub 域名 https://用户名.github.io 就可以看到 Hexo 网站了。

自定义域名

域名准备
博客搭建完成使用的是 GitHub 的子域名（用户名.github.io），我们可以为 Hexo 博客绑定自己的域名替换 GitHub 域名。首先准备一个域名，域名我这里选用的是 Freenom 上申请的免费域名，大家在网上搜索相关教程就能注册，然后可以申请最高一年的免费域名，但是这个免费域名如果有人愿意花钱购买就会被收回。请自行斟酌。

DNS设置
登录 DNSpod ，选择DNS解析，添加刚刚在 Freenom 申请好的域名，然后为该域名添加记录：
首先添加A记录，指向 Github 的IP：

添加CNAME记录，将 www.tamako.ml 指向 kasuie.github.io,注意图中kasuie.github.io后还有一个点 '.'

还有两个默认系统初始记录，将两个记录值都复制下来，然后到 Freenom

在 Freenom 中找到自己已申请的域名，点击管理需要绑定的域名，找到 Nameservers 选择 Use custom nameservers ，将复制的两个记录值分别填入，然后点击 Change Nameservers 就好了，这样就可以不使用 Freenom 的默认DNS,而是授权给 DNSpod 来处理域名解析
最后到 Github 设置绑定刚刚添加解析的域名，刚绑定可能不会立即生效，请耐心等待一段时间，下方绑定好了可以免费开启HTTPS，这样访问绑定好的域名就到自己博客了

开始使用
至此，一个自己的博客就搭好了，以后每一次在项目中更改添加等都输入以下命令即可进行更新发布

1
2
3

hexo clean   # 清除缓存文件等
hexo g       # 生成页面
hexo d       # 部署发布

发布文章
可以进入 myBlog\source\_posts 目录中，右键打开 Git Bash Here，创建博文：

1	hexo new "My New Post Name"

然后 myBlog\source\_posts 文件夹中会出现一个 My New Post Name.md 文件，就可以使用 Markdown 编辑器在该文件中撰写文章了。编写完成后使用命令发布就可以了
也可以不使用命令自己在 myBlog\source\_posts 文件夹中创建 .md 文件，只需在文件开头手动加入如下格式 Front-matter 即可，以下是Front-matter 内容

---
title: Hello World # 标题
date: 2019/3/26 hh:mm:ss # 时间
categories: # 分类
- Diary
tags: # 标签
- PS3
- Games
---

当然不止博客发布，其他任何修改需要同步的都是如此进行发布的

最后；
写作环境： 学校
内心OS： 如果有任何解决不了的问题，请留言或私信我
时间： 2021-06-11 17:00:29
赞赏： 请我一杯咖啡