手把手教你快速搭建个人博客 Hexo + Github

平时学习查找资料发现了很多个人博客，搭建的很不错，一直想抽空自己也动手实践一下，正好趁着新型冠状肺炎这段宅在家的空，赶紧搭建一下自己的个人博客

先来预览一下博主的个人博客：Fly’s Blog

动手能力差的同学可以先跟着B站小匠的视频快速搭建一下，之后再参考这篇博文进行博客的其他设置：B站搭建博客教程传送门

一、安装Git、Node.js以及Hexo
二、搭建博客
- 1. 初始化一个博客
- 2. 安装博客所需组件
- 3. 修改博客的基础配置信息
- 4. 创建本地服务启动博客进行预览
三、部署 / 发布到github
- 1. 创建github仓库:
- 2. 安装 hexo-deployer-git
- 3. 再次修改 `_config.yml` 文件
- 4. 使用命令部署网站
四、将Blog源代码提交到github
- 1. 在根目录初始化本地仓库
- 2. 将原文件添加到本地仓库
- 3. 将本地仓库 push 到远程 gitHub 仓库中
五、更换Blog主题
- 1. 在你的博客根目录里下载主题
- 2. 应用主题
- 3. 安装 pug 以及 stylus 的渲染器
- 4. 安装cheerio
六、主题的基础配置
- 1. 更改主题语言为`简体中文`
- 2. 主题配置文件平滑升级
- 3. 将主题的配置文件`butterfly.yml`中的繁体字转化为简体中文
- 4. 配置文章发布模板
- 5. 添加基本的页面
- 6. 音乐页面
- 7. 书籍、电影页面
七、主题的高级配置
- 1. 开启评论功能
- 2.使用PWA实现Web应用
- 3. 添加本地搜索
- 4. 添加文章字数统计功能
八、关于创建文章与文章发布
- 1. 发布文章流程
- 2. 文章的优化
九、将你的Blog生成一个app
- 1. 准备
- 2. 流程
十、总结

一、安装Git、Node.js以及Hexo

Hexo 官方文档：https://hexo.io/zh-cn/docs/
这里不是重点，不赘述，具体参考Hexo的官方文档

二、搭建博客

1. 初始化一个博客

hexo init 或者 hexo init + 文件夹名称

2. 安装博客所需组件

进入到博客所在目录中，将 package.json 所需要的组件进行安装（会自动安装到目录中生成的node_modules文件夹下）：npm install

3. 修改博客的基础配置信息

打开目录下的 _config.yml 文件，修改如下信息

# Site
// 博客的名称
title: Fly's Blog
// 博客副标题，可以作为你的个签
subtitle: 'Only if you asked to see me, our meeting would be meaningful to me'
// 博客的描述（博客的用途）
description: '心情，日记，随笔，读后感'
// 博客的关键词。使用 , 分隔多个关键词。
keywords: java, html, css, jQuery
// 博客的作者
author: Hao Liu
// 语言设置，不同主题语言形式不一样，具体参考使用主题文件夹下的languages文件夹
language: zh-CN
// 时区设置，默认是系统的使用的时区，大陆可以填写 Asia/Shanghai
timezone: 'Asia/Shanghai'

4. 创建本地服务启动博客进行预览

打开博客根目录下打开 Git Bash，依次输入以下指令
- 清除缓存文件 (db.json) 和已生成的静态文件 (public)：hexo clean
  一般再执行 hexo generate 前执行此命令，防止修改内容失效
- 生成静态文件：hexo generate
- 启动服务器：hexo server
  默认情况下，访问网址为： http://localhost:4000/
打开浏览器，访问 http://localhost:4000/
正常情况下即可查看到你的博客内容如下：

三、部署 / 发布到github

1. 创建github仓库:

仓库名格式：github用户名 + .github.io
eg：Hins.github.io

2. 安装 hexo-deployer-git

用于提交本地生成的页面内容到 github 仓库
命令： npm install hexo-deployer-git --save

3. 再次修改 `_config.yml` 文件

修改博客地址以及博客的远程仓库链接

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
// 此处博主使用的是 Github Page 做个人博客的 Websites
url: https://fly-liuhao.github.io/......
# Deployment
## Docs: https://hexo.io/docs/deployment.html
// 此处填写你的 github 仓库，可以使用 http 或者 SSH(推荐使用)，分支必须为主分支 master
deploy:type: gitrepo: git@github.com:fly-liuhao/fly-liuhao.github.io.gitbranch: master

4. 使用命令部署网站

依次执行如下步骤：
- 清除缓存文件 (db.json) 和已生成的静态文件 (public)：hexo clean
  （一般再执行 hexo generate 前执行此命令，防止修改内容失效）
