avatar
文章
196
标签
12
分类
12
首页
档案
标签
分类
链接
关于
列表
123
首页
档案
标签
分类
链接
关于
列表
免费搭建码云个人博客
|博客
阅读量:

下载安装Git

Git官网

点击Download 2.26.2 for Windows开始下载(2.26.2是Git的版本号，可能会变，直接下载最新版即可)

下载Git

安装Git，傻瓜式安装，除修改安装路径外都直接点击下一步

修改安装目录

打开命令提示符窗口测试git是否安装成功（注：不能生成批处理文件，不能以管理员运行命令提示符窗口）

1
git --version

安装成功样式

安装成功样式

下载安装Node.js

Node.js官网

选择任意版本进行下载

选择任意版本进行下载

安装Git，傻瓜式安装，除修改安装路径外都直接点击下一步

修改安装路径
修改安装路径

打开命令提示符窗口测试Node.js是否安装成功（注：不能生成批处理文件，不能以管理员运行命令提示符窗口）

1
node --version

安装成功样式

安装成功样式

切换淘宝镜像源

1
npm config set registry http://registry.cnpmjs.org

安装Hexo(通过命令)

桌面右键后点击Git Bash Here，也可以通过命令提示符窗口进行操作（不可以使用管理员身份启动，未尝试批处理运行）

桌面右键后点击Git Bash Here

输入以下命令安装Hexo

1
npm install -g hexo-cli

测试Hexo是否安装成功

1
hexo

安装成功样式

安装成功样式

使用命令提示符安装pug以及stylus的渲染器插件(不进行此步,博客无法展示)

1
2
npm install hexo-renderer-pug hexo-renderer-stylus --save	或者
yarn add hexo-renderer-pug hexo-renderer-stylus

使用命令提示符为博客安装本地文件推送到远程仓库插件

1
npm install hexo-deployer-git --save

创建一个空文件夹，运行Hexo生成本地博客

1
hexo init

文件夹的目录如下

一级目录 二级目录 作用
.deploy 需要部署的文件
node_modules Hexo插件
public 生成的静态网页文件
scaffolds 模板
source 博客正文和其他源文件，404 favicon CNAME等都放在这里
_drafts 草稿
_data 博客主题配置文件
_posts 文章
categories 分类
tags 标签
link 链接
themes 存放主题
_config.yml 全局配置文件
package.json

在生成本地博客的目录下打开命令提示符窗口，输入以下命令

1
hexo s

运行成功样式（可在浏览器输入localhost：4000进行访问查看）

运行成功样式

修改根目录下的_config.yml配置文件

修改第7行title名（作者使用的主题所修改到的地方）

title

修改第11行author名（作者使用的主题所修改到的地方）

在这里插入图片描述

修改第12行language(博客使用的语言，只介绍中文简体)

1
zh-CN

修改第17行url、18行root

1
2
写到这里有必要说明一下，作者是按照配置文件中的被修改的代码行号进行记录的
第17行和第18行的修改涉及到博客已经推送到码云上了，所以执行这一步的修改就需要先看博客推送

复制网站地址，粘贴到第17行

复制网站地址

截取从io后面的所有数据放置到第18行（与上图网站地址对比进行修改）

截取从io后面的所有数据放置到第18行

修改主题

邪丶魔狱
Hexo官网主题

想要我使用的主题的可以点进来滑到最下面，点击Butterfly跳转到下载界面进行下载

博客模板

选择喜欢的点击主题名

下载主题

点击Clone or download，再点击Download ZIP下载博客模板

下载博客模板

将模板解压到themes目录下，并复制被解压的文件夹名称

模板解压

修改第97行（将复制的文件夹名称粘贴到这里）

修改博客模板

新建码云仓库并添加修改第101行~第104行

登录并创建一个项目(自行注册登录,此处不再演示)

新建仓库

新建仓库

1
2
3
4
5
仓库名称任意(符合码云要求即可)
仓库路径任意(符合码云要求即可)
是否开源选择公开
选择语言选择JavaScript
勾选使用Readme文件初始化这个仓库

新建仓库
新建仓库

点击克隆/下载后再点击复制，获取项目地址

