Hexo博客建立

使用hexo框架搭建blog

软件准备

（1）Git

https://git-scm.com/

 

 

参考网址：

git安装 http://www.javashuo.com/article/p-pelyxsdt-kv.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

按照网上的安装方式进行安装就能够了

http://www.javashuo.com/article/p-pelyxsdt-kv.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/

 

下载完成后点击安装，安装教程：

http://www.javashuo.com/article/p-nztfxehc-hn.html

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

 

安装成功后，进行检测，进入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 git@github.com: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/    在网易云网页中选中想要使用的音乐，进入播放界面，

点击   “生成外链播放器”

 

（注：有版权的歌曲不能生成外链）

复制生成的代码

 

二、引入播放器代码

在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>

<% } %>

 

三、在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