- 生成静态文件：hexo generate
- 部署到Github：hexo deploy
访问： https://github用户名.github.io/
- 页面同在本地部署的一样

四、将Blog源代码提交到github

因为上一步部署只是将生成好的页面部署到GitHub上，并没有将源文件存到远程仓库中，因此为了更好的体验，博客部署好了之后，还要将本地的源文件推送到github，比如说电脑坏了、换了电脑都只需 clone 这个仓库即可

1. 在根目录初始化本地仓库

初始化一个本地仓库：git init

2. 将原文件添加到本地仓库

将本地文件放到暂存区：git add .
将暂存区的文件提交到本地仓库：git commit -m '你的提交描述内容'

3. 将本地仓库 push 到远程 gitHub 仓库中

设置远程仓库地址：git remote add origin git@github.com:fly-liuhao/fly-liuhao.github.io.git
注意：HTTPS 和 SSH两种方式任选其一即可，如果需要改变与远程仓库的链接方式，需先断开与远程仓库的连接：git remote rm origin
创建源文件分支：git branch source，并切换到该分支：git checkout source
推送到远程仓库：git push --set-upstream origin source

五、更换Blog主题

1. 在你的博客根目录里下载主题

Hexo 主题参考链接：https://hexo.io/themes/
选择你喜欢的一个主题进行下载，博主这里选择的是 Butterfly 主题：git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
下载完成即可在 themes 文件夹下看到下载的主题文件夹：

2. 应用主题

修改站点配置文件_config.yml，把主题改为Butterfly：theme: Butterfly

3. 安装 pug 以及 stylus 的渲染器

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

4. 安装cheerio

hexo 4.2.0版本之后，会出现报错 “Error: Cannot find module ‘cheerio’” 因此需要安装 cheerio：npm install cheerio --save

六、主题的基础配置

注意：不同主题配置是不一样的，这里博主以选择的 Butterfly 主题进行配置，如有小伙伴选择的是其他主题，请参考主题的官方文档进行配置（主题 github 中的 README 中一般有给具体配置的参考文档）

博主使用的 Butterfly 主题配置参考文档：https://jerryc.me/posts/21cfbf15/
（注意：如果链接进不去，选择高级，继续访问即可）

这里其实你完全可以跟着文档配置自己的博客，下面是博主自己配置的，仅供参考（如有细节不到位的请参考文档）

1. 更改主题语言为`简体中文`

打开主题中的[languages]文件夹，查看主题中支持的语言：default、en、zh-CN、zh-TW
修改博客的配置文件_config.yml：language: zh-CN

2. 主题配置文件平滑升级

为了主题的平滑升级, Butterfly 使用了 data files 特性。
推荐把主题默认的配置文件 _config.yml 复製到 Hexo 工作目录下的source/_data/butterfly.yml，如果source/_data的目录不存在那就创建一个。

注意，如果你创建了butterfly.yml, 它将会替换主题默认配置文件_config.yml里的配置项 (不是合并而是替换), 之后你就只需要通过git pull的方式就可以平滑地升级 theme-butterfly了。

3. 将主题的配置文件`butterfly.yml`中的繁体字转化为简体中文

因为作者好像是台湾人，配置中的注释全是繁体，如有介意可以使用下面简繁转化的网站进行转换：Ctrl + A、Ctrl + C、Ctrl + V …
在线繁体-简体转换网站：https://www.aies.cn/

4. 配置文章发布模板

Page（页面）

 ---title: {{ title }}date: {{ date }}type: （tags，link，categories 这三个页面需要配置）comments: (是否需要显示评论，默认true)description:（页面描述）top_img: (设置顶部图，链接形式)mathjax:（用于一些数学表达式显示配置）katex:（用于一些数学表达式显示配置）---

Post（文章）

---
title: {{ title }}
date: {{ date }}
tags:（文章的标签）
categories:（文章所属分类）
keywords:（关键字s）
description:（描述）
top_img: （除非特定需要，可以不写）
comments  （是否显示评论，默认开启，除非设置false,可以不写）
cover: （缩略图链接）
toc: （是否显示文章目录，除非特定文章设置，可以不写）
toc_number: （是否显示目录的数字序号，除非特定文章设置，可以不写）
copyright: （是否显示版权，默认开启，除非特定文章设置，可以不写）
mathjax: （用于一些数学表达式显示配置）
katex:（用于一些数学表达式显示配置）
hide: （是否想要隐藏文章）
---

5. 添加基本的页面

