hexo搭建个人博客并部署到gitee(附带yilia常见问题总结)

文章目录

  • 使用hexo搭建个人博客并发布到码云(yilia主题)
    • 1.下载node.js
    • 2.下载git
    • 3. 安装淘宝镜像
    • 4.安装hexo
    • 5.注册码云
    • 6.部署
    • 7.更改yilia主题
    • 8.yilia主题更改头像,添加音乐等(常见问题解决)

使用hexo搭建个人博客并发布到码云(yilia主题)

1.下载node.js

https://nodejs.org/en/
1)Node安装
按照安装过程依次点击即可,安装过程很简单。
(2)安装Git
按照网上的安装方式进行安装就可以了
https://www.cnblogs.com/ximiaomiao/p/7140456.html
(3)安装Hexo (下面出现的检测全部是在git中进行的)
检测node安装是否成功:

node -v

(返回版本号)

2.下载git

https://git-scm.com/
git安装:https://www.cnblogs.com/ximiaomiao/p/7140456.html
Git配置:http://www.xuanfengge.com/using-ssh-key-link-github-photo-tour.html

3. 安装淘宝镜像

安装淘宝的镜像源(如果错误就重来,因为连接可能不稳定,不要害怕多试几次就可以了)

npm install -g cnpm --registry=https://registry.npm.taobao.org

检测

cnpm

(返回cnpm的信息)

cnpm -v

(返回cnpm的版本信息)

4.安装hexo

安装hexo(如果失败重新来过就可以了)

cnpm install -g hexo-cli

检测

hexo -v

(返回hexo的版本信息)
hexo搭建个人博客并部署到gitee(附带yilia常见问题总结)_第1张图片
在本地建立blog文件夹
进入Git页面
pwd(查询目录所在位置)
mkdir Blog (在目录下建立文件夹Blog)(如果在以后的操作过程中出现问题无法解决就把这个文件夹删掉直接重新来过就可以了)
cd Blog/ (进入Blog文件夹)
pwd (检测是否进入Blog文件夹)
hexo init (即:初始化hexo)

ls -l (查看初始化获得的文件)

hexo s (启动hexo)

hexo搭建个人博客并部署到gitee(附带yilia常见问题总结)_第2张图片启动完毕即可本地访问

5.注册码云

1.注册
hexo搭建个人博客并部署到gitee(附带yilia常见问题总结)_第3张图片2.新建仓库
hexo搭建个人博客并部署到gitee(附带yilia常见问题总结)_第4张图片hexo搭建个人博客并部署到gitee(附带yilia常见问题总结)_第5张图片
(仓库名随便填,点击公开)
3.设置gitee密钥
参考链接

6.部署

1.下载插件

在Blog目录下安装一个hexo部署插件
cnpm install --save hexo-deployer-git

2.找到Blog文件中的 _config.yml 文件,使用编译器打开,添加以下代码,和自己码云一致
hexo搭建个人博客并部署到gitee(附带yilia常见问题总结)_第6张图片
更改以后进行保存,然后再Git里面输入

hexo clean
hexo g
hexo d

将本地文件部署到github新建的仓库中
然后通过访问 https://+自己的仓库名 就可以访问部署到gitee上的blog了

7.更改yilia主题

1.首先下载 yilia 主题

在Git中输入  git clone http://github.com/litten/hexo-theme-yilia.git  themes/yilia

2.找到Blog文件中的 _config.yml 文件
修改
以下位置
在这里插入图片描述
在这里插入图片描述(注意和自己码云对应)

3.重新部署

hexo clean
hexo g
hexo d

8.yilia主题更改头像,添加音乐等(常见问题解决)

1.进入blog的themes文件夹,找到yilia进入source文件夹
添加assets文件夹,里面添加img文件夹放入微信,头像文件为例。
hexo搭建个人博客并部署到gitee(附带yilia常见问题总结)_第7张图片2.进入yilia主题下的_config.yml文件
在这里插入图片描述注意:路径前要添加自己的仓库名称,我的是myblog作为参考。

微信,邮箱记得取消#注释

subnav:
  #github: "#"
  #weibo: "#"
  #rss: "#"
  #zhihu: "#"
  #qq: "#"
  weixin: "/assets/img/wechat.JPG"
  #jianshu: "#"
  #douban: "#"
  #segmentfault: "#"
  #bilibili: "#"
  #acfun: "#"
  mail: "mailto:[email protected]"
  #facebook: "#"
  #google: "#"
  #twitter: "#"
  #linkedin: "#"

然后设置微信

# 微信二维码图片地址
weixin: /mrcp9/assets/img/wechat.JPG

3.目录设置,文章截断
目录:

# 目录
# 目录设定:0-不显示目录; 1-文章对应的md文件里有toc:true属性,才有目录; 2-所有文章均显示目录
toc: 2

截断:yilia的配置文件中设置记得在编写的md文件要截断的位置添加

# 文章太长,截断按钮文字
#excerpt_link: more

4.目录显示问题
按照yilia页面提示设置即可
设置完成后编写md文件时在头部添加以下信息(以下是简单例子)
可以完成标题,标签等显示(注意- - -不能掉)

---
title: mysql学习
data: 2020-7-30
tags: mysql
---

5.为yilia添加作者名称,个性签名等
注意:找到yilia主题下的配置文件添加以下信息,自己设置,冒号后空一格

subtitle: '程序改变世界'
author: cp9

6.添加归档(同样在yilia主题配置文件下)

menu:
  主页: /
  归档: /archives/index.html

7.添加背景音乐(以网易云外链为例)

E:\myblog\themes\yilia\layout\_partial

进入此目录,找到left-col.ejs文件,添加如下配置,注意:放在前,id,type根据歌曲外链修改

<!-- 网易云音乐插件 -->
<% if (theme.music && theme.music.enable){
      %>
	<div style="position:absolute; bottom:120px left:auto; width:85%">
		<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="240" height="52" src="//music.163.com/outchain/player?type=2&id=<%=theme.music.id||480916%>&auto=<%=theme.music.autoplay?1:0%>&height=32"></iframe>
	</div>
<% } %>

然后进入yilia主题下的配置文件,添加以下配置

# 网易云音乐插件
music:
  enable: true
  #id: 480916 故乡的原风景 480353 永远同在 33314071 胖丁的歌 80887559 所粘皆心河
  autoplay: true  # 是否开启自动播放

重新部署,大功告成!
欢迎大家访问我的个人博客:http://hzwcp9.gitee.io/mrcp9

你可能感兴趣的:(笔记)