获取项目地址

修改第101行~第104行(将deploy下的代码复制到配置文件中的deploy下面)

1
2
3
4
deploy:
  type: git
  repository: (这里不要忽略:后面空格以下,将复制的码云仓库的地址粘贴到这里)
  branch: master

修改码云上传地址

平滑升级

1
复制主题目录下的_config.yml文件到根目录的source目录下的_data目录下(_data文件夹需要手动创建)，并修改文件名为butterfly.yml

_config.yml
butterfly.yml

部署博客

1
2
3
4
5
6
hexo clean # 清除生成的博客网页文件(博客目录中有更新时,就需要)
hexo g # 编译生成新的博客文件(编译时查看是否有异常打印)
hexo s # 本地运行查看博客(不建议在本地运行，无法展示出博客在码云上的问题)
git config --global user.name "用户名" # 引号中填入用户名，可以随意写
git config --global user.email "邮箱" # 引号中填入邮箱，最好写个人邮箱，不要瞎写
hexo d # 将博客文件上传到码云仓库(使用该命令上传到码云进行测试)

第一次hexo d会跳出输入账号密码的框框，输入要连接的码云账号密码即可

打开并登录码云，鼠标移动到我的码云上，再点击部署了博客的仓库

我的码云

点击服务，再点击Gitee Pages

Gitee Pages

勾选强制使用HTTPS(可不勾选)，再点击启动

在这里插入图片描述

部署完成后，点击网站地址访问码云博客（每一次hexo d后都需要更新部署）部署博客

部署问题（按照上面步骤走下来不会遇到以下问题）

部署到码云后，访问博客只有一行代码

1
没有安装pug以及stylus的渲染器插件，查看以上对应步骤安装

部署到码云后，访问博客没有格式

1
没有修改第17行的url和18行的root，查看以上对应步骤修改

修改配置文件后记得先保存，后进行清除、编译、部署和更新

修改根目录下的source目录下的_data目录中的butterfly.yml配置文件

butterfly.yml

部分图片无法访问(解决前需要保证图片的存在)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
无需修改的图片：
	1.favicon: /img/favicon.ico
	2.avatar:
    	img: /img/avatar.png
 		effect: false # 头像转圈(建议为false,为true会增加占用内存)
 	3.lodding_bg:
  		flink: /img/friend_404.gif #404图片
  		post_page: /img/404.jpg #404图片
  	  error_404:
  		enable: true # 是否使用自定义404页面
  		subtitle: '加载失败' # 访问失败页面展示信息
  		background:
  	4.valine:
  		enable: false
  		appId: 
  		appKey: 
  		notify: false
  		verify: false
  		pageSize: 10
  		avatar: monsterid
  		lang: zh-CN
  		placeholder: Please leave your footprints
  		guest_info: nick,mail,link
  		recordIP: false
  		serverURLs: 
  		emojiCDN: 
  		enableQQ: false
  		requiredFields: nick,mail
  		bg: /img/comment_bg.png
  		count: false
  	5.reward:
  		enable: true # true:开启打赏 false:关闭打赏
  		QR_code:
    	  - itemlist:
        	img: /img/WeChat.jpg
        	text: 微信
    	  - itemlist:
        	img: /img/PayTreasure.jpg
        	text: 支付宝
 需要修改的图片：(我的网站路径:https://asd2559.gitee.io/asd123)
 	1.default_top_img: /asd123/img/index.jpg # 在/img前加入博客地址io后的路径
 	2.cover:
  		# 是否顯示文章封面
  		index_enable: true
  		aside_enable: true
  		archives_enable: true
  		# 封面顯示的位置
 		# 三個值可配置 left , right , both
  		position: both
 		# 當沒有設置cover時，默認的封面顯示
  		default_cover:
    	  - /asd123/img/post.jpg
    3.ICP:
  		enable: false
  		url:
  		text:
  		icon: /asd123/img/icp.png

修改第8行到第16行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
menu:
  Home: / || fa fa-home
  Archives: /archives/ || fa fa-archive
  Tags: /tags/ || fa fa-tags
  Categories: /categories/ || fa fa-folder-open
  Link: /link/ || fa fa-link
  About: /about/ || fa fa-heart
  List||fa fa-list:
    - Music || /music/ || fa fa-music
    - Movie || /movies/ || fa fa-film
<!---------------------------------------------->
menu:
  首页: / || fa fa-home
  档案: /archives/ || fa fa-archive
  标签: /tags/ || fa fa-tags
  分类: /categories/ || fa fa-folder-open
  链接: /link/ || fa fa-link
  关于: /about/ || fa fa-heart
  列表||fa fa-list:
    - Music || /music/ || fa fa-music
    - Movie || /movies/ || fa fa-film

代码换行

修改根目录下的_config.yml配置文件的第50行

1
2
3
4
5
6
7
highlight:
  enable: true
  line_number: false
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

修改根目录下的source目录下的_data目录中的butterfly.yml配置文件的第41行

1
code_word_wrap: true

开启本地搜索(博客内部搜索)

修改第76行

1
2
3
4
5
local_search:
  enable: true # true:开启本地搜索 false:关闭本地搜索
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}"