标签页：
- 输入命令：hexo new page tags
- 修改source/tags/index.md文件如下：
```
---
title: 标籤
date: 2020-03-21 00:00:00
type: "tags"
---
```
分类页：
- 输入命令：hexo new page categories
- 修改source/categories/index.md文件如下：
```
---
title: 分类
date: 2020-03-21 00:00:00
type: "categories"
---
```

友情链接：

输入命令： hexo new page link

修改source/link/index.md文件如下：

---
title: 友情链接
date: 2020-03-21 00:00:00
type: "link"
---

在Hexo博客目录中的source/_data，创建一个文件link.yml

class:class_name: 友情链接link_list:1:name: xxxlink: https://blog.xxx.comavatar: https://cdn.xxxxx.top/avatar.pngdescr: xxxxxxx2:name: xxxxxxlink: https://www.xxxxxxcn/avatar: https://xxxxx/avatar.pngdescr: xxxxxxx  class2:class_name: 无效链接link_list:1:name: 梦xxxlink: https://blog.xxx.comavatar: https://xxxx/avatar.pngdescr: xxxx2:name: xxlink: https://www.axxxx.cn/avatar: https://xdescr: xx

友情链接界面设置（在友情链接上写上自己的个人资料，方便其他人添加），在Butterfly.yml配置：

Flink:headline: 友情链接info_headline: 我的Blog资料name: Blog 名字： JerryCaddress: Blog 地址： https://jerryc.me/avatar: Blog 头像： https://jerryc.me/img/avatar.pnginfo: Blog 简介： 今日事,今日毕comment: 如果需要交换友链,请留言

关于页面
- 输入命令：hexo new page about
- 修改source/about/index.md文件
  这里自我发挥，博主这里放的是本人的个人简历（可以帮助找工作哦），你也可以写一些你的自我介绍，具体参考其他人的个人博客设计
  PS：这里如果你的github个人使用比较多的化有自己的，可以使用 hacknical 制作你的简历
  - 官网：https://hacknical.com/
  - 说明文档：https://github.com/ecmadao/hacknical/blob/master/doc/ABOUT-zh.md

6. 音乐页面

参考hexo-tag-aplayer链接：https://github.com/MoePlayer/hexo-tag-aplayer

使用教程链接1：https://blog.csdn.net/hushhw/article/details/88092728

使用教程链接2：https://www.jianshu.com/p/f1005ae09e5a

安装插件：npm install --save hexo-tag-aplayer
修改配置，在配置文件 _config.yml中添加：
```
# 音乐播放插件
aplayer:meting: true
```
创建music目录：hexo new page music
网易云链接：https://music.163.com/

修改source/music/index.md文件如下：

---
title: 那些年，听过的音乐
type: "music"
comments: true
top_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/Photo/music.jpg
date: 2020-02-19 11:59:50
description: 轻抚受伤的心灵
mathjax:
katex:
---# My Love
// 注意：第一串数字是你网易云歌曲的ID，浏览器地址栏获取（此行为注释，文件中请删掉此行）
{% meting "551340498" "netease" "song" "theme:#555" "mutex:true" "listmaxheight:340px" "preload:auto" %}
---
# 聆听这个世界
// 注意：第一串数字是你网易云歌单的ID，浏览器地址栏获取（此行为注释，文件中请删掉此行）
{% meting "3175659640" "netease" "playlist" "theme:#555" "volume:0.5" "mutex:true" "listmaxheight:340px" "preload:auto" %}

7. 书籍、电影页面

参考链接：https://github.com/mythsman/hexo-douban
这里调用的是你豆瓣的接口，只需要提供你的ID，同样也是浏览器地址栏获取（需登录豆瓣）

安装插件：npm install hexo-douban --save

在配置文件 _config.yml 中添加：

# 书籍、电影插件
douban:user: 175423653 # 你的豆瓣IDbuiltin: false # 是否将生成页面的功能嵌入hexo s和hexo g中book:title: '那些年,我看過的書籍'quote: '世界上任何的书籍都不能带给你好运，但是它们能让你悄悄的成为你自己'movie:title: '那些年,我看過的電影'quote: '过去、现在、未来'timeout: 10000

豆瓣链接：https://www.douban.com/
生成指定页面：hexo douban -bm
- 需要注意的是，通常大家都喜欢用hexo d来作为hexo deploy命令的简化，但是当安装了hexo douban之后，就不能用hexo d了，因为hexo douban跟hexo deploy的前缀都是hexo d
- 果 builtin 属性设置为：true，则每次不需要执行该命令，直接使用hexo g生成页面即可

七、主题的高级配置

1. 开启评论功能

推荐使用 Valine ，Laibili加载过于慢，评论是还需跳转登录，可直接使用 Valine 实现评论功能

