折叠播放列表 ≡ ⬇️

我用虚拟机里面的Win10演示

准备环境

  1. GitHub账号注册地址
  2. Git下载地址
  3. 下载NodeJs下载地址
  4. 下个Visual Studio Code来编辑文件下载地址（这个是为了让你更好得编辑yml文件，防止格式不正确，如果你有其他的，可以用其他的编辑器）

上面的 3 个应用可以直接下载，等会再安装

注册Github账号

如果你有github账号，直接从第六步开始

输入账号/邮箱/密码。账号必须唯一

进Github网站.png

这一步是验证你是不是人机，图像没出来的话，请等一等，或者刷新一下。

验证.png

不用管往下拉Complete SignUp

往下拉.png

到这里验证一下邮箱。你可以登陆你刚才注册用的邮箱，看下邮件，点击邮件里面的验证Verify Email。

邮箱验证.png

Create a repository

创建库.png

你的用户名叫什么，就[用户名].github.io 一定要叫这个名字。像下面这样，还有记得点初始化一个README文件。很重要！！！！

给你的库取名字.png

创建好后就是下面这种情况

sign-up-github-8.png

访问一下看行不行，正常情况都能访问。（如果你是之前创建的Github账号是要去settings里面设置配置pages，现在创建了这个名字的Repository资料库就行了）。

完成github方面内容.png

安装Git

双击安装包，一直点next，要注意勾选Additional icons就行。安装好后，桌面有个左上角的图标的快捷方式，就算安装成功了。

git-install.png

下载NodeJs

下载好后双击安装的NodeJs.msi文件，一直点击next，accept，next直到完成。

nodejs-1.png

安装完成后，按win+R键，输入cmd。再输入node -v或者npm -v，如果有版本号输出，那就是安装好了。

nodejs-2.png

VsCode安装

一直点下一步就行了，记得点一个创建桌面快捷方式。安装好后有个快捷方式

icons.png

安装

必须执行的操作

输入并执行以下命令，一条一条复制粘贴按回车。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
npm config set registry https://registry.npm.taobao.org

npm config get registry

npm install -g hexo-cli

cd Desktop

mkdir blog

cd blog

hexo init

npm install

hexo g

hexo s

operation-1.png

在浏览器中输入localhost:4000会看到以下页面

operation-2.png

返回之前的命令行窗口，按ctrl+c输入Y。确定你在 Desktop/blog/文件夹下时，输入以下命令。

1
2
3
4
5
6
7
8
9
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

npm install hexo-renderer-pug hexo-renderer-stylus --save

cd ..

git clone https://github.com/young1lin/hexo-butterfly-auxiliary-folder.git

cd ../blog

operation-3.png

将下面的/hexo-butterfly-auxiliary-folder/_data文件夹剪切到/blog/source文件夹下。如图所示。

blog_data.png

双击VS Code快捷键，然后在里面打开文件夹，操作如下

operation-5.png

更改/blog/_config.yml文件中的theme，将landscape改成butterfly。操作如下。

operation-6.png

到这一步就完事了，在blog文件夹下输入下面的命令可以在本地跑了

1
2
3
hexo g

hexo s

自定义一些简单的内容

在/blog下的_config.yml 里面可以改

_config-yml.png

_config-yml-display.png

在/blog 下面执行 hexo new page tags ，找到对应文件夹下面的index.md文件，在下面的文件上加上 type: "tags"

create-tags-categories-1.png

在/blog 下面执行 hexo new page categories 和上面的操作一样，找到/blog/categories/文件夹下面的index.md文件，在下面的文件上加上 type: "categories"。这里个tags改成categories就行了。
create-tags-categories-1.png

aside这里可以改公告内容，侧边栏在哪边显示等等

aside.png

avatar:

img: /img/yinyang.png

effect: false # 这个是是否旋转你的头像，默认是false

img 是图片路径，在/blog /themes/butterfly/source/img下。粘贴自己想上传的头像，把这里的路径改一下，就可以了。我建议改成去图床获取头像，减少页面加载时。例如 img: https://i.loli.net/2020/08/15/cAenSihrD4CI3p9.png

image.png

subtitle的sub

subtitle-font.png

defual_top_img 图片中介绍

top_img.png
top_img_display.png

搜索cover这个是默认的文章封面，第二张图是文章中如何更改封面，第三张图是封面展示

default_cover_setting.png

change_cover_tags_categories.png

image.png

ClickShowText 三选一，我建议是第三个

click-show-text.png

click-show-text-display.png

footer_custom_text 改成你想要展示的内容

footer_custom_text.png

foot-display.png

