使用hexo搭建博客------发布到GitHub

环境 Windows10+Git+hexo

所需环境

1、Git（必须）:提交你的本地仓库

2、Nodejs（必须）:安装Hexo需要使用node.js环境

3、npm （下载hexo用）

安装Nodejs 官网地址下载稳定版hexo

$ https://nodejs.org/en/

国内的npm比较慢，可以下载淘宝的cnpm

$ npm install -g cnpm --registry-https://registry.npm.taobao.rog

安装 hexo,      -g为全局安装

cnpm install -g hexo-cli
```{% asset_img hexo4.PNG This is an hexo4 image %}
## 新建文件夹hexo（hexo名称自己想写什么就写什么）### 进入文件夹，右键打开Git Bash命令行 输入如下命令
```bash
$ hexo init  //初始化hexo

安装启动服务，并更新package.json文件中的依赖

$  npm install hexo-server --save

hexo目录结构如下

好了，现在可以启动服务预览一下，默认端口是4000

$ hexo s    //s 是server的简写
$ hexo s -p 5000  //g更改端口为5000

Hexo博客插入图片

相对路径图片除了可以放在统一的images文件夹中，还可以放在文章自己的目录中。文章的目录可以通过配置博客根目录下的_config.yml来生成。

post_asset_folder: true

将_config.yml文件中的配置项post_asset_folder设为true后，执行命令$ hexo new your_ArticleName，在source/_posts中会生成文章your_ArticleName.md和同名文件夹your_ArticleName。将图片资源放在your_ArticleName文件夹中，文章就可以使用相对路径引用图片资源了。_posts/your_ArticleName/hexo1.jpg这张照片可以用以下方式访问：
bash![](image.jpg)

上述markdown的引用方式，图片只能在文章中显示，但无法在首页中正常显示。

如果希望图片在文章和首页中同时显示，可以使用标签插件语法。_posts/post_name/hexo1.jpg这张照片可以用以下方式访问：

{% asset_img hexo1.jpg This is an hexo1 image %}   //hexo1.jpg 图片名  其他为说明

使用yilia主题模板

下载==运行如下代码

$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

下载完之后theme下会多出一个yilia文件夹，这个就是yilia主题文件夹，然后将yilia配置到hexo中，打开_cpnfig.yml文件，将theme: landscape，改为theme: yilia就搞定了。如下：{% asset_img hexo3.PNG This is an hexo3 image %}

yilia设置头像## 头像的存放位置头像/图标图片的存放位置是/themes/yilia/source/下任意位置，可以自己新建一个文件夹存放，我存放在assert文件夹下的images中。## 配置设置配置文件为/themes/yilia/_config.yml。设置头像为配置文件中avatar一项，设置图标为配置文件中favicon一项，设置路径的根目录为/themes/yilia/source/。例如，我的头像存放的地址是/themes/yilia/source/assets/me.png，设置则为avatar: /assets/images/me.png。（图标同理）

#你的头像urlavatar: /assets/images/HeadPortrait.jpg //不要忘了avater后面有一个空格，切记

导航## 在主题的_config.yml文件中，我们配置#Menu区块bashmenu: 主页: / 随笔: /tags/随笔主页和随笔两个key值就是导航中显示的名字，对应的value即为路径，此处相对路径对应的定位也是根目录的source文件夹中，与头像的位置定位相同。

设置网站ico制作一张icon图标把图片放到hexo/source/images文件夹下面，在其它地方用/img/图片名引用就可找到hexo/themes/yilia/layout/_partial/head.ejs，设置为## 在主题的_config.yml文件中，我们配置#Menu区块

  <% if (theme.favicon){ %>   
   <link rel="icon" href="/image/favicon.ico">  <% } %>

部署到github pages设置config1中的deploy属性### 注意：type：、repository：、branch：后面有一个空格，千万不能掉哦

deploy:  type: git  repository: https://github.com/Kate605690919/Kate605690919.github.io.git  branch: master

repository就是着这个博客所在仓库的地址

bash
$ hexo clean$ hexo g$ hexo deploy

更新博客到Git 发布文章添加进去的文章如何显示出来呢，只需要下面这两个命令

$ hexo g$ hexo d//也可以合并为一条命令
$ hexo d -g

出现下面的提示，说明Git成功{% asset_img hexo-git.PNG This is an hexo-git image %}

常用命令

$ hexo new "postName" #新建文章$ hexo new page "pageName" #新建页面
$ hexo generate #生成静态页面至public目录$ hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
$ hexo deploy #将.deploy目录部署到GitHub

常用复合命令：

$ hexo deploy -g
$ hexo server -g

简写：

$ hexo n == hexo new
$ hexo g == hexo generate
$ hexo s == hexo server
$ hexo d == hexo deploy

hexo 官方文档https://hexo.io/zh-cn/docs/