使用 Laibili（来必力）
- 注册账户并登录：http://livere.com/
- 点击管理页面，然后根据提示获取用户ID（代码管理中的data-uid后面）
```

<div id="lv-container" data-id="city" data-uid="MTAyMC80ODxxxxxyNTIzNQ==">.........
```
- 修改主题配置
```
laibili:
enable: true
uid: MTAyMC80ODxxxxxyNTIzNQ==
```

使用 Valine（推荐使用）

参考教程1：https://www.jianshu.com/p/728a9594bb6c
参考教程2：https://bluelzy.com/articles/use_valine_for_your_blog.html

注册LeanCloud（需完成邮箱认证）
创建一个开发版应用
获取 appId 以及 appKey

修改主题配置 butterfly.yml 如下：

# valine comment system. https://valine.js.org
valine:enable: true # if you want use valine,please set this value is trueappId: xxxxxxxxxxxxxxx # 填写你获取的 app idappKey: xxxxxxxxxxxxxxx # 填写你获取的 app keynotify: true # valine mail notify (true/false) https://github.com/xCss/Valine/wikiverify: false # valine verify code (true/false)pageSize: 10 # comment list page sizeavatar: monsterid # gravatar style https://valine.js.org/#/avatarlang: zh-cn # i18n: zh-cn/enplaceholder: 说点什么吧... # valine comment input placeholder(like: Please leave your footprints )guest_info: nick,mail,link #valine comment header infobg: /img/comment_bg.png # valine backgroundcount: false # top_img显示评论数

2.使用PWA实现Web应用

关于PWA应用

直观认识：https://www.ithome.com/0/414/429.htm
使用PWA渐进式框架的网站
- 实例博客1：https://diygod.me/
- 实例博客2：https://wangyaxing.cn/
- 微博：https://m.weibo.cn/
- 推特：http://mobile.twitter.com/
- IT之家：https://m.ithome.com/
使用文档
- hexo-theme-melody 主题：https://molunerfinn.com/hexo-theme-melody-doc/zh-Hans/additional-package-support.html#pwa
- hexo-theme-butterfly 主题：https://jerryc.me/posts/21cfbf15/#PWA
- 配置注意事项：
  - manifest.json创建的位置是主题中的source文件夹
  - 因为manifest.json中使用到各尺寸Logo图片，根据路径在主题中的source中建立相应的文件夹，放入指定尺寸大小以及名称的Logo图片
  - 图片尺寸一定要符合要求必须是长宽像素值大小相等，要不应用的Logo图片无法加载显示
使用到的工具
- Png改变大小：https://www.iloveimg.com/zh-cn/resize-image
- Png-svg：http://www.bejson.com/convert/image_to_svg/

3. 添加本地搜索

官方github链接：https://github.com/wzpan/hexo-generator-search

使用教程

安装：npm install hexo-generator-search --save

修改主题配置文件 butterfly.yml 如下：

# Local search
# Please see doc for more details: https://jerryc.me/posts/21cfbf15/#本地搜索
# ---------------
local_search:enable: true labels:input_placeholder: 搜索文章hits_empty: "对不起，没有找到你想要的文章: ${query}" # if there are no result

4. 添加文章字数统计功能

使用：

安装：npm install hexo-wordcount --save

修改主题配置文件 butterfly.yml 如下：

# Please see doc for more details: https://jerryc.me/posts/21cfbf15/#字数统计
wordcount:enable: true

八、关于创建文章与文章发布

1. 发布文章流程

创建一篇文章：hexo new '文章的标题'
编辑文章（建议提前利用 Markdown 编辑器编辑好，再进行复制）

可参考博文：https://blog.csdn.net/Fly_1213/article/details/85263430
部署文章
- 清除缓存：hexo clean
- 生成静态文件：hexo generate
- 部署到 github：hexo deploy
将原文件推送到github仓库
- 将发生改变的文件提交到暂存区：git add .
- 将暂存区的文件提交到本地仓库：git commit -m '提交描述'
- 将本地仓库推送到远程仓库：git push

2. 文章的优化

使用next主题编写文章（注意，书写不是markdown规规范，而是hexo特有的功能，移植于next主题，故在其它地方会显示不出效果）

具体用法参考链接：https://theme-next.org/docs/tag-plugins/note

用法：
```
{% note [class] [no-icon] %}
Any content (support inline tags too.io).
{% endnote %}[class]   : default | primary | success | info | warning | danger.
[no-icon] : Disable icon in note.All parameters are optional.
```

使用Gallery相册，在文章中插入图片

区别于旧版的Gallery相册,新的Gallery相册会自动根据图片长度进行排版，书写也更加方便，与markdown格式一样。可根据需要插入到相应的md

