Hexo博客创建

使用hexo框架搭建blog

软件准备

(1)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

(2)Node.js      

https://nodejs.org/en/

 

安装过程:

(1)Node安装

按照安装过程依次点击即可,安装过程很简单。

(2)安装Git

按照网上的安装方式进行安装就可以了

https://www.cnblogs.com/ximiaomiao/p/7140456.html

(3)安装Hexo   (下面出现的检测全部是在git中进行的)

———————————————————————————————————————

检测node安装是否成功:

node -v

(返回版本号)

npm -v

(返回版本号)

———————————————————————————————————————

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

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

检测

cnpm

(返回cnpm的信息)

cnpm -v

(返回cnpm的版本信息)

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

cnpm install -g hexo-cli

检测

hexo -v

(返回hexo的版本信息)

 

初始化操作过程:

在本地建立blog文件夹

进入Git页面

pwd   (查询目录所在位置)

mkdir Blog   (在目录下建立文件夹Blog)(如果在以后的操作过程中出现问题无法解决就把这个文件夹删掉直接重新来过就可以了)

———————————————————————————————————————

cd Blog/   (进入Blog文件夹)

pwd    (检测是否进入Blog文件夹)

———————————————————————————————————————

hexo init  (即:初始化hexo)

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

hexo s   (启动hexo)

 

http://localhost:4000

这样就可以在本地4000端口查看自己的网站了

进一步深化操作过程1(将网站部署到Github上)

首先申请一个github账号,然后再github中按照   自己的昵称+.github.io 建立一个仓库(repository)(例:hansonpang99.github.io)

在Blog目录下安装一个hexo部署插件

cnpm install --save hexo-deployer-git

找到Blog文件中的   _config.yml  文件,使用编译器打开,建议使用   Visual Studio Code打开

注:Visual Studio Code的好处:1.支持的语言种类多,

                             2.视图简洁

                             3.拥有插件种类多

 

找到这部分代码,(原始的是没有repo,和branch的,而且type后面也没有东西)

对这段代码进行更改

type    一个名字,建议写成git方便识别

repo    repository仓库地址   将刚刚新建的github仓库地址复制到这里就可以了

branch  分支这里设置管理员  master

更改以后进行保存

然后再Git里面输入 hexo d     将本地文件部署到github新建的仓库中

———————————————————————————————————————

然后通过访问     https://+自己的仓库名   就可以访问部署到github上的blog了

(例:https://hansonpang99.github.io

进一步深化操作过程2(更换Blog的主题)

这里以  yilia  主题为例进行更换

———————————————————————————————————————

首先下载  yilia  主题

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

                                 (克隆地址)               (克隆之后的本地位置)

找到Blog文件中的   _config.yml  文件,使用编译器打开,建议使用   Visual Studio Code打开

 

找到这部分代码(即theme)

将冒号后面的内容改为刚刚新建的yilia

———————————————————————————————————————

hexo clean            清除数据库之类

hexo g               生成静态网站

hexo d               将现在的文件部署到github中

这样就实现了主题的更改

进一步深化操作过程3(在建好的博客中添加相册功能)

准备工作:

安装python

下载地址:https://www.python.org/

 

下载完成后点击安装,安装教程:

https://blog.csdn.net/qq_25814003/article/details/80609729

在安装时选择自定义安装,其他注意事项如图所示

 

安装成功后,进行检测,进入cmd中输入  python

出现下图所示界面,则证明安装成功。

 

正式操作:

1.在github中创建一个新的仓库,命名为BlogBackup。

2. 将下面的github仓库中的文件以zip格式下载到本地

仓库地址:https://github.com/lawlite19/Blog-Back-Up

具体操作:

 

3.下载到本地后,在本地找一个合适的位置进行解压。

解压结果

 

4.进入解压后的文件中,将min_photos和photos两个文件夹中的照片全部删除,并将自己要上传的照片放到photos文件夹中,照片的命名规则为:2015-05-01_XXX.jpg   (jpg可更改为其他图片格式)、

 

5. 在解压后的文件中,使用Visaul Studio Code打开tool.py文件,并将文件中的地址改成自己的博客文件夹中的data.json地址。

 

 

6. 在解压后的文件中,右击鼠标,点击git bash here(出现该操作的前提是已安装git)

 

7.将该文件提交到自己刚刚新建的github库(BlogBackup)中

具体操作:

在打开的Git页面中,

(1)输入 git init   (把public文件夹转成一个git仓库)

git add . (git add -A) (把该文件夹中所有的东西加载到本地仓库里)

git commit -m “test”    (提交信息)

git  remote add photo [email protected]:hansonpang99/BlogBackup.git

(加粗部分对应你的仓库地址,如图所示)

 

git push photo master  (将文件提交到github仓库)

 

8.进入到你的博客目录下使用Git执行 hexo new page "photos",就会出现一个这样的新目录

9.配置 Yilia 主题让其显示出来.在Blog/themes/yilia/_config.yml文件中这样设置

 

 

10.将样式文件放到photos文件夹下

样式文件地址:

https://github.com/lawlite19/Blog-Back-Up/tree/master/blog_photos_copy 

 

修改样式文件中的ins.js文件,主要是里面的render函数

其中的url对应到你的github放图片的地址(即第1步创建的仓库地址)

 

11.进入图片文件夹中(即下载的Blog-Back-Up-master文件夹中)使用tool.py脚本处理图片

在Blog-Back-Up-master文件夹中打开Git页面中,输入  python tool.py  处理图片

12.在本地的博客目录下,打开git

输入 hexo clean

     hexo g

     hexo s   (在本地检测是否成功,成功后执行下一步,否则解决问题)

     hexo d    (将文件部署到github)

13.以后每次在photos中添加图片后,重复11,12步就可以完成部署到github了。

进一步深化操作过程4(添加背景音乐 (网易云音乐))

1.打开网易云音乐首页,复制选择的背景音乐分享外链

https://music.163.com/    在网易云网页中选中想要使用的音乐,进入播放界面,

点击   “生成外链播放器”

 

(注:有版权的歌曲不能生成外链)

复制生成的代码

 

2、引入播放器代码

在themes/yilia/layout/_partial/left-col.ejs文件nav标签中添加如下代码

将代码中的红色部分和刚刚复制的网易云外链代码进行对照,将对应部分进行替换(不替换的话使用的是 纸短情长 歌曲)

<!-- 网易云音乐插件 -->

<% 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||1334445174%>&auto=<%=theme.music.autoplay?1:0%>&height=32"></iframe>

       </div>

<% } %>

 

