折叠播放列表 ≡ ⬇️

我用虚拟机里面的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,acceptnext直到完成。

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

subtitlesub

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中文文档

盘点国内免费好用的图床