用法：

{% gallery %}
markdown 图片格式
{% endgallery %}eg：{% gallery %}
![](https://gratisography.com/wp-content/uploads/2019/10/gratisography-scary-pumpkin-hand-900x600.jpg)
![](https://gratisography.com/wp-content/uploads/2019/10/gratisography-fresh-fish-dinner-900x600.jpg)
![](https://gratisography.com/wp-content/uploads/2019/10/gratisography-mountain-cloud-landscape-900x600.jpg)
![](https://picjumbo.com/wp-content/uploads/iphone-free-stock-photos-2210x3315.jpg)
![](https://picjumbo.com/wp-content/uploads/young-millennial-girl-drinking-lemonade-and-overlooking-the-city-2210x1473.jpg)
![](https://picjumbo.com/wp-content/uploads/modern-graphic-designer-essentials_free_stock_photos_picjumbo_HNCK4919-2210x1474.jpg)
{% endgallery %}

九、将你的Blog生成一个app

之前已使用PWA实现Web应用，直接安装到Chrome，桌面只要一个快接方式即可访问
为了更好的在手机上查看你的博客内容，你也可已将你的 Blog 生成一个app，安装到你的手机中

1. 准备

你的博客链接，例如：https://fly-liuhao.github.io/
应用图标（宽高要相同）以及应用启动图

2. 流程

打开网址：http://www.kxapp.com/
按照流程一步一步制作，最后打包app（可以选择 Android或者IOS）
下载安装包，发送到手机进行安装

十、总结

以上就是搭建个人博客的详细过程，如有遇到什么问题或者有什么疑问，留言到下方，大家一起帮你解决！
不积跬步无以至千里，希望大家都可以将自己的个人博客坚持写下去！

欢迎将你的个人博客链接留言在下方相互交换友链na~

手把手教你快速搭建个人博客 Hexo + Github相关推荐

手把手教你从零开始搭建个人博客，20分钟上手
一.前言大家好,最近一直在研究个人博客搭建,目前正在进行的有Django个人博客搭建系列,最近了解到还有很多现成的博客搭建框架,准备后面依次给大家分享下. 本文是基于Hexo框架来构建个人博客的,整 ...
如何使用华为云快速搭建个人博客
使用华为云快速搭建个人博客注册github个人账号下载gitbash并与本地相关联进入jekyll网站寻找自己喜欢的主题模板并转移到自己的github中配置模板登录华为云官网购买域名并配置 ...
【FastAPI 03】FastAPI快速搭建一个博客系统
标题:FastAPI快速搭建一个博客系统大家好,我是Kuls. 这是<小白学FastAPI>系列的第三篇文章. 今天我们主要讲的是FastAPI快速搭建一个博客系统. 这里可能有些小伙伴 ...
手把手教你快速搭建私服环境
手把手教你快速搭建私服环境,简单实用,一看就懂 1.准备工作:先下载Nxus Nexus 是 Maven 仓库管理器, 通过 nexus 可以搭建 maven 仓库,同时 nexus 还提供强大的仓库 ...
阿里云上基于WordPress快速搭建个人博客
阿里云上基于WordPress快速搭建个人博客文章目录阿里云上基于WordPress快速搭建个人博客一.服务器环境: 二.环境部署: 1.重置实例密码 2.链接ECS服务器 3.安装Apache ...
ghost博客mysql_centos 上快速搭建ghost博客方法分享
1. 介绍 Ghost 是一套基于 Node.js 构建的开源博客平台,具有易用的书写界面和体验,博客内容默认采用 Markdown 语法书写,目标是取代臃肿的 Wordpress.本篇文章主要是介绍 ...
如何使用Github+Hexo快速搭建个人博客
如何使用Github+Hexo快速搭建个人博客可以移步地址:https://zyt505050.gitee.io/2019/01/27/ru-he-shi-yong-github-hexo-kuai ...
基于Hexo框架快速搭建个人博客--文章一键发布（五）
基于Hexo框架快速搭建个人博客--文章一键发布一.文章对比二.发布到Github 三.一键发布四.总结博客链接: 会思想的苇草i 文章链接: 基于Hexo框架快速搭建个人博客–搭建(一) 基 ...
【如何把CSDN博客转为PDF？】手把手教你如何将CSDN博客以正确格式输出为PDF或打印
题目手把手教你如何将CSDN博客以正确格式输出为PDF或打印以下是本篇文章正文内容,欢迎朋友们进行指正,一起探讨,共同进步.--来自考研路上的lwj.QQ:2394799692 一.使用谷歌浏览器 ...