3、在yilia主题配置文件中添加属性

 

# 网易云音乐插件

music:

  enable: true

  #id: 1332647902  # 网易云分享的ID

  autoplay: true  # 是否开启自动播放

(注:在KeXueShangWang条件下,无法自动播放)

参考网址:

https://zhousiwei.gitee.io/2019/05/09/Hexo%E5%8D%9A%E5%AE%A2yilia%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E8%83%8C%E6%99%AF%E9%9F%B3%E4%B9%90(%E7%BD%91%E6%98%93%E4%BA%91%E9%9F%B3%E4%B9%90)/

进一步深化操作过程5(添加helper-live2d动态模型)

参考网址:

https://zhousiwei.gitee.io/2019/05/05/Hexo%E5%8D%9A%E5%AE%A2%E6%B7%BB%E5%8A%A0helper-live2d%E5%8A%A8%E6%80%81%E6%A8%A1%E5%9E%8B%E6%8F%92%E4%BB%B6/

 

进行完这一步就可以在hexo博客中看到了

 

这里是默认的设置,如果想要安装自己喜欢的就继续网站教程

其他板娘模板介绍:

https://huaji8.top/post/live2d-plugin-2.0/

挑选一个喜欢的板娘然后按照教程进行安装。

注:下面这个主题需要是Darwin系统

 

只执行参考网址的第一步也可以实现,保持默认就可以了,我就是这样。

使用hugo框架搭建blog

下载hugo

https://github.com/gohugoio/hugo/releases

按照提示进行安装

安装成功以后进行检测    hugo version

返回hugo的版本号

创建Blog

hugo new site myblog(自己命名可以不是myblog)

进入myblog目录

cd myblog/

更改主题

1.进入hugo官方主题页面   themes.gohugo.io

2.选择自己喜欢的blog主题,然后找到clone网址代码,在git中进行clone

检测:

1.进入到themes文件夹中

2.输入ls,  返回刚刚下载的文件

3.返回上一目录  cd ..

启动hugo

以m10c为例:hugo server -t m10c(刚刚主题保存的文件夹名称) –-buildDrafts

创建文章

在myblog目录下  输入 hugo new post/blog.md(可以改为其他名字,这里以blog为例)(该操作目的是在post目录下创建以blog为名的markdown文件)

使用Visual Studio Code打开blog文件,对文件进行更改。

启动hugo进行检测

hugo server -t m10c(刚刚主题保存的文件夹名称) –-buildDrafts

部署到远端   github

在github中创建项目,项目名为hansonpang.github.io

hugo --theme=m10c –baseUrl=https://hansonpang.github.io/  --buildDrafts

经过上面一步的操作后会在myblog主目录下创建一个文件夹public

检测:pwd(检测是否在主目录下)

cd public (进入public文件夹)

git init   (把public文件夹转成一个git仓库)

git add .  (把所有的东西加载到仓库里)

git commit -m “我的hugo博客第一次提交”    (提交信息)

连接到github

git  remote add origin https://github.com/hansonpang/hansonpang.github.io.git

                            (公共的)(你的昵称)  (仓库名)        +.git

git  remote add origin https://github.com/hansonpang/hansonpang.github.io.git

                                                                                                                                          

推到远端

git push -u origin master

需要输入github用户名,密码

在操作过程中可能会遇到一些问题,针对这些问题可以参考一下链接

1.git中本地与远程库的关联与取消

https://blog.csdn.net/wsycsdn19930512/article/details/50574217

2. git push 失败与解决方法汇总

https://blog.csdn.net/trochiluses/article/details/23106561

如果你想要配置两种框架的Blog,那么你就需要申请两个github(一个github针对一种框架Blog),这个时候你的git就要连接到两个github上了,相关参考网站如下:

1.一台电脑绑定两个github帐号教程

https://www.jianshu.com/p/3fc93c16ad2d

2. 使用SSH密钥连接Github【图文教程】

http://www.xuanfengge.com/using-ssh-key-link-github-photo-tour.html

3. 同一客户端下使用多个git账号

https://www.jianshu.com/p/89cb26e5c3e8

猜你喜欢

转载自www.cnblogs.com/hansonpang/p/11701078.html