在博客根目录打开命令提示符窗口，安裝hexo-generator-search插件

1
npm install hexo-generator-search --save

修改第158行，404异常信息（页面报404后前段显示的信息）

1
2
3
4
error_404:
  enable: true
  subtitle: '加载失败'
  background:

修改第266行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
valine:
  enable: false
  appId: 
  appKey: 
  notify: false
  verify: false
  pageSize: 10
  avatar: monsterid
  lang: zh-CN
  placeholder: Please leave your footprints
  guest_info: nick,mail,link
  recordIP: false
  serverURLs:
  emojiCDN: 
  enableQQ: false
  requiredFields: nick,mail
  bg: /img/comment_bg.png
  count: false

修改第296行

1
2
3
4
5
6
7
8
facebook_comments:
  enable: false
  app_id:
  user_id: 
  pageSize: 10
  order_by: social
  lang: zh_CN
  count: false

创建音乐

在根目录下的source中创建music文件夹，再在music文件夹中创建index.md，打开该文件写入以下信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
---
title: 音乐
date: 2020-04-28 16:10:14
type: "music"
author: 123

---

{% aplayerlist %}
{
    "narrow": false,
    "autoplay": true,
    "mode": "circulation",
    "mutex": true,
    "theme": "#e6d0b2",
    "preload": "metadata",
    "listmaxheight": "513px",
    "music": [
        {
            "title": "念旧",
            "author": "阿悠悠",
            "url": "/123/music/阿悠悠 - 念旧.flac",
            "pic": "/123/img/avatar.png"
        },
        {
            "title": "责无旁贷",
            "author": "阿悠悠",
            "url": "/123/music/阿悠悠 - 责无旁贷.mp3",
            "pic": "/123/img/avatar.png"
        },
        {
            "title": "俩俩相忘",
            "author": "曲肖冰",
            "url": "/123/music/曲肖冰 - 俩俩相忘.mp3",
            "pic": "/123/img/avatar.png"
        },
        {
            "title": "不谓侠",
            "author": "CRITTY",
            "url": "/123/music/CRITTY - 不谓侠.mp3",
            "pic": "/123/img/avatar.png"
        },
        {
            "title": "葬仙",
            "author": "叶里",
            "url": "/123/music/叶里 - 葬仙.mp3",
            "pic": "/123/img/avatar.png"
        },
        {
            "title": "丑八怪",
            "author": "薛之谦",
            "url": "/123/music/薛之谦 - 丑八怪.flac",
            "pic": "/123/img/avatar.png"
        },
        {
            "title": "红昭愿",
            "author": "鞠婧祎",
            "url": "/123/music/鞠婧祎 - 红昭愿.flac",
            "pic": "/123/img/avatar.png"
        },
        {
            "title": "BINGBIAN病变",
            "author": "鞠文娴",
            "url": "/123/music/鞠文娴 - BINGBIAN病变.mp3",
            "pic": "/123/img/avatar.png"
        },
        {
            "title": "演员",
            "author": "田馥甄",
            "url": "/123/music/田馥甄 - 演员.flac",
            "pic": "/123/img/avatar.png"
        },
        {
            "title": "绅士",
            "author": "薛之谦",
            "url": "/123/music/薛之谦 - 绅士.flac",
            "pic": "/123/img/avatar.png"
        }
    ]
}
{% endaplayerlist %}
1
2
3
4
5
title ：歌名
author ：作者
url ：歌的路径地址，是在使用的博客模板下的source中创建了一个music文件夹，之所以没使用云存储是因为使用的七牛云是http协议的，博客是https协议的，两者之间有冲突，又不想有过多的麻烦(其实刚开始是使用的http，瞎捣鼓弄好了，但是过了一段时间再点开的时候，后台直接成了https协议去访问了，导致访问不到，就直接弄了个文件去存储，也不需要担心每次上传要花费多长时间，毕竟只要这个文件没什么改变的话去频繁的上传更新，除了第一次上传之外，还是挺快的)
pic ：照片的路径地址，也不可以是http协议的
注：如果10首歌缺的有点少的话，想再多加几首，需要在Typora中打开源代码模式(快捷键Ctrl + /)进行复制，不然hexo g或hexo d时会抛出异常，也可以使用Nodepad++打开

