创建码云个人博客
- **下载安装Git**
- **下载安装Node.js**
- **安装Hexo(通过命令)**
- **使用命令提示符安装pug以及stylus的渲染器插件(不进行此步,博客无法展示)**
- **使用命令提示符为博客安装本地文件推送到远程仓库插件**
- **创建一个空文件夹,运行Hexo生成本地博客**
- **修改根目录下的_config.yml配置文件**
- **部署博客**
- **第一次hexo d会跳出输入账号密码的框框,输入要连接的码云账号密码即可**
- **打开并登录码云,鼠标移动到我的码云上,再点击部署了博客的仓库**
- **点击服务,再点击Gitee Pages**
- **勾选强制使用HTTPS(可不勾选),再点击启动**
- **部署完成后,点击网站地址访问码云博客(每一次hexo d后都需要更新部署)**![部署博客](https://img-blog.csdnimg.cn/20200428210946868.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbzU4MDUxMjM=,size_16,color_FFFFFF,t_70)
- **部署问题(按照上面步骤走下来不会遇到以下问题)**
- **修改根目录下的source目录下的_data目录中的butterfly.yml配置文件**
- **问题解决**
- **创建并发布博客文章**
- **使用Typora**
下载安装Git
点击Download 2.26.2 for Windows开始下载(2.26.2是Git的版本号,可能会变,直接下载最新版即可)
安装Git,傻瓜式安装,除修改安装路径外都直接点击下一步
打开命令提示符窗口测试git是否安装成功(注:不能生成批处理文件,不能以管理员运行命令提示符窗口)
git --version
安装成功样式
下载安装Node.js
选择任意版本进行下载
安装Git,傻瓜式安装,除修改安装路径外都直接点击下一步
打开命令提示符窗口测试Node.js是否安装成功(注:不能生成批处理文件,不能以管理员运行命令提示符窗口)
node --version
安装成功样式
切换淘宝镜像源
npm config set registry http://registry.cnpmjs.org
安装Hexo(通过命令)
桌面右键后点击Git Bash Here,也可以通过命令提示符窗口进行操作(不可以使用管理员身份启动,未尝试批处理运行)
输入以下命令安装Hexo
npm install -g hexo-cli
测试Hexo是否安装成功
hexo
安装成功样式
使用命令提示符安装pug以及stylus的渲染器插件(不进行此步,博客无法展示)
npm install hexo-renderer-pug hexo-renderer-stylus --save 或者
yarn add hexo-renderer-pug hexo-renderer-stylus
使用命令提示符为博客安装本地文件推送到远程仓库插件
npm install hexo-deployer-git --save
创建一个空文件夹,运行Hexo生成本地博客
hexo init
文件夹的目录如下
一级目录 | 二级目录 | 作用 |
---|---|---|
.deploy | 需要部署的文件 | |
node_modules | Hexo插件 | |
public | 生成的静态网页文件 | |
scaffolds | 模板 | |
source | 博客正文和其他源文件,404 favicon CNAME等都放在这里 | |
_drafts | 草稿 | |
_data | 博客主题配置文件 | |
_posts | 文章 | |
categories | 分类 | |
tags | 标签 | |
link | 链接 | |
themes | 存放主题 | |
_config.yml | 全局配置文件 | |
package.json |
在生成本地博客的目录下打开命令提示符窗口,输入以下命令
hexo s
运行成功样式(可在浏览器输入localhost:4000进行访问查看)
修改根目录下的_config.yml配置文件
修改第7行title名(作者使用的主题所修改到的地方)
修改第11行author名(作者使用的主题所修改到的地方)
修改第12行language(博客使用的语言,只介绍中文简体)
zh-CN
修改第17行url、18行root
写到这里有必要说明一下,作者是按照配置文件中的被修改的代码行号进行记录的
第17行和第18行的修改涉及到博客已经推送到码云上了,所以执行这一步的修改就需要先看博客推送
复制网站地址,粘贴到第17行
截取从io后面的所有数据放置到第18行(与上图网站地址对比进行修改)
修改主题
想要我使用的主题的可以点进来滑到最下面,点击Butterfly跳转到下载界面进行下载
选择喜欢的点击主题名
点击Clone or download,再点击Download ZIP下载博客模板
将模板解压到themes目录下,并复制被解压的文件夹名称
修改第97行(将复制的文件夹名称粘贴到这里)
新建码云仓库并添加修改第101行~第104行
登录并创建一个项目(自行注册登录,此处不再演示)
新建仓库
仓库名称任意(符合码云要求即可)
仓库路径任意(符合码云要求即可)
是否开源选择公开
选择语言选择JavaScript
勾选使用Readme文件初始化这个仓库
点击克隆/下载后再点击复制,获取项目地址
修改第101行~第104行(将deploy下的代码复制到配置文件中的deploy下面)
deploy:
type: git
repository: (这里不要忽略:后面空格以下,将复制的码云仓库的地址粘贴到这里)
branch: master
平滑升级
复制主题目录下的_config.yml文件到根目录的source目录下的_data目录下(_data文件夹需要手动创建),并修改文件名为butterfly.yml
部署博客
hexo clean # 清除生成的博客网页文件(博客目录中有更新时,就需要)
hexo g # 编译生成新的博客文件(编译时查看是否有异常打印)
hexo s # 本地运行查看博客(不建议在本地运行,无法展示出博客在码云上的问题)
git config --global user.name "用户名" # 引号中填入用户名,可以随意写
git config --global user.email "邮箱" # 引号中填入邮箱,最好写个人邮箱,不要瞎写
hexo d # 将博客文件上传到码云仓库(使用该命令上传到码云进行测试)
第一次hexo d会跳出输入账号密码的框框,输入要连接的码云账号密码即可
打开并登录码云,鼠标移动到我的码云上,再点击部署了博客的仓库
点击服务,再点击Gitee Pages
勾选强制使用HTTPS(可不勾选),再点击启动
部署完成后,点击网站地址访问码云博客(每一次hexo d后都需要更新部署)![部署博客](https://img-blog.csdnimg.cn/20200428210946868.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbzU4MDUxMjM=,size_16,color_FFFFFF,t_70)
部署问题(按照上面步骤走下来不会遇到以下问题)
部署到码云后,访问博客只有一行代码
没有安装pug以及stylus的渲染器插件,查看以上对应步骤安装
部署到码云后,访问博客没有格式
没有修改第17行的url和18行的root,查看以上对应步骤修改
修改配置文件后记得先保存,后进行清除、编译、部署和更新
修改根目录下的source目录下的_data目录中的butterfly.yml配置文件
部分图片无法访问(解决前需要保证图片的存在)
无需修改的图片:
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行
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行
highlight:
enable: true
line_number: false
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
修改根目录下的source目录下的_data目录中的butterfly.yml配置文件的第41行
code_word_wrap: true
开启本地搜索(博客内部搜索)
修改第76行
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插件
npm install hexo-generator-search --save
修改第158行,404异常信息(页面报404后前段显示的信息)
error_404:
enable: true
subtitle: '加载失败'
background:
修改第266行
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行
facebook_comments:
enable: false
app_id:
user_id:
pageSize: 10
order_by: social
lang: zh_CN
count: false
创建音乐
在根目录下的source中创建music文件夹,再在music文件夹中创建index.md,打开该文件写入以下信息
---
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 %}
title :歌名
author :作者
url :歌的路径地址,是在使用的博客模板下的source中创建了一个music文件夹,之所以没使用云存储是因为使用的七牛云是http协议的,博客是https协议的,两者之间有冲突,又不想有过多的麻烦(其实刚开始是使用的http,瞎捣鼓弄好了,但是过了一段时间再点开的时候,后台直接成了https协议去访问了,导致访问不到,就直接弄了个文件去存储,也不需要担心每次上传要花费多长时间,毕竟只要这个文件没什么改变的话去频繁的上传更新,除了第一次上传之外,还是挺快的)
pic :照片的路径地址,也不可以是http协议的
注:如果10首歌缺的有点少的话,想再多加几首,需要在Typora中打开源代码模式(快捷键Ctrl + /)进行复制,不然hexo g或hexo d时会抛出异常,也可以使用Nodepad++打开
安装hexo-tag-aplayer插件,命令提示符窗口中输入
npm install --save hexo-tag-aplayer
问题解决
开启搜索后,页面显示的搜索是英文的
修改根目录下的配置文件_config.yml的第12行(详细请看上面)
标签
命令提示符创建标签文件
hexo new page tags
修改根目录下的source文件夹下的tags文件夹下的index.md文件(对照以下格式修改)
---
title: 标签
date: 2018-01-05 00:00:00
type: "tags"
---
分类
命令提示符创建分类文件
hexo new page categories
修改根目录下的source文件夹下的categories文件夹下的index.md文件(对照以下格式修改)
---
title: 分类
date: 2018-01-05 00:00:00
type: "categories"
---
创建并发布博客文章
在博客根目录下的source文件夹下的_posts文件夹下创建md文件
---
title: 文章标题
date: 创建日期
author: 作者
tags: 文章标签
categories: 分类(文章类型)
cover: 展示图片(可以使用链接,也可以将图片放置到根目录下的themes文件夹下的hexo-theme-butterfly-dev文件夹下的source文件夹下的img文件夹下)
---
例如
---
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文件夹下)
hexo new 文件名 # 例:hexo new Java (不需要写文件后缀)
使用Notepad++查看Markdown文章
Hexo通过Markdown转换成html文件
hexo clean
hexo g
hexo d
使用Typora
下载Typora
下滑到下载位置,选择对应系统的安装包进行下载
根据电脑的版本选择下载
安装Typora
傻瓜式安装,除修改默认安装路径外,都直接点击下一步