hexo5分钟免费搭建个人博客教程

原文：hexo5分钟免费搭建个人博客教程

（第一次搭建个人博客，记录一下搭建方法还有那些踩过的坑）

环境：windows10

前提：

1.安装好node.js 和 Git

2.安装淘宝的cnpm

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

cnpm -v  //查看安装版本

一、使用hexo框架搭建静态博客

1.安装 hexo 框架

cnpm install -g hexo-cli

hexo -v   //查看hexo版本

2.在磁盘中新建 blog 文件夹

在 blog 文件夹中打开 Git Bash，输入

hexo init  //新建一个网站

3.启动服务器

hexo server

打开浏览器中，输入 http://localhost:4000 访问博客

ctrl+c 关闭服务器

4.新建一篇博客

hexo new "第一篇博客"

• 文件路径：D:\blog\source_posts\第一篇博客.md

• 在vscode中打开.md文件、编辑

5.清除缓存文件

hexo clean

建议每次生成站点或部署之前都用该命令清理一下缓存

6.生成静态文件

hexo generate

7.再次启动服务器

hexo server

在刚才打开的浏览器博客页面刷新，出现新写的文章

8.把博客部署到Github

• 打开你的Github------>新建仓库，仓库名必须是:你的github名字.github.io.git

• 回到命令行，ctrl+c断开hexo

cnpm install --save hexo-deployer-git

• 设置 _config.yml 文件:最下方 #Deployment 的 deploy 修改：

type: git

repo: [email protected]:basssss/basssss.github.io.git（仓库地址）

branch: master

• 部署到 Github

hexo deploy

9.进入博客页面

浏览器中输入地址：basssss.github.io跳转到博客页面

---

至此hexo框架搭建静态博客完毕

参考资料

• CodeSheep

• hexo文档

---

二、安装ayer主题

1.下载主题

git clone https://github.com/Shen-Yu/hexo-theme-ayer.git themes/ayer

2.设置_config.yml文件

打开_config.yml文件，找到theme修改为ayer保存退出。

3.新增menu

仿照分类和标签的方式，新增menu如"关于我"

hexo new page AboutMe

---

至此ayer主题安装完毕

参考资料（作者文档中的安装步骤写的很详细，看文档就好）

• ayer文档

---

三、安装Gitalk评论插件

1.安装

• Gitalk安装步骤

• 直接在ayer的_config.yml文件中修改就行，不需要再添加div代码块

• 部署好后要登录github初始化才能评论

2.在自己新建的menu页面中安装Gitalk评论插件

ayer主题默认在主页和文章底部添加Gitalk，在自己新增的页面如友情链接link页面中安装Gitalk需要修改代码

• 在D:\blog\source\links\index.md

• 在D:\blog\themes\ayer\layout_partial\article.ejs文件中添加一个容器，用下面的 Javascript 代码来生成 gitalk 插件

var gitalk = new Gitalk({

  clientID: 'GitHub Application Client ID',

  clientSecret: 'GitHub Application Client Secret',

  repo: 'GitHub repo',

  owner: 'GitHub repo owner',

  admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],

  id: location.pathname,      // Ensure uniqueness and length less than 50

  distractionFreeMode: false  // Facebook-like distraction free mode

})

gitalk.render('gitalk-container')

---

至此Gitalk评论插件安装完毕

参考资料：Gitalk

---

四、添加友情链接页面

原主题是没有友链页面的，需要自己写代码，这是我的

在D:\blog\source\links下新建文件夹LinkImage存放图片，新建文件link.css

• index.md

    


        


            

            博客名

        

    

• link.css

.allLinks {

    display: -webkit-flex; /* Safari */

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

}

.allLinks li {

    list-style: none;

    display: inline-flex;

    border-radius: 1rem;

    width: 20rem;

    height: 8rem;

    margin-top: 3rem;

    margin-right:2rem;

    overflow: hidden; /*超出边界部分隐藏*/

    background-color: #403e3e;

}

.allLinks li img {

    width:6rem;

    height:6rem;

    border-radius: 50%;

    margin: 1rem;

}

.allLinks li a {

    width: 12rem;

    padding-top: 10%;

    text-align: center;

    cursor: pointer;

    text-decoration: none;

    font-size: 1.7rem;

    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, Arial, sans-serif;

    color:#bbb;

    word-wrap: break-word; /*文字换行*/

}

五、hexo给文章添加分类和标签

1.添加分类

• 在D:\blog\source\categories\index.md中添加

type: "categories"

layout: "categories"

• 需要添加分类的文章中添加

categories: 

    - 分类名

2.添加标签

• 在D:\blog\source\tags\index.md中添加

type: "tags"

layout: "tags"

• 需要添加标签的文章中添加

tags:

    - 标签名

六、修改Github ribbon样式

修改D:\blog\themes\ayer\layout_partial\ayer.ejs的代码，将原来的a标签修改为在Github ribbon中选中样式的代码，并修改所有的"github-corner"为"forkMe"

{% asset_img 六GithubRibbon.JPG GithubRibbon %}

七、hexo框架插入图片

在写的博客中插入图片时，不能用普通的Markdown语法，参考hexo文档，应该：

• 安装插件

npm install https://github.com/CodeFalling/hexo-asset-image -- save

• 将 config.yml 文件中的 post_asset_folder 选项设为 true

• 创建新文章和同名文件夹，将图片资源放到文件夹中

hexo new [layout]