添加 QQ 音乐列表，以及如何获得音乐 ID和音乐列表 ID。

  1. 网页登录QQ音乐
  2. 到你的歌单中
  3. 按F12，点到控制台顶部network
  4. 刷新页面
  5. https://c.y.qq.com/qzone/fcg-bin/fcg_ucc_getcdinfo_byids_cp.fcg 这个请求响应里面，disstid: "7652784085" 这就是歌单 id，songlist 下是该歌单下所有歌曲信息（里面有很多重复的请求，外表光鲜亮丽，，网页版 QQ 音乐已经烂了，很多无用的请求虽然只有几 ms）。
  6. 具体使用歌单 ID，请参考

更多设置，请参考

写文章

可以通过两种方式，

  1. hexo new ‘’这是一片文章’’

  2. 直接在blog/source/_posts/中创建 md 文件，其实就是文本文件，你只要改后缀名就行了

文章头部有以下信息

1
2
3
4
5
6
7
8
---
title: 搭建免费博客网站懒人包
date: 2020-07-10 21:51:58
tags: “搭建博客”
categories: "搭建博客"
# 如果hexo g生成文章时报错，请把 Front-matter 也就是这里的内容删了，重新写一遍
# ...等等，还要设置其他具体内容例如该文章头部图片，尾部图片等等，[请参考](https://demo.jerryc.me/posts/dc584b87/)
---

部署到 Github 上

同样的，在 /blog文件夹下，进行输入命令。通过 Git bash来操作，双击桌面的Git bash。

1
2
3
4
5
6
7
8
9
10
11
12
13
cd Desktop/blog

npm install hexo-deployer-git --save

git config --global user.name "你的 github 名字"

git config --global user.email "你的邮箱"

ssh-keygen -o
# 一直按回车就行了

cat ~/.ssh/id_rsa.pub
# 复制下面内容

deploy-1.png

到你的github下面的xxxx.github.io repository 下面，按步骤点击

deploy-2.png

添加 deploy key

deploy-3.png

更改/blog下面的 _config.yml 文件。按照图中内容输出

deploy-4.png

在Git bash 里面输入。执行完下面三个命令，会让你输入用户名和密码，输你自己的 Github的用户名和密码

1
2
3
4
5
hexo clean

hexo g

hexo d

hexo-deploy-5-1.png

hexo-deploy-5-2.png

一分钟左右，甚至马上你就可以访问xxxxx.github.io 这个xxxx是你的用户名

hexo-deploy-6.png

之后部署

写一篇文章并部署至 GithubPages （xxxx.github.io）

在 Teminal 中 /blog 文件夹下输入下面命令

1
2
3
4
5
6
7
8
9
hexo new "这是一篇文章"

# 如果你改动了除了文章下的文件，我建议你执行一下这个命令
hexo clean

hexo g

hexo d
# 至此搞定

可以在hexo g 之后，执行hexo s，来在本地运行，访问 localhost:4000 先审视一遍文章。

附录

推荐的图床

超过 1M 的图片，我建议压缩一下

  1. sm.ms这个不需要登陆就可以传图片，但是为了之后的图片找回，最好还是登陆一下，国内也能访问。最好不要把大图片放在img文件夹下，加载非常慢。低效。其他图床要么要登陆才能传，要么有很多限制，要么大陆访问不了。

  2. 公益图床。

  3. 路过图床。

  4. 其他什么七牛云之类要实名认证的，我不推荐，操作极其繁琐。

Markdown编辑器

我推荐 Typora 。下了腾讯管家的，可以在它的软件管家下载这个软件，或者 Google搜官网（我试过了，官网下载超级慢）。

如果你有更好用的 MarkDown 编辑器推荐的话，欢迎留言。

文章格式建议

  1. 英文字母与中文空格出一行，或者用 1左边的按键输出的符号，包裹住英文字符。
  2. 每个段落阐明不同意思，Markdown编辑器已经默认帮你每个段落隔开一行了。
  3. 一个#号表示一级标题，##表示二级标题，以此类推。
  4. 更多文章格式参考
  5. 更多 Markdown 语法的介绍，可以看这里

利用 CDN 和域名加速你的 Github Pages

在source文件夹下，新增 CNAME文件，填上你的域名。具体操作，参考这里。我翻了几十篇博客，找到这个适合的。域名购买以及 CDN选择，参考那篇文章。可以用免费的域名（不推荐，除非你只是拿来玩一玩的），也可以买 me 结尾的域名，具体购买，知乎上有域名购买推荐，例如这篇

参考

hexo

hexo的butterfly主题

npm配置国内镜像资源+淘宝镜像

Markdown中文文档

盘点国内免费好用的图床