安装hexo-tag-aplayer插件，命令提示符窗口中输入

1
npm install --save hexo-tag-aplayer

问题解决

开启搜索后，页面显示的搜索是英文的

1
修改根目录下的配置文件_config.yml的第12行(详细请看上面)

标签

命令提示符创建标签文件

1
hexo new page tags

修改根目录下的source文件夹下的tags文件夹下的index.md文件(对照以下格式修改)

1
2
3
4
5
---
title: 标签
date: 2018-01-05 00:00:00
type: "tags"
---

分类

命令提示符创建分类文件

1
hexo new page categories

修改根目录下的source文件夹下的categories文件夹下的index.md文件(对照以下格式修改)

1
2
3
4
5
---
title: 分类
date: 2018-01-05 00:00:00
type: "categories"
---

创建并发布博客文章

在博客根目录下的source文件夹下的_posts文件夹下创建md文件

1
2
3
4
5
6
7
8
---
title: 文章标题
date: 创建日期
author: 作者
tags: 文章标签
categories: 分类(文章类型)
cover: 展示图片(可以使用链接，也可以将图片放置到根目录下的themes文件夹下的hexo-theme-butterfly-dev文件夹下的source文件夹下的img文件夹下)
---

例如

1
2
3
4
5
6
7
8
---
title: IDEA配置通过空格或点（英文状态下）代替回车键快速插入所选方法
date: 2020-04-28 11:32:29
author: 123
tags: IDEA
categories: IDEA
cover: https://img-blog.csdnimg.cn/20200428112338162.jpg
---

快速创建Markdown文件(文件生成位置：根目录下的source文件夹下的_posts文件夹下)

1
hexo new 文件名 # 例：hexo new Java (不需要写文件后缀)

使用Notepad++查看Markdown文章

Notepad++

Hexo通过Markdown转换成html文件

1
2
3
hexo clean
hexo g
hexo d

使用Typora

下载Typora

Typora官网
Typora官网

下滑到下载位置，选择对应系统的安装包进行下载

下滑到下载位置，选择对应系统的安装包进行下载

根据电脑的版本选择下载

根据电脑的版本选择下载

安装Typora

1
傻瓜式安装，除修改默认安装路径外，都直接点击下一步

使用Typora写文章

使用Typora写文章

文章作者: 123
文章链接: https://gao5805123.github.io/123/2020/05/03/%E5%85%8D%E8%B4%B9%E6%90%AD%E5%BB%BA%E7%A0%81%E4%BA%91%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 123！
博客
打赏
  • 微信
    微信
  • 支付宝
    支付宝
相关推荐
2020-10-12
Hexo码云博客添加helper-live2d动态模型
2020-11-27
hexo博客上传码云报The "mode" argument must be integer. Received an instance of Object
2020-12-04
hexo码云博客运行hexo clean,hexo g,hexo d等命令时报错
2020-05-04
命令提示符中编译码云博客或上传码云博客时报错
2020-08-05
解决无法访问github